JSFiddle - React, Tailwind, and code Playground

by juanojeda

JavaScript

// Meerkat Blocks
///////////////////

var buttonBlock = {
    name: "_button", //name must start with _ prefix
    selector: [
         "button",
        ".button",
        "[role=button]",
        "[class*=button]"
    ],
    modifiers: [
        // Modifiers are reusable variations of an element.
        {
            // the name will be accessible as
            // button.primary
            name: "_primary",
            selector: ".button-primary"
        }
    ],
    exceptions: [
        // Exceptions are elements that are excluded from that test, and link to a different test
        {
            // the name will be accessible as
            // button#homeFancyButton
            name: "_homeFancyButton",
            selector: "#homeFancyButton"
        }
    ]
    // if you are defining from an image rather than a live element, define a screenshot
    screenshot: "../path/to/image.png",
    
    // any direct descendants the block must contain to pass
    mandatoryContents: [
        "_icon", // the block name
        "/\w*/g" // match text or value of the element against a regex
    ],
    
    // any direct descendants that will cause the block to fail
    prohibitedContents: [
        "_paragraph",
        "/^click$/gi"
    ],
    
    // if you're defining a premade template
    template: '../path/to/_template.tpl'
};


//API
///////////////////

// create a new block
meerkat.new(buttonBlock);

// compare a live element to a "known-good" version
meerkat.test(); // tests whole page

// test by block
meerkat.test("_paragraph"); // test all elements that fit the _paragraph block's selectors

// test by css selector
meerkat.test("p"); // tests all instances of this selector against any tests it matches

// test against a known pattern
meerkat.test("p", "_paragraph");

// add a selector to a test
meerkat.addToTest(".paragraph", "_paragraph");

// add an exception to a test
meerkat.addException("_homeFancyPara", "_paragraph");

// create and add an...