From 1d56fe6fdc4ce47afb7641c15fddf01cd393541a Mon Sep 17 00:00:00 2001
From: Juanfran <juanfran.alcantara@kaleidos.net>
Date: Mon, 27 Jul 2015 11:26:58 +0200
Subject: [PATCH] e2e screenshots gallery

---
 e2e/full/taskboard.e2e.js       |  12 ++--
 e2e/gallery/gallery-front.js    | 106 ++++++++++++++++++++++++++++++++
 e2e/gallery/gallery.css         |  36 +++++++++++
 e2e/gallery/gallery.jade        |  52 ++++++++++++++++
 e2e/gallery/index.js            |  46 ++++++++++++++
 e2e/helpers/taskboard-helper.js |   8 +++
 e2e/utils/common.js             |   5 +-
 package.json                    |   8 ++-
 8 files changed, 264 insertions(+), 9 deletions(-)
 create mode 100644 e2e/gallery/gallery-front.js
 create mode 100644 e2e/gallery/gallery.css
 create mode 100644 e2e/gallery/gallery.jade
 create mode 100644 e2e/gallery/index.js

diff --git a/e2e/full/taskboard.e2e.js b/e2e/full/taskboard.e2e.js
index 8cb9144a..5f5e8ce9 100644
--- a/e2e/full/taskboard.e2e.js
+++ b/e2e/full/taskboard.e2e.js
@@ -53,7 +53,7 @@ describe('taskboard', function() {
             browser.actions().sendKeys(protractor.Key.ENTER).perform();
 
             createTaskLightbox.blocked().click();
-            createTaskLightbox.blockedNote().sendKeys(formFields.blockedNote);
+            await createTaskLightbox.blockedNote().sendKeys(formFields.blockedNote);
 
             utils.common.takeScreenshot('taskboard', 'create-task-filled');
         });
@@ -96,7 +96,7 @@ describe('taskboard', function() {
             formFields.blockedNote = 'blocked note';
 
             createTaskLightbox.subject().sendKeys(formFields.subject);
-            createTaskLightbox.description().sendKeys(formFields.description);
+            await createTaskLightbox.description().sendKeys(formFields.description);
 
             utils.common.takeScreenshot('taskboard', 'edit-task-filled');
         });
