PIXEL POLICE !

A design token integration testing tool

GITHUB

Pixel Police makes it easy to check if pages on your website are using design tokens as you intended.

You tell it what your design tokens are, which css properties they can be used on, and Pixel Police will let you know what crimes have been committed.

Pixel Police will let you know if:

  • A vandal defaces a page with the wrong font
  • A shady suspect uses an illegal color
  • A smuggler dashes along a border

Let's get started

Install

npm i pixelpolice

Create a config.js file and populate it with your design tokens

const tokens = require('your-design-tokens')

module.exports = {
  urls: ['https://www.yourwebiste.com/', 'https://www.yourwebiste.com/page', ... ],
  tests: [{
    expectedPropertyValues: {
      backgroundColor: [tokens.bgColors.light, tokens.bgColors.dark],
      color: [tokens.colors.primary, tokens.colors.secondary],
      fontSize: [tokens.fontSize.small, tokens.fontSize.medium, tokens.fontSize.large]
      ...
    }
  }]
}

Add to your package.json

"scripts": {
  design-token-test: pixelpolice --config path/to/config.js
}

Run in terminal

$ npm run design-token-test



testing  https://www.yourwebiste.com/ @ 800 x 600
testing  https://www.yourwebiste.com/page @ 800 x 600

█████████████████████████████████████████████████████████████████████

PIXEL POLICE REPORT:

FAIL  https://www.yourwebiste.com/ @ 800 x 600
- Number of elements tested: 911
- Passed tests: 11038
- Failed tests: 26

FAIL  https://www.yourwebiste.com/page @ 800 x 600
- Number of elements tested: 999
- Passed tests: 15999
- Failed tests: 52

█████████████████████████████████████████████████████████████████████

CLI

OptionDescription
-c, --configPath to config file
-v, --verboseOutput all test data (default: false)
-V, --versionOutput the version number
-h, --helpOutput usage information

Config

AttributeTypeDescription
urlsArray[String]An array of urls that you would like to run the tests against
testsArray[Object]An array of test objects
tests.viewports.widthObject/Number (optional)The viewport width (in pixels) to test against. Defaults to 800
tests.viewports.heightObject/Number (optional)The viewport height (in pixels) to test against. Defaults to 600
tests.expectedPropertyValuesObjectA map of css properies and allowed values (or tokens)

tests.expectedPropertyValues[Object]

AttributeTypeSuppoorted values / units
backgroundColorArray[string] (optional) hex, rgb, hsl, transparent - Colors are converted to RGB prior to testing.
borderTopColorArray[string] (optional) hex, rgb, hsl, transparent - Colors are converted to RGB prior to testing.
borderLeftColorArray[string] (optional) hex, rgb, hsl, transparent - Colors are converted to RGB prior to testing.
borderBottomColorArray[string] (optional) hex, rgb, hsl, transparent - Colors are converted to RGB prior to testing.
borderRightColorArray[string] (optional) hex, rgb, hsl, transparent - Colors are converted to RGB prior to testing.
borderTopStyleArray[string] (optional) string - e.g. 'solid', 'dashed', dotted etc
borderLeftStyleArray[string] (optional) string - e.g. 'solid', 'dashed', dotted etc
borderBottomStyleArray[string] (optional) string - e.g. 'solid', 'dashed', dotted etc
borderRightStyleArray[string] (optional) string - e.g. 'solid', 'dashed', dotted etc
borderTopWidthArray[string] (optional) px
borderLeftWidthArray[string] (optional) px
borderBottomWidthArray[string] (optional) px
borderRightWidthArray[string] (optional) px
colorArray[string] (optional) hex, rgb, hsl, transparent - Colors are converted to RGB prior to testing.
marginTopArray[string] (optional) px
marginLeftArray[string] (optional) px
marginBottomArray[string] (optional) px
marginRightArray[string] (optional) px
outlineColorArray[string] (optional) hex, rgb, hsl, transparent - Colors are converted to RGB prior to testing.
outlineStyleArray[string] (optional) string - 'dashed', 'solid' etc
paddingTopArray[string] (optional) px
paddingLeftArray[string] (optional) px
paddingBottomArray[string] (optional) px
paddingRightArray[string] (optional) px
fontSizeArray[string] (optional) px
fontFamilyArray[string] (optional) string
fontWeightArray[string] (optional) number - e.g. 100, 200, 300 etc, not bold, bolder

License

MIT