Adding Test Coverage

Preparation Do this BEFORE the workshop Running Cypress cypress.json Sample data for mocking Next steps

Preparation

Do this BEFORE the workshop

Clone the git repo https://github.com/coursehero/ch-react-workshop and follow the instructions in README.

The recommended IDE is Visual Studio Code but you can use any IDE or editor you like.

In your terminal window start the Express server with ./server.sh. Open another terminal and start the React development server with ./client.sh. This will also install any necessary local prerequisites. (If you're using Windows you may need to copy and paste the contents of these two files into your terminal window).

If everything is set up correctly, a browser window should open up with a Document Landing page (http://localhost:3000/APP). Now you're ready to write some tests!

Running Cypress

Let's start the Cypress app:

cd js/doc-landing
npm run cypress # or: npx cypress open

Version 6.1 of the app should open up with the official list of examples. Feel free to run and study them on your own.

🗒️ Note: We recommend installing specific versions of npm packages to make sure your CI doesn't break when package maintainers release new and incompatible versions.

cypress.json

cypress.json is the main configuration for Cypress. Note the two important lines:

{
  "baseUrl": "http://localhost:5005",
  "chromeWebSecurity": false
}

⚠️ Warning: disabling `chromeWebSecurity` is NOT recommended for production applications. We are enabling CORS requests on localhost only so that we can pass requests between apps running on different ports.

Sample data for mocking

/search

    const searchData = [
      { value: 'DADA-101', label: 'Defence against Dark Arts' },
      { value: 'MSC 102', label: 'Muddle Studies' },
    ]

/docInfo

    const docInfoData = {
      department: 'DADA-101',
      name: 'Defence against Dark Arts',
      related: ['APP', 'HOW'],
      school: 'Hogwarts School of Witchcraft and Wizardry',
      text:
        'Phasellus ultrices elit eget condimentum blandit. Suspendisse facilisis gravida laoreet. Sed sodales lorem eget odio vehicula suscipit. Vestibulum sit amet est in ligula blandit pulvinar ac a leo. Donec eu ante vitae neque laoreet rhoncus sed non dolor. Donec tempor, ex bibendum ultrices eleifend, risus lectus placerat nulla, at aliquam nulla nulla a nisl. Mauris vitae maximus augue. Sed convallis porta leo, non suscipit est iaculis sit amet. Curabitur accumsan tincidunt pretium. Ut dictum, metus sed lobortis interdum, enim lorem aliquam neque, eu convallis lectus turpis ut ante. Mauris odio est, posuere a nulla a, sagittis luctus felis. In semper leo vel commodo fringilla. Integer porta purus odio. Fusce mattis eget tellus at porta.',
    }