redliner
redliner is a Mocha test utility that determines if an element is obeying style requirements set by a design guide when it's rendered by a browser. This is still very much a work in progress, so if you run into any issues, please submit them.
Requirements
Node 0.12+
Dependencies
How does it work?
- Usage of PhantomJS to "headlessly" load a local resource that contains a full list of HTML elements*
- Performs a scan of the
computedStylesfor that element - Compare the
computedStylesto the properties set in.ymlfiles and spit out any discrepancies
* This HTML page should contain all the elements you want to redline that will also use the CSS you want to test. For instance, if you have a redline for .btn and .btn-sm, then the HTML page should have an element with a .btn class and an element with a .btn-sm.
How to use redliner
Quick
npm install redliner --save-dev- Create
.ymlredlines in/test/(see.ymlexample below) - Create a test file in
/test/(seeredliner-test.jsexample below) - Create HTML page with elements (see HTML example below)
mocha test/redliner-test.js
Details
Creating redlines
In order to use redliner, you'll need at least one .yml file that is structured like the example below (filename is unimportant):
Example: btn.yml
formalName: Default Buttons
className: .btn
tests:
- testGroup:
testName: Padding
paddingTop: 12px
paddingRight: 35px
paddingBottom: 12px
paddingLeft: 35px
- testGroup:
testName: Fonts
fontSize: 14px
fontWeight: bold
- testGroup:
testName: Colors
color: 'rgb(255, 255, 255)'
backgroundColor: '#5596E6'Each testGroup is a group of tests that will be run by Mocha. testGroup is composed of a testName and CSS properties that match the DOM API properties.
Requirements for testGroup:
-
testNamemust be set (this will be thedescribeof your test) - There must be at least one CSS property to test
Creating the test file
All .yml files should be placed inside a dedicated folder which will then be referenced in your test file. A common way to do this is to place a redlines folder in the test folder within the root directory of your app.
Example: redliner-test.js
var redliner = require('redliner'),
path = require('path');
var config = {
redlines: path.resolve(__dirname, 'redlines/'),
resource: path.resolve(__dirname, '../all-elements.html')
};
redliner(config);The config object has two properties:
-
redlinesis the resolved path to where the.ymlfiles are located -
resourceis the resolved path to where the local HTML file is located
Example directory structure of test folder:
app.js
node_modules
...
test
├── index.js
├── redliner-test.js
└── redlines
├── btn.yml
├── btnExtraSmall.yml
└── btnSmall.ymlCreating the HTML page
Create an HTML page that contains the elements you want to redline. This page can be located anywhere in the project, but must be properly resolved in the config object.
Example: all-elements.html
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" type="text/css" href="path/to/main.css">
...
</head>
<body>
<button class="btn">Default Button</button>
<button class="btn btn-sm">Small Button</button>
</body>
</html>
TODOs
- Add unit tests
- Work on making things more modular