Modern Front-end Development for Rails/

...

/

Writing Our First Test

Writing Our First Test

Write a Cypress test in this lesson.

We'll cover the following...

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

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 we have no tests. Let’s write the first line of a new test. Create a file named cypress/schedule/schedule_tests.ts. As soon as you save it, the Cypress window changes to show that file. If you start to “Run all specs,” you get the test runner with a message that no tests are found in the file.

Let’s start writing the test:

TypeScript 3.3.4
/***
 * Excerpted from "Modern Front-End Development for Rails",
 * published by The Pragmatic Bookshelf.
 * Copyrights apply to this code. It may not be used to create training material,
 * courses, books, articles, and the like. Contact us if you are in doubt.
 * We make no guarantees that this code is fit for any purpose.
 * Visit http://www.pragmaticprogrammer.com/titles/nrclient for more book information.
***/
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’s going to make very little difference in writing tests.
b) The TypeScript setup for Cypress is a bit of a pain.

All this test does is visit our schedule page in the browser, using the command cy.visit. We’re able to just write the url as / because we’ve already specified the base URL of the test server in the cypress.json configuration file, so Cypress will combine the two and visit http://localhost:5678/. If you run this test in the Cypress test runner, you ...