Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/posva/mocha-css
A mocha stylesheet for the HTML reporter that let you append visual tests
https://github.com/posva/mocha-css
browser css mocha test visual-testing
Last synced: 17 days ago
JSON representation
A mocha stylesheet for the HTML reporter that let you append visual tests
- Host: GitHub
- URL: https://github.com/posva/mocha-css
- Owner: posva
- License: mit
- Created: 2016-11-26T12:48:06.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-06-18T23:03:13.000Z (over 5 years ago)
- Last Synced: 2024-10-17T00:11:55.762Z (29 days ago)
- Topics: browser, css, mocha, test, visual-testing
- Language: CSS
- Size: 23.4 KB
- Stars: 7
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/funding.yml
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# mocha-css
> A mocha stylesheet for the HTML reporter that let you append visual tests
[![CircleCI][circleci-image]][circleci-url] [![npm][npm-image]][npm-url] [![license][license-image]][license-url]
In the screenshot below the `h1` element doesn't have the original mocha.css
style applied.
You have to make sure to reset the `font` property on your visual test
container. eg: If you apply the class `test-dom-container` to all of them, You'll
have to add this CSS snippet:
``` css
.test-dom-container {
font: initial;
}
```
## Installation
**NPM**
``` sh
npm install --save-dev mocha-css
```
## Usage
Simply replace the `mocha.css` file you're importing with this one
**Webpack**
``` js
// es6
import 'mocha-css'
// commonjs
require('mocha-css')
// with loader query
import 'style-loader!css-loader!mocha-css'
```
**CDN**
``` html
```
[license-image]: https://img.shields.io/npm/l/normalize.css.svg?style=flat-square
[license-url]: LICENSE.md
[npm-image]: https://img.shields.io/npm/v/mocha-css.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/mocha-css
[circleci-image]: https://circleci.com/gh/posva/mocha-css/tree/master.svg?style=shield
[circleci-url]: https://circleci.com/gh/posva/mocha-css
## What is visual testing?
Visual testing consists in seeing what your tests are doing. This is useful when
authoring a UI component library because you always want to check what your
component looks like.
### Resources
- [Visual TDD and awesome documentation](http://toucantoco.com/front/2016/09/14/visual-tdd.html)