Adding qunit test framework and first set of basic tests

Some changes were cherry-picked from henrikingo/impress.js#1

Closes gh-510. Closes henrikingo/impress.js#1.
This commit is contained in:
Henrik Ingo
2016-04-30 13:03:58 +10:00
committed by Fagner Brack
parent d489ea7295
commit f54cd8fab1
4 changed files with 4638 additions and 0 deletions

23
test/core_tests.html Normal file
View File

@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Core Tests</title>
<link rel="stylesheet" href="qunit/qunit.css">
</head>
<body>
<div id="impress">
<div class="step" data-x="-1000" data-y="0">First slide</div>
<div class="step" data-x="-800" data-y="0">Second slide</div>
<div class="step" data-x="-600" data-y="0">Third slide</div>
<div class="step" data-x="-400" data-y="0">Fourth slide</div>
</div>
<div id="qunit"></div>
<script src="../js/impress.js"></script>
<script src="qunit/qunit.js"></script>
<script src="core_tests.js"></script>
</body>
</html>

156
test/core_tests.js Normal file
View File

@@ -0,0 +1,156 @@
(function() {
var registerEventListener = function( target, eventType, callback ) {
target.addEventListener( eventType, callback );
return function removeRegisteredEventListener() {
target.removeEventListener( eventType, callback );
};
};
QUnit.begin(function() {
impress().init();
});
QUnit.module( "Initialization" );
QUnit.test( "Global Scope", function( assert ) {
assert.expect( 1 );
assert.ok( impress, "impress declared in global scope" );
});
QUnit.test( "Multiple API instantiation", function( assert ) {
assert.expect( 0 );
impress().init();
});
QUnit.test( "Support Markup", function( assert ) {
assert.expect( 4 );
var impressNotSupported = document.body.classList.contains( "impress-not-supported" );
var impressSupported = document.body.classList.contains( "impress-supported" );
assert.ok( impressSupported, "Have class .impress-supported" );
assert.notOk( impressNotSupported, "Don't have class .impress-not-supported" );
var impressDisabled = document.body.classList.contains( "impress-disabled" );
var impressEnabled = document.body.classList.contains( "impress-enabled" );
assert.ok( impressEnabled, "Have class .impress-enabled" );
assert.notOk( impressDisabled, "Don't have class .impress-disabled" );
});
QUnit.test( "Attributes", function( assert ) {
assert.expect( 9 );
var actual, expected;
var canvas = document.querySelector( "div#impress > div" );
var canvasIsNotAStep = !canvas.classList.contains("step") && canvas.id === "";
assert.ok( canvasIsNotAStep, "Canvas do not have step element data" );
actual = canvas.style.transform;
expected = "rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(1000px, 0px, 0px)";
assert.strictEqual( actual, expected, "canvas.style.transform initialized correctly" );
actual = canvas.style.transformOrigin;
expected = "left top 0px";
assert.strictEqual( actual, expected, "canvas.style.transformOrigin initialized correctly" );
actual = canvas.style.transformStyle;
expected = "preserve-3d";
assert.strictEqual( actual, expected, "canvas.style.transformStyle initialized correctly" );
actual = canvas.style.transitionDelay;
expected = "0ms";
assert.strictEqual( actual, expected, "canvas.style.transitionDelay initialized correctly" );
actual = canvas.style.transitionDuration;
expected = "0ms";
assert.strictEqual( actual, expected, "canvas.style.transitionDuration initialized correctly" );
actual = canvas.style.transitionProperty;
expected = "all";
assert.strictEqual( actual, expected, "canvas.style.transitionProperty initialized correctly" );
actual = canvas.style.transitionTimingFunction;
expected = "ease-in-out";
assert.strictEqual( actual, expected, "canvas.style.transitionTimingFunction initialized correctly" );
actual = document.documentElement.style.height;
expected = "100%";
assert.strictEqual( actual, expected, "documentElement.style.height is 100%" );
});
QUnit.test( "Steps", function( assert ) {
assert.expect( 2 );
var actual, expected;
var step1 = document.querySelector( "div#step-1" );
actual = step1.style.position;
expected = "absolute";
assert.strictEqual( actual, expected, "Step position is 'absolute'" );
assert.ok( step1.classList.contains( "active" ), "Step 1 has active css class." );
});
QUnit.module( "Core API" );
QUnit.test( ".next()", function( assert ) {
assert.expect( 2 );
var root = document.querySelector( "div#impress" );
var step1 = document.querySelector( "div#step-1" );
var step2 = document.querySelector( "div#step-2" );
var done = assert.async();
impress().next();
assert.ok( step2.classList.contains( "active" ), step2.id + " add active css class." );
assert.notOk( step1.classList.contains( "active" ), step1.id + " remove active css class." );
// Reset to original state
var removeStepEnterEvent = registerEventListener( root, "impress:stepenter", function() {
removeStepEnterEvent();
done();
});
impress().goto( step1 );
});
QUnit.test( "impress:stepenter event", function( assert ) {
assert.expect( 4 );
var actual, expected;
var root = document.querySelector( "div#impress" );
var step1 = document.querySelector( "div#step-1" );
var step2 = document.querySelector( "div#step-2" );
var done = assert.async();
var removeTestEvent = registerEventListener( root, "impress:stepenter", function( event ) {
actual = event.target;
expected = step2;
assert.strictEqual( actual, expected, "Triggered event for the second step" );
assert.ok( step2.classList.contains( "present" ), event.target.id + " add present css class" );
assert.notOk( step2.classList.contains( "future" ), event.target.id + " remove future css class" );
assert.notOk( step2.classList.contains( "past" ), event.target.id + " remove active css class." );
removeTestEvent();
// Reset to original state
var removeCleanupEvent = registerEventListener( root, "impress:stepenter", function() {
removeCleanupEvent();
done();
});
impress().goto( step1 );
});
impress().next();
});
QUnit.done(function( details ) {
// Impress.js will set the hash part of the url, we want to unset it when finished
// Otherwise a refresh of browser page would not start tests from the last step step
window.location.hash = "";
// Add back vertical scrollbar so we can read results if there were failures.
document.body.style.overflow = 'auto';
});
}());

