Merge lp:~stephen-stewart/ulysses/css-regression-testing into lp:ulysses

[Stephen Stewart]

regression tests

Tidy grunt tasks.

Add regression testing via PhantomCSS.

[lp:~stephen-stewart/ulysses/css-regression-testing]

22. By Stephen Stewart on 2014-01-07

fix lint errors

[Jonas G. Drange (jonas-drange)]

Apart from mismatches and warnings, the solution looks sound.

review: Approve

=== modified file '.bzrignore'
--- .bzrignore	2014-01-01 17:08:09 +0000
+++ .bzrignore	2014-01-07 11:56:36 +0000
@@ -3,3 +3,4 @@
 node_modules/
 .sass-cache
 public/*
+results/
 
=== modified file '.csslintrc'
--- .csslintrc	2014-01-07 10:48:03 +0000
+++ .csslintrc	2014-01-07 11:56:36 +0000
@@ -6,6 +6,7 @@
     "display-property-grouping": false,
     "duplicate-background-images": false,
     "empty-rules": false,
+    "fallback-colors": false,
     "floats": false,
     "font-faces": false,
     "font-sizes": false,
 
=== modified file 'Gruntfile.js'
--- Gruntfile.js	2014-01-07 11:00:45 +0000
+++ Gruntfile.js	2014-01-07 11:56:36 +0000
@@ -13,7 +13,7 @@
             },
 
             src: {
-                src: 'src/*.scss'
+                src: 'src/*.css'
             }
         },
 
@@ -65,8 +65,7 @@
                 options: {
                     port: 9001,
                     hostname: '*',
-                    base: 'test',
-                    keepalive: true
+                    base: 'test'
                 }
             }
         },
@@ -84,13 +83,20 @@
                     ['rework.prefix', 'border-radius'],
                     ['rework.prefix', 'box-shadow'],
                     ['rework.prefix', 'animation'],
+                    ['rework.prefix', 'transition'],
                     ['rework.prefixValue', 'linear-gradient']
                 ],
                 vendors: ['-o-', '-ms-', '-moz-', '-webkit-']
             }
+        },
+
+        phantomcss: {
+            ulysses: {
+                src: [
+                    'config/phantomcss-tests.js'
+                ]
+            },
         }
-
-        // TODO a release task for bower package
     });
 
     // configure csslint to only run on changed file
@@ -108,14 +114,16 @@
     grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-contrib-connect');
     grunt.loadNpmTasks('grunt-rework');
+    grunt.loadNpmTasks('grunt-phantomcss');
 
-    grunt.registerTask('default',['build']);
-    grunt.registerTask('test', ['csslint']);
+    grunt.registerTask('default',['run']);
+    grunt.registerTask('test', ['build', 'connect', 'phantomcss']);
+    grunt.registerTask('run', ['build', 'connect', 'watch']);
     grunt.registerTask('build', [
                        'clean',
                        'rework',
+                       'csslint',
                        'concat',
                        'cssmin'
     ]);
-    grunt.registerTask('server', ['build', 'connect']);
 }
 
=== modified file 'README.md'
--- README.md	2013-12-14 07:13:35 +0000
+++ README.md	2014-01-07 11:56:36 +0000
@@ -21,9 +21,17 @@
 
 ''''
 
-To run a server showing the test page:
-
-''''
-grunt server
+Default grunt task ('run') will start a server on localhost and a watch task to
+build and lint any changed files:
+
+''''
+grunt [run]
+
+''''
+
+Testing
+
+''''
+grunt test
 
 ''''
 
=== added directory 'config'
=== added file 'config/phantomcss-tests.js'
--- config/phantomcss-tests.js	1970-01-01 00:00:00 +0000
+++ config/phantomcss-tests.js	2014-01-07 11:56:36 +0000
@@ -0,0 +1,50 @@
+/**
+casper.test.begin('test buttons', 1, function suite(test) {
+    casper.start( 'http://0.0.0.0:9001/index.html' );
+    casper.viewport(1024, 768);
+
+    casper.then(function(){
+        phantomcss.screenshot('[data-qa="buttons"]', 'Buttons');
+    });
+
+    casper.then( function(){
+        phantomcss.compareAll();
+    });
+
+    casper.then( function(){
+        //phantomcss.compareMatched('Buttons');
+        phantomcss.compareAll();
+    });
+
+    casper.run(function(){
+        console.log('\nTHE END.');
+        test.done();
+        phantom.exit(phantomcss.getExitStatus());
+    });
+});
+**/
+
+
+casper.start( 'http://0.0.0.0:9001/index.html' );
+casper.viewport(1024, 768);
+
+casper.then(function(){
+    phantomcss.screenshot('[data-qa="default-button"]', 'Default Button');
+    phantomcss.screenshot('[data-qa="primary-button"]', 'Primary Button');
+    phantomcss.screenshot('[data-qa="tertiary-button"]', 'Tertiary Button');
+    phantomcss.screenshot('[data-qa="button-group"]', 'Button Group');
+    phantomcss.screenshot('[data-qa="button-toolbar"]', 'Button Toolbar');
+});
+
+casper.then(function(){
+    phantomcss.screenshot('[data-qa="headlines"]', 'Headlines');
+});
+
+casper.then( function(){
+    phantomcss.compareAll();
+});
+
+casper.run(function(){
+    console.log('\nTHE END.');
+    phantom.exit(phantomcss.getExitStatus());
+});
 
