Open Source Adventures: Episode 24: Imba 2 and Cypress
Tags: imba, javascript, cypress
Published: 2022-03-25 17:49:08

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](https://github.com/cypress-io/cypress/issues/619) - 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:

```json
{}
```

### `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.

```javascript
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](https://github.com/taw/imba2-json-beautifier).

You can also [see the live version here](https://taw.github.io/imba2-json-beautifier/).

### 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.