Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI Tests with Jest and Storybook #19

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

UI Tests with Jest and Storybook #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
836a311
Create testing dir and add testing basics
virtuous-cat Feb 20, 2022
d68b6d0
Create ui-test file and add tool links
virtuous-cat Feb 20, 2022
374145d
Add stories and test set up sections
virtuous-cat Feb 21, 2022
48cbf5e
add what to test section
virtuous-cat Feb 22, 2022
5ac6ce1
Complete ui-tests draft
virtuous-cat Feb 23, 2022
57ef568
Revise in response to feedback
virtuous-cat Feb 27, 2022
6fc5470
Update SideMenu test descriptions example
virtuous-cat Feb 28, 2022
979c1df
Add jest example
virtuous-cat Feb 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions docs/engineering/Testing/testing-basics.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
---
id: testing-basics
title: Testing Basics
---

Tests are code that we write, which we can run on our application code to make sure it's behaving as we are expecting, and that any changes we've made don't have unintended consequences. The goal of tests is to catch bugs before they get to the production site and break things.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tests help ensure code behaves correctly at the time of writing, and that future changes to the codebase don't introduce unexpected errors. Because the difficulty and time of debugging and fixing code errors increases further along the development process, the goal of tests is to catch bugs as early as possible. While tests are a fundamental part of writing any software, they become more important as applications grow.

In general, tests run:

  • During development (brief explanation)
  • Before pull requests are merged (brief explanation)
  • Before the code is deployed to production (brief explanation)

Make sure to run existing tests (and add new ones) whenever you're changing existing code or working on a new feature.


As the scale of our application grows, it becomes more and more time-consuming and unwieldy to try to test every aspect of the site manually every time we make changes. Tests let us think through what we need to check to make sure a specific aspect or part of the site is working correctly, just the once while we are writing the test. From then on, the tests can be run routinely and we only have to think about it if one of them fails, telling us there's a problem in a particular place.

If you are working on changes, or a new feature, please add appropriate tests and run the existing tests on your changes.

:::tip
At the moment, there are many existing parts of the Boba codebase that need tests written for them. If you're a beginner looking to get involved, writing tests for the existing code can be a great way to get a sense of how things work while contributing critical infrastructure.
:::

We use a number of techniques and tools for testing different parts of the codebase. The following pages will outline how to write different kinds of tests, but many tests center around making an assertion that an outcome matches our expected outcome. A good example of this are [Jest](https://jestjs.io) tests, whose assertions use the basic format:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than making an example with Jest here, I'd write about the Arrange-Act-Assert framework and give a pseudocode example of a test.

I realized I had written something to this effect in the server test guide (it shouldn't have been there): https://bobadocs.netlify.app/docs/engineering/boba-server/apis/testing-endpoints/#test-cases

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that it's important to split things in sections, so I would make sure to start a new one for this.


```typescript
expect(value).toBe(expectedValue);
```

We explicitly set the `expectedValue` to the outcome we want, and the `value` may be a value that was returned from a function we are testing, as in [the basic example the Jest docs provide here](https://jestjs.io/docs/getting-started), or a more complicated stand-in for the workings of our application, like an HTML element in the case of UI tests - which will be covered in detail on the next page, UI Tests with Jest and Storybook.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After the Arrange-Act-Assert section, I think it might be nice to introduce a small section on different types of tests as a general overview. In particular Boba has:

  • Unit tests (Jest)
  • Integration tests (Jest + React Testing Library + Storybook, Cypress, Jest+Supertest on the server)
  • End to end tests (we don't currently do these)
  • Manual tests (just to mention it. We can callout storybook.)

I'm uncertain whether we should explain the libraries here. We might want to do so closer to where they're used, though we use Jest everywhere, and RTL and Cypress in every frontend codebase.

Loading