Merge more testing coverage from henrikingo fork
* core_tests.js and navigation_tests.js have more tests * qunit_test_runner.html runs QUnit in a browser (without karma) and provides a generic iframe based platform to test different presentations. * copy qunit.js and syn.js into the repo. This allows qunit_test_runner.html to work without any dependency on node/npm. (Karma obviously does need them.) * Move jscs cli option to .jscsrc instead
This commit is contained in:
Henrik Ingo
33
test/bootstrap.js
vendored
33
test/bootstrap.js
vendored
@@ -1,12 +1,25 @@
|
||||
/*jshint browser:true */
|
||||
|
||||
var root = document.createElement( "div" );
|
||||
root.innerHTML = [
|
||||
"<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>"
|
||||
].join( "" );
|
||||
document.body.appendChild( root );
|
||||
// TODO: This is the bootstrap file for *karma*. Poorly named (since karma is
|
||||
// only one option, in this repo) but keeping the same name now to avoid
|
||||
// unnecessary deviation with upstream.
|
||||
// If you just want to run the tests locally, you can open test/index.html in Firefox.
|
||||
|
||||
// That's annoying: karma-qunit doesn't provide the qunit-fixture element
|
||||
// https://github.com/karma-runner/karma-qunit/issues/18
|
||||
|
||||
// This file contains so much HTML, that we will just respectfully disagree about js
|
||||
/* jshint quotmark:single */
|
||||
/* global document */
|
||||
|
||||
var fix = document.createElement( 'div' );
|
||||
fix.id = 'qunit-fixture';
|
||||
fix.innerHTML = [
|
||||
'\n',
|
||||
' <iframe id="presentation-iframe"\n',
|
||||
' src="SET THIS IN YOUR QUNIT TESTS"\n',
|
||||
' width="595" height="485"\n',
|
||||
' frameborder="0" marginwidth="0" marginheight="0" scrolling="no"\n',
|
||||
' style="border:1px solid #CCC; max-width: 100%;">\n',
|
||||
' </iframe>'
|
||||
].join( '' );
|
||||
|
||||
@@ -1,166 +1,266 @@
|
||||
(function() {
|
||||
var registerEventListener = function( target, eventType, callback ) {
|
||||
target.addEventListener( eventType, callback );
|
||||
return function removeRegisteredEventListener() {
|
||||
target.removeEventListener( eventType, callback );
|
||||
/*
|
||||
* Copyright 2016 Henrik Ingo (@henrikingo)
|
||||
*
|
||||
* Released under the MIT license. See LICENSE file.
|
||||
*/
|
||||
|
||||
/* global document, console, setTimeout, loadIframe, initPresentation, _impressSupported, QUnit */
|
||||
|
||||
QUnit.module( "Core Tests" );
|
||||
|
||||
QUnit.test( "Initialize Impress.js", function( assert ) {
|
||||
console.log( "Begin init() test" );
|
||||
|
||||
// Init triggers impress:init and impress:stepenter events, which we want to catch.
|
||||
var doneInit = assert.async();
|
||||
var doneStepEnter = assert.async();
|
||||
var doneSync = assert.async();
|
||||
|
||||
loadIframe( "test/core_tests_presentation.html", assert, function() {
|
||||
var iframe = document.getElementById( "presentation-iframe" );
|
||||
var iframeDoc = iframe.contentDocument;
|
||||
var iframeWin = iframe.contentWindow;
|
||||
var root = iframeDoc.querySelector( "div#impress" );
|
||||
|
||||
// Catch events triggered by init()
|
||||
var assertInit = function() {
|
||||
assert.ok( true, "impress:init event triggered." );
|
||||
|
||||
var canvas = iframeDoc.querySelector( "div#impress > div" );
|
||||
|
||||
// Delay and duration don't become set before the first transition actually happened
|
||||
assert.equal( canvas.style.transitionDelay,
|
||||
"0ms",
|
||||
"canvas.style.transitionDelay initialized correctly" );
|
||||
assert.equal( canvas.style.transitionDuration,
|
||||
"0ms",
|
||||
"canvas.style.transitionDuration initialized correctly" );
|
||||
|
||||
doneInit();
|
||||
console.log( "End init() test (async)" );
|
||||
};
|
||||
};
|
||||
|
||||
QUnit.begin(function() {
|
||||
impress().init();
|
||||
});
|
||||
var assertInitWrapper = function() {
|
||||
setTimeout( function() { assertInit(); }, 10 );
|
||||
};
|
||||
root.addEventListener( "impress:init", assertInitWrapper );
|
||||
|
||||
QUnit.module( "Initialization" );
|
||||
root.addEventListener( "impress:stepenter", function( event ) {
|
||||
assert.ok( true, "impress:stepenter event triggered." );
|
||||
var step1 = iframeDoc.querySelector( "div#step-1" );
|
||||
assert.equal( event.target, step1,
|
||||
event.target.id + " triggered impress:stepenter event." );
|
||||
doneStepEnter();
|
||||
} );
|
||||
|
||||
QUnit.test( "Global Scope", function( assert ) {
|
||||
assert.expect( 1 );
|
||||
assert.ok( impress, "impress declared in global scope" );
|
||||
});
|
||||
// Synchronous code and assertions
|
||||
assert.ok( iframeWin.impress,
|
||||
"impress declared in global scope" );
|
||||
assert.strictEqual( iframeWin.impress().init(), undefined,
|
||||
"impress().init() called." );
|
||||
assert.strictEqual( iframeWin.impress().init(), undefined,
|
||||
"It's ok to call impress().init() a second time, it's a no-op." );
|
||||
|
||||
QUnit.test( "Multiple API instantiation", function( assert ) {
|
||||
assert.expect( 0 );
|
||||
impress().init();
|
||||
});
|
||||
// The asserts below are true immediately after impress().init() returns.
|
||||
// Therefore we test them here, not in an event handler.
|
||||
var notSupportedClass = iframeDoc.body.classList.contains( "impress-not-supported" );
|
||||
var yesSupportedClass = iframeDoc.body.classList.contains( "impress-supported" );
|
||||
if ( !_impressSupported() ) {
|
||||
assert.ok( notSupportedClass,
|
||||
"body.impress-not-supported class still there." );
|
||||
assert.ok( !yesSupportedClass,
|
||||
"body.impress-supported class was NOT added." );
|
||||
} else {
|
||||
assert.ok( !notSupportedClass,
|
||||
"body.impress-not-supported class was removed." );
|
||||
assert.ok( yesSupportedClass,
|
||||
"body.impress-supported class was added." );
|
||||
|
||||
QUnit.test( "Support Markup", function( assert ) {
|
||||
assert.expect( 4 );
|
||||
assert.ok( !iframeDoc.body.classList.contains( "impress-disabled" ),
|
||||
"body.impress-disabled is removed." );
|
||||
assert.ok( iframeDoc.body.classList.contains( "impress-enabled" ),
|
||||
"body.impress-enabled is added." );
|
||||
|
||||
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 canvas = iframeDoc.querySelector( "div#impress > div" );
|
||||
assert.ok( !canvas.classList.contains( "step" ) && canvas.id === "",
|
||||
"Additional 'canvas' div inserted between div#impress root and steps." );
|
||||
assert.equal( canvas.style.transform,
|
||||
"rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(1000px, 0px, 0px)",
|
||||
"canvas.style.transform initialized correctly" );
|
||||
assert.equal( canvas.style.transformOrigin,
|
||||
"left top 0px",
|
||||
"canvas.style.transformOrigin initialized correctly" );
|
||||
assert.equal( canvas.style.transformStyle,
|
||||
"preserve-3d",
|
||||
"canvas.style.transformStyle initialized correctly" );
|
||||
assert.equal( canvas.style.transitionProperty,
|
||||
"all",
|
||||
"canvas.style.transitionProperty initialized correctly" );
|
||||
assert.equal( canvas.style.transitionTimingFunction,
|
||||
"ease-in-out",
|
||||
"canvas.style.transitionTimingFunction initialized correctly" );
|
||||
|
||||
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" );
|
||||
});
|
||||
assert.equal( iframeDoc.documentElement.style.height,
|
||||
"100%",
|
||||
"documentElement.style.height is 100%" );
|
||||
|
||||
QUnit.test( "Attributes", function( assert ) {
|
||||
assert.expect( 10 );
|
||||
// Steps initialization
|
||||
var step1 = iframeDoc.querySelector( "div#step-1" );
|
||||
assert.equal( step1.style.position,
|
||||
"absolute",
|
||||
"Step position is 'absolute'." );
|
||||
|
||||
var actual, expected;
|
||||
var root = document.querySelector( "#impress" );
|
||||
var canvas = document.querySelector( "div#impress > div" );
|
||||
assert.ok( step1.classList.contains( "active" ),
|
||||
"Step 1 has active css class." );
|
||||
|
||||
var canvasIsNotAStep = !canvas.classList.contains("step") && canvas.id === "";
|
||||
assert.ok( canvasIsNotAStep, "Canvas do not have step element data" );
|
||||
}
|
||||
doneSync();
|
||||
console.log( "End init() test (sync)" );
|
||||
} ); // LoadIframe()
|
||||
|
||||
actual = canvas.style.webkitTransform || canvas.style.transform;
|
||||
expected = "rotateZ(0deg) rotateY(0deg) rotateX(0deg) translate3d(1000px, 0px, 0px)";
|
||||
assert.strictEqual( actual, expected, "canvas.style.transform initialized correctly" );
|
||||
} );
|
||||
|
||||
// Normalize result for IE 11 and Safari.
|
||||
actual = canvas.style.webkitTransformOrigin || canvas.style.transformOrigin;
|
||||
expected = "left top 0px";
|
||||
// Note: Here we focus on testing the core functionality of moving between
|
||||
// steps, the css classes set and unset, and events triggered.
|
||||
// TODO: more complex animations and check position, transitions, delays, etc...
|
||||
QUnit.test( "Impress Core API", function( assert ) {
|
||||
console.log( "Begin core api test" );
|
||||
var done = assert.async();
|
||||
loadIframe( "test/core_tests_presentation.html", assert, function() {
|
||||
initPresentation( assert, function() {
|
||||
var iframe = document.getElementById( "presentation-iframe" );
|
||||
var iframeDoc = iframe.contentDocument;
|
||||
var iframeWin = iframe.contentWindow;
|
||||
|
||||
if ( actual === "left top" || actual === "0% 0%" ) {
|
||||
actual = expected;
|
||||
}
|
||||
assert.strictEqual( actual, expected, "canvas.style.transformOrigin initialized correctly" );
|
||||
// Impress.js itself uses event listeners to manipulate most CSS classes.
|
||||
// Wait a short while before checking, to avoid race.
|
||||
// (See assertStepEnterWrapper and assertStepLeaveWrapper.)
|
||||
var wait = 5; // Milliseconds
|
||||
|
||||
actual = canvas.style.webkitTransformStyle || canvas.style.transformStyle;
|
||||
expected = "preserve-3d";
|
||||
assert.strictEqual( actual, expected, "canvas.style.transformStyle initialized correctly" );
|
||||
var step1 = iframeDoc.querySelector( "div#step-1" );
|
||||
var step2 = iframeDoc.querySelector( "div#step-2" );
|
||||
var step3 = iframeDoc.querySelector( "div#step-3" );
|
||||
var step4 = iframeDoc.querySelector( "div#fourth" );
|
||||
var root = iframeDoc.querySelector( "div#impress" );
|
||||
|
||||
actual = canvas.style.transitionDelay;
|
||||
expected = "0ms";
|
||||
assert.strictEqual( actual, expected, "canvas.style.transitionDelay initialized correctly" );
|
||||
// On impress:stepenter, we do some assertions on the "entered" object.
|
||||
// On impress:stepleave, we do some assertions on the "left" object.
|
||||
// Finally we call next() to initialize the next transition, and it starts all over again.
|
||||
var i = 0;
|
||||
var sequence = [ { left: step1,
|
||||
entered: step2,
|
||||
next: function() { return iframeWin.impress().goto( 2 ); },
|
||||
text: "goto(<number>) called and returns ok (2->3)" },
|
||||
{ left: step2,
|
||||
entered: step3,
|
||||
next: function() { return iframeWin.impress().goto( "fourth" ); },
|
||||
text: "goto(<string>) called and returns ok (3->4)" },
|
||||
{ left: step3,
|
||||
entered: step4,
|
||||
next: function() { return iframeWin.impress().next(); },
|
||||
text: "next() wraps around to first step (4->1)" },
|
||||
{ left: step4,
|
||||
entered: step1,
|
||||
next: function() { return iframeWin.impress().prev(); },
|
||||
text: "prev() wraps around to last step (1->4)" },
|
||||
{ left: step1,
|
||||
entered: step4,
|
||||
next: function() { return iframeWin.impress().prev(); },
|
||||
text: "prev() called and returns ok (4->3)" },
|
||||
{ left: step4,
|
||||
entered: step3,
|
||||
next: function() { return iframeWin.impress().goto( 0 ); },
|
||||
text: "End of test suite, return to first step with goto(0)." },
|
||||
{ left: step3,
|
||||
entered: step1,
|
||||
next: false } // False = end of sequence
|
||||
];
|
||||
|
||||
actual = canvas.style.transitionDuration;
|
||||
expected = "0ms";
|
||||
assert.strictEqual( actual, expected, "canvas.style.transitionDuration initialized correctly" );
|
||||
// When both assertStepEnter and assertStepLeave are done, we can go to next step in sequence.
|
||||
var readyCount = 0;
|
||||
var readyForNext = function() {
|
||||
readyCount++;
|
||||
if ( readyCount % 2 === 0 ) {
|
||||
if ( sequence[ i ].next ) {
|
||||
assert.ok( sequence[ i ].next(), sequence[ i ].text );
|
||||
i++;
|
||||
assertImmediately();
|
||||
} else {
|
||||
done();
|
||||
console.log( "End core api test" );
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
actual = canvas.style.transitionProperty;
|
||||
expected = "all";
|
||||
assert.strictEqual( actual, expected, "canvas.style.transitionProperty initialized correctly" );
|
||||
// Things to check on impress:stepenter event -----------------------------//
|
||||
var assertStepEnter = function( event ) {
|
||||
assert.equal( event.target, sequence[ i ].entered,
|
||||
event.target.id + " triggered impress:stepenter event." );
|
||||
assert.ok( event.target.classList.contains( "present" ),
|
||||
event.target.id + " set present css class." );
|
||||
assert.ok( !event.target.classList.contains( "future" ),
|
||||
event.target.id + " unset future css class." );
|
||||
assert.ok( !event.target.classList.contains( "past" ),
|
||||
event.target.id + " unset past css class." );
|
||||
assert.equal( "#/" + event.target.id, iframeWin.location.hash,
|
||||
"Hash is " + "#/" + event.target.id );
|
||||
|
||||
actual = canvas.style.transitionTimingFunction;
|
||||
expected = "ease-in-out";
|
||||
assert.strictEqual( actual, expected, "canvas.style.transitionTimingFunction initialized correctly" );
|
||||
// Just by way of comparison, check transitionDuration again, in a non-init transition
|
||||
var canvas = iframeDoc.querySelector( "div#impress > div" );
|
||||
assert.equal( canvas.style.transitionDelay,
|
||||
"0ms",
|
||||
"canvas.style.transitionDelay set correctly" );
|
||||
assert.equal( canvas.style.transitionDuration,
|
||||
"1000ms",
|
||||
"canvas.style.transitionDuration set correctly" );
|
||||
|
||||
actual = root.style.perspective;
|
||||
expected = "";
|
||||
assert.notStrictEqual( actual, expected, "root.style.perspective should be set explicitly for IE 11" );
|
||||
readyForNext();
|
||||
};
|
||||
|
||||
actual = document.documentElement.style.height;
|
||||
expected = "100%";
|
||||
assert.strictEqual( actual, expected, "documentElement.style.height is 100%" );
|
||||
});
|
||||
var assertStepEnterWrapper = function( event ) {
|
||||
setTimeout( function() { assertStepEnter( event ); }, wait );
|
||||
};
|
||||
root.addEventListener( "impress:stepenter", assertStepEnterWrapper );
|
||||
|
||||
QUnit.test( "Steps", function( assert ) {
|
||||
assert.expect( 2 );
|
||||
// Things to check on impress:stepleave event -----------------------------//
|
||||
var assertStepLeave = function( event ) {
|
||||
assert.equal( event.target, sequence[ i ].left,
|
||||
event.target.id + " triggered impress:stepleave event." );
|
||||
assert.ok( !event.target.classList.contains( "present" ),
|
||||
event.target.id + " unset present css class." );
|
||||
assert.ok( !event.target.classList.contains( "future" ),
|
||||
event.target.id + " unset future css class." );
|
||||
assert.ok( event.target.classList.contains( "past" ),
|
||||
event.target.id + " set past css class." );
|
||||
readyForNext();
|
||||
};
|
||||
|
||||
var actual, expected;
|
||||
var step1 = document.querySelector( "div#step-1" );
|
||||
var assertStepLeaveWrapper = function( event ) {
|
||||
setTimeout( function() { assertStepLeave( event ); }, wait );
|
||||
};
|
||||
root.addEventListener( "impress:stepleave", assertStepLeaveWrapper );
|
||||
|
||||
actual = step1.style.position;
|
||||
expected = "absolute";
|
||||
assert.strictEqual( actual, expected, "Step position is 'absolute'" );
|
||||
// Things to check immediately after impress().goto() ---------------------------//
|
||||
var assertImmediately = function() {
|
||||
assert.ok( sequence[ i ].entered.classList.contains( "active" ),
|
||||
sequence[ i ].entered.id + " set active css class." );
|
||||
assert.ok( !sequence[ i ].left.classList.contains( "active" ),
|
||||
sequence[ i ].left.id + " unset active css class." );
|
||||
};
|
||||
|
||||
assert.ok( step1.classList.contains( "active" ), "Step 1 has active css class." );
|
||||
});
|
||||
// Done with setup. Start testing! -----------------------------------------------//
|
||||
// Do no-op tests first, then trigger the sequence of transitions we setup above. //
|
||||
|
||||
QUnit.module( "Core API" );
|
||||
assert.strictEqual( iframeWin.impress().goto( iframeDoc.querySelector( "div#impress" ) ),
|
||||
false,
|
||||
"goto() to a non-step element fails, as it should." );
|
||||
assert.strictEqual( iframeWin.impress().goto(),
|
||||
false,
|
||||
"goto(<nothing>) fails, as it should." );
|
||||
|
||||
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';
|
||||
});
|
||||
}());
|
||||
// This starts executing the sequence above
|
||||
assert.ok( iframeWin.impress().next(),
|
||||
"next() called and returns ok (1->2)" );
|
||||
} ); // InitPresentation()
|
||||
} ); // LoadIframe()
|
||||
} );
|
||||
|
||||
24
test/core_tests_presentation.html
Normal file
24
test/core_tests_presentation.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright 2016 Henrik Ingo (@henrikingo)
|
||||
Released under the MIT license. See LICENSE file.
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>The presentation steps used in an iframe in core_tests.js</title>
|
||||
</head>
|
||||
<!-- id is used by syn -->
|
||||
<body class="impress-not-supported" id="bodyid">
|
||||
<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 <br /><a href="#fourth" id="linktofourth">link to fourth slide</a></div>
|
||||
<div class="step" data-x="-600" data-y="0">Third slide<br /><a href="#step-1" id="linktofirst">link to first slide</a></div>
|
||||
<div class="step" id="fourth" data-x="-400" data-y="0">Fourth slide</div>
|
||||
</div>
|
||||
<script src="../js/impress.js"></script>
|
||||
<!-- This is a copy of dist/syn.js from bower install syn. (The one in npm install doesn't work in a browser.) -->
|
||||
<!-- See http://bitovi.com/blog/2010/07/syn-a-standalone-synthetic-event-library.html for simple usage guide. -->
|
||||
<script src="syn/syn.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
110
test/helpers.js
Normal file
110
test/helpers.js
Normal file
@@ -0,0 +1,110 @@
|
||||
// This file contains so much HTML, that we will just respectfully disagree about js
|
||||
/* jshint quotmark:single */
|
||||
/* global document, console, setTimeout, navigator */
|
||||
/* exported loadIframe, initPresentation, _impressSupported */
|
||||
|
||||
var loadIframe = function( src, assert, callback ) {
|
||||
console.log( 'Begin loadIframe' );
|
||||
|
||||
// When running in Karma, the #qunit-fixture appears from somewhere and we can't set its
|
||||
// contents in advance.
|
||||
var fix = document.getElementById( 'qunit-fixture' );
|
||||
fix.innerHTML = [
|
||||
'\n',
|
||||
' <iframe id="presentation-iframe"\n',
|
||||
' src="SET THIS IN YOUR QUNIT TESTS"\n',
|
||||
' width="595" height="485"\n',
|
||||
' frameborder="0" marginwidth="0" marginheight="0" scrolling="no"\n',
|
||||
' style="border:1px solid #CCC; max-width: 100%;">\n',
|
||||
' </iframe>'
|
||||
].join( '' );
|
||||
|
||||
var iframe = document.getElementById( 'presentation-iframe' );
|
||||
|
||||
var onLoad = function() {
|
||||
assert.ok( true,
|
||||
'Presentation loaded. iframe.src = ' + iframe.src );
|
||||
try {
|
||||
assert.ok( iframe.contentDocument,
|
||||
'Verifying that tests can access the presentation inside the iframe. ' +
|
||||
'Note: On Firefox this fails when using paths with "../" parts for the iframe.' );
|
||||
}
|
||||
catch ( err ) {
|
||||
assert.ok( false,
|
||||
'Error when trying to access presentation in iframe. Note: When using Chrome with ' +
|
||||
'local files (file:///) this will fail with SecurityError. ' +
|
||||
'You can however use Chrome over Karma.' );
|
||||
}
|
||||
console.log( 'End loadIframe' );
|
||||
callback();
|
||||
};
|
||||
|
||||
// FIXME: Seems to be some race in loading js files inside the iframe (in CircleCI).
|
||||
// The error that happens is that window.impress isn't set yet, even if onLoad event triggered.
|
||||
// Needs more investigation.
|
||||
var onLoadWrapper = function( event ) {
|
||||
setTimeout( function() { onLoad( event ); }, 1000 );
|
||||
};
|
||||
iframe.addEventListener( 'load', onLoadWrapper );
|
||||
|
||||
assert.ok( true,
|
||||
'Setting iframe.src = ' + src );
|
||||
iframe.src = src;
|
||||
};
|
||||
|
||||
var initPresentation = function( assert, callback ) {
|
||||
console.log( 'Begin initPresentation' );
|
||||
var iframe = document.getElementById( 'presentation-iframe' );
|
||||
var iframeDoc = iframe.contentDocument;
|
||||
var iframeWin = iframe.contentWindow;
|
||||
|
||||
// Impress:stepenter is the last event triggered in init(), so we wait for that.
|
||||
var waitForStepEnter = function( event ) {
|
||||
assert.ok( true, 'impress (' + event.target.id + ') is now initialized.' );
|
||||
iframeDoc.removeEventListener( 'impress:stepenter', waitForStepEnterWrapper );
|
||||
console.log( 'End initPresentation' );
|
||||
callback();
|
||||
};
|
||||
|
||||
// Unfortunately, impress.js uses the impress:stepenter event internally to
|
||||
// do some things related to entering a step. This causes a race condition when
|
||||
// we listen for the same event and expect it to be done with everything.
|
||||
// We wait 5 ms to resolve the race condition, then it's safe to start testing.
|
||||
var waitForStepEnterWrapper = function( event ) {
|
||||
setTimeout( function() { waitForStepEnter( event ); }, 5 );
|
||||
};
|
||||
iframeDoc.addEventListener( 'impress:stepenter', waitForStepEnterWrapper );
|
||||
|
||||
assert.strictEqual( iframeWin.impress().init(), undefined, 'Initializing impress.' );
|
||||
};
|
||||
|
||||
// Helper function to determine whether this browser is supported by
|
||||
// impress.js or not. Copied from impress.js itself.
|
||||
var _impressSupported = function() {
|
||||
var pfx = ( function() {
|
||||
var style = document.createElement( 'dummy' ).style,
|
||||
prefixes = 'Webkit Moz O ms Khtml'.split( ' ' ),
|
||||
memory = {};
|
||||
return function( prop ) {
|
||||
if ( typeof memory[ prop ] === 'undefined' ) {
|
||||
var ucProp = prop.charAt( 0 ).toUpperCase() + prop.substr( 1 ),
|
||||
props = ( prop + ' ' + prefixes.join( ucProp + ' ' ) + ucProp ).split( ' ' );
|
||||
memory[ prop ] = null;
|
||||
for ( var i in props ) {
|
||||
if ( style[ props[ i ] ] !== undefined ) {
|
||||
memory[ prop ] = props[ i ];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return memory[ prop ];
|
||||
};
|
||||
} )();
|
||||
|
||||
var ua = navigator.userAgent.toLowerCase();
|
||||
return ( pfx( 'perspective' ) !== null ) &&
|
||||
( document.body.classList ) &&
|
||||
( document.body.dataset ) &&
|
||||
( ua.search( /(iphone)|(ipod)|(android)/ ) === -1 );
|
||||
};
|
||||
|
||||
169
test/navigation_tests.js
Normal file
169
test/navigation_tests.js
Normal file
@@ -0,0 +1,169 @@
|
||||
/*
|
||||
* Copyright 2016 Henrik Ingo (@henrikingo)
|
||||
*
|
||||
* Released under the MIT license. See LICENSE file.
|
||||
*/
|
||||
/* global QUnit, loadIframe, initPresentation, document, window */
|
||||
|
||||
QUnit.module( "Navigation plugin" );
|
||||
|
||||
QUnit.test( "Navigation Plugin", function( assert ) {
|
||||
window.console.log( "Begin navigation plugin" );
|
||||
var done = assert.async();
|
||||
|
||||
loadIframe( "test/core_tests_presentation.html", assert, function() {
|
||||
initPresentation( assert, function() {
|
||||
var iframe = document.getElementById( "presentation-iframe" );
|
||||
var iframeDoc = iframe.contentDocument;
|
||||
var iframeWin = iframe.contentWindow;
|
||||
|
||||
var wait = 5; // Milliseconds
|
||||
|
||||
var step1 = iframeDoc.querySelector( "div#step-1" );
|
||||
var step2 = iframeDoc.querySelector( "div#step-2" );
|
||||
var step3 = iframeDoc.querySelector( "div#step-3" );
|
||||
var step4 = iframeDoc.querySelector( "div#fourth" );
|
||||
var root = iframeDoc.querySelector( "div#impress" );
|
||||
|
||||
var i = 0;
|
||||
var sequence = [ { left: step1,
|
||||
entered: step2,
|
||||
next: function() { return iframeWin.syn.type( "bodyid", " " ); },
|
||||
text: "space (2->3)" },
|
||||
{ left: step2,
|
||||
entered: step3,
|
||||
next: function() { return iframeWin.syn.type( "bodyid", "[right]" ); },
|
||||
text: "[right] (3->4)" },
|
||||
{ left: step3,
|
||||
entered: step4,
|
||||
next: function() { return iframeWin.syn.type( "bodyid", "\t" ); },
|
||||
text: "tab (4->1)" },
|
||||
{ left: step4,
|
||||
entered: step1,
|
||||
next: function() { return iframeWin.syn.type( "bodyid", "[down]" ); },
|
||||
text: "[down] (1->2)" },
|
||||
{ left: step1,
|
||||
entered: step2,
|
||||
next: function() { return iframeWin.syn.type( "bodyid", "[page-down]" ); },
|
||||
text: "[page-down] (2->3)" },
|
||||
{ left: step2,
|
||||
entered: step3,
|
||||
next: function() { return iframeWin.syn.type( "bodyid", "[page-up]" ); },
|
||||
text: "[page-up] (3->2)" },
|
||||
{ left: step3,
|
||||
entered: step2,
|
||||
next: function() { return iframeWin.syn.type( "bodyid", "[left]" ); },
|
||||
text: "[left] (2->1)" },
|
||||
{ left: step2,
|
||||
entered: step1,
|
||||
next: function() { return iframeWin.syn.type( "bodyid", "[up]" ); },
|
||||
text: "[up] (1->4)" },
|
||||
{ left: step1,
|
||||
entered: step4,
|
||||
next: function() { return iframeWin.syn.click( "step-2", {} ); },
|
||||
text: "click on 2 (4->2)" },
|
||||
{ left: step4,
|
||||
entered: step2,
|
||||
next: function() { return iframeWin.syn.click( "linktofourth", {} ); },
|
||||
text: "click on link with href to id=fourth (2->4)" },
|
||||
{ left: step2,
|
||||
entered: step4,
|
||||
next: function() { return iframeWin.impress().goto( 0 ); },
|
||||
text: "Return to first step with goto(0)." },
|
||||
{ left: step4,
|
||||
entered: step1,
|
||||
next: false }
|
||||
];
|
||||
|
||||
var readyCount = 0;
|
||||
var readyForNext = function() {
|
||||
readyCount++;
|
||||
if ( readyCount % 2 === 0 ) {
|
||||
if ( sequence[ i ].next ) {
|
||||
assert.ok( sequence[ i ].next(), sequence[ i ].text );
|
||||
i++;
|
||||
} else {
|
||||
window.console.log( "End navigation plugin" );
|
||||
done();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Things to check on impress:stepenter event -----------------------------//
|
||||
var assertStepEnter = function( event ) {
|
||||
assert.equal( event.target, sequence[ i ].entered,
|
||||
event.target.id + " triggered impress:stepenter event." );
|
||||
readyForNext();
|
||||
};
|
||||
|
||||
var assertStepEnterWrapper = function( event ) {
|
||||
window.setTimeout( function() { assertStepEnter( event ); }, wait );
|
||||
};
|
||||
root.addEventListener( "impress:stepenter", assertStepEnterWrapper );
|
||||
|
||||
// Things to check on impress:stepleave event -----------------------------//
|
||||
var assertStepLeave = function( event ) {
|
||||
assert.equal( event.target, sequence[ i ].left,
|
||||
event.target.id + " triggered impress:stepleave event." );
|
||||
readyForNext();
|
||||
};
|
||||
|
||||
var assertStepLeaveWrapper = function( event ) {
|
||||
window.setTimeout( function() { assertStepLeave( event ); }, wait );
|
||||
};
|
||||
root.addEventListener( "impress:stepleave", assertStepLeaveWrapper );
|
||||
|
||||
assert.ok( iframeWin.impress().next(), "next() called and returns ok (1->2)" );
|
||||
} ); // InitPresentation()
|
||||
} ); // LoadIframe()
|
||||
} );
|
||||
|
||||
QUnit.test( "Navigation Plugin - No-op tests", function( assert ) {
|
||||
window.console.log( "Begin navigation no-op" );
|
||||
var done = assert.async();
|
||||
|
||||
loadIframe( "test/core_tests_presentation.html", assert, function() {
|
||||
initPresentation( assert, function() {
|
||||
var iframe = document.getElementById( "presentation-iframe" );
|
||||
var iframeDoc = iframe.contentDocument;
|
||||
var iframeWin = iframe.contentWindow;
|
||||
|
||||
var wait = 5; // Milliseconds
|
||||
|
||||
var root = iframeDoc.querySelector( "div#impress" );
|
||||
|
||||
// This should never happen -----------------------------//
|
||||
var assertStepEnter = function( event ) {
|
||||
assert.ok( false,
|
||||
event.target.id + " triggered impress:stepenter event." );
|
||||
};
|
||||
|
||||
var assertStepEnterWrapper = function( event ) {
|
||||
window.setTimeout( function() { assertStepEnter( event ); }, wait );
|
||||
};
|
||||
root.addEventListener( "impress:stepenter", assertStepEnterWrapper );
|
||||
|
||||
// This should never happen -----------------------------//
|
||||
var assertStepLeave = function( event ) {
|
||||
assert.ok( false,
|
||||
event.target.id + " triggered impress:stepleave event." );
|
||||
};
|
||||
|
||||
var assertStepLeaveWrapper = function( event ) {
|
||||
window.setTimeout( function() { assertStepLeave( event ); }, wait );
|
||||
};
|
||||
root.addEventListener( "impress:stepleave", assertStepLeaveWrapper );
|
||||
|
||||
// These are no-op actions, we're already in step-1 -----------------------//
|
||||
assert.ok( iframeWin.syn.click( "step-1", {} ),
|
||||
"Click on step that is currently active, should do nothing." );
|
||||
assert.ok( iframeWin.syn.click( "linktofirst", {} ),
|
||||
"Click on link pointing to step that is currently active, should do nothing." );
|
||||
|
||||
// After delay, if no event triggers are called. We're done.
|
||||
window.setTimeout( function() {
|
||||
window.console.log( "End navigation no-op" ); done();
|
||||
}, 3000 );
|
||||
} ); // InitPresentation()
|
||||
} ); // LoadIframe()
|
||||
} );
|
||||
301
test/qunit/qunit.css
Normal file
301
test/qunit/qunit.css
Normal 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
4158
test/qunit/qunit.js
Normal file
File diff suppressed because it is too large
Load Diff
2422
test/syn/syn.js
Normal file
2422
test/syn/syn.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user