webui_testing.md

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.

// <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 pnpm run test-unit or filter to a specific test with pnpm 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 pnpm run test-unit --watch.

We use Testing Library 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