diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml index 938461b462..626db2e82c 100644 --- a/.github/workflows/e2e.yml +++ b/.github/workflows/e2e.yml @@ -8,6 +8,8 @@ on: jobs: test: runs-on: ubuntu-20.04 + container: + image: mcr.microsoft.com/playwright:v1.38.0-jammy timeout-minutes: 60 steps: @@ -23,9 +25,6 @@ jobs: with: useRollingCache: true - - name: Install Playwright Browsers - run: yarn playwright install --with-deps - - name: Run Playwright tests run: yarn playwright test diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 97fc5b94c8..c415b186c2 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -8,6 +8,7 @@ Here are some tips how to make your contributing efforts efficient and eventuall - [Commit Conventions](#commit-conventions) - [Code style](#code-style) - [Documenting the Components](#documenting-the-components) +- [Testing](#testing) - [Publishing](#publishing) ## General usage @@ -161,6 +162,34 @@ This project uses Prettier for code formatting. You can run `make format` to for - `Description` — the description of the prop, e.g. `Title of the accordion` 3. The props MUST be sorted alphabetically by their name. +## Testing + +Each package contains a script called `test`. +Using this you can test entire package and verify that all parts of the package are in good shape and all rules are met. + +Testing script includes: + +- linting using [ESlint][eslint] +- checking formatting using [Prettier][prettier] +- checking types using [Typescript][typescript] compiler +- running unit test using [Jest][jest] + +### Unit testing + +You can run unit testing via `test:unit` scripts. +For all available scripts see the package's `package.json` file. + +### Visual regression testing + +**Prerequisites:** [Docker][docker] 🐳 + +You can run visual regression testing via `Makefile` in the project root. +Using `make test-e2e` you will execute docker command that starts [Playwright][playwright] in containerized environment. + +👉 Visual snapshots are generated based on platform, so we need to use same platform locally and on CI (GitHub Actions). + +⚠️ Version number of the [Playwright][playwright] dependency must be the same in `package.json` file and in the `./bin/make/e2e.sh` to ensure that no additional [Playwright][playwright] dependencies will need to install (browsers are backed in the Docker image). See https://playwright.dev/docs/docker. + ## Publishing This project uses GitHub Actions to publish the packages automatically to npm. New packages are published after the new tag is pushed to the main branch. PR can be merged only by the appropriate group of maintainers. @@ -180,3 +209,9 @@ This project uses GitHub Actions to publish the packages automatically to npm. N [commitlint-config]: https://github.com/lmc-eu/code-quality-tools/tree/main/packages/commitlint-config [packages]: packages/ [dictionary]: https://github.com/lmc-eu/spirit-design-system/tree/main/docs/DICTIONARIES.md +[eslint]: https://eslint.org/ +[prettier]: https://prettier.io/ +[typescript]: https://www.typescriptlang.org/ +[jest]: https://jestjs.io/ +[docker]: https://www.docker.com/ +[playwright]: https://playwright.dev/ diff --git a/bin/make/e2e.sh b/bin/make/e2e.sh index 45626ebd30..d1692f3d90 100755 --- a/bin/make/e2e.sh +++ b/bin/make/e2e.sh @@ -2,4 +2,7 @@ set -o errexit -docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.38.0-jammy yarn test:e2e +PLAYWRIGHT_VERSION=1.38.0 +UBUNTU_VERSION=jammy + +docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v$PLAYWRIGHT_VERSION-$UBUNTU_VERSION yarn test:e2e