Testing

Introduction

This page is intended to introduce you to the testing framework that the FluidFrameworks codebase uses. These tests run as part of the CI processes, and all tests need to pass with a 100%, non-flaky success rate for the PR to be eligible to merge.

Anytime code is updated, any affected tests should be updated, and any new code should include with it tests for the new logic.

We use two main frameworks for testing our code:

• Jest - Used for all unit tests and end-to-end code. These tests primarily use assertions and mocks to functionally test logical code.
• Mocha - Used for snapshot testing. These tests will generate mock renders of different visual pages and store snapshots of them. Any future updates will be compared against these snapshots to ensure no visual changes. If visual changes are intended, the snapshots should also be re-generated and sent in with the code.

The following steps assume that you have already set up your build system and installed the requirements using the steps here and here

Getting Test Data

Some of the collateral test data is located in a sub-module here.

You'll need to fetch that collateral data into your local machine to successfully run all the tests. To do so, run the following from the repo root:

git submodule init
git submodule update

Running Tests

Running All Tests

To run all the available tests that will be used in the CI build, run the following from the project root

npm run test

NOTE: This will take some time to finish as it is running all of the tests for each pacakge in the repo.

Running All Tests with Coverage

To see code coverage data on all tests, run the following

npm run test:coverage

Running Tests for a Specific Package

To run only the tests for one package, simply navigate to that package's directory and run the test command there. For example, to run Clicker's tests

cd components/examples/clicker
npm run test

Running Singular Jest Unit Tests using VS Code

Alternatively, you can also use the VS code UI to run Jest tests. These steps will not work for snapshot testing.

1. Make sure you have installed all of your packages and fully built the codebase using the steps here

2. Navigate to the test file that you want to run on VS Code. Make sure that you double click the file tab after it is open to make sure that it is pinned. It should look like this: Not like this:

3. Now, navigate to the Test tool on the left pane:

4. From the drop-down menu at the top, select Debug Current Test and click on the Play button

5. This will start running the test and you should be able to see the results in the Debug Console on the built-in Terminal.

6. (Optional but recommended) You can also set breakpoints in-line in your code, both within the test file and any code it uses. Simply click on the area to the left of the line beginning and you will see the breakpoint show up as a red dot. On running the test, the code should now pause processing anytime it reaches these breakpoints.