Merge lp:~stephen-stewart/ulysses/css-regression-testing into lp:ulysses
- css-regression-testing
- Merge into trunk
Proposed by
Stephen Stewart
Status: | Merged |
---|---|
Approved by: | Stephen Stewart |
Approved revision: | 22 |
Merged at revision: | 17 |
Proposed branch: | lp:~stephen-stewart/ulysses/css-regression-testing |
Merge into: | lp:ulysses |
Diff against target: |
427 lines (+143/-79) 11 files modified
.bzrignore (+1/-0) .csslintrc (+1/-0) Gruntfile.js (+16/-8) README.md (+12/-4) config/phantomcss-tests.js (+50/-0) package.json (+3/-1) src/dropdowns.css (+0/-1) src/forms.css (+0/-5) src/layout.css (+0/-1) src/navigation.css (+0/-3) test/index.html (+60/-56) |
To merge this branch: | bzr merge lp:~stephen-stewart/ulysses/css-regression-testing |
Related bugs: |
Reviewer | Review Type | Date Requested | Status |
---|---|---|---|
Jonas G. Drange (community) | Approve | ||
Review via email: mp+200656@code.launchpad.net |
Commit message
regression tests
Description of the change
Tidy grunt tasks.
Add regression testing via PhantomCSS.
To post a comment you must log in.
- 22. By Stephen Stewart
-
fix lint errors
Preview Diff
[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1 | === modified file '.bzrignore' |
2 | --- .bzrignore 2014-01-01 17:08:09 +0000 |
3 | +++ .bzrignore 2014-01-07 11:56:36 +0000 |
4 | @@ -3,3 +3,4 @@ |
5 | node_modules/ |
6 | .sass-cache |
7 | public/* |
8 | +results/ |
9 | |
10 | === modified file '.csslintrc' |
11 | --- .csslintrc 2014-01-07 10:48:03 +0000 |
12 | +++ .csslintrc 2014-01-07 11:56:36 +0000 |
13 | @@ -6,6 +6,7 @@ |
14 | "display-property-grouping": false, |
15 | "duplicate-background-images": false, |
16 | "empty-rules": false, |
17 | + "fallback-colors": false, |
18 | "floats": false, |
19 | "font-faces": false, |
20 | "font-sizes": false, |
21 | |
22 | === modified file 'Gruntfile.js' |
23 | --- Gruntfile.js 2014-01-07 11:00:45 +0000 |
24 | +++ Gruntfile.js 2014-01-07 11:56:36 +0000 |
25 | @@ -13,7 +13,7 @@ |
26 | }, |
27 | |
28 | src: { |
29 | - src: 'src/*.scss' |
30 | + src: 'src/*.css' |
31 | } |
32 | }, |
33 | |
34 | @@ -65,8 +65,7 @@ |
35 | options: { |
36 | port: 9001, |
37 | hostname: '*', |
38 | - base: 'test', |
39 | - keepalive: true |
40 | + base: 'test' |
41 | } |
42 | } |
43 | }, |
44 | @@ -84,13 +83,20 @@ |
45 | ['rework.prefix', 'border-radius'], |
46 | ['rework.prefix', 'box-shadow'], |
47 | ['rework.prefix', 'animation'], |
48 | + ['rework.prefix', 'transition'], |
49 | ['rework.prefixValue', 'linear-gradient'] |
50 | ], |
51 | vendors: ['-o-', '-ms-', '-moz-', '-webkit-'] |
52 | } |
53 | + }, |
54 | + |
55 | + phantomcss: { |
56 | + ulysses: { |
57 | + src: [ |
58 | + 'config/phantomcss-tests.js' |
59 | + ] |
60 | + }, |
61 | } |
62 | - |
63 | - // TODO a release task for bower package |
64 | }); |
65 | |
66 | // configure csslint to only run on changed file |
67 | @@ -108,14 +114,16 @@ |
68 | grunt.loadNpmTasks('grunt-contrib-watch'); |
69 | grunt.loadNpmTasks('grunt-contrib-connect'); |
70 | grunt.loadNpmTasks('grunt-rework'); |
71 | + grunt.loadNpmTasks('grunt-phantomcss'); |
72 | |
73 | - grunt.registerTask('default',['build']); |
74 | - grunt.registerTask('test', ['csslint']); |
75 | + grunt.registerTask('default',['run']); |
76 | + grunt.registerTask('test', ['build', 'connect', 'phantomcss']); |
77 | + grunt.registerTask('run', ['build', 'connect', 'watch']); |
78 | grunt.registerTask('build', [ |
79 | 'clean', |
80 | 'rework', |
81 | + 'csslint', |
82 | 'concat', |
83 | 'cssmin' |
84 | ]); |
85 | - grunt.registerTask('server', ['build', 'connect']); |
86 | } |
87 | |
88 | === modified file 'README.md' |
89 | --- README.md 2013-12-14 07:13:35 +0000 |
90 | +++ README.md 2014-01-07 11:56:36 +0000 |
91 | @@ -21,9 +21,17 @@ |
92 | |
93 | '''' |
94 | |
95 | -To run a server showing the test page: |
96 | - |
97 | -'''' |
98 | -grunt server |
99 | +Default grunt task ('run') will start a server on localhost and a watch task to |
100 | +build and lint any changed files: |
101 | + |
102 | +'''' |
103 | +grunt [run] |
104 | + |
105 | +'''' |
106 | + |
107 | +Testing |
108 | + |
109 | +'''' |
110 | +grunt test |
111 | |
112 | '''' |
113 | |
114 | === added directory 'config' |
115 | === added file 'config/phantomcss-tests.js' |
116 | --- config/phantomcss-tests.js 1970-01-01 00:00:00 +0000 |
117 | +++ config/phantomcss-tests.js 2014-01-07 11:56:36 +0000 |
118 | @@ -0,0 +1,50 @@ |
119 | +/** |
120 | +casper.test.begin('test buttons', 1, function suite(test) { |
121 | + casper.start( 'http://0.0.0.0:9001/index.html' ); |
122 | + casper.viewport(1024, 768); |
123 | + |
124 | + casper.then(function(){ |
125 | + phantomcss.screenshot('[data-qa="buttons"]', 'Buttons'); |
126 | + }); |
127 | + |
128 | + casper.then( function(){ |
129 | + phantomcss.compareAll(); |
130 | + }); |
131 | + |
132 | + casper.then( function(){ |
133 | + //phantomcss.compareMatched('Buttons'); |
134 | + phantomcss.compareAll(); |
135 | + }); |
136 | + |
137 | + casper.run(function(){ |
138 | + console.log('\nTHE END.'); |
139 | + test.done(); |
140 | + phantom.exit(phantomcss.getExitStatus()); |
141 | + }); |
142 | +}); |
143 | +**/ |
144 | + |
145 | + |
146 | +casper.start( 'http://0.0.0.0:9001/index.html' ); |
147 | +casper.viewport(1024, 768); |
148 | + |
149 | +casper.then(function(){ |
150 | + phantomcss.screenshot('[data-qa="default-button"]', 'Default Button'); |
151 | + phantomcss.screenshot('[data-qa="primary-button"]', 'Primary Button'); |
152 | + phantomcss.screenshot('[data-qa="tertiary-button"]', 'Tertiary Button'); |
153 | + phantomcss.screenshot('[data-qa="button-group"]', 'Button Group'); |
154 | + phantomcss.screenshot('[data-qa="button-toolbar"]', 'Button Toolbar'); |
155 | +}); |
156 | + |
157 | +casper.then(function(){ |
158 | + phantomcss.screenshot('[data-qa="headlines"]', 'Headlines'); |
159 | +}); |
160 | + |
161 | +casper.then( function(){ |
162 | + phantomcss.compareAll(); |
163 | +}); |
164 | + |
165 | +casper.run(function(){ |
166 | + console.log('\nTHE END.'); |
167 | + phantom.exit(phantomcss.getExitStatus()); |
168 | +}); |
169 | |
170 | === modified file 'package.json' |
171 | --- package.json 2014-01-01 17:08:09 +0000 |
172 | +++ package.json 2014-01-07 11:56:36 +0000 |
173 | @@ -28,6 +28,8 @@ |
174 | "grunt-contrib-connect": "~0.5.0", |
175 | "grunt-contrib-compress": "~0.5.3", |
176 | "grunt-contrib-copy": "~0.4.1", |
177 | - "bower": "~1.2.8" |
178 | + "bower": "~1.2.8", |
179 | + "phantomjs": "~1.9.2-6", |
180 | + "grunt-phantomcss": "~0.2.0" |
181 | } |
182 | } |
183 | |
184 | === added directory 'screenshots' |
185 | === added file 'screenshots/Button Group_3.png' |
186 | Binary files screenshots/Button Group_3.png 1970-01-01 00:00:00 +0000 and screenshots/Button Group_3.png 2014-01-07 11:56:36 +0000 differ |
187 | === added file 'screenshots/Button Toolbar_4.png' |
188 | Binary files screenshots/Button Toolbar_4.png 1970-01-01 00:00:00 +0000 and screenshots/Button Toolbar_4.png 2014-01-07 11:56:36 +0000 differ |
189 | === added file 'screenshots/Buttons_0.png' |
190 | Binary files screenshots/Buttons_0.png 1970-01-01 00:00:00 +0000 and screenshots/Buttons_0.png 2014-01-07 11:56:36 +0000 differ |
191 | === added file 'screenshots/Default Button_0.png' |
192 | Binary files screenshots/Default Button_0.png 1970-01-01 00:00:00 +0000 and screenshots/Default Button_0.png 2014-01-07 11:56:36 +0000 differ |
193 | === added file 'screenshots/Headlines_1.png' |
194 | Binary files screenshots/Headlines_1.png 1970-01-01 00:00:00 +0000 and screenshots/Headlines_1.png 2014-01-07 11:56:36 +0000 differ |
195 | === added file 'screenshots/Headlines_5.png' |
196 | Binary files screenshots/Headlines_5.png 1970-01-01 00:00:00 +0000 and screenshots/Headlines_5.png 2014-01-07 11:56:36 +0000 differ |
197 | === added file 'screenshots/Primary Button_1.png' |
198 | Binary files screenshots/Primary Button_1.png 1970-01-01 00:00:00 +0000 and screenshots/Primary Button_1.png 2014-01-07 11:56:36 +0000 differ |
199 | === added file 'screenshots/Tertiary Button_2.png' |
200 | Binary files screenshots/Tertiary Button_2.png 1970-01-01 00:00:00 +0000 and screenshots/Tertiary Button_2.png 2014-01-07 11:56:36 +0000 differ |
201 | === modified file 'src/dropdowns.css' |
202 | --- src/dropdowns.css 2013-12-14 07:28:45 +0000 |
203 | +++ src/dropdowns.css 2014-01-07 11:56:36 +0000 |
204 | @@ -18,7 +18,6 @@ |
205 | border-radius:2px; |
206 | background-clip: padding-box; |
207 | background-color:#fff; |
208 | - -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1); |
209 | box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1); |
210 | } |
211 | |
212 | |
213 | === modified file 'src/forms.css' |
214 | --- src/forms.css 2014-01-01 16:10:32 +0000 |
215 | +++ src/forms.css 2014-01-07 11:56:36 +0000 |
216 | @@ -65,7 +65,6 @@ |
217 | input[type="color"], |
218 | select, |
219 | textarea { |
220 | - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); |
221 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); |
222 | border-radius:2px; |
223 | width:100%; |
224 | @@ -74,10 +73,6 @@ |
225 | display: block; |
226 | border: 1px solid #ccc; |
227 | font-weight:inherit; |
228 | - -webkit-transition: 0.3s linear border; |
229 | - -moz-transition: 0.3s linear border; |
230 | - -ms-transition: 0.3s linear border; |
231 | - -o-transition: 0.3s linear border; |
232 | transition: 0.3s linear border; |
233 | } |
234 | |
235 | |
236 | === modified file 'src/layout.css' |
237 | --- src/layout.css 2013-12-14 06:56:19 +0000 |
238 | +++ src/layout.css 2014-01-07 11:56:36 +0000 |
239 | @@ -94,7 +94,6 @@ |
240 | padding:20px; |
241 | margin:0 0 2em 0; |
242 | border-radius:12px; |
243 | - padding: 20px; |
244 | } |
245 | |
246 | .ues-box form { |
247 | |
248 | === modified file 'src/navigation.css' |
249 | --- src/navigation.css 2014-01-07 11:00:45 +0000 |
250 | +++ src/navigation.css 2014-01-07 11:56:36 +0000 |
251 | @@ -101,7 +101,6 @@ |
252 | display:block; |
253 | height:2px; |
254 | left:0; |
255 | - width:22px; |
256 | z-index:1000; |
257 | background-color:#f75216; |
258 | width:100%; |
259 | @@ -125,12 +124,10 @@ |
260 | |
261 | .ues-navbar-toggle.active span { |
262 | background-color:#dd4814; |
263 | - -webkit-transform: rotate(45deg); |
264 | transform: rotate(45deg); |
265 | } |
266 | .ues-navbar-toggle.active span:before { |
267 | background-color:white; |
268 | - -webkit-transform: rotate(90deg); |
269 | transform: rotate(90deg); |
270 | top:0; |
271 | left:0; |
272 | |
273 | === modified file 'test/index.html' |
274 | --- test/index.html 2013-12-14 07:28:45 +0000 |
275 | +++ test/index.html 2014-01-07 11:56:36 +0000 |
276 | @@ -6,7 +6,7 @@ |
277 | |
278 | <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> |
279 | |
280 | -<link href='//fonts.googleapis.com/css?family=Ubuntu:400,300,700' rel='stylesheet' type='text/css'> |
281 | +<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,300,700' rel='stylesheet' type='text/css'> |
282 | |
283 | <link rel="stylesheet" href="/css/ulysses.css"> |
284 | |
285 | @@ -34,6 +34,7 @@ |
286 | |
287 | <h2>Headline Styles</h2> |
288 | |
289 | +<div data-qa="headlines"> |
290 | <h1 class="ues-hdisplay">Display Headline</h1> |
291 | <h1 class="ues-hmain">Main Headline</h1> |
292 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
293 | @@ -41,9 +42,10 @@ |
294 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
295 | <h1 class="ues-hlight">Light Headline</h1> |
296 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
297 | +</div> |
298 | |
299 | <h2>Multiline Headlines</h2> |
300 | - <div style="width:320px"> |
301 | + <div style="width:320px" data-qa="multiline-headlines"> |
302 | <h1 class="ues-hdisplay">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1> |
303 | <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1> |
304 | <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2> |
305 | @@ -52,9 +54,9 @@ |
306 | |
307 | <h2>Block Content</h2> |
308 | |
309 | - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
310 | - <p>Reiciendis soluta ab, soluta molestiae nesciunt ipsum est quis debitis voluptas qui at sed quo? Praesentium voluptate voluptatum placeat ea molestiae doloribus deserunt?</p> |
311 | - <p>Exercitationem eum esse quos minus, maiores suscipit cupiditate delectus reprehenderit illo quidem distinctio esse nam aliquam fugit, reiciendis veritatis a expedita nisi deserunt rem repellat quos placeat illum, minima est iusto itaque iure? Odit facere possimus architecto sunt facilis voluptatibus eaque maiores necessitatibus, dolor deserunt est.</p> |
312 | + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
313 | + <p>Reiciendis soluta ab, soluta molestiae nesciunt ipsum est quis debitis voluptas qui at sed quo? Praesentium voluptate voluptatum placeat ea molestiae doloribus deserunt?</p> |
314 | + <p>Exercitationem eum esse quos minus, maiores suscipit cupiditate delectus reprehenderit illo quidem distinctio esse nam aliquam fugit, reiciendis veritatis a expedita nisi deserunt rem repellat quos placeat illum, minima est iusto itaque iure? Odit facere possimus architecto sunt facilis voluptatibus eaque maiores necessitatibus, dolor deserunt est.</p> |
315 | |
316 | |
317 | <h3>Lead body copy</h3> |
318 | @@ -117,57 +119,59 @@ |
319 | |
320 | <section> |
321 | <h1>Buttons</h1> |
322 | - <p> |
323 | - <button class=ues-button>Default button</button> |
324 | - <button class="ues-button ues-button-primary">Primary button</button> |
325 | - <button class="ues-button ues-button-tertiary">Tertiary button</button> |
326 | - </p> |
327 | - |
328 | - <p> |
329 | - <button class="ues-button">☃ <span>Change Payment Method</span></button> |
330 | - <button class="ues-button ues-button-primary">☃ <span>Checkout</span></button> |
331 | - </p> |
332 | - |
333 | - <p> |
334 | - <a class="ues-button" href="#">Link</a> |
335 | - <button class=ues-button type=button>Button</button> |
336 | - <input class=ues-button type=button value=Input> |
337 | - <input class=ues-button type=submit value=Submit> |
338 | - </p> |
339 | - |
340 | - <p> |
341 | - <button class="ues-button ues-button-large">Large Button</button> |
342 | - <button class=ues-button>Default Button</button> |
343 | - <button class="ues-button ues-button-small">Small Button</button> |
344 | - </p> |
345 | - |
346 | - <p><button class="ues-button ues-button-block">Default Block Button</button></p> |
347 | - <p><button class="ues-button ues-button-block ues-button-primary">Primary Block Button</button></p> |
348 | - |
349 | - <p> |
350 | - <div class="ues-button-group"> |
351 | - <button class="ues-button">Left</button> |
352 | - <button class="ues-button">Middle</button> |
353 | - <button class="ues-button">Right</button> |
354 | - </div> |
355 | - </p> |
356 | - |
357 | - <p> |
358 | - <div class="ues-button-toolbar"> |
359 | - <div class="ues-button-group"> |
360 | - <button class="ues-button">A</button> |
361 | - <button class="ues-button">B</button> |
362 | - <button class="ues-button">C</button> |
363 | - </div> |
364 | - <div class="ues-button-group"> |
365 | - <button class="ues-button">D</button> |
366 | - <button class="ues-button">E</button> |
367 | - </div> |
368 | - <div class="ues-button-group"> |
369 | - <button class="ues-button">F</button> |
370 | - </div> |
371 | - </div> |
372 | - </p> |
373 | + <div data-qa="buttons"> |
374 | + <p> |
375 | + <button class=ues-button data-qa="default-button">Default button</button> |
376 | + <button class="ues-button ues-button-primary" data-qa="primary-button">Primary button</button> |
377 | + <button class="ues-button ues-button-tertiary" data-qa="tertiary-button">Tertiary button</button> |
378 | + </p> |
379 | + |
380 | + <p> |
381 | + <button class="ues-button">☃ <span>Change Payment Method</span></button> |
382 | + <button class="ues-button ues-button-primary">☃ <span>Checkout</span></button> |
383 | + </p> |
384 | + |
385 | + <p> |
386 | + <a class="ues-button" href="#">Link</a> |
387 | + <button class=ues-button type=button>Button</button> |
388 | + <input class=ues-button type=button value=Input> |
389 | + <input class=ues-button type=submit value=Submit> |
390 | + </p> |
391 | + |
392 | + <p> |
393 | + <button class="ues-button ues-button-large">Large Button</button> |
394 | + <button class=ues-button>Default Button</button> |
395 | + <button class="ues-button ues-button-small">Small Button</button> |
396 | + </p> |
397 | + |
398 | + <p><button class="ues-button ues-button-block">Default Block Button</button></p> |
399 | + <p><button class="ues-button ues-button-block ues-button-primary">Primary Block Button</button></p> |
400 | + |
401 | + <p> |
402 | + <div class="ues-button-group" data-qa="button-group"> |
403 | + <button class="ues-button">Left</button> |
404 | + <button class="ues-button">Middle</button> |
405 | + <button class="ues-button">Right</button> |
406 | + </div> |
407 | + </p> |
408 | + |
409 | + <p> |
410 | + <div class="ues-button-toolbar" data-qa="button-toolbar"> |
411 | + <div class="ues-button-group"> |
412 | + <button class="ues-button">A</button> |
413 | + <button class="ues-button">B</button> |
414 | + <button class="ues-button">C</button> |
415 | + </div> |
416 | + <div class="ues-button-group"> |
417 | + <button class="ues-button">D</button> |
418 | + <button class="ues-button">E</button> |
419 | + </div> |
420 | + <div class="ues-button-group"> |
421 | + <button class="ues-button">F</button> |
422 | + </div> |
423 | + </div> |
424 | + </p> |
425 | + </div> |
426 | |
427 | <h1>Dropdowns</h1> |
428 |
Apart from mismatches and warnings, the solution looks sound.