58 lines
2.2 KiB
Markdown
58 lines
2.2 KiB
Markdown
## Testing in WebUI
|
|
|
|
Upstream provides a system for creating frontend tests using Mocha. In Brave, we
|
|
tend to use Jest for writing frontend tests. We introduced Jest before upstream
|
|
had a good story for writing WebUI tests.
|
|
|
|
However, due to the different approaches taken both tests fit into a different
|
|
niche. Upstream's approach is good for writing full end-to-end tests and can be
|
|
thought of as similar to a `browser_test` (in fact, they use a lot of the
|
|
browser_test machinery). Our Jest tests are conceptually much more similar to
|
|
`unit_tests` and we make extensive use of mocking to test small pieces of
|
|
functionality.
|
|
|
|
## Jest `unit_tests`
|
|
|
|
These were introduced in Brave before there was a good story for testing WebUIs
|
|
upstream. They are primarily used with our React pages, but there's no reason
|
|
they can't be used to unit test Lit/Polymer functionality.
|
|
|
|
Adding one of these tests is simple: Create a `<your-file>.test.ts` file next to
|
|
the file you want to test.
|
|
|
|
|
|
```ts
|
|
// <your-file>.test.ts
|
|
import { add } from './your-file'
|
|
|
|
describe('your file should work the way I want', () => {
|
|
it('should be able to add things', () => {
|
|
expect(add(1, 2)).toBe(3)
|
|
})
|
|
})
|
|
```
|
|
|
|
You can run all tests with `npm run test-unit` or filter to a specific test with
|
|
`npm run test-unit -- -t "should be able to add"`. The tests run quite quickly and
|
|
you can run them in `watch` mode to automatically run tests affected by a change
|
|
with `npm run test-unit -- --watch`.
|
|
|
|
We use [Testing Library](https://testing-library.com/) for writing React unit
|
|
tests. It can render React trees to a Jest DOM, allowing you to take snapshots
|
|
and to check that things are rendering as expected.
|
|
|
|
### Additional Resources
|
|
- https://jestjs.io/
|
|
- https://testing-library.com/
|
|
|
|
## Mocha `browser_tests`
|
|
|
|
Historically we haven't written these, though it would be good to start. It's
|
|
likely that these test suites are going to be somewhat coupled to Lit/Polymer
|
|
UIs and we may need some integration work to get them working with our React
|
|
UIs. That said, if you're working on an upstream UI, or a Lit based page these
|
|
are probably a good choice.
|
|
|
|
See the below link for Upstream's documentation
|
|
https://chromium.googlesource.com/chromium/src/+/main/docs/webui/testing_webui.md
|