Testing

Particle provides the starting point for various types of testing. Tests are located under the tools directory:

# ./particle/
.
├── tools/
│   ├── tasks/
│   └── tests/
│   │   └── accessibility/
│   │   └── unit/
│   │   └── vrt/
│   └── ...
└── ...

Unit Testing

Particle provides unit testing using Jest.

Simply run the following to run Jest tests against the design system:

npm run test:unit

Note the __tests__ folders within components for examples.

When using the new component generator (npm run new), a basic test will be generated for you. This initial test checks that it is correctly registered in the design system.

Accessibility Testing

To run pa11y accessibility testing on Pattern Lab rendered output, first you'll need to install the pa11y npm package:

npm install pa11y

To save these devDependencies to your project permanently, run the following instead:

npm install pa11y --save-dev

Then whenever you want to run your tests, simply start the local Pattern Lab dev server in one session:

npm run start

And the kick off the pa11y tests in another session:

npm run test:pa11y

See ./tools/pa11y.js for configuration options. Note the ignore options are for example only, add your needed updates to the options object. Add additional pages to the test via the testPaths array.

const options = {
  standard: 'WCAG2AAA',
  ignore: [
    'WCAG2AAA.Principle3.Guideline3_1.3_1_1.H57.2',
  ],
  log: {
    debug: console.log,
    error: console.error,
    info: console.log,
  },
};

Visual Regression Testing

Particle does not include VRT out of the box, but there are plenty of great options out there depending on your needs. Here are some of our favorites, in alphabetical order: