Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ghaschel/stylus-true
Framework to unit test your Stylus files.
https://github.com/ghaschel/stylus-true
preprocessor stylus unit-test unit-testing unit-tests
Last synced: about 2 months ago
JSON representation
Framework to unit test your Stylus files.
- Host: GitHub
- URL: https://github.com/ghaschel/stylus-true
- Owner: ghaschel
- License: bsd-3-clause
- Created: 2019-07-12T20:39:43.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-11-28T17:42:19.000Z (about 1 year ago)
- Last Synced: 2024-10-11T23:13:24.342Z (2 months ago)
- Topics: preprocessor, stylus, unit-test, unit-testing, unit-tests
- Language: Stylus
- Homepage:
- Size: 3.63 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# stylus-true
[](https://www.npmjs.com/package/stylus-true)
[](https://img.shields.io/github/tag/ghaschel/stylus-true.svg)
[](https://opensource.org/licenses/BSD-3-Clause)
[](https://github.com/ghaschel/vscode-angular-html/issues)
[](https://travis-ci.org/ghaschel/stylus-true.svg?branch=master)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
[](https://greenkeeper.io/)
[](https://codecov.io/gh/ghaschel/stylus-true)
> This is a [decremental](KNOWN-ISSUES.MD) port of [true](https://github.com/oddbird/true) for scss.
stylus-true is a unit-testing tool for [Stylus](http://stylus-lang.com) code, All of the test code is written in Stylus and JS (via stylus plugins), and can be compiled by the stylus compiler – or used alongside Javascript test runners for extra features and improved reporting.
## Install
In command line:
```bash
npm install stylus-true
```
Import in your test directory, like any other stylus file:
```stylus
@require '../node_modules/stylus-true/styl/_true.styl';
```
## One Setting
`$true-terminal-output.value` (boolean), defaults to `true`
- `true` will show detailed information in the terminal for debugging failed assertions or reporting final results. This is the default, and best for compiling without a JavaScript test runner.
- `false` will turn off all terminal output from Stylus, though Mocha/Jest will continue to use the terminal for reporting.
-
## Usage
stylus-true, just as the original, [True](https://github.com/oddbird/true) is based on common JS-testing patterns, allowing both a `test-module`/`test` syntax, and the newer `describe`/`it` for defining the structure:
```stylus
+test-module('zip [function]') {
// Test 1
+test('Returns two lists zipped together') {
assert-equal(
zip(a b c, 1 2 3),
(a 1, b 2, c 3)
);
}
}
```
This is the same as...
```stylus
+describe('zip [function]') {
// Test 1
+it('Returns two lists zipped together') {
assert-equal(
zip(a b c, 1 2 3),
(a 1, b 2, c 3)
);
}
}
```
Stylus is able to compare values internally, meaning function-output and variable values can easily be compared and reported during Stylus compilation.
CSS output tests, on the other hand, have to be compared after compilation is complete. You can do that by hand if you want (`git diff` is helpful for noticing changes), or you can use our [Mocha](https://mochajs.org/) or [Jest](https://jestjs.io/) integration.
Output tests fit the same structure, but assertions take a slightly different form, with an outer `assert` mixin, and a matching pair of `output` and `expect` to contain the output-values.
```stylus
// Test CSS output from mixins
+it('Outputs a font size and line height based on keyword') {
+assert() {
+output() {
font-size('large');
}
+expect() {
font-size: 2rem;
line-height: 3rem;
}
}
}
```
You can optionally show a summary report in CSS and/or the command line, after the tests have completed:
```stylus
report();
```
## Using Mocha, Jest, or other JS test runners
1. Install `stylus-true` via npm:
```bash
npm install --save-dev stylus-true
```
2. Write some Stylus tests in `**/*.spec.styl` (see above).
3. Write a shim JS test file `stylus.spec.js`:
```js
const path = require("path");
const stylTrue = require("./lib/main.js");
const glob = require("glob");
describe("SaStylusss", () => {
const stylTestFiles = glob.sync(
path.resolve(process.cwd(), "*.spec.styl")
);
stylTestFiles.forEach(file =>
stylTrue.runStyl({ file }, { describe, it })
);
});
```
4. Run Mocha/Jest, and see your Sass tests reported in the command line.
You can call `runStyl` more than once, if you have multiple Styl test files you want to run separately.
The second argument is an object with required `describe` and `it` options, and optional and `contextLines` options.
Any JS test runner with equivalents to Mocha's or Jest's `describe` and `it` should be usable in the same way: just pass your test runner's `describe` and `it` equivalents in the second argument to `runStyl`.
If True can't parse the CSS output, it'll give you some context lines of CSS as part of the error message. This context will likely be helpful in understanding the parse failure. By default it provides up to 10 lines of context; if you need more, you can provide a numeric `contextLines` option: the maximum number of context lines to provide.
## Disclaimer
stylus-true wouldn't exist if it wasn't for [oddbird](https://github.com/oddbird)'s amazing job with the original true, so give her some love <3