desktop version phantom css tests

2017-02-16 12:58:22 +01:00 · 2017-02-16 12:58:22 +01:00 · e8b9b79536
parent a365458133
commit e8b9b79536
44 changed files with 77 additions and 2 deletions
--- a/package.json
+++ b/package.json
@ -3,7 +3,9 @@
  "version": "1.3.0",
  "description": "Gentelella Admin is a free to use Bootstrap admin template",
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "(npm start > /dev/null &) && (npm run casper:desktop)",
+    "casper:desktop": "casperjs test test/desktop.js",
+    "start": "http-server -a localhost -p 8000 -c-1 ./"
  },
  "repository": {
    "type": "git",
@ -32,11 +34,17 @@
  "homepage": "https://github.com/puikinsh/gentelella#readme",
  "devDependencies": {
    "browser-sync": "^2.12.10",
+    "casperjs": "^1.1.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-concat": "^2.6.0",
    "gulp-rename": "^1.2.2",
    "gulp-ruby-sass": "^2.0.6",
-    "gulp-uglify": "^1.5.3"
+    "gulp-uglify": "^1.5.3",
+    "http-server": "^0.9.0",
+    "lodash": "^4.17.4",
+    "phantomcss": "^1.1.5",
+    "phantomjs-prebuilt": "^2.1.4",
+    "resemblejs": "^2.2.2"
  }
 }
