CSS to help test the visual presentation of components.
Read more about SUIT CSS.
Test- The core component classTest-title- The test titleTest-describe- Describes a component configurationTest-it- Describes an expected outcome of a configurationTest-run- A specific context within which the component is tested
This is an example of an idiomatic SUIT CSS test file:
<!DOCTYPE html>
<meta charset="utf-8">
<title>ComponentName [component] - SUIT CSS</title>
<meta name="viewport" content="initial-scale=1,width=device-width">
<link rel="stylesheet" href="../build/test.css">
<style>
#textWrapping {
width: 300px;
}
#modifier-textWrapping {
width: 300px;
}
</style>
<div class="Test">
<h1 class="Test-title">SUIT CSS: <a href="https://github.com/repo/component-name">ComponentName</a> component tests</h1>
<h2 class="Test-describe">.ComponentName</h2>
<h3 class="Test-it">renders</h3>
<div class="Test-run" id="renders">
<!-- component configuration 1 -->
</div>
<h3 class="Test-it">prevents text wrapping</h3>
<div class="Test-run" id="textWrapping">
<!-- component configuration 1 -->
</div>
<h2 class="Test-describe">.ComponentName--modifier</h2>
<h3 class="Test-it">renders larger</h3>
<div class="Test-run" id="modifier-larger">
<!-- component configuration 2 -->
</div>
<h3 class="Test-it">allows text wrapping</h3>
<div class="Test-run" id="modifier-textWrapping">
<!-- component configuration 2 -->
</div>
</div>Install Node (comes with npm).
npm install
To generate a build:
npm run build
To lint code with postcss-bem-linter and stylelint
npm run lint
To generate the testing build.
npm run build-test
To watch the files for making changes to test:
npm run watch
Basic visual tests are in test/index.html.
- Google Chrome (latest)
- Opera (latest)
- Firefox 4+
- Safari 5+
- Internet Explorer 8+