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.
Top comments (0)