e2e screenshots gallery
Juanfran
parent
bc172f6d80
commit
1d56fe6fdc
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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")
|
||||
|
|
@ -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;
|
||||
});
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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)) {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue