Cypress Training Advent Lesson Day 1

Can you stub a network call using a fixture? Can you import a JSON fixture?

Welcome to the “Cypress Training Advent Calendar 2022” 🎉

2/3 of the people voted to have more lessons from the Cypress Network Testing Exercises course. Thus let’s start with a lesson from that course.

I will start this training calendar easy. Let’s take the application from the repo bahmutov/fastify-example and write a test using the placeholder spec files from the repo bahmutov/fastify-example-tests.

The solved spec08 network testing exercise

The lesson is available at https://cypress.tips/courses/network-testing/lessons/spec08 - keep reading for the installation instructions.

The application

First, clone the application repo to your local machine. You can use a Git GUI app, or use Git CLI commands:

# clone using SSH Git client
$ git clone git@github.com:bahmutov/fastify-example.git
# clone using HTTPS
$ git clone https://github.com/bahmutov/fastify-example.git
# grab a copy of the repo using "degit" tool
$ npx degit https://github.com/bahmutov/fastify-example

# change the working directory to the new folder
# if you are not already there
$ cd fastify-example
# the folder has "package.json", "server.js", etc

Install Dependencies

Ok, let's install the NPM dependencies to start the example application.

$ npm install

Run the app

Let's try running the example application locally

$ npm start

If the application starts successfully, you should see something like this in your terminal:

$ npm start
> fastify-example@1.0.0 start
> node ./server {"level":30,"time":1647465996583,"pid":76255,"hostname":"GlebMercari","msg":"Server listening at http://127.0.0.1:4200"}

Open the localhost:4200 in your browser. You should see a fruit name displayed, like "Apple" or "Banana".

The Sample Tests

Similarly, clone the “fastify-example-tests” repo to your local machine.

# clone using SSH Git client
$ git clone git@github.com:bahmutov/fastify-example-tests.git
# clone using HTTPS
$ git clone https://github.com/bahmutov/fastify-example-tests.git
# grab a copy of the repo using "degit" tool
$ npx degit https://github.com/bahmutov/fastify-example-tests

# change the working directory to the new folder
$ cd fastify-example-tests
# the folder has "package.json", "cypress.json", etc

This repo has a lot of test files in its cypress/integration folder. These are placeholder tests to be solved. Each lesson solves a single placeholder spec file.

Install Dependencies

Install the dependencies (including Cypress)

$ npm install

Note: I am using Cypress v9.x.x to solve the exercises, but all these examples should work the same in Cypress v10+. If you find an exercise that does not work, let me know.

VSCode color theme

Before anyone asks: I used the VSCode color theme "GitHub Dark Colorblind (Beta)" to record the videos for this course, here is my .vscode/settings.json file

{  
  "workbench.colorTheme": "GitHub Dark Colorblind (Beta)",
  "editor.fontSize": 14
}

The lesson

Finally, today’s free lesson is an exercise to solve the “spec08.js” placeholder test from the “Network Testing Exercises Course”.

// https://github.com/bahmutov/fastify-example-tests
// cypress/integration/spec08.js

// import the fixture JSON data from the file "../fixtures/apple.json"

it('imports the fixture from JSON file', () => {
  // print the imported fruit to the Command Log
  // https://on.cypress.io/log
  //
  // intercept the GET call to /fruit with fixture "apple.json"
  // https://on.cypress.io/intercept
  //
  // visit the site
  // https://on.cypress.io/visit
  //
  // confirm the fruit from the fixture is shown on the page
  // https://on.cypress.io/contains
})

Watch the lesson at https://cypress.tips/courses/network-testing/lessons/spec08. Remember, you have 24 hours before the lesson becomes private again!

The clock is ticking…