--- a/resemblejscontainer.html
+++ b/resemblejscontainer.html
@ -0,0 +1 @@
+<html><body>This blank HTML page is used for processing the images with Resemble.js</body></html>
--- a/test/desktop.js
+++ b/test/desktop.js
@ -0,0 +1,66 @@
+var phantomcss = require('phantomcss');
+
+// http://phantomjs.org/api/fs/method/list.html
+var fs = require('fs');
+var _ = require('lodash');
+
+casper.test.begin('Gentelella visual tests', function (test) {
+
+    phantomcss.init({
+        rebase: casper.cli.get("rebase"),
+        // SlimerJS needs explicit knowledge of this Casper, and lots of absolute paths
+        casper: casper,
+        libraryRoot: '',
+        screenshotRoot: './test/screenshots/desktop',
+        failedComparisonsRoot: './test/screenshots/desktop/failures',
+        addLabelToFailedImage: false
+    });
+
+    // casper.on('remote.message', function (msg) {
+    //     this.echo(msg);
+    // });
+    //
+    // casper.on('error', function (err) {
+    //     this.die("PhantomJS has errored: " + err);
+    // });
+    //
+    // casper.on('resource.error', function (err) {
+    //     casper.log('Resource load error: ' + err, 'warning');
+    // });
+
+    /*
+     The test scenario
+     */
+    casper.start('http://localhost:8000/production/');
+    casper.viewport(1920, 1080);
+
+    var pages = fs.list('./production');
+    pages = _.filter(pages, function (p) {
+        return _.includes(p, 'html');
+    });
+
+    pages.forEach(function (page) {
+        casper.thenOpen('http://localhost:8000/production/' + page, function () {
+            console.log('testing page: ' + page);
+            casper.wait(1000, function () {
+                phantomcss.screenshot('body', page.replace('.html', ''));
+            });
+        });
+    });
+
+    casper.thenOpen('http://localhost:8000/production/', function () {
+        casper.click('#menu_toggle');
+        casper.wait(1000, function () {
+            phantomcss.screenshot('body', 'index-small_menu');
+        });
+    });
+
+    casper.then(function () {
+        phantomcss.compareAll();
+    });
+
+    casper.run(function () {
+        phantomcss.getExitStatus(); // pass or fail?
+        casper.test.done();
+    });
+});
--- a/test/screenshots/desktop/calendar_0.png
+++ b/test/screenshots/desktop/calendar_0.png
--- a/test/screenshots/desktop/chartjs2_2.png
+++ b/test/screenshots/desktop/chartjs2_2.png
--- a/test/screenshots/desktop/chartjs_1.png
+++ b/test/screenshots/desktop/chartjs_1.png
--- a/test/screenshots/desktop/contacts_3.png
+++ b/test/screenshots/desktop/contacts_3.png
--- a/test/screenshots/desktop/e_commerce_4.png
+++ b/test/screenshots/desktop/e_commerce_4.png
--- a/test/screenshots/desktop/echarts_5.png
+++ b/test/screenshots/desktop/echarts_5.png
--- a/test/screenshots/desktop/fixed_footer_6.png
+++ b/test/screenshots/desktop/fixed_footer_6.png
--- a/test/screenshots/desktop/fixed_sidebar_7.png
+++ b/test/screenshots/desktop/fixed_sidebar_7.png
--- a/test/screenshots/desktop/form_8.png
+++ b/test/screenshots/desktop/form_8.png
--- a/test/screenshots/desktop/form_advanced_9.png
+++ b/test/screenshots/desktop/form_advanced_9.png
--- a/test/screenshots/desktop/form_buttons_10.png
+++ b/test/screenshots/desktop/form_buttons_10.png
--- a/test/screenshots/desktop/form_upload_11.png
+++ b/test/screenshots/desktop/form_upload_11.png
--- a/test/screenshots/desktop/form_validation_12.png
+++ b/test/screenshots/desktop/form_validation_12.png
--- a/test/screenshots/desktop/form_wizards_13.png
+++ b/test/screenshots/desktop/form_wizards_13.png
--- a/test/screenshots/desktop/general_elements_14.png
+++ b/test/screenshots/desktop/general_elements_14.png
--- a/test/screenshots/desktop/glyphicons_15.png
+++ b/test/screenshots/desktop/glyphicons_15.png
--- a/test/screenshots/desktop/icons_16.png
+++ b/test/screenshots/desktop/icons_16.png
--- a/test/screenshots/desktop/inbox_17.png
+++ b/test/screenshots/desktop/inbox_17.png
--- a/test/screenshots/desktop/index-small_menu_41.png
+++ b/test/screenshots/desktop/index-small_menu_41.png
--- a/test/screenshots/desktop/index2_19.png
+++ b/test/screenshots/desktop/index2_19.png
--- a/test/screenshots/desktop/index3_20.png
+++ b/test/screenshots/desktop/index3_20.png
--- a/test/screenshots/desktop/index_18.png
+++ b/test/screenshots/desktop/index_18.png
--- a/test/screenshots/desktop/invoice_21.png
+++ b/test/screenshots/desktop/invoice_21.png
--- a/test/screenshots/desktop/level2_22.png
+++ b/test/screenshots/desktop/level2_22.png
--- a/test/screenshots/desktop/map_24.png
+++ b/test/screenshots/desktop/map_24.png
--- a/test/screenshots/desktop/media_gallery_25.png
+++ b/test/screenshots/desktop/media_gallery_25.png
--- a/test/screenshots/desktop/morisjs_26.png
+++ b/test/screenshots/desktop/morisjs_26.png
--- a/test/screenshots/desktop/other_charts_27.png
+++ b/test/screenshots/desktop/other_charts_27.png
--- a/test/screenshots/desktop/page_403_28.png
+++ b/test/screenshots/desktop/page_403_28.png
--- a/test/screenshots/desktop/page_404_29.png
+++ b/test/screenshots/desktop/page_404_29.png
--- a/test/screenshots/desktop/page_500_30.png
+++ b/test/screenshots/desktop/page_500_30.png
--- a/test/screenshots/desktop/plain_page_31.png
+++ b/test/screenshots/desktop/plain_page_31.png
--- a/test/screenshots/desktop/pricing_tables_32.png
+++ b/test/screenshots/desktop/pricing_tables_32.png
--- a/test/screenshots/desktop/profile_33.png
+++ b/test/screenshots/desktop/profile_33.png
--- a/test/screenshots/desktop/project_detail_34.png
+++ b/test/screenshots/desktop/project_detail_34.png
--- a/test/screenshots/desktop/projects_35.png
+++ b/test/screenshots/desktop/projects_35.png
--- a/test/screenshots/desktop/tables_36.png
+++ b/test/screenshots/desktop/tables_36.png
--- a/test/screenshots/desktop/tables_dynamic_37.png
+++ b/test/screenshots/desktop/tables_dynamic_37.png
--- a/test/screenshots/desktop/typography_38.png
+++ b/test/screenshots/desktop/typography_38.png
--- a/test/screenshots/desktop/widgets_39.png
+++ b/test/screenshots/desktop/widgets_39.png
--- a/test/screenshots/desktop/xx_40.png
+++ b/test/screenshots/desktop/xx_40.png
				`@ -0,0 +1 @@`
				`<html><body>This blank HTML page is used for processing the images with Resemble.js</body></html>`