Adding Test Coverage

Preparation Do this BEFORE the workshop Installing dependencies Configuration 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).

Installing dependencies

Let's install Cypress, Cypress Testing Library and aXe:

cd js/doc-landing
npm install -D cypress@6.0.1 @testing-library/cypress@7.0.2 cypress-axe@0.12.0
npx cypress open

💡 Tip: We recommend installing specific versions to make sure your CI doesn't break when package maintainers release new and incompatible versions.

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

Configuration

Next, open cypress/support/commands.js and add the following line:

import '@testing-library/cypress/add-commands'
import 'cypress-axe'

Finally, open js/doc-landing/tsconfig.json and add this line to compilerOptions:

    "jsx": "react",
    "types": ["cypress",  "@testing-library/cypress", "cypress-axe"],
    "baseUrl": "./"

Then, in the same file make sure you have this configured

  "include": [
    "src",
    "**/*.ts"
  ]

Finally, paste the following content into cypress.json:

{
  "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.

Now you're ready to write some tests!

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.',
    }