오픈 소스 모험: 에피소드 24: Imba 2 및 Cypress

이전 에피소드의 Imba 2 JSON Beautifier 앱에 Cypress 테스트를 추가해 보겠습니다.

첫 번째 단계는 npm install cypress 입니다.

우리는 Cypress가 npx cypress open로 파일을 생성하도록 할 수 있지만, 그러면 제거해야 할 필요가 없는 엄청난 수의 추가 파일이 생성됩니다.

그것은 one of common complaints about Cypress - 파일을 한 번만 생성하는 별도의 cypress init 대신 원하든 원하지 않든 상용구 파일을 계속 생성합니다.

어쨌든 관련 파일을 수동으로 만들어 봅시다.

cypress.json

기본 구성을 사용할 수 있습니다.

{}

싸이프레스/통합/app.spec.js

Imba 1 버전의 코드를 완전히 재사용했습니다. Imba 언어로 테스트를 작성할 수 있는지 모르겠습니다. 아마 방법이 있을 겁니다.

context("JSON Pretty Printing App", () => {
  beforeEach(() => {
    cy.visit("http://localhost:3000/")
  })

  it("does not format JSON automatically", () => {
    cy.get("textarea")
      .clear()
      .type("[1, 2,3,\n   4]")
    // makes sure nothing happens
    cy.wait(100)
    cy.get("textarea")
      .invoke("val")
      .should("eq", "[1, 2,3,\n   4]")
  })

  it("formats JSON when you press the button", () => {
    cy.get("textarea")
      .clear()
      .type("[1, 2,3,\n   4]")
    cy.get("button").click()
    cy.get("textarea")
      .invoke("val")
      .should("eq", "[1, 2, 3, 4]")
  })

  it("reports error if JSON is invalid, but clears if text changes", () => {
    cy.get("textarea")
      .clear()
      .type("[1, 2, 3,")
    cy.wait(100)
    cy.get('.error').should('not.exist')
    cy.get("button").click()
    cy.get('.error').should('exist')
    cy.get("textarea").type("4")
    cy.get('.error').should('not.exist')
  })
})

패키지.json

npx cypress run 로 테스트를 실행할 수 있지만 더 명확하게 하기 위해 이 항목을 package.json : "test": "cypress run" 에 추가할 수 있습니다.

실행

그러면 다음과 같이 할 수 있습니다.

$ npm test

> test
> cypress run


====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        9.5.2                                                                          │
  │ Browser:        Electron 94 (headless)                                                         │
  │ Node Version:   v17.7.1 (/usr/local/Cellar/node/17.7.1/bin/node)                               │
  │ Specs:          1 found (app.spec.js)                                                          │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  app.spec.js                                                                     (1 of 1)
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating


  JSON Pretty Printing App
    ✓ does not format JSON automatically (634ms)
    ✓ formats JSON when you press the button (521ms)
    ✓ reports error if JSON is invalid, but clears if text changes (697ms)


  3 passing (3s)


  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        3                                                                                │
  │ Passing:      3                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     2 seconds                                                                        │
  │ Spec Ran:     app.spec.js                                                                      │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Video)

  -  Started processing:  Compressing to 32 CRF
  -  Finished processing: ~/imba2-json-beautifier/cypress/videos/app.spec.js.mp4    (0 seconds)



====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  app.spec.js                              00:02        3        3        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        00:02        3        3        -        -        -

소스 코드

소스 코드는 imba2-json-beautifier repository에 있습니다.

할 수도 있습니다see the live version here.

다음에 온다

다음 에피소드에서는 Imba 2에서 약간 더 복잡한 프로젝트를 시도한 다음 그것에 대한 제 생각을 말씀드리겠습니다.