Rails for Front-end Development: Essential Tools/

...

/

Writing Our First Test

Writing Our First Test

Write a Cypress test in this lesson.

We'll cover the following...

Test Case with Cypress

Now that we are familiar with Cypress, we’re ready to write a test.

First, delete the cypress/integration/examples directory with all the existing Cypress tests. Then, restart Cypress with rake cypress:open. This gives us the Cypress window with a message saying that we have no tests (or, it might re-create the same sample tests, in which case just delete them again, write the next test, and then open Cypress). Let’s write the first line of a new test. Create a file named cypress/schedule/schedule_spec.js. As soon as we save it, the Cypress window changes to show that file. If we start to “Run all specs,” we get the test runner with a message that no tests are found in the file.

Now let’s start writing the test:

Press + to interact
describe("On the schedule page", function () {
  beforeEach(function () {
    cy.request("/cypress_rails_reset_state")
  })
  it("Visits our schedule page ", function () {
    cy.visit("/")
  })
})

Note: This is in JavaScript, not in TypeScript because:
a) It makes little difference when writing tests.
b) The TypeScript setup for Cypress is time-consuming.

describe vs. it Method

The test syntax here is similar to the Jasmine or Jest JavaScript tools. A describe method defines a series of tests while the it method describes an individual test. Both methods take a string argument that is a name and a function argument that is the actual test or set of tests being defined.

Jasmine and Jest Logo

beforeEach block

Looking at the top of this test file, we’ll see we’ve included a beforeEach block, which is evaluated before every test in the describe block. Our ...