Testing

Writing

We use Cypress as the test running framework. It will look for test files within a number of locations, however the standard that the SKAO will employ will be the use of .test.{tsx | jsx} in the same folder as the component being tested. Below is a small illustration as an example.

```

components └─ App

App.test.tsx

App.tsx

└─ ReactSkeleton: ReactSkeleton.test.tsx

ReactSkeleton.tsx

```

Note that the ReactSkeleton component is exposed via WebPack 5 ModuleFederationPlugin, so this name should be changed to reflect the application being written ( e.g. SignalDisplay, DataProductDashboard …)

See the SKAO developer guide for more information

Running

To run the interactive test runner, execute

> yarn test

This will also watch the source files and re-run when any changes are detected

To run the tests with coverage, execute

> yarn test:unit:coverage

The coverage results are displayed in the console. They are also written to the coverage folder.

./build/coverage/index.html - open in a web browser to view

To run the ui test runner for unit tests, execute

> yarn test:unit:ui

The coverage results are also available when using this mode.

All the tests should pass before merging the code

End-2-End

To run the ui test runner for e2e tests, execute

> yarn test:e2e:ui

This will launch Cypress in interactive mode for end-to-end tests.

Examples can be found in the PT UI repo, however below should be a guide in how to follow the standard for enw tests. Note: This is for BDD Cucumber style cypress testing.

In the cypress/e2e directory

Create a feature file for example {createProposal.feature}
Create a new directory within cypress/e2e named the EXACT same as the feature file created.
Within the new directory for example {createProposal} create a new step definition file for example

{createProposal.js}

The feature file should follow the format as below

Feature: Creating proposals

Scenario: Create a basic proposal Given I am a PHT user who wants to create a proposal When I provide a title and select the proposal category Then a proposal with unique ID is created and I can see that on the landing page

The step definition file should follow the format as below. It is important to note that the text within the Given/When/Then steps MUST match the statements from the feature file. This example showcases imported methods from a common class, which is recommended to prevent duplication.

import { Given, When, Then } from ‘cypress-cucumber-preprocessor/steps’; import {

clickAddProposal, clickCreateProposal, clickHome, clickSaveProposal, clickStandardProposalSubTypeTargetOfOpportunity, verifyProposalOnLandingPage

} from ‘../../common/common’;

Given(‘I am a PHT user who wants to create a proposal’, () => {: clickAddProposal()

});

When(‘I provide a title and select the proposal category’, () => {: clickStandardProposalSubTypeTargetOfOpportunity() clickCreateProposal()

});

Then(‘a proposal with unique ID is created and I can see that on the landing page’, () => {: clickSaveProposal() clickHome() verifyProposalOnLandingPage()

});

Code Analysis

[ESLint](https://ESLint.org/) and [Prettier](https://prettier.io/) are included as code analysis and formatting tools. These do not need installing as they’re included in node_modules by running yarn init.

These tools can be run in the command line or integrated into your IDE (recommended).

JavaScript based SKA projects must comply with the [AirBnB JavaScript Style Guide](https://github.com/airbnb/javascript). These rules are included in this project and ESLint and Prettier are configured to use them.

Running

To run the analysis tools, execute

> yarn code-analysis

This will display any errors in the command line. If there are any errors, YARN will exit with a non-zero code, the -s argument suppresses this and cleans up the output.

Alternatively, you can also run

> yarn checker

This will display any errors in the command line and fix linting issues by running yarn prettier:fix && yarn lint:fix.