Skip to main content

Automated testing

Automated testing is a very important part of software development. Sadly this is very difficult for integrated UI to do. But not for WUI.

By basing WUI on a webkit/chrome core the developer implements their UI in known web technologies and by doing so can use the vast array of testing tools available for web development.

Setup​

Eample UIs in WUI are built the same way:

  • Typescript setup
  • React
  • webpack for bundling and a dev server
  • jest for testing
  • eslint for linting
  • husky for pre-commit hooks and automated linting
  • gitlab CI pipeline for automated testing

The following information is based on the example UI that WUI provides as a repository, this project is read only and archived. You can fork it to your own gitlab account and work on it there.

Jest​

A big part of WUI is automated UI testing. For this purpose we are using jest. Basic knowledge of jest is assumed for this part, if you are new to it you can find the documentation here.

In general the test-setup mocks the global functions of WUI to controlled functions that can then simulate receiving and sending data. SetupTests.ts as if WUI was working behind the scenes.

It can then be used to write self contained application tests Application.test.tsx.

The bouncing objects UI currently uses this to achive 100% test coverage.

For WUI jest is run over the typescript source of the UI (completly detached from any engine-specific code). This means that the tests are run in a node environment and can be run on any machine that has node installed including an automated pipeline. This way you can make meaningful performance tests and ensure that your UI is working as expected without also having to run the engine.

Writing tests​

Jest has an extensive API documentation that can be found here. How exactly your project structures its tests is up to you.

The example project shows a few example tests that may be helpful to get started.

Coverage​

Testability was very important for this project. Therefore the node library has 100% code and test coverage. The tests inside the library show the internal workings and how you might structure your tests to be even more thorough.

When working on a UI based on the example project or the node module itself you can see the coverage of your tests in the coverage folder after running npm run test.