Course Hero (CH) is a crowdsourced learning platform that contains class notes, study guides, practice problems, user submitted questions with answers from our tutors and original materials uploaded by educators. Users can either buy a subscription or upload their original documents to receive unlocks that can be used to download full CH documents.

For our workshop we have implemented a simplified version of our document library that contains several fake documents. The front page features a search box with an autocomplete dropdown that lets you select a document and redirects to a page we call a DocumentLanding. On this page you can see information about document you found such as the school and course it belongs to on the top, a list of related documents on the left and a partially shown document in the middle of the page - if you want to unlock the full version, you will have to sign up for our service.

From a technical standpoint this website is a mix of legacy and modern technologies, resembling the non-ideal situation of most codebases that have been around for a while. On the backend we have a legacy Node/Express (alternatively also a Python/Flask) server responsible for the few endpoints our frontend needs (/search and /doc_info). The only page that the backend renders is the FrontPage with the search box that uses a mix of static HTML and jQuery. The frontend uses React and TypeScript. The only page we have implemented for this workshop is the DocumentLanding page responsible for rendering a blurred document and navigating users to a paid section.

Some of the technologies we will use are Testing Library (DOM, React and Cypress Testing Library), Cypress, TypeScript, msw and aXe.

• Testing pyramid
• Testing trophy
• Adding Testing to an Existing Project

1. Turn on static analysis: ESLint + Prettier + TypeScript

TypeScript does have a steep learning curve but it is well worth it as it will eliminate an entire category of bugs.

2. Implement an E2E test.

This will cover the most important user flow of your app. In our workshop we will create a Cypress test that visits the frontpage, searches for a document, gets redirected to the DocumentLanding page and checks out a few related documents.

3. Write more tests using jest and React Testing Library (RTL).

Additionally, we will consider other topics such as accessibility, mocking, test driven development and so on.