Skip to content
JuanMa Garrido edited this page May 21, 2021 · 9 revisions

Tests are an important part of the Frontity project. There are two types of tests for Frontity Code:

  • Unit Tests: They test the methods, functions, and classes in the Frontity API.
  • UI End-To-End Tests: They test that Frontity packages have the correct behavior in the browser.
  • CLI End-To-End Tests: They test that the Frontity CLI has the correct behavior.

Unit Tests

Unit Tests are included in every package under the __tests__ folder. Because of being a Monorepo you can launch ALL the tests of ALL the packages just by executing npm test from the root of the project

> pwd
.../frontity

> npm test
...
lerna notice cli v3.22.1
lerna info versioning independent
lerna info Executing command in 24 packages: "npm run test:ci"
...
lerna success run Ran npm script 'test:ci' in 24 packages in 545.2s:
lerna success - @frontity/amp
lerna success - @frontity/analytics
lerna success - babel-plugin-frontity
lerna success - @frontity/components
lerna success - @frontity/comscore-analytics
lerna success - @frontity/connect
lerna success - @frontity/core
lerna success - @frontity/error
lerna success - @frontity/file-settings
lerna success - frontity
lerna success - @frontity/google-ad-manager
lerna success - @frontity/google-analytics
lerna success - @frontity/google-tag-manager-analytics
lerna success - @frontity/head-tags
lerna success - @frontity/hooks
lerna success - @frontity/html2react
lerna success - @frontity/router
lerna success - @frontity/smart-adserver
lerna success - @frontity/source
lerna success - @frontity/tiny-router
lerna success - @frontity/types
lerna success - @frontity/wp-comments
lerna success - @frontity/wp-source
lerna success - @frontity/yoast
...

You can also launch tests individually by executing npm test from the inside of every package folder

> pwd
.../frontity/packages/amp

> npm test
...
Test Suites: 3 passed, 3 total
Tests:       25 passed, 25 total
Snapshots:   25 passed, 25 total
Time:        20.897 s
...

The testing framework used for the Unit Tests in Frontity is Jest and it uses the configuration provided at jest.config.js.

As part of the Unit Testings execution there's a coverage analysis report generated that shows the percentage of lines and functions that are "covered" (tested) with the Unit Tests.

@frontity/connect: PASS src/__tests__/create-store.tests.js (27.783 s)
@frontity/connect: -----------------|---------|----------|---------|---------|-------------------
@frontity/connect: File             | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
@frontity/connect: -----------------|---------|----------|---------|---------|-------------------
@frontity/connect: All files        |    81.9 |    81.43 |   74.19 |   82.52 |
@frontity/connect:  connect.js      |   75.41 |    78.38 |   57.14 |   75.86 | 152,177-208,224
@frontity/connect:  create-store.js |   89.09 |    84.85 |   88.24 |   91.11 | 17-19,101
@frontity/connect:  index.d.ts      |       0 |        0 |       0 |       0 |
@frontity/connect:  index.js        |       0 |        0 |       0 |       0 |
@frontity/connect: -----------------|---------|----------|---------|---------|-------------------
@frontity/connect: Test Suites: 3 passed, 3 total
@frontity/connect: Tests:       39 passed, 39 total
@frontity/connect: Snapshots:   21 passed, 21 total
@frontity/connect: Time:        32.904 s
@frontity/connect: Ran all test suites.

This coverage report is displayed

UI End-To-End Tests

The E2E tests allow you to run tests using a real browser. They start both a Frontity server and a WordPress server, along with a browser.

These tests run WP and MySQL from dockerized containers so you'll need to have Docker installed to be able to execute them

The main tool used for E2E tests is Cypress which cover the Frontity testing in certain browsers using BrowserStack. In order to ensure that the framework works in older browsers as well, we replicate most of them in Selenium.

These tests are implemented under the e2e folder

More detailed information about these E2E tests is available at: https://github.com/frontity/frontity/tree/dev/e2e/README.md

CLI End-To-End Tests

These tests check the full lifecycle of the Frontity CLI commands in isolated environments. They can be run locally and on GitHub Actions.

They're implemented inside the core package that is in charge of CLI, under the packages/frontity/cli-e2e folder

More detailed information about these CLI tests is available at: https://github.com/frontity/frontity/tree/dev/packages/frontity/cli-e2e/README.md