Switch to mocha/chai for tests with gulp-mocha-phantomjs
JSDom's getComputedStyle wasn't working.pull/111/head
Glen Cheney
8 years ago
parent
6adb041ba1
commit
cfa68c76de
File diff suppressed because one or more lines are too long
@ -0,0 +1,24 @@
|
||||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
const mochaPhantomJS = require('gulp-mocha-phantomjs');
|
||||
const config = require('../config');
|
||||
|
||||
module.exports = function () {
|
||||
return gulp.src('test/runner.html', {
|
||||
read: false,
|
||||
})
|
||||
.pipe(mochaPhantomJS({
|
||||
phantomjs: {
|
||||
useColors: true,
|
||||
},
|
||||
}))
|
||||
|
||||
// https://github.com/gulpjs/gulp/issues/259#issuecomment-61976830
|
||||
.on('error', function (err) {
|
||||
if (config.watch) {
|
||||
console.error(err.message);
|
||||
this.emit('end');
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -1,16 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
require('babel-register');
|
||||
var babelJest = require('babel-jest');
|
||||
var webpackAlias = require('jest-webpack-alias');
|
||||
|
||||
module.exports = {
|
||||
process: function (src, filename) {
|
||||
if (filename.indexOf('node_modules') === -1 && filename.match(/\.jsx?$/)) {
|
||||
src = babelJest.process(src, filename);
|
||||
src = webpackAlias.process(src, filename);
|
||||
}
|
||||
|
||||
return src;
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,31 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Mocha Tests</title>
|
||||
<link href="../node_modules/mocha/mocha.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="mocha"></div>
|
||||
|
||||
<!-- Polyfills -->
|
||||
<script src="../node_modules/es6-promise/dist/es6-promise.min.js"></script>
|
||||
<script>ES6Promise.polyfill();</script>
|
||||
|
||||
<!-- Testing Framework -->
|
||||
<script src="../node_modules/mocha/mocha.js"></script>
|
||||
<script src="../node_modules/chai/chai.js"></script>
|
||||
<script src="../node_modules/chai-dom/chai-dom.js"></script>
|
||||
|
||||
<!-- Source -->
|
||||
<script src="../dist/shuffle.js"></script>
|
||||
|
||||
<script>mocha.setup('bdd')</script>
|
||||
<script src="test.js"></script>
|
||||
|
||||
<script>
|
||||
mocha.checkLeaks();
|
||||
mocha.globals([]);
|
||||
mocha.run();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,288 @@
|
||||
/* globals describe, it, beforeEach, afterEach */
|
||||
/* jshint expr: true */
|
||||
|
||||
'use strict';
|
||||
|
||||
var expect = window.chai.expect;
|
||||
|
||||
describe('shuffle', function () {
|
||||
|
||||
var Shuffle = window.shuffle;
|
||||
var fixtures = {};
|
||||
var fixture;
|
||||
var instance;
|
||||
|
||||
function getFixture(id) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.onload = function () {
|
||||
resolve(xhr.responseText);
|
||||
};
|
||||
|
||||
xhr.onerror = reject;
|
||||
|
||||
xhr.open('GET', 'fixtures/' + id + '.html');
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
function appendFixture(id) {
|
||||
|
||||
function insert(content) {
|
||||
content = content.trim();
|
||||
var holder = document.createElement('div');
|
||||
holder.innerHTML = content;
|
||||
var element = holder.firstChild;
|
||||
document.body.appendChild(element);
|
||||
fixture = element;
|
||||
}
|
||||
|
||||
if (fixtures[id]) {
|
||||
insert(fixtures[id]);
|
||||
return Promise.resolve();
|
||||
} else {
|
||||
return getFixture(id).then(function (html) {
|
||||
fixtures[id] = html;
|
||||
insert(html);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function cleanup() {
|
||||
if (instance.element) {
|
||||
instance.destroy();
|
||||
}
|
||||
|
||||
if (fixture) {
|
||||
fixture.parentNode.removeChild(fixture);
|
||||
}
|
||||
|
||||
instance = null;
|
||||
fixture = null;
|
||||
}
|
||||
|
||||
function removeFixture(done) {
|
||||
if (instance.isInitialized) {
|
||||
cleanup();
|
||||
done();
|
||||
} else {
|
||||
instance.element.addEventListener(Shuffle.EventType.DONE, function onDone() {
|
||||
instance.element.removeEventListener(Shuffle.EventType.DONE, onDone);
|
||||
cleanup();
|
||||
done();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function once(element, eventType, fn) {
|
||||
var handler = function (e) {
|
||||
element.removeEventListener(eventType, handler);
|
||||
fn(e);
|
||||
};
|
||||
|
||||
element.addEventListener(eventType, handler);
|
||||
}
|
||||
|
||||
function id(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
|
||||
describe('regular fixture', function () {
|
||||
|
||||
beforeEach(function (done) {
|
||||
appendFixture('regular').then(done);
|
||||
});
|
||||
|
||||
afterEach(removeFixture);
|
||||
|
||||
it('should have default options', function (done) {
|
||||
instance = new Shuffle(fixture);
|
||||
expect(instance.items.length).to.equal(10);
|
||||
expect(instance.visibleItems).to.equal(10);
|
||||
expect(instance.options.group).to.equal('all');
|
||||
expect(instance.options.speed).to.equal(250);
|
||||
expect(instance.options.itemSelector).to.equal('*');
|
||||
expect(instance.options.sizer).to.equal(null);
|
||||
expect(instance.options.columnWidth).to.equal(0);
|
||||
expect(instance.options.gutterWidth).to.equal(0);
|
||||
expect(instance.options.delimeter).to.equal(null);
|
||||
expect(instance.options.initialSort).to.equal(null);
|
||||
expect(instance.options.throttleTime).to.equal(300);
|
||||
expect(instance.options.sequentialFadeDelay).to.equal(150);
|
||||
expect(instance.useSizer).to.equal(false);
|
||||
expect(instance.id).to.equal('shuffle_0');
|
||||
|
||||
expect(instance.isInitialized).to.be.false;
|
||||
instance.element.addEventListener(Shuffle.EventType.DONE, function onDone() {
|
||||
instance.element.removeEventListener(Shuffle.EventType.DONE, onDone);
|
||||
expect(instance.isInitialized).to.be.true;
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
it('should add classes and default styles', function () {
|
||||
instance = new Shuffle(fixture);
|
||||
expect(instance.element).to.have.class('shuffle');
|
||||
|
||||
var styles = window.getComputedStyle(instance.element, null);
|
||||
expect(styles.position).to.equal('relative');
|
||||
expect(styles.overflow).to.equal('hidden');
|
||||
expect(instance.containerWidth).not.to.equal(0);
|
||||
|
||||
instance.items.forEach(function (item) {
|
||||
expect(item.element).to.have.class('shuffle-item');
|
||||
expect(item.element).to.have.class('filtered');
|
||||
expect(item.element.style.opacity).to.be.defined;
|
||||
expect(item.element.style.position).to.equal('absolute');
|
||||
expect(item.element.style.visibility).to.equal('visible');
|
||||
expect(item.isVisible).to.equal(true);
|
||||
expect(item.scale).to.equal(Shuffle.ShuffleItem.Scale.VISIBLE);
|
||||
expect(item.point.x).to.be.defined;
|
||||
expect(item.point.y).to.be.defined;
|
||||
});
|
||||
});
|
||||
|
||||
it('should be 3 columns with gutters', function () {
|
||||
fixture.style.width = '1000px';
|
||||
|
||||
for (var i = 0; i < fixture.children.length; i++) {
|
||||
fixture.children[i].style.width = '300px';
|
||||
fixture.children[i].style.height = '150px';
|
||||
}
|
||||
|
||||
instance = new Shuffle(fixture, {
|
||||
columnWidth: 300,
|
||||
gutterWidth: 50,
|
||||
});
|
||||
|
||||
expect(instance.colWidth).to.equal(350);
|
||||
expect(instance.cols).to.equal(3);
|
||||
expect(instance.positions).to.deep.equal([600, 450, 450]);
|
||||
});
|
||||
|
||||
it('can have a function for columns and gutters', function () {
|
||||
fixture.style.width = '1000px';
|
||||
|
||||
for (var i = 0; i < fixture.children.length; i++) {
|
||||
fixture.children[i].style.width = '300px';
|
||||
fixture.children[i].style.height = '150px';
|
||||
}
|
||||
|
||||
instance = new Shuffle(fixture, {
|
||||
columnWidth: function (containerWidth) {
|
||||
expect(containerWidth).to.equal(1000);
|
||||
return 300;
|
||||
},
|
||||
|
||||
gutterWidth: function () {
|
||||
return 50;
|
||||
},
|
||||
});
|
||||
|
||||
expect(instance._getGutterSize(1000)).to.equal(50);
|
||||
expect(instance._getColumnSize(1000, 50)).to.equal(350);
|
||||
expect(instance.colWidth).to.equal(350);
|
||||
expect(instance.cols).to.equal(3);
|
||||
expect(instance.positions).to.deep.equal([600, 450, 450]);
|
||||
});
|
||||
|
||||
it('can have a function for columns/gutters and span multiple columns', function () {
|
||||
fixture.style.width = '1200px';
|
||||
|
||||
for (var i = 0; i < fixture.children.length; i++) {
|
||||
fixture.children[i].style.width = '300px';
|
||||
fixture.children[i].style.height = '10px';
|
||||
}
|
||||
|
||||
fixture.children[1].style.width = '600px';
|
||||
fixture.children[5].style.width = '600px';
|
||||
fixture.children[6].style.width = '900px';
|
||||
|
||||
instance = new Shuffle(fixture, {
|
||||
columnWidth: function (containerWidth) {
|
||||
expect(containerWidth).to.equal(1200);
|
||||
return 300;
|
||||
},
|
||||
|
||||
gutterWidth: function () {
|
||||
return 0;
|
||||
},
|
||||
});
|
||||
|
||||
expect(instance._getGutterSize(1200)).to.equal(0);
|
||||
expect(instance._getColumnSize(1200, 0)).to.equal(300);
|
||||
expect(instance.colWidth).to.equal(300);
|
||||
expect(instance.cols).to.equal(4);
|
||||
expect(instance.positions).to.deep.equal([40, 40, 30, 30]);
|
||||
});
|
||||
|
||||
/*
|
||||
it('can filter by the data attribute', function (done) {
|
||||
console.log('new');
|
||||
instance = new Shuffle(fixture, {
|
||||
speed: 0,
|
||||
});
|
||||
|
||||
function first() {
|
||||
console.log('1');
|
||||
once(fixture, Shuffle.EventType.LAYOUT, second);
|
||||
console.log('filter. wait.');
|
||||
instance.filter('design');
|
||||
}
|
||||
|
||||
function second() {
|
||||
console.log('2');
|
||||
expect(instance.visibleItems).to.equal(3);
|
||||
var concealed = [3, 4, 5, 6, 7, 8, 10].map(function (num) {
|
||||
return id('item' + num);
|
||||
});
|
||||
|
||||
var filtered = [1, 2, 9].map(function (num) {
|
||||
return id('item' + num);
|
||||
});
|
||||
|
||||
concealed.forEach(function (element) {
|
||||
expect(element).to.have.class(Shuffle.ClassName.CONCEALED);
|
||||
expect(element.style.visibility).to.equal('hidden');
|
||||
});
|
||||
|
||||
filtered.forEach(function (element) {
|
||||
expect(element).to.have.class(Shuffle.ClassName.FILTERED);
|
||||
expect(element.style.visibility).to.equal('visible');
|
||||
});
|
||||
|
||||
once(fixture, Shuffle.EventType.LAYOUT, third);
|
||||
|
||||
// Filter by green.
|
||||
instance.filter('green');
|
||||
}
|
||||
|
||||
function third() {
|
||||
console.log('3');
|
||||
expect(instance.visibleItems).to.equal(2);
|
||||
var concealed = [1, 2, 5, 6, 7, 8, 9, 10].map(function (num) {
|
||||
return id('item' + num);
|
||||
});
|
||||
|
||||
var filtered = [3, 4].map(function (num) {
|
||||
return id('item' + num);
|
||||
});
|
||||
|
||||
concealed.forEach(function (element) {
|
||||
expect(element).to.have.class(Shuffle.ClassName.CONCEALED);
|
||||
expect(element.style.visibility).to.equal('hidden');
|
||||
});
|
||||
|
||||
filtered.forEach(function (element) {
|
||||
expect(element).to.have.class(Shuffle.ClassName.FILTERED);
|
||||
expect(element.style.visibility).to.equal('visible');
|
||||
});
|
||||
|
||||
done();
|
||||
}
|
||||
|
||||
once(fixture, Shuffle.EventType.DONE, first);
|
||||
});
|
||||
*/
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue