JSFiddle - React, Tailwind, and code Playground

by juanojeda

HTML

<h1>Timon Modular UI Testing Suite</h1>
<h2>Todo </h2>
[x] - Define timon block object <br />
[x] - Define timon API <br />
[ ] - Define timon testing logic <br />

JavaScript

// Timon 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'
};

var timon = (function(){
    return {
        create: create,
        test: test,
        addToTest: addToTest,
        addModifier: addModifier,
        addException: addException
    }
})();


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

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

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

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

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

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

//...