• ~ 10 minutes: Overview of the workshop
• ~ 10 minutes: Testing principles
• ~ 30 minutes: Introduction to E2E testing with Cypress
• ~ 40 minutes: Introduction to RTL and mocking with msw

1. 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.

2. 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).

3. 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! Head on to js/doc-landing/cypress/integration/coursehero.spec.ts in your IDE to get started.

Let's open the Cypress app:

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

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

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

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

The Node.js/Express app (or alternatively the Python/Flask) app provides us with two endpoints.

This is used by the FrontPage to populate the autocomplete search input.

Parameter: term

Example: curl http://localhost:5005/search?term=a

[{
    "value": "APP",
    "label": "Advanced Python Programming"
}, {
    "value": "FAM",
    "label": "Foundations of Mathematics"
}, {
    "value": "HOW",
    "label": "How to conduct an effective research"
}, {
    "value": "SOCW",
    "label": "Social work licensing"
}, {
    "value": "AMER",
    "label": "America in the world"
}]

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

Used by the DocumentLanding page to display information about a document.

Parameter: docName

Example: curl http://localhost:3000/doc_info?docName=APP

{
  "name": "Advanced Python Programming",
  "school": "MIT",
  "department": "CS",
  "text": "Sed malesuada enim eu elit pretium, eu scelerisque est suscipit. Nunc finibus egestas pulvinar. Praesent et diam nisl. Sed sodales mattis neque, ac egestas nunc placerat vitae. Vestibulum scelerisque enim eu luctus viverra. In in lectus vulputate, semper est nec, lobortis dolor. Fusce sed placerat massa, vulputate tristique nisi. Nullam in justo lacus. Duis posuere porttitor tincidunt. Ut vel sollicitudin leo. Etiam ultricies dolor eu sodales pharetra. Aliquam erat volutpat. In ultrices, libero vel hendrerit egestas, diam magna laoreet massa, ut fermentum nibh ex hendrerit elit. Quisque aliquet pellentesque ipsum, ac congue erat fermentum et. Aliquam nunc ex, tempus sed magna pulvinar, blandit viverra mi. Curabitur sollicitudin justo sem, eu venenatis purus pulvinar vestibulum.",
  "related": [
    "FAM"
  ]
}

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

• Start on the main branch: https://github.com/coursehero/ch-react-workshop
• Complete Cypress test: https://github.com/coursehero/ch-react-workshop/blob/cypress-6-1/js/doc-landing/cypress/integration/coursehero.spec.ts
• RTL tests with mocking using msw: https://github.com/coursehero/ch-react-workshop/tree/doclanding-tests-internal/js/doc-landing/src/components

• Testing Principles
• Introduction to Accessibility
• Introduction to Cypress
• Introduction to Testing Library
• Guide to Mocking