=== modified file 'package.json'
--- package.json	2014-01-01 17:08:09 +0000
+++ package.json	2014-01-07 11:56:36 +0000
@@ -28,6 +28,8 @@
     "grunt-contrib-connect": "~0.5.0",
     "grunt-contrib-compress": "~0.5.3",
     "grunt-contrib-copy": "~0.4.1",
-    "bower": "~1.2.8"
+    "bower": "~1.2.8",
+    "phantomjs": "~1.9.2-6",
+    "grunt-phantomcss": "~0.2.0"
   }
 }
 
=== added directory 'screenshots'
=== added file 'screenshots/Button Group_3.png'
 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
=== added file 'screenshots/Button Toolbar_4.png'
 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
=== added file 'screenshots/Buttons_0.png'
 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
=== added file 'screenshots/Default Button_0.png'
 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
=== added file 'screenshots/Headlines_1.png'
 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
=== added file 'screenshots/Headlines_5.png'
 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
=== added file 'screenshots/Primary Button_1.png'
 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
=== added file 'screenshots/Tertiary Button_2.png'
 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
=== modified file 'src/dropdowns.css'
--- src/dropdowns.css	2013-12-14 07:28:45 +0000
+++ src/dropdowns.css	2014-01-07 11:56:36 +0000
@@ -18,7 +18,6 @@
     border-radius:2px;
     background-clip: padding-box;
     background-color:#fff;
-    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
     box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1);
 }
 
 
=== modified file 'src/forms.css'
--- src/forms.css	2014-01-01 16:10:32 +0000
+++ src/forms.css	2014-01-07 11:56:36 +0000
@@ -65,7 +65,6 @@
 input[type="color"],
 select,
 textarea {
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     border-radius:2px;
     width:100%;
@@ -74,10 +73,6 @@
     display: block;
     border: 1px solid #ccc;
     font-weight:inherit;
-    -webkit-transition: 0.3s linear border;
-    -moz-transition: 0.3s linear border;
-    -ms-transition: 0.3s linear border;
-    -o-transition: 0.3s linear border;
     transition: 0.3s linear border;
 }
 
 
=== modified file 'src/layout.css'
--- src/layout.css	2013-12-14 06:56:19 +0000
+++ src/layout.css	2014-01-07 11:56:36 +0000
@@ -94,7 +94,6 @@
     padding:20px;
     margin:0 0 2em 0;
     border-radius:12px;
