From 5e5a4cc73c8aed07409fdc7a6d8ab2c2f44c9f75 Mon Sep 17 00:00:00 2001 From: Timo Tijhof Date: Thu, 3 May 2012 02:09:26 +0200 Subject: [PATCH] Re-enable css @import unit tests - These tests were written while @import was broken. Now that it bug 34669 is temporarily fixed, we can re-enable the unit test to watch for regressions. - See also bug 31676 which is still open. - Added a "wait" parameter to the qunit Change-Id: If9c2ce012dfe62e032ca4f62384237af0acc826c --- tests/qunit/data/styleTest.css.php | 6 +- .../resources/mediawiki/mediawiki.test.js | 100 ++++++++++++------ 2 files changed, 74 insertions(+), 32 deletions(-) diff --git a/tests/qunit/data/styleTest.css.php b/tests/qunit/data/styleTest.css.php index a1b47ca06b..093c71f150 100644 --- a/tests/qunit/data/styleTest.css.php +++ b/tests/qunit/data/styleTest.css.php @@ -42,10 +42,14 @@ $params = array_map( 'cssfilter', $_GET ); $selector = isset( $params['selector'] ) ? $params['selector'] : '.mw-test-example'; $property = isset( $params['prop'] ) ? $params['prop'] : 'float'; $value = isset( $params['val'] ) ? $params['val'] : 'right'; +$wait = isset( $params['wait'] ) ? (int)$params['wait'] : 0; // seconds + +sleep( $wait ); $css = " /** - * Generated: " . gmdate( 'r' ) . " + * Generated " . gmdate( 'r' ) . ". + * Waited {$wait}s. */ $selector { diff --git a/tests/qunit/suites/resources/mediawiki/mediawiki.test.js b/tests/qunit/suites/resources/mediawiki/mediawiki.test.js index e66cac2cf0..fd4710fc69 100644 --- a/tests/qunit/suites/resources/mediawiki/mediawiki.test.js +++ b/tests/qunit/suites/resources/mediawiki/mediawiki.test.js @@ -15,15 +15,16 @@ test( '-- Initial check', function() { }); test( 'mw.Map', function() { + var arry, conf, funky, globalConf, nummy, someValues; expect(17); ok( mw.Map, 'mw.Map defined' ); - var conf = new mw.Map(), - // Dummy variables - funky = function() {}, - arry = [], - nummy = 7; + conf = new mw.Map(); + // Dummy variables + funky = function () {}; + arry = []; + nummy = 7; // Tests for input validation strictEqual( conf.get( 'inexistantKey' ), null, 'Map.get returns null if selection was a string and the key was not found' ); @@ -36,7 +37,7 @@ test( 'mw.Map', function() { strictEqual( conf.get( funky ), null, 'Map.get ruturns null if selection was invalid (Function)' ); // Multiple values at once - var someValues = { + someValues = { 'foo': 'bar', 'lorem': 'ipsum', 'MediaWiki': true @@ -62,7 +63,7 @@ test( 'mw.Map', function() { ok( false === 'globalMapChecker' in window, 'new mw.Map did not store its values in the global window object by default' ); - var globalConf = new mw.Map( true ); + globalConf = new mw.Map( true ); globalConf.set( 'anotherGlobalMapChecker', 'Hello' ); ok( 'anotherGlobalMapChecker' in window, 'new mw.Map( true ) did store its values in the global window object' ); @@ -80,13 +81,14 @@ test( 'mw.config', function() { }); test( 'mw.message & mw.messages', function() { + var goodbye, hello, pluralMessage; expect(20); ok( mw.messages, 'messages defined' ); ok( mw.messages instanceof mw.Map, 'mw.messages instance of mw.Map' ); ok( mw.messages.set( 'hello', 'Hello awesome world' ), 'mw.messages.set: Register' ); - var hello = mw.message( 'hello' ); + hello = mw.message( 'hello' ); equal( hello.format, 'plain', 'Message property "format" defaults to "plain"' ); strictEqual( hello.map, mw.messages, 'Message property "map" defaults to the global instance in mw.messages' ); @@ -110,7 +112,7 @@ test( 'mw.message & mw.messages', function() { strictEqual( hello.exists(), true, 'Message.exists returns true for existing messages' ); - var goodbye = mw.message( 'goodbye' ); + goodbye = mw.message( 'goodbye' ); strictEqual( goodbye.exists(), false, 'Message.exists returns false for nonexistent messages' ); equal( goodbye.plain(), '', 'Message.toString returns plain if format is "plain" and key does not exist' ); @@ -118,7 +120,7 @@ test( 'mw.message & mw.messages', function() { equal( goodbye.escaped(), '<goodbye>', 'Message.toString returns properly escaped <key> if format is "escaped" and key does not exist' ); ok( mw.messages.set( 'pluraltestmsg', 'There {{PLURAL:$1|is|are}} $1 {{PLURAL:$1|result|results}}' ), 'mw.messages.set: Register' ); - var pluralMessage = mw.message( 'pluraltestmsg' , 6 ); + pluralMessage = mw.message( 'pluraltestmsg' , 6 ); equal( pluralMessage.plain(), 'There are 6 results', 'plural get resolved when format is plain' ); equal( pluralMessage.parse(), 'There are 6 results', 'plural get resolved when format is parse' ); @@ -144,9 +146,8 @@ test( 'mw.msg', function() { }); test( 'mw.loader', function() { - expect(2); - var isAwesomeDone; + expect(2); // Async ahead stop(); @@ -173,46 +174,83 @@ test( 'mw.loader', function() { }); test( 'mw.loader.implement', function () { - expect(5 - 2); - - var isJsExecuted, $element; + var isJsExecuted, $element, styleTestUrl; + expect(5); // Async ahead stop(); + styleTestUrl = QUnit.fixurl( + mw.config.get( 'wgScriptPath' ) + + '/tests/qunit/data/styleTest.css.php?' + + $.param({ + selector: '.mw-test-loaderimplement', + prop: 'float', + val: 'right' + }) + ); + mw.loader.implement( 'test.implement', function () { - start(); + var styleTestTimeout, styleTestStart, styleTestSince; strictEqual( isJsExecuted, undefined, 'javascript not executed multiple times' ); isJsExecuted = true; equal( mw.loader.getState( 'test.implement' ), 'loaded', 'module state is "loaded" while implement() is executing javascript' ); - + $element = $( '
Foo bar
' ).appendTo( '#qunit-fixture' ); - // @broken: equal( $element.css( 'text-align' ),'center', 'CSS stylesheet was applied in time. ("text-align: center")' ); + equal( mw.msg( 'test-foobar' ), 'Hello Foobar, $1!', 'Messages are loaded before javascript execution' ); + + // The @import test. This is, in a way, also an open bug for ResourceLoader + // ("execute js after styles are loaded"), but browsers don't offer a way to + // get a callback from when a stylesheet is loaded (that is, including any + // @import rules inside). + // To work around this, we'll have a little time loop to check if the styles + // apply. + // Note: This test originally used new Image() and onerror to get a callback + // when the url is loaded, but that is fragile since it doesn't monitor the + // same request as the css @import, and Safari 4 has issues with + // onerror/onload not being fired at all in weird cases like this. - // Marked broken due to a bug in qunit/index.html, via Special:JavaScriptTest/qunit it works fine + styleTestTimeout = QUnit.config.testTimeout || 5000; // milliseconds - // CSS @import is easily broken when concatenating stylesheets (bug 34669) - // @broken: equal( $element.css( 'float' ), 'right', 'CSS stylesheet was applied in time via @import (bug 34669). ("float: right")' ); + function isCssImportApplied() { + return $element.css( 'float' ) === 'right'; + } + + function styleTestLoop() { + styleTestSince = new Date().getTime() - styleTestStart; + // If it is passing or if we timed out, run the real test and stop the loop + if ( isCssImportApplied() || styleTestSince > styleTestTimeout ) { + equal( $element.css( 'float' ), 'right', + 'CSS stylesheet via @import was applied (after ' + styleTestSince + 'ms) (bug 34669). ("float: right")' + ); + + equal( $element.css( 'text-align' ),'center', + 'CSS styles after the @import are working ("text-align: center")' + ); + + // Async done + start(); + + return; + } + // Otherwise, keep polling + setTimeout( styleTestLoop, 100 ); + } - equal( mw.msg( 'test-foobar' ), 'Hello Foobar, $1!', 'Messages are loaded in time' ); - + // Start the loop + styleTestStart = new Date().getTime(); + styleTestLoop(); }, { "all": "@import url('" - + QUnit.fixurl( mw.config.get( 'wgScriptPath' ) - + '/tests/qunit/data/styleTest.css.php?' - + $.param({ - selector: '.mw-test-loaderimplement', - prop: 'float', - val: 'right' - }) ) + + styleTestUrl + "');\n" - + '.mw-test-loaderimplement { text-align: center; }' + + '.mw-test-loaderimplement { text-align: center; }' }, { "test-foobar": "Hello Foobar, $1!" -- 2.20.1