@@ -150,7 +150,7 @@ describe('taskboard', function() {
 
     describe('folds', function() {
         it('fold row', async function() {
-            taskboardHelper.foldRow(0);
+            await taskboardHelper.foldRow(0);
 
             utils.common.takeScreenshot('taskboard', 'fold-row');
 
@@ -168,7 +168,7 @@ describe('taskboard', function() {
         });
 
         it('fold column', async function() {
-            taskboardHelper.foldColumn(0);
+            await taskboardHelper.foldColumn(0);
 
             utils.common.takeScreenshot('taskboard', 'fold-column');
 
@@ -186,8 +186,8 @@ describe('taskboard', function() {
         });
 
         it('fold row and column', async function() {
-            taskboardHelper.foldRow(0);
-            taskboardHelper.foldColumn(0);
+            await taskboardHelper.foldRow(0);
+            await taskboardHelper.foldColumn(0);
 
             utils.common.takeScreenshot('taskboard', 'fold-column-row');
 
diff --git a/e2e/gallery/gallery-front.js b/e2e/gallery/gallery-front.js
new file mode 100644
index 00000000..b36fbf9b
--- /dev/null
+++ b/e2e/gallery/gallery-front.js
@@ -0,0 +1,106 @@
+var serverData;
+
+function alphabetical(a, b) {
+    var A = a.toLowerCase();
+    var B = b.toLowerCase();
+
+    if (A < B){
+        return -1;
+    }else if (A > B){
+        return  1;
+    }else{
+        return 0;
+    }
+}
+
+$.get('get').then(function(data) {
+    serverData = data;
+
+    printSections(serverData);
+});
+
+$('.browsers .browser').click(function() {
+    $(this).toggleClass('active');
+});
+
+$('.browsers .search').click(function() {
+    var data = serverData;
+
+    // filter by browser
+    var activeBrowsers = [];
+
+    $('.browsers .active').each(function() {
+        activeBrowsers.push($(this).data('browser'));
+    });
+
+    data = data.filter(function(item) {
+        return activeBrowsers.indexOf(item.browser) !== -1;
+    });
+
+    // filter by section
+    var section = $('.browsers select').val();
+
+    if (section !== 'all') {
+        data = data.filter(function(item) {
+            return item.section === section;
+        });
+    }
+
+    if(!data.length) {
+        alert('no images found');
+        return;
+    }
+
+    data.sort(function(a, b) {
+        return alphabetical(a.title, b.title);
+    });
+
+    initGallery(data);
+});
+
+function printSections(images) {
+    var sections = [];
+
+    var select = $('.browsers select');
+    var options = [];
+
+    var imagesSections = images.reduce(function(sections, image) {
+        if (sections.indexOf(image.section) === -1) {
+            sections.push(image.section);
+        }
+
+        return sections;
+    }, []);
+
+    imagesSections.forEach(function(section) {
+        var option = $('<option>')
+                .val(section)
+                .text(section);
+
+        select.append(option);
+    });
+}
+
+function initGallery(images) {
+    var pswpElement = document.querySelectorAll('.pswp')[0];
+
+    var items = [];
+
+    for(var i = 0; i < images.length; i++) {
+        items.push({
+            title: images[i].title + ' - ' + images[i].section +  ' - ' + images[i].browser,
+            src: images[i].src,
+            w: images[i].w,
+            h: images[i].h
+        });
+    }
+
+    var options = {
+        index: 0,
+        closeOnScroll: false
+    };
+
+    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
+
+    gallery.init();
+}
diff --git a/e2e/gallery/gallery.css b/e2e/gallery/gallery.css
new file mode 100644
index 00000000..67121350
--- /dev/null
+++ b/e2e/gallery/gallery.css
@@ -0,0 +1,36 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-size: 14px;
+  color: #333;
+}
+
+.browsers {
+    display: flex;
+    justify-content: space-between;
+    margin: 10px auto;
+    width: 400px;
+}
+
+.browsers .browser {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 5px 15px;
+}
+
+.browsers .search {
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 5px 15px;
+    background-color: #009688;
+    color: #fff;
+}
+
+.browsers .active {
+  background-color: #e6e6e6;
+}
\ No newline at end of file
diff --git a/e2e/gallery/gallery.jade b/e2e/gallery/gallery.jade
new file mode 100644
index 00000000..f53b2555
--- /dev/null
+++ b/e2e/gallery/gallery.jade
@@ -0,0 +1,52 @@
+html
+  head
+    title E2E test gallery
+
+    link(rel="stylesheet", href="photoswipe/photoswipe.css")
+    link(rel="stylesheet", href="photoswipe/default-skin/default-skin.css")
+    link(rel="stylesheet", href="e2e/gallery/gallery.css")
+  body
+    div.browsers
+      div.browser.active(data-browser="ie") IE
+      div.browser.active(data-browser="firefox") Firefox
+      div.browser.active(data-browser="chrome") Chrome
+
+      select
+        option(value="all") ---section---
+
+      div.search Search
+
+    div.pswp(tabindex="-1", role="dialog", aria-hidden="true")
+      div.pswp__bg
+      div.pswp__scroll-wrap
+        div.pswp__container
+          div.pswp__item
+          div.pswp__item
+          div.pswp__item
+
+        div.pswp__ui.pswp__ui--hidden
+            div.pswp__top-bar
+                div.pswp__counter
+                button.pswp__button.pswp__button--close(title="Close (Esc)")
+                button.pswp__button.pswp__button--share(title="Share")
+                button.pswp__button.pswp__button--fs(title="Toggle fullscreen")
+                button.pswp__button.pswp__button--zoom(title="Zoom in/out")
+
+                div.pswp__preloader
+                    div.pswp__preloader__icn
+                      div.pswp__preloader__cut
+                        div.pswp__preloader__donut
+
+            div.pswp__share-modal.pswp__share-modal--hidden.pswp__single-tap
+                div.pswp__share-tooltip
+
+            button.pswp__button.pswp__button--arrow--left(title="Previous (arrow left)")
+            button.pswp__button.pswp__button--arrow--right(title="Next (arrow right)")
+
+            div.pswp__caption
+                div.pswp__caption__center
+
+  script(src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js")
+  script(src="/photoswipe/photoswipe.min.js")
+  script(src="/photoswipe/photoswipe-ui-default.min.js")
+  script(src="/e2e/gallery/gallery-front.js")
diff --git a/e2e/gallery/index.js b/e2e/gallery/index.js
new file mode 100644
index 00000000..d66c72b0
--- /dev/null
+++ b/e2e/gallery/index.js
@@ -0,0 +1,46 @@
+var express = require('express');
+var glob = require('glob');
+var sizeOf = require('image-size');
+
+var app = express();
+
+app.set('views', './e2e/gallery');
+app.set('view engine', 'jade');
+app.use('/photoswipe', express.static('node_modules/photoswipe/dist'));
+app.use('/e2e', express.static('./e2e/'));
+
+var mapFiles = function(file) {
+    var filePath = file.split('/');
+
+    var title = filePath[filePath.length - 1].split('.')[0];
+    var section = filePath[filePath.length - 2];
+    var browser = filePath[2];
+
+    var dimensions = sizeOf(file);
+
+    return {
+        title: title,
+        section: section,
+        browser: browser,
+        src: file,
+        w: dimensions.width,
+        h: dimensions.height
+    };
+};
+
+app.get('/get', function (req, res) {
+    glob('e2e/screenshots/**/*.png', {}, function (er, files) {
+        var filesMap = files.map(mapFiles);
+
+        res.json(filesMap);
+    });
+});
+
+app.get('/', function (req, res) {
+    res.render('gallery', { title: 'Express' });
+});
+
+var server = app.listen(3000, function () {
+  var host = server.address().address;
+  var port = server.address().port;
+});
diff --git a/e2e/helpers/taskboard-helper.js b/e2e/helpers/taskboard-helper.js
index 5f033141..7183453a 100644
--- a/e2e/helpers/taskboard-helper.js
+++ b/e2e/helpers/taskboard-helper.js
@@ -32,24 +32,32 @@ helper.foldRow = function(row) {
     let icon = $$('.icon-vfold.vfold').get(row);
 
     icon.click();
+
+    return utils.common.waitRequestAnimationFrame();
 };
 
 helper.unFoldRow = function(row) {
     let icon = $$('.icon-vunfold.vunfold').get(row);
 
     icon.click();
+
+    return utils.common.waitRequestAnimationFrame();
 };
 
 helper.foldColumn = function(row) {
     let icon = $$('.icon-vfold.hfold').get(row);
 
     icon.click();
+
+    return utils.common.waitRequestAnimationFrame();
 };
 
 helper.unFoldColumn = function(row) {
     let icon = $$('.icon-vunfold.hunfold').get(row);
 
     icon.click();
+
+    return utils.common.waitRequestAnimationFrame();
 };
 
 helper.editTask = function(row, column, task) {
diff --git a/e2e/utils/common.js b/e2e/utils/common.js
index 838e1e24..588f4381 100644
--- a/e2e/utils/common.js
+++ b/e2e/utils/common.js
@@ -20,7 +20,10 @@ common.waitLoader = function () {
 };
 
 common.takeScreenshot = async function (section, filename) {
-    let screenshotsFolder = __dirname + "/../screenshots/";
+    let cap = await browser.getCapabilities();
+    let browserName = cap.caps_.browserName;
+
+    let screenshotsFolder = __dirname + "/../screenshots/" + browserName + "/";
     let dir = screenshotsFolder + section + "/";
 
     if (!fs.existsSync(screenshotsFolder)) {
diff --git a/package.json b/package.json
index c1620063..2e8e029a 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "coffee-script": "^1.9.1",
     "del": "^1.1.1",
     "express": "^4.12.0",
-    "glob": "^5.0.3",
+    "glob": "^5.0.14",
     "gulp": "^3.8.11",
     "gulp-angular-templatecache": "^1.5.0",
     "gulp-autoprefixer": "^2.1.0",
@@ -57,7 +57,9 @@
     "gulp-template": "^3.0.0",
     "gulp-uglify": "~1.1.0",
     "gulp-wrap": "^0.11.0",
+    "image-size": "^0.3.5",
     "inquirer": "^0.8.2",
+    "jade": "^1.11.0",
     "karma": "^0.12.31",
     "karma-chai-plugins": "^0.6.0",
     "karma-chrome-launcher": "^0.1.7",
@@ -67,11 +69,13 @@
     "minimist": "^1.1.1",
     "mocha": "^2.2.4",
     "node-uuid": "^1.4.3",
+    "photoswipe": "^4.1.0",
     "pre-commit": "^1.0.5",
     "readable-stream": "~1.0.33",
     "run-sequence": "^1.0.2",
     "sinon": "^1.14.1",
-    "through2": "~0.6.3"
+    "through2": "~0.6.3",
+    "vinyl-fs": "^1.0.0"
   },
   "pre-commit": [
     "scss-lint"