-    padding: 20px;
 }
 
 .ues-box form {
 
=== modified file 'src/navigation.css'
--- src/navigation.css	2014-01-07 11:00:45 +0000
+++ src/navigation.css	2014-01-07 11:56:36 +0000
@@ -101,7 +101,6 @@
     display:block;
     height:2px;
     left:0;
-    width:22px;
     z-index:1000;
     background-color:#f75216;
     width:100%;
@@ -125,12 +124,10 @@
 
 .ues-navbar-toggle.active span {
     background-color:#dd4814;
-    -webkit-transform:  rotate(45deg);
     transform:  rotate(45deg);
 }
 .ues-navbar-toggle.active span:before {
     background-color:white;
-    -webkit-transform:  rotate(90deg);
     transform:  rotate(90deg);
     top:0;
     left:0;
 
=== modified file 'test/index.html'
--- test/index.html	2013-12-14 07:28:45 +0000
+++ test/index.html	2014-01-07 11:56:36 +0000
@@ -6,7 +6,7 @@
 
 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
 
-<link href='//fonts.googleapis.com/css?family=Ubuntu:400,300,700' rel='stylesheet' type='text/css'>
+<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,300,700' rel='stylesheet' type='text/css'>
 
 <link rel="stylesheet" href="/css/ulysses.css">
 
@@ -34,6 +34,7 @@
 
   <h2>Headline Styles</h2>
 
+<div data-qa="headlines">
   <h1 class="ues-hdisplay">Display Headline</h1>
   <h1 class="ues-hmain">Main Headline</h1>
   <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>
@@ -41,9 +42,10 @@
   <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>
   <h1 class="ues-hlight">Light Headline</h1>
   <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>
+</div>
 
   <h2>Multiline Headlines</h2>
-  <div style="width:320px">
+  <div style="width:320px" data-qa="multiline-headlines">
     <h1 class="ues-hdisplay">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
     <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
     <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
@@ -52,9 +54,9 @@
 
   <h2>Block Content</h2>
 
-  <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>
-  <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>
-  <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>
+    <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>
+    <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>
+    <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>
 
 
   <h3>Lead body copy</h3>
@@ -117,57 +119,59 @@
 
 <section>
   <h1>Buttons</h1>
-  <p>
-  <button class=ues-button>Default button</button>
-  <button class="ues-button ues-button-primary">Primary button</button>
-  <button class="ues-button ues-button-tertiary">Tertiary button</button>
-  </p>
-
-  <p>
-  <button class="ues-button">&#9731; <span>Change Payment Method</span></button>
-  <button class="ues-button ues-button-primary">&#9731; <span>Checkout</span></button>
-  </p>
-
-  <p>
-  <a class="ues-button" href="#">Link</a>
-  <button class=ues-button type=button>Button</button>
-  <input class=ues-button type=button value=Input>
-  <input class=ues-button type=submit value=Submit>
-  </p>
-
-  <p>
-  <button class="ues-button ues-button-large">Large Button</button>
-  <button class=ues-button>Default Button</button>
-  <button class="ues-button ues-button-small">Small Button</button>
-  </p>
-
-  <p><button class="ues-button ues-button-block">Default Block Button</button></p>
-  <p><button class="ues-button ues-button-block ues-button-primary">Primary Block Button</button></p>
-
-  <p>
-  <div class="ues-button-group">
-    <button class="ues-button">Left</button>
-    <button class="ues-button">Middle</button>
-    <button class="ues-button">Right</button>
-  </div>
-  </p>
-
-  <p>
-  <div class="ues-button-toolbar">
-    <div class="ues-button-group">
-      <button class="ues-button">A</button>
-      <button class="ues-button">B</button>
-      <button class="ues-button">C</button>
-    </div>
-    <div class="ues-button-group">
-      <button class="ues-button">D</button>
-      <button class="ues-button">E</button>
-    </div>
-    <div class="ues-button-group">
-      <button class="ues-button">F</button>
-    </div>
-  </div>
-  </p>
+  <div data-qa="buttons">
+    <p>
+    <button class=ues-button data-qa="default-button">Default button</button>
+    <button class="ues-button ues-button-primary" data-qa="primary-button">Primary button</button>
+    <button class="ues-button ues-button-tertiary" data-qa="tertiary-button">Tertiary button</button>
+    </p>
+
+    <p>
+    <button class="ues-button">&#9731; <span>Change Payment Method</span></button>
+    <button class="ues-button ues-button-primary">&#9731; <span>Checkout</span></button>
+    </p>
+
+    <p>
+    <a class="ues-button" href="#">Link</a>
+    <button class=ues-button type=button>Button</button>
+    <input class=ues-button type=button value=Input>
+    <input class=ues-button type=submit value=Submit>
+    </p>
+
+    <p>
+    <button class="ues-button ues-button-large">Large Button</button>
+    <button class=ues-button>Default Button</button>
+    <button class="ues-button ues-button-small">Small Button</button>
+    </p>
+
+    <p><button class="ues-button ues-button-block">Default Block Button</button></p>
+    <p><button class="ues-button ues-button-block ues-button-primary">Primary Block Button</button></p>
+
+    <p>
+    <div class="ues-button-group" data-qa="button-group">
+      <button class="ues-button">Left</button>
+      <button class="ues-button">Middle</button>
+      <button class="ues-button">Right</button>
+    </div>
+    </p>
+
+    <p>
+    <div class="ues-button-toolbar" data-qa="button-toolbar">
+      <div class="ues-button-group">
+        <button class="ues-button">A</button>
+        <button class="ues-button">B</button>
+        <button class="ues-button">C</button>
+      </div>
+      <div class="ues-button-group">
+        <button class="ues-button">D</button>
+        <button class="ues-button">E</button>
+      </div>
+      <div class="ues-button-group">
+        <button class="ues-button">F</button>
+      </div>
+    </div>
+    </p>
+  </div>
 
   <h1>Dropdowns</h1>