Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/darlanmendonca/chai-style
CSS Style assertions for elements, using Chai.js
https://github.com/darlanmendonca/chai-style
assertions chai css integration-test test unit-test
Last synced: 4 days ago
JSON representation
CSS Style assertions for elements, using Chai.js
- Host: GitHub
- URL: https://github.com/darlanmendonca/chai-style
- Owner: darlanmendonca
- License: mit
- Created: 2017-05-03T13:36:49.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-16T13:20:20.000Z (almost 7 years ago)
- Last Synced: 2024-09-21T01:31:16.064Z (7 days ago)
- Topics: assertions, chai, css, integration-test, test, unit-test
- Language: JavaScript
- Homepage:
- Size: 83 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/darlanmendonca/chai-style)
# chai-style
CSS Style assertions for elements, using [Chai.js](http://chaijs.com/). All assertions is builtin using `window.getComputedStyle` method.
## Install
```sh
npm install --save-dev chai-style
```
```js
// 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.
```js
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
```js
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
```js
// 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
```js
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
```js
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!