301
test/qunit/qunit.css Normal file
View File

@@ -0,0 +1,301 @@
/*!
* QUnit 1.20.0
* http://qunitjs.com/
*
* Copyright jQuery Foundation and other contributors
* Released under the MIT license
* http://jquery.org/license
*
* Date: 2015-10-27T17:53Z
*/
/** Font Family and Sizes */
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult {
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}
#qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
#qunit-tests { font-size: smaller; }
/** Resets */
#qunit-tests, #qunit-header, #qunit-banner, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
margin: 0;
padding: 0;
}
/** Header */
#qunit-header {
padding: 0.5em 0 0.5em 1em;
color: #8699A4;
background-color: #0D3349;
font-size: 1.5em;
line-height: 1em;
font-weight: 400;
border-radius: 5px 5px 0 0;
}
#qunit-header a {
text-decoration: none;
color: #C2CCD1;
}
#qunit-header a:hover,
#qunit-header a:focus {
color: #FFF;
}
#qunit-testrunner-toolbar label {
display: inline-block;
padding: 0 0.5em 0 0.1em;
}
#qunit-banner {
height: 5px;
}
#qunit-testrunner-toolbar {
padding: 0.5em 1em 0.5em 1em;
color: #5E740B;
background-color: #EEE;
overflow: hidden;
}
#qunit-filteredTest {
padding: 0.5em 1em 0.5em 1em;
background-color: #F4FF77;
color: #366097;
}
#qunit-userAgent {
padding: 0.5em 1em 0.5em 1em;
background-color: #2B81AF;
color: #FFF;
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
}
#qunit-modulefilter-container {
float: right;
padding: 0.2em;
}
.qunit-url-config {
display: inline-block;
padding: 0.1em;
}
.qunit-filter {
display: block;
float: right;
margin-left: 1em;
}
/** Tests: Pass/Fail */
#qunit-tests {
list-style-position: inside;
}
#qunit-tests li {
padding: 0.4em 1em 0.4em 1em;
border-bottom: 1px solid #FFF;
list-style-position: inside;
}
#qunit-tests > li {
display: none;
}
#qunit-tests li.running,
#qunit-tests li.pass,
#qunit-tests li.fail,
#qunit-tests li.skipped {
display: list-item;
}
#qunit-tests.hidepass li.running,
#qunit-tests.hidepass li.pass {
visibility: hidden;
position: absolute;
width: 0;
height: 0;
padding: 0;
border: 0;
margin: 0;
}
#qunit-tests li strong {
cursor: pointer;
}
#qunit-tests li.skipped strong {
cursor: default;
}
#qunit-tests li a {
padding: 0.5em;
color: #C2CCD1;
text-decoration: none;
}
#qunit-tests li p a {
padding: 0.25em;
color: #6B6464;
}
#qunit-tests li a:hover,
#qunit-tests li a:focus {
color: #000;
}
#qunit-tests li .runtime {
float: right;
font-size: smaller;
}
.qunit-assert-list {
margin-top: 0.5em;
padding: 0.5em;
background-color: #FFF;
border-radius: 5px;
}
.qunit-source {
margin: 0.6em 0 0.3em;
}
.qunit-collapsed {
display: none;
}
#qunit-tests table {
border-collapse: collapse;
margin-top: 0.2em;
}
#qunit-tests th {
text-align: right;
vertical-align: top;
padding: 0 0.5em 0 0;
}
#qunit-tests td {
vertical-align: top;
}
#qunit-tests pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
#qunit-tests del {
background-color: #E0F2BE;
color: #374E0C;
text-decoration: none;
}
#qunit-tests ins {
background-color: #FFCACA;
color: #500;
text-decoration: none;
}
/*** Test Counts */
#qunit-tests b.counts { color: #000; }
#qunit-tests b.passed { color: #5E740B; }
#qunit-tests b.failed { color: #710909; }
#qunit-tests li li {
padding: 5px;
background-color: #FFF;
border-bottom: none;
list-style-position: inside;
}
/*** Passing Styles */
#qunit-tests li li.pass {
color: #3C510C;
background-color: #FFF;
border-left: 10px solid #C6E746;
}
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
#qunit-tests .pass .test-name { color: #366097; }
#qunit-tests .pass .test-actual,
#qunit-tests .pass .test-expected { color: #999; }
#qunit-banner.qunit-pass { background-color: #C6E746; }
/*** Failing Styles */
#qunit-tests li li.fail {
color: #710909;
background-color: #FFF;
border-left: 10px solid #EE5757;
white-space: pre;
}
#qunit-tests > li:last-child {
border-radius: 0 0 5px 5px;
}
#qunit-tests .fail { color: #000; background-color: #EE5757; }
#qunit-tests .fail .test-name,
#qunit-tests .fail .module-name { color: #000; }
#qunit-tests .fail .test-actual { color: #EE5757; }
#qunit-tests .fail .test-expected { color: #008000; }
#qunit-banner.qunit-fail { background-color: #EE5757; }
/*** Skipped tests */
#qunit-tests .skipped {
background-color: #EBECE9;
}
#qunit-tests .qunit-skipped-label {
background-color: #F4FF77;
display: inline-block;
font-style: normal;
color: #366097;
line-height: 1.8em;
padding: 0 0.5em;
margin: -0.4em 0.4em -0.4em 0;
}
/** Result */
#qunit-testresult {
padding: 0.5em 1em 0.5em 1em;
color: #2B81AF;
background-color: #D2E0E6;
border-bottom: 1px solid #FFF;
}
#qunit-testresult .module-name {
font-weight: 700;
}
/** Fixture */
#qunit-fixture {
position: absolute;
top: -10000px;
left: -10000px;
width: 1000px;
height: 1000px;
}

4158
test/qunit/qunit.js Normal file

File diff suppressed because it is too large Load Diff