Linting

Linting

Bedrock features a custom linter that allows you to test for any anti-patterns in your markup. For example, buttons that are missing a type attribute, making sure radio buttons have the right classes, ...

How to run the tests

Tests can be run using the gulp lint command.

How to write a test

Tests are written in plain JS and are located in the content/linter folder. The tests are picked up recursively, so you're free to use whatever folder/file structure in content/linter as you see fit. These JS files should export a single function that takes one parameter ($ — the Cheerio object). The test function should return an array containing any error messages. If there are no error messages, it should return an empty array instead.

Let's take a look at a basic test:

module.exports = function ($) {
  const errors = [];
  let allButtonsHaveType = true;

  $('button').each(function (index, el) {
    const $el = $(el);

    if (!$el.attr('type')) {
      allButtonsHaveType = false;
    }
  });

  if (!allButtonsHaveType) {
    errors.push('Buttons need a `type` attribute.');
  }

  return errors;
};

In this test, we check all buttons to make sure they have a type attribute defined. If they don't, an error messages is pushed in the errors array, which is returned after the function has performed all of its checks. The reason for keeping track of the error state using allButtonsHaveType is to avoid duplicate error messages in the test output. Since this is pure JS, you are free to do whatever you want in your test, as long as you return either an empty array, or an array containing the error messages (as strings).