janishutz-legacy/impress.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge more testing coverage from henrikingo fork

Browse Source 
* 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
2017-09-16 13:08:51 +03:00
parent 0b4bd08f44
commit 7aaea7fd37
12 changed files with 7511 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.jscsrc Normal file
View File

@@ -0,0 +1,5 @@
{
"preset": "jquery",
// Since we check quotemarks already in jshint, this can be turned off
"validateQuoteMarks": false
}

37
karma.conf.js
View File

@@ -7,11 +7,25 @@ module.exports = function( config ) {
// Frameworks to use // Frameworks to use
frameworks: [ "qunit" ], frameworks: [ "qunit" ],
proxies : {
'/test/' : '/base/test/',
'/js/' : '/base/js/'
},
// List of files / patterns to load in the browser // List of files / patterns to load in the browser
files: [ files: [
"test/bootstrap.js", // The QUnit tests
"js/impress.js", "test/helpers.js",
"test/core_tests.js" "test/core_tests.js",
"test/navigation_tests.js",
// Presentation files, for the iframe
//"test/core_tests_presentation.html"
//{pattern: "test/core_tests_presentation.html", watched: true, served: true, included: false}
{pattern: "test/*.html", watched: true, served: true, included: false},
{pattern: "test/plugins/*/*.html", watched: true, served: true, included: false},
// JS files for iframe
{pattern: "js/impress.js", watched: true, served: true, included: false},
{pattern: "test/syn/syn.js", watched: true, served: true, included: false}
], ],
// List of files to exclude // List of files to exclude
@@ -43,10 +57,21 @@ module.exports = function( config ) {
// - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`) // - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
// - PhantomJS // - PhantomJS
// - IE (only Windows; has to be installed with `npm install karma-ie-launcher`) // - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
browsers: [ "Chrome" ], //browsers: [ "Chrome" ],
//browsers: [ "Firefox" ],
browsers: [ "Chrome", "Firefox" ],
// If browser does not capture in given timeout [ms], kill it client: {
captureTimeout: 60000, clearContext: false,
qunit: {
showUI: true,
testTimeout: 120*1000
}
},
// If browser does not capture, or produce output, in given timeout [ms], kill it
captureTimeout: 60*1000,
browserNoActivityTimeout: 60*1000,
// Continuous Integration mode // Continuous Integration mode
// if true, it capture browsers, run tests and exit // if true, it capture browsers, run tests and exit

4
package.json
View File

@@ -22,18 +22,20 @@
"url": "https://github.com/bartaz/impress.js/issues" "url": "https://github.com/bartaz/impress.js/issues"
}, },
"scripts": { "scripts": {
"lint": "jshint js/impress.js *.js test/bootstrap.js && jscs js/impress.js *.js test/bootstrap.js --preset=jquery", "lint": "jshint js/impress.js test/*.js && jscs js/impress.js test/*.js",
"test": "karma start --single-run", "test": "karma start --single-run",
"test:dev": "karma start", "test:dev": "karma start",
"test:sauce": "karma start karma.conf-sauce.js" "test:sauce": "karma start karma.conf-sauce.js"
}, },
"devDependencies": { "devDependencies": {
"chrome": "0.1.0", "chrome": "0.1.0",
"firefox": "*",
"jscs": "2.11.0", "jscs": "2.11.0",
"jshint": "2.9.1", "jshint": "2.9.1",
"karma": "0.13.22", "karma": "0.13.22",
"karma-chrome-launcher": "1.0.1", "karma-chrome-launcher": "1.0.1",
"karma-cli": "1.0.0", "karma-cli": "1.0.0",
"karma-firefox-launcher": "~0.1",
"karma-qunit": "1.0.0", "karma-qunit": "1.0.0",
"karma-sauce-launcher": "1.0.0", "karma-sauce-launcher": "1.0.0",
"qunitjs": "2.0.0-rc1" "qunitjs": "2.0.0-rc1"

26
qunit_test_runner.html Normal file
View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<!--
Copyright 2016 Henrik Ingo (@henrikingo)
Released under the MIT license. See LICENSE file.
-->
<html>
<head>
<meta charset="utf-8">
<title>QUnit tests for impress.js</title>
<link rel="stylesheet" href="test/qunit/qunit.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<script src="test/qunit/qunit.js"></script>
<!-- The QUnit tests. -->
<script src="test/helpers.js"></script>
<!-- Core tests -->
<script src="test/core_tests.js"></script>
<!-- Plugins -->
<script src="test/navigation_tests.js"></script>
</body>
</html>

33
test/bootstrap.js vendored
View File

@@ -1,12 +1,25 @@
/*jshint browser:true */ /*jshint browser:true */
var root = document.createElement( "div" ); // TODO: This is the bootstrap file for *karma*. Poorly named (since karma is
root.innerHTML = [ // only one option, in this repo) but keeping the same name now to avoid
"<div id='impress'>", // unnecessary deviation with upstream.
" <div class='step' data-x='-1000' data-y='0'>First slide</div>", // If you just want to run the tests locally, you can open test/index.html in Firefox.
" <div class='step' data-x='-800' data-y='0'>Second slide</div>",
" <div class='step' data-x='-600' data-y='0'>Third slide</div>", // That's annoying: karma-qunit doesn't provide the qunit-fixture element
" <div class='step' data-x='-400' data-y='0'>Fourth slide</div>", // https://github.com/karma-runner/karma-qunit/issues/18
"</div>"
].join( "" ); // This file contains so much HTML, that we will just respectfully disagree about js
document.body.appendChild( root ); /* 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( '' );

390
test/core_tests.js
View File

@@ -1,166 +1,266 @@
(function() { /*
var registerEventListener = function( target, eventType, callback ) { * Copyright 2016 Henrik Ingo (@henrikingo)
target.addEventListener( eventType, callback ); *
return function removeRegisteredEventListener() { * Released under the MIT license. See LICENSE file.
target.removeEventListener( eventType, callback ); */
};
/* 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() { var assertInitWrapper = function() {
impress().init(); setTimeout( function() { assertInit(); }, 10 );
};
root.addEventListener( "impress:init", assertInitWrapper );
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.module( "Initialization" ); // 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( "Global Scope", function( assert ) { // The asserts below are true immediately after impress().init() returns.
assert.expect( 1 ); // Therefore we test them here, not in an event handler.
assert.ok( impress, "impress declared in global scope" ); 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( "Multiple API instantiation", function( assert ) { assert.ok( !iframeDoc.body.classList.contains( "impress-disabled" ),
assert.expect( 0 ); "body.impress-disabled is removed." );
impress().init(); assert.ok( iframeDoc.body.classList.contains( "impress-enabled" ),
}); "body.impress-enabled is added." );
QUnit.test( "Support Markup", function( assert ) { var canvas = iframeDoc.querySelector( "div#impress > div" );
assert.expect( 4 ); 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 impressNotSupported = document.body.classList.contains( "impress-not-supported" ); assert.equal( iframeDoc.documentElement.style.height,
var impressSupported = document.body.classList.contains( "impress-supported" ); "100%",
assert.ok( impressSupported, "Have class .impress-supported" ); "documentElement.style.height is 100%" );
assert.notOk( impressNotSupported, "Don't have class .impress-not-supported" );
var impressDisabled = document.body.classList.contains( "impress-disabled" ); // Steps initialization
var impressEnabled = document.body.classList.contains( "impress-enabled" ); var step1 = iframeDoc.querySelector( "div#step-1" );
assert.ok( impressEnabled, "Have class .impress-enabled" ); assert.equal( step1.style.position,
assert.notOk( impressDisabled, "Don't have class .impress-disabled" ); "absolute",
}); "Step position is 'absolute'." );
QUnit.test( "Attributes", function( assert ) { assert.ok( step1.classList.contains( "active" ),
assert.expect( 10 ); "Step 1 has active css class." );
var actual, expected;
var root = document.querySelector( "#impress" );
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.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";
if ( actual === "left top" || actual === "0% 0%" ) {
actual = expected;
} }
assert.strictEqual( actual, expected, "canvas.style.transformOrigin initialized correctly" ); doneSync();
console.log( "End init() test (sync)" );
} ); // LoadIframe()
actual = canvas.style.webkitTransformStyle || 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 = root.style.perspective;
expected = "";
assert.notStrictEqual( actual, expected, "root.style.perspective should be set explicitly for IE 11" );
actual = document.documentElement.style.height;
expected = "100%";
assert.strictEqual( actual, expected, "documentElement.style.height is 100%" );
} ); } );
QUnit.test( "Steps", function( assert ) { // Note: Here we focus on testing the core functionality of moving between
assert.expect( 2 ); // steps, the css classes set and unset, and events triggered.
// TODO: more complex animations and check position, transitions, delays, etc...
var actual, expected; QUnit.test( "Impress Core API", function( assert ) {
var step1 = document.querySelector( "div#step-1" ); console.log( "Begin core api test" );
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(); 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;
impress().next(); // 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
assert.ok( step2.classList.contains( "active" ), step2.id + " add active css class." ); var step1 = iframeDoc.querySelector( "div#step-1" );
assert.notOk( step1.classList.contains( "active" ), step1.id + " remove active css class." ); 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" );
// Reset to original state // On impress:stepenter, we do some assertions on the "entered" object.
var removeStepEnterEvent = registerEventListener( root, "impress:stepenter", function() { // On impress:stepleave, we do some assertions on the "left" object.
removeStepEnterEvent(); // 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
];
// 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(); done();
console.log( "End core api test" );
}
}
};
// 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 );
// 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" );
readyForNext();
};
var assertStepEnterWrapper = function( event ) {
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." );
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 assertStepLeaveWrapper = function( event ) {
setTimeout( function() { assertStepLeave( event ); }, wait );
};
root.addEventListener( "impress:stepleave", assertStepLeaveWrapper );
// 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." );
};
// Done with setup. Start testing! -----------------------------------------------//
// Do no-op tests first, then trigger the sequence of transitions we setup above. //
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." );
// This starts executing the sequence above
assert.ok( iframeWin.impress().next(),
"next() called and returns ok (1->2)" );
} ); // InitPresentation()
} ); // LoadIframe()
} ); } );
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';
});
}());

24
test/core_tests_presentation.html Normal file
View 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
View 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
View 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
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
View File

File diff suppressed because it is too large Load Diff

2422
test/syn/syn.js Normal file
View File

File diff suppressed because it is too large Load Diff