Open Source Adventures: Episode 24: Imba 2 and Cypress

Let's take the Imba 2 JSON Beautifier app from previous episode and do try to add Cypress tests for it.

The first step is npm install cypress.

We could let Cypress create the files with npx cypress open, but it creates huge number of extra files we don't care about which we'd then need to get rid of.

It's one of common complaints about Cypress - instead of having separate cypress init that generates files once, it will just keep creating boilerplate files if you want them or not.

Anyway, let's just create releavnt files manually.

cypress.json

We can just use default configuration:

{}

cypress/integration/app.spec.js

I fully reused the code from Imba 1 version. I don't know if we can write the tests in Imba language. There's probably some way.

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')
  })
})

package.json

We can run tests with npx cypress run, but to make it clearer, we can add this entry to package.json: "test": "cypress run".

Run it

Then we can do this:

$ 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        -        -        -

Source code

Source code is in imba2-json-beautifier repository.

You can also see the live version here.

Coming next

In the next episodes I'll try doing slightly more complex projects in Imba 2, then I'll give my thoughts about it.