Skip to content

Automated tests

Although pattern libraries often start as tools for manual tests during development, they can also be useful for automated UI testing. There are a few benefits to doing UI tests with a pattern library:

  • Test the components in isolation. When tests fail, you will know exactly which component has issues, rather than having to inspect whole pages to understand what might have changed.
  • Test the components with mock data. One of the issues with UI tests is to have test data for your UIs to render – you can reuse the pattern library data for this purpose (althoug there are limitations).

Setting up automated UI tests

There are two ways to set up automated tests: by accessing templates as they are rendered by the pattern library directly with Django, or by pre-rendering the templates with render_patterns command and then using this static export to make automated tests.

Served by Django

Make sure your Django server is up and running, and you can then point your tests directly at the pattern library’s iframe URLs, for example: http://localhost:8000/pattern-library/render-pattern/patterns/molecules/accordion/accordion.html.

Note this will always render your templates within the base template (PATTERN_BASE_TEMPLATE_NAME), which may or may not be appropriate for your tests.

With render_patterns

The render_patterns command command can be used to export all your templates, so you can do bulk checks on them all. For example, testing all templates use valid HTML with the v.Nu HTML5 validator:

./manage.py render_patterns --wrap-fragments
vnu dpl-rendered-patterns/**/*.html

One of the advantages of render_patterns is the ability for you to test the patterns without wrapping fragments in the base template, should this be more appropriate for your tests.

Visual regression testing

Pattern libraries are a natural fit for automated visual regression tests. Here is an example BackstopJS configuration file:

{
  "viewports": [
    {
      "label": "tablet",
      "width": 1024,
      "height": 768
    }
  ],
  "scenarios": [
    {
      "label": "accordion.html",
      "url": "https://torchbox.github.io/django-pattern-library/dpl-rendered-patterns/molecules/accordion/accordion.html"
    },
    {
      "label": "person_page.html",
      "url": "https://torchbox.github.io/django-pattern-library/dpl-rendered-patterns/pages/people/person_page.html"
    }
  ],
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference",
    "bitmaps_test": "backstop_data/bitmaps_test",
    "engine_scripts": "backstop_data/engine_scripts",
    "html_report": "backstop_data/html_report",
    "ci_report": "backstop_data/ci_report"
  },
  "engine": "puppeteer"
}

Try this out by saving the file as backstop.json, then:

npm install -g backstopjs
backstop test

Accessibility testing

Here as well, pattern libraries are a natural fit, due to them providing the test data, and making it possible to test components in isolation. Have a look at Pa11y or Lighthouse CI to get started.

Here is an example Pa11y configuration:

module.exports = {
  defaults: {
    standard: "WCAG2AAA",
    runners: ["axe"],
  },

  urls: [
    "https://torchbox.github.io/django-pattern-library/dpl-rendered-patterns/molecules/accordion/accordion.html",
    "https://torchbox.github.io/django-pattern-library/dpl-rendered-patterns/pages/people/person_page.html",
  ],
};

Try this out by saving the file as pa11y.config.js, then:

npm install -g pa11y-ci
pa11y-ci --config pa11y.config.js

Last update: 2020-11-02