Wagtail’s UI testing strategy

README.md

• https://martinfowler.com/articles/practical-test-pyramid.html
• https://kentcdodds.com/blog/the-testing-trophy-and-testing-classifications

Automated tests

Static analysis

Type system:

• TypeScript (tsconfig.json)

Linters:

• ESLint (.eslintrc.js)
• Stylelint (configuration)
• Curlylint (templates parsing only)

Formatters:

• Prettier
• djhtml

Runtime analysis

• react-axe
• React prop-types

Unit tests

• Jest. You know Jest

Integration tests

• Jest, Puppeteer, Axe, (CI setup, sample test run)

Upcoming: Visual regression tests

• Percy with Storybook (prototype)
• Percy with Puppeteer integration tests (prototype)

Semi-automated tests

Visual regression tests

• Backstop.js (sample report)

Accessibility checks

• Pa11y + Lighthouse (sample report)
• Accessibility Insights browser extension

Manual tests in pattern library

• Cross-browser testing (see targets) in Browserstack
• Assistive technology testing (see targets)

Manual tests in Wagtail

• Cross-browser testing (see targets) in Browserstack
• Assistive technology testing (see targets)