Prettier and Sass linter will run as part of the build, assure you run the command below before committing:
$ npm run test:lint
To run the whole suite:
npm run test:unit
To run one file:
npm run test:unit:files relative_path_to_test/example.test.js
The aim of this test suite is perform functional tests of frontend components in isolation.
You will need to run the sandbox api to run functional tests.
Sandbox is as a light replacement for API backend and it's used only by functional tests.
It allows us to run a mock of the API locally and lives in the test/sandbox
folder. Any API requests made in the app when running tests on Cypress will hit the Sandbox environment instead. The folder structure reflects the API endpoints (e.g. /v4/activity-feed
) and the server is set up here
If you have any logic you want to test based on what's returned by the API you can add it to the endpoints, e.g. conditionals like if a page number param is included then it returns a different fixture.
In your .env file:
Set API_ROOT=http://localhost:8000
Set REDIS_HOST=localhost
(you might want to create a .sandbox.env
file to copy to .env when you need it)
If you want to run the frontend and sandbox locally, one way is to have 4 terminal tabs open and run the following commands:
redis-server
cd test/sandbox && npm install && npx nodemon .
npm run develop
npm run test:functional:watch
From the project root directory run make start-mock
.
This will start up the sandbox api in conjunction with the frontend, mock-sso, webpack and redis. You don't need to rebuild the image when you make changes.
-
Build Sandbox image
docker build -t data-hub-sandbox ./test/sandbox
-
Start the container with
docker run -it -p 8000:8000 data-hub-sandbox
-
Change your
API_ROOT
in your env file to point tohttp://localhost:8000
and then run the frontend locally withnpm run develop
.
Notice that before running the tests the application should be up and running.
By default cypress will run on electron headlessly, you can read more about it here
If you are not running the sandbox through docker using the preferred method and want to run against your native implementation you will need to pass an additional argument to the below commands:
--config baseUrl=http://localhost:3000
Execute all the tests on specs
in chrome browser:
$ npm run test:functional -- --browser chrome
$ npm run test:functional:watch
$ npm run test:functional -- --spec test/functional/cypress/specs/nav-spec.js
The aim of this test suite is perform end to end tests, simulating a user flow.
Pre-requisites:
Ensure you have node v10 installed then install dependencies:
$ npm install
-
In
test/cypress/support/commands.js
, find theloadFixture
Cypress command and change${backend_url}
tohttp://localhost:8000
. -
In
docker-compose.e2e.frontend.yml
, change the environment variableOAUTH2_AUTH_URL
to point tohttp://localhost:8080/o/authorize
. -
Run the relevant make command, for example
make start-e2e-dit
.
- Add
ALLOW_TEST_FIXTURE_SETUP=True
to.env
in Data Hub API.
Events displayed inside Datahub are provided via the activity stream API, which wraps an OpenSearch cluster. Events created as part of any test runs need to be visible to the activity stream so they can be viewed in the events page. The activity stream polls the Datahub API to ingest any new events created, so the docker-compose.yml
file uses environment variables to setup the access keys to allow the communication between these 2 systems:
The API environment variables that define the access keys that need to be used when activity stream call the events endpoint
ACTIVITY_STREAM_ACCESS_KEY_ID: some-id
ACTIVITY_STREAM_INCOMING_ACCESS_KEY_ID: some-id
ACTIVITY_STREAM_SECRET_ACCESS_KEY: some-secret
ACTIVITY_STREAM_INCOMING_SECRET_ACCESS_KEY: some-secret
The activity stream environment variables that set the API as a feed to call to ingest data from. The FEEDS1ACCESS_KEY_ID and FEEDS1SECRET_ACCESS_KEY values match the values defined in the API environment variables
FEEDS__1__UNIQUE_ID=verification_feed_app
FEEDS__1__SEED=http://api:8000/v3/activity-stream/event
FEEDS__1__ACCESS_KEY_ID=some-id
FEEDS__1__SECRET_ACCESS_KEY=some-secret
FEEDS__1__TYPE=activity_stream
The activity stream has a 2 way relationship with datahub - in addition to polling the Datahub API for any new events that can be ingested into the OpenSearch DB, it also provides an API that allows searching of the events it holds. Environment varaibles are again used to control access between these 2 systems
The activity stream environment variables that define the access keys that need to be provided when any queries are made
INCOMING_ACCESS_KEY_PAIRS__1__KEY_ID=incoming-some-id-1
INCOMING_ACCESS_KEY_PAIRS__1__SECRET_KEY=incoming-some-secret-1
Please see for here more detail about the reason for a reverse proxy
ACTIVITY_STREAM_OUTGOING_URL: http://activity-feed-reverseproxy:8081/v2/activities
ACTIVITY_STREAM_OUTGOING_ACCESS_KEY_ID: incoming-some-id-1
ACTIVITY_STREAM_OUTGOING_SECRET_ACCESS_KEY: incoming-some-secret-1
The E2E tests make use of an ngnix container to replicate the GOV PAAS functionality. The activity stream requires specific HTTP Headers to be included that are provided by GOV PAAS, nginx is used here to attach those headers to all requests to the activity stream without requiring any code changes
Notice that before running the tests the application should be up and running.
You will also need data hub api application started with the initial fixutres loaded. This can be done
by running start-uat.sh
located on the root of the api repository.
The main e2e test suite is triggered by running the following command:
$ npm run test:e2e:dit -- --browser chrome
On CircleCi we run E2E tests against users with different permissions. We do this via the environment variable OAUTH2_DEV_TOKEN
.
Essentially we have users with different permissions setup in a job via OAUTH2_DEV_TOKEN
and then we run tests with the specified permissions tag.
So for setting up a test for a user of type LEP
you need to:
- add a token to the backend with a token associated to the permissions type. e.g
lepStaffToken
- add this token to the environment variable
OAUTH2_DEV_TOKEN
in the circleCi job - specify which suite to use when running
cypress
. e.gnpm run test:e2e:lep -- --browser chrome
There are also 3 other test suites, which run permission specs against users that have particular permissions for their roles, you can trigger these tests by running either of the commands below:
$ npm run test:e2e:lep -- --browser chrome
or
$ npm run test:e2e:da -- --browser chrome
or
$ npm run test:e2e:dit -- --browser chrome
$ npm run test:e2e:watch
$ npm run test:e2e:dit -- --spec test/end-to-end/cypress/specs/DIT/local-nav-spec.js
The aim of this suite is to ensure our HTML pages are usable by as many people as possible.
Details for running and configuring these test can be found here - Running accessibility tests
The aim of this suite is to run tests directly against our React components without having to start the frontend.
To start these tests, run npm run test:component
. To run these using the Cypress component testing interface, run npm run test:component:watch
.
As part of cypress test suites (functional and e2e), code coverage reports can be generated.
Steps:
- Ensure you NODE_ENV is either
test
ordevelopment
in order for client side code to be instrumented. - Start the application by running
$ npm run start:coverage
, this will ensure server side code is instrumented. - Execute a spec or suite and look for
cypress-coverage
folder output in the root of the folder.
CI is configured to capture and save all code coverage reports as an artifact.