chai-style

CSS Style assertions for elements, using Chai.js

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
chai-style
461.0.35 years ago6 years agoMinified + gzip package size for chai-style in KB

Readme

Build Status
chai-style
CSS Style assertions for elements, using Chai.js. All assertions is builtin using window.getComputedStyle method.

Install

npm install --save-dev chai-style

// in your spec, set the plugin in chai
const {expect} = require('chai')
  .use(require('chai-style'))

Style as chainable assertion

Use method .style to inspect style of a element, e.g.
const element = document.querySelector('h2')
expect(element).to.have.style('color', 'red')

Properties can be defined in camel case or separated by hifen, like in css
expect(element).to.have.style('backgroundColor')
// or
expect(element).to.have.style('background-color')

Values

To assert a value just pass a second argument to method style, like below
// assert if element has property display with value black
expect(element).to.have.style('display', 'block')

Colors

Some browsers can generate a differente value to color, like 'red' or 'rgb(255, 0, 0)'. Whatever, this assertion supports named colors, rgb, rgba, hexadecimal, and hsl
element.style.color = '#f00'
expect(element).to.have.style('color', 'red') // asserts colors indiferrent of value used

Units

To assert unit values, use like css
element.style.height = '50vh'
expect(element).to.have.style('height', '50vh')
// too works if you assert with respective value in pixels
expect(element).to.have.style('height', '323px') // 323 is the half of viewport in this case, equals to 50vh

Actually, the css units supported is
  • px (pixels)
  • em (relative to element fontStyle, or inherit)
  • rem (relative to root fontStyle, the html tag)
  • vh (viewport height)
  • vw (viewport width)

Other units will come soon. Pull requests be welcome!