├── .coveralls.yml ├── .doxie.render.js ├── .editorconfig ├── .eslintignore ├── .eslintrc ├── .gitattributes ├── .gitignore ├── .travis.yml ├── License.md ├── Readme.md ├── Readme └── screencast.gif ├── module.js ├── module └── index.js ├── package.json ├── test.js ├── test ├── runner.html └── runner.js └── webpack.config.js /.coveralls.yml: -------------------------------------------------------------------------------- 1 | repo_token: pUGGbxuFsLrw08Xmb8WJM3a2gLbXpV2aZ 2 | -------------------------------------------------------------------------------- /.doxie.render.js: -------------------------------------------------------------------------------- 1 | module.exports = (doc) => ( 2 | `

_{JSIG SIGNATURE (?)}

3 | \`\`\`js 4 | ${doc.data.tags 5 | .find(tag => tag.type === 'jsig') 6 | .string 7 | .replace(/^ /mg, '') 8 | } 9 | \`\`\` 10 | 11 | ${doc.data.description.full} 12 | `); 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # 2 | # Text editor configuration 3 | # ========================= 4 | # 5 | # This file describes the end-of-line character, indentation and other rules for 6 | # text files – in a format compatible with virtually any text editor. It really 7 | # helps to have all that consistent, without manual labor. You'll probably want 8 | # a plugin for your editor. Go get one from . 9 | # 10 | 11 | root = true 12 | 13 | 14 | # General rules 15 | # ------------- 16 | # - Unicode 17 | # - Unix-style line endings 18 | # - Newline before EOF 19 | # - No sloppy trailing spaces 20 | # - Two-space indentation 21 | 22 | [*] 23 | end_of_line = lf 24 | charset = utf-8 25 | insert_final_newline = true 26 | trim_trailing_whitespace = true 27 | indent_style = space 28 | indent_size = 2 29 | 30 | 31 | # Files that need whitespace at the end of lines 32 | # ---------------------------------------------- 33 | # - Markdown 34 | 35 | [*.md] 36 | trim_trailing_whitespace = false 37 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # 2 | # Files ignored by ESLint 3 | # ======================= 4 | # 5 | 6 | # - Built files 7 | ./*.js 8 | !./module.js 9 | !./test.js 10 | ./*/ 11 | !./module/ 12 | !./test/ 13 | !./Readme/ 14 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb", 3 | "rules": { 4 | "curly": 0, 5 | "no-undef": 2 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # 2 | # File type specific Git settings 3 | # =============================== 4 | # 5 | 6 | 7 | # Default 8 | # ------- 9 | # If a file doesn’t match anything below, fall back to autodetection. 10 | # . 11 | * text=auto 12 | 13 | 14 | # Text files 15 | # ---------- 16 | # Always perform CRLF → LF normalization on these. 17 | 18 | # * Source code 19 | *.js text 20 | *.sh text 21 | *.fish text 22 | 23 | # * Docs 24 | *.md text 25 | 26 | # * Config and data files 27 | *.json text 28 | *.{yml,yaml} text 29 | .editorconfig text 30 | .gitattributes text 31 | .gitignore text 32 | .jscsrc text 33 | .jshintignore text 34 | .jshintrc text 35 | .npmignore text 36 | 37 | # * Web stuff 38 | *.html text 39 | *.svg text 40 | *.mustache text 41 | 42 | # * Other text files 43 | *.csv text 44 | *.xml text 45 | 46 | 47 | # Smart diffs 48 | # ----------- 49 | # Show approximate diffs for binary files by converting them to plain text. 50 | 51 | # * Show PDF and *MS Office* documents as text 52 | # – if you’re not on *Git Bash*, put this into your .gitconfig: 53 | # [diff "astextplain"] 54 | # textconv = pdf2txt 55 | # binary = true 56 | *.pdf diff=astextplain 57 | *.doc diff=astextplain 58 | *.docx diff=astextplain 59 | *.dot diff=astextplain 60 | *.rtf diff=astextplain 61 | 62 | # * Show ODF documents as text 63 | # – install *odt2txt* and put this into your .gitconfig: 64 | # [diff "odf"] 65 | # textconv=odt2txt 66 | # binary = true 67 | .odt diff=odf 68 | .ods diff=odf 69 | .odp diff=odf 70 | .odb diff=odf 71 | .odg diff=odf 72 | .odf diff=odf 73 | 74 | # * Show EXIF data from JPEG images 75 | # – install *exif* and put this into your .gitconfig: 76 | # [diff "jpg"] 77 | # textconv = exif 78 | # binary = true 79 | *.{jpg,jpeg} diff=exif 80 | 81 | 82 | # Plain binary files 83 | # ------------------ 84 | # Just treat them as blobs. 85 | 86 | # * Binary image formats 87 | *.png binary 88 | *.gif binary 89 | *.xcf binary 90 | *.ico binary 91 | *.psd binary 92 | *.ai binary 93 | *.sketch binary 94 | 95 | # * Video and audio files 96 | *.mov binary 97 | *.mp4 binary 98 | *.mp3 binary 99 | *.flv binary 100 | *.fla binary 101 | *.swf binary 102 | 103 | # * Archives 104 | *.gz binary 105 | *.zip binary 106 | *.7z binary 107 | *.tar binary 108 | *.rar binary 109 | 110 | # * Fonts 111 | *.ttf binary 112 | *.otf binary 113 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # 2 | # Files ignored by Git 3 | # ==================== 4 | # 5 | 6 | # - Built files 7 | /*.js 8 | !/module.js 9 | !/test.js 10 | !/webpack.config.js 11 | !/.doxie.render.js 12 | /*/ 13 | !/module/ 14 | !/test/ 15 | !/Readme/ 16 | 17 | # - All files and directories starting with "#" 18 | \#* 19 | 20 | # - NPM stuff 21 | /node_modules/ 22 | /npm-debug.log 23 | 24 | # - Test coverage reports 25 | /coverage/ 26 | 27 | # - Editor files 28 | *.sublime-project 29 | *.sublime-workspace 30 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: 2 | false 3 | 4 | branches: 5 | only: 6 | - master 7 | - travis-debug 8 | 9 | before_install: 10 | git config user.name "Travis CI" 11 | 12 | language: 13 | node_js 14 | node_js: 15 | - stable 16 | 17 | after_script: 18 | npm run coveralls 19 | -------------------------------------------------------------------------------- /License.md: -------------------------------------------------------------------------------- 1 | Copyright © 2015 Studio B12 GmbH 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 |

22 | 28 |

29 | 30 | 31 |

32 | 33 |

**34 | CSS unit testing. Lightning-fast. tape-style. 35 |**

36 | 37 |

38 | Isolates DOM and styles for reproducible unit tests. As elegant and lightweight as tape itself. 39 |

40 | 41 | 42 | 43 | 44 |
45 | 46 | Demo 47 | ---- 48 | 49 |

50 |
51 |
52 | Screencast 58 |
59 | ^{60 | That’s how budo + tap-dev-tool + tape-css play together. Other great options: hihat, testron.
61 |} 62 |
63 | ^{64 | Looks slow?
65 |} 66 |

67 | 68 | 69 | 70 | 71 |
72 | 73 | Installation 74 | ------------ 75 | 76 | ```sh 77 | $ npm install tape-css 78 | ``` 79 | 80 | 81 | 82 | 83 |
84 | 85 | Usage 86 | ----- 87 | 88 | ###### 1 89 | 90 | Pick your favorite flavor of *[tape][]* – be it *[tape][]* itself, *[tape-catch][]*, *[blue-tape][]* or whatever. 91 | 92 | ```js 93 | const tape = require('tape'); 94 | const test = require('tape-css')(tape); // We don’t change `tape` in any way. 95 | ``` 96 | 97 | [tape]: https://www.npmjs.com/package/tape 98 | [tape-catch]: https://www.npmjs.com/package/tape-catch 99 | [blue-tape]: https://www.npmjs.com/package/blue-tape 100 | 101 | ###### 2 102 | 103 | Pass the DOM tree and styles you want to test. We’ll add it to the ``[\*](https://github.com/studio-b12/tape-css/issues/1) before your test begins – and clean them up right after it has ended. 104 | 105 | ```js 106 | test('Roses are red, s are blue', { 107 | dom: document.createElement('span'), 108 | styles: '* { color: red; } span { color: blue; }', 109 | }, (t) => { 110 | // Our span and styles are here to play with. 111 | t.equal( 112 | getComputedStyle(document.querySelector('span')).getPropertyValue('color'), 113 | 'rgb(0, 0, 255)' 114 | ); 115 | 116 | t.end(); 117 | // We’ve now cleaned up the place! 118 | }); 119 | ``` 120 | 121 | ###### 3 122 | 123 | *tape-css* is made to play well with other tools. *[hyperscript][]* and *[computed-style][]* can make your tests nicer to read and write: 124 | 125 | ```js 126 | const h = require('hyperscript'); 127 | const style = require('computed-style'); 128 | const personOne = h('.person'); 129 | const personTwo = h('.person'); 130 | 131 | test('Everyone has some space to breathe', { 132 | dom: h('div', [personOne, personTwo]), 133 | styles: '.person { margin-bottom: 10px } * { padding: 5px }', 134 | }, (is) => { 135 | is.equal( 136 | personTwo.getBoundingClientRect().bottom - 137 | personOne.getBoundingClientRect().top, 138 | 10, 139 | '10 px between people' 140 | ); 141 | 142 | is.equal( 143 | style(personOne, 'padding-right'), 144 | '5px', 145 | 'one has room to move his arm' 146 | ); 147 | 148 | is.end(); 149 | }) 150 | ``` 151 | 152 | [hyperscript]: https://www.npmjs.com/package/hyperscript 153 | [computed-style]: https://www.npmjs.com/package/computed-style 154 | 155 | ###### 4 156 | 157 | Whenever you want to see how your layout actually looks like, use `test.only`. We’ll only execute this one test and we won’t reset the DOM and styles afterwards. That’s pretty useful while debugging. 158 | 159 | ```js 160 | test('All is well', /* … */); 161 | test.only('Need to debug this', /* … */); 162 | test('Works alright', /* … */); 163 | ``` 164 | 165 | 166 | 167 | 168 |
169 | 170 | Performance 171 | ----------- 172 | 173 | Does [928 ms for 21 tests](#/screencast) look slow to you? We thought so as well – so we wanted to check why. We created 400 specs with 1000 assertions to check that. Every spec had its own DOM tree and style element created, injected and cleaned up (4 operations per spec). We run and timed that a couple of times in the very same Chrome you’re seeing in the screencast. 174 | 175 | Running it took 3 seconds ±200 ms. That’s over 330 tests and 500 DOM operations per second! 176 | 177 | ***tape-css* just feels lightening-fast.** 178 | 179 | It turns out much of the measured time is just the browser rendering the initial page. We tried to time how much that takes – we got wildly differing results though. Feel free to submit a PR if you manage to work this out. 180 | 181 | 182 | 183 | 184 |
185 | 186 | API 187 | --- 188 | 189 | 190 | 191 |

_{JSIG SIGNATURE (?)}

192 | ```js 193 | test(tape) => ( 194 | name? : String, 195 | options?: { 196 | // All original `tape` options, and: 197 | dom? : Element | DocumentFragment 198 | styles? : String 199 | document? : Document 200 | }, 201 | callback : Function 202 | ) => void 203 | ``` 204 | 205 | If you use tape, you’ll feel right at home. Give us an instance of `tape`. 206 | We won’t change its [existing API][] in any way. We just add a couple 207 | of `options`: 208 | 209 | - `dom` – one or more DOM elements. We’ll add it to the `` 210 | before your test and clean it up after your test has ended. 211 | Default: nothing. 212 | 213 | - `styles` – a string of CSS. We’ll add it as a `