├── .gitignore
├── .stylelintrc
├── .travis.yml
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── index.css
├── lib
    └── test.css
├── package.json
└── test
    ├── config.json
    ├── index.html
    └── test.css


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | build
3 | components
4 | node_modules
5 | 


--------------------------------------------------------------------------------
/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "stylelint-config-suitcss"
3 | }
4 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: false
3 | node_js:
4 |   - "4"
5 |   - "5"
6 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ### HEAD
 2 | 
 3 | ### 1.0.0 (February 10, 2016)
 4 | 
 5 | * Upgrade to latest preprocessor
 6 | * Ensure `test.css` passes stylelint conformance
 7 | 
 8 | ### 0.2.1 (June 24, 2014)
 9 | 
10 | * Add `.css` extension to imports for interoperability.
11 | 
12 | ### 0.2.0 (June 22, 2014)
13 | 
14 | * npm-based workflow.
15 | * Add new preprocessor build tools.
16 | 
17 | ### 0.1.1 (April 5, 2014)
18 | 
19 | * Add npm support.
20 | * Stop using CSSLint for development linting.
21 | * Use Component(1) for development and idiomatic test file.
22 | 
23 | ### 0.1.0 (October 19, 2013)
24 | 
25 | * Initial release.
26 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | Copyright (c) Nicolas Gallagher
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 4 | this software and associated documentation files (the "Software"), to deal in
 5 | the Software without restriction, including without limitation the rights to
 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
 7 | of the Software, and to permit persons to whom the Software is furnished to do
 8 | so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # SUIT CSS components-test
  2 | 
  3 | [![Build Status](https://travis-ci.org/suitcss/components-test.svg?branch=master)](https://travis-ci.org/suitcss/components-test)
  4 | 
  5 | CSS to help test the visual presentation of components.
  6 | 
  7 | Read more about [SUIT CSS](https://github.com/suitcss/suit/).
  8 | 
  9 | ## Installation
 10 | 
 11 | * [npm](https://www.npmjs.org/package/suitcss-components-test): `npm install suitcss-components-test`
 12 | * Download: [zip](https://github.com/suitcss/components-test/releases/latest)
 13 | 
 14 | ## Available classes
 15 | 
 16 | * `Test` - The core component class
 17 | * `Test-title` - The test title
 18 | * `Test-describe` - Describes a component configuration
 19 | * `Test-it` - Describes an expected outcome of a configuration
 20 | * `Test-run` - A specific context within which the component is tested
 21 | 
 22 | ## Usage
 23 | 
 24 | This is an example of an idiomatic SUIT CSS test file:
 25 | 
 26 | ```html
 27 | <!DOCTYPE html>
 28 | <meta charset="utf-8">
 29 | <title>ComponentName [component] - SUIT CSS</title>
 30 | <meta name="viewport" content="initial-scale=1,width=device-width">
 31 | <link rel="stylesheet" href="../build/test.css">
 32 | <style>
 33 |   #textWrapping {
 34 |     width: 300px;
 35 |   }
 36 | 
 37 |   #modifier-textWrapping {
 38 |     width: 300px;
 39 |   }
 40 | </style>
 41 | 
 42 | <div class="Test">
 43 |   <h1 class="Test-title">SUIT CSS: <a href="https://github.com/repo/component-name">ComponentName</a> component tests</h1>
 44 | 
 45 |   <h2 class="Test-describe">.ComponentName</h2>
 46 |   <h3 class="Test-it">renders</h3>
 47 |   <div class="Test-run" id="renders">
 48 |     <!-- component configuration 1 -->
 49 |   </div>
 50 |   <h3 class="Test-it">prevents text wrapping</h3>
 51 |   <div class="Test-run" id="textWrapping">
 52 |     <!-- component configuration 1 -->
 53 |   </div>
 54 | 
 55 |   <h2 class="Test-describe">.ComponentName--modifier</h2>
 56 |   <h3 class="Test-it">renders larger</h3>
 57 |   <div class="Test-run" id="modifier-larger">
 58 |     <!-- component configuration 2 -->
 59 |   </div>
 60 |   <h3 class="Test-it">allows text wrapping</h3>
 61 |   <div class="Test-run" id="modifier-textWrapping">
 62 |     <!-- component configuration 2 -->
 63 |   </div>
 64 | </div>
 65 | ```
 66 | 
 67 | ## Testing
 68 | 
 69 | Install [Node](http://nodejs.org) (comes with npm).
 70 | 
 71 | ```
 72 | npm install
 73 | ```
 74 | 
 75 | To generate a build:
 76 | 
 77 | ```
 78 | npm run build
 79 | ```
 80 | 
 81 | To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)
 82 | 
 83 | ```
 84 | npm run lint
 85 | ```
 86 | 
 87 | To generate the testing build.
 88 | 
 89 | ```
 90 | npm run build-test
 91 | ```
 92 | 
 93 | To watch the files for making changes to test:
 94 | 
 95 | ```
 96 | npm run watch
 97 | ```
 98 | 
 99 | Basic visual tests are in `test/index.html`.
100 | 
101 | ## Browser support
102 | 
103 | * Google Chrome (latest)
104 | * Opera (latest)
105 | * Firefox 4+
106 | * Safari 5+
107 | * Internet Explorer 8+
108 | 


--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
1 | @import "./lib/test.css";
2 | 


--------------------------------------------------------------------------------
/lib/test.css:
--------------------------------------------------------------------------------
 1 | /** @define Test */
 2 | 
 3 | /**
 4 |  * The 'describe' CSS counter
 5 |  */
 6 | 
 7 | .Test {
 8 |   counter-reset: test-describe;
 9 | }
10 | 
11 | .Test-describe::before {
12 |   content: counter(test-describe);
13 |   counter-increment: test-describe;
14 | }
15 | 
16 | /**
17 |  * The 'it' CSS counter
18 |  */
19 | 
20 | .Test-describe {
21 |   counter-reset: test-it;
22 | }
23 | 
24 | .Test-it::before {
25 |   content: counter(test-describe) "." counter(test-it);
26 |   counter-increment: test-it;
27 | }
28 | 
29 | /**
30 |  * The test title
31 |  */
32 | 
33 | .Test-title {
34 |   background: #eee;
35 |   color: #999;
36 |   font-family: sans-serif;
37 |   font-size: 2em;
38 |   margin: 20px 0;
39 |   padding: 20px;
40 | }
41 | 
42 | /**
43 |  * The test description and expectation titles
44 |  */
45 | 
46 | .Test-describe,
47 | .Test-it {
48 |   background: #eee;
49 |   border-left: 5px solid #666;
50 |   color: #666;
51 |   font-family: sans-serif;
52 |   font-weight: bold;
53 |   margin: 20px 0;
54 |   padding: 0.75em 20px;
55 | }
56 | 
57 | .Test-describe {
58 |   font-size: 1.5em;
59 |   margin: 60px 0 20px;
60 | }
61 | 
62 | /**
63 |  * The counter styles
64 |  */
65 | 
66 | .Test-describe::before,
67 | .Test-it::before {
68 |   color: #999;
69 |   display: inline-block;
70 |   margin-right: 10px;
71 |   min-width: 30px;
72 |   text-transform: uppercase;
73 | }
74 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "suitcss-components-test",
 3 |   "version": "1.0.0",
 4 |   "description": "CSS to help test the visual presentation of components",
 5 |   "keywords": [
 6 |     "browser",
 7 |     "css-components",
 8 |     "test",
 9 |     "suitcss",
10 |     "style"
11 |   ],
12 |   "homepage": "https://github.com/suitcss/components-test#readme",
13 |   "bugs": "https://github.com/suitcss/components-test/labels/bug",
14 |   "license": "MIT",
15 |   "author": "Nicolas Gallagher",
16 |   "files": [
17 |     "index.css",
18 |     "lib"
19 |   ],
20 |   "style": "index.css",
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "git://github.com/suitcss/components-test.git"
24 |   },
25 |   "scripts": {
26 |     "build": "npm run setup && npm run preprocess",
27 |     "build-test": "npm run setup && npm run preprocess-test",
28 |     "lint": "suitcss -c test/config.json index.css build/lint.css && rm build/lint.css",
29 |     "preprocess": "suitcss index.css build/build.css",
30 |     "preprocess-test": "suitcss test/test.css build/test.css",
31 |     "setup": "npm install",
32 |     "watch": "npm run preprocess-test -- -w -v",
33 |     "test": "npm run lint"
34 |   },
35 |   "devDependencies": {
36 |     "stylelint-config-suitcss": "^3.0.0",
37 |     "suitcss-preprocessor": "^1.0.0"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/test/config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "lint": true,
3 |   "postcss-reporter": {
4 |     "plugins": ["stylelint"],
5 |     "throwError": true
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <meta charset="utf-8">
 3 | <title>Test [component] - SUIT CSS</title>
 4 | <meta name="viewport" content="initial-scale=1,width=device-width">
 5 | <link rel="stylesheet" href="../build/test.css">
 6 | <style>
 7 |   .Box {
 8 |     background: green;
 9 |     height: 300px;
10 |     width: 300px;
11 |   }
12 | </style>
13 | 
14 | <div class="Test">
15 |   <h1 class="Test-title">SUIT CSS: <a href="https://github.com/suitcss/components-test">Test</a> component tests</h1>
16 | 
17 |   <h2 class="Test-describe">.ComponentName</h2>
18 | 
19 |   <h3 class="Test-it">expectation</h3>
20 |   <div class="Test-run" id="a">
21 |     <div class="Box"></div>
22 |   </div>
23 | 
24 |   <h3 class="Test-it">expectation</h3>
25 |   <div class="Test-run" id="b">
26 |     <div class="Box"></div>
27 |   </div>
28 | 
29 |   <h2 class="Test-describe">.ComponentName--modifier</h2>
30 | 
31 |   <h3 class="Test-it">expectation</h3>
32 |   <div class="Test-run" id="c">
33 |     <div class="Box"></div>
34 |   </div>
35 | 
36 |   <h3 class="Test-it">expectation</h3>
37 |   <div class="Test-run" id="d">
38 |     <div class="Box"></div>
39 |   </div>
40 | </div>
41 | 


--------------------------------------------------------------------------------
/test/test.css:
--------------------------------------------------------------------------------
1 | @import "./index.css";
2 | 


--------------------------------------------------------------------------------