gianlucamangiapelo / kandinskijs

js library to unit test css and perform regression testing, can be paired with any testing framework.

kandinski.js

The JS library to unit test CSS. CSS code coverage reports NOW included!

Why kandinski.js

Why not! The main goal of kandinski.js is to use the power and stability of TDD to test your Application CSS and avoid unexpected issues or regression.

Installing

$ yarn add kandinskijs

Usage overview

const kisk = require("kandinskijs");

describe("component css test", function() {
  const url = "https://siteurl.com";
  const localCssPath = "path/local.css";

  before(async function() {
    await kisk.init(this, url, localCssPath);
  });

  after(async function() {
    await kisk.destroy();
  });

  context("mobile viewport", function() {
    before(async function() {
      const mobileViewport = { width: 320, height: 1 };
      await kisk.getPage(mobileViewport);
    });
    after(async function() {
      await kisk.page.close();
    });
    it("h2 should have a display: flex", async function() {
      const selector = ".component";
      const cssProperty = "display";
      const display = await kisk.getCSSProperty(page, selector, cssProperty);

      expect(display).to.eql("flex");
    });
  });
});

Run the demo locally to try it on your local machine.

API

init - Initialize kandinskijs with the URL you want to test and inject to the downloaded page your local CSS version.

.init(suite, url, cssPath)

destroy - Destroy the kandinskijs instance.

.destroy()

getPage - Get the page with a specific viewport, and set kandinskijs page property.

.getPage(viewport)

getCSSProperty - Return the CSS property value associated to querySelector

.getCSSProperty(querySelector, property)

getPctCSSProperty - Return the CSS property value associated to querySelector expressed in percentage, value ammitted for property parameters are [width, height].

.getPctCSSProperty(querySelector, property)

getInnerText - Return the text of the querySelector specified.

.getInnerText(querySelector)

cssHelper - Provide helper methods to:

• convert RGB to hexadecimal

.rgbToHex(rgbString)

• convert hexadecimal to RGB

.hexToRgb(hex)

• convert px value to percentage

.pxToPerc(pxSelector, pxParent)

Demo

You can find demo files under /demo folder.

• index.html contains the HTML to be tested
• local CSS defined in localBase.css
• test suite, using kandinskijs, is defined in cssTest.js

start the local server

Open a CLI and execute:

$ yarn run demo-server

run the demo tests

Open another CLI and run CSS unit tests:

$ yarn run demo-test

run the demo code coverage report

$ yarn run demo-report

You will find the the report under **logs/cssKTest/lcov-report/demo/**

The demo test suite uses Mocha & Chai.

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

kandinskijs's Issues

Nice to have features

Features:

• Automation of tests creation
• Possibility to run the tests at a component/section level
• Measurement of selector performance
• Possibility to customize notification (thresholds for success, warning, alert)
• Possibility to update tests for an out-of-scope page/component/section

List of properties to track:

• media queries
• grid (margins, paddings, gaps)
• typography (margins, family, size, weight, style, line-height)
• colours
• objects catalogue TBD