Skip to content

Commit

Permalink
Tests are now working! Tested in Win7 IE8, WinXP IE8 IE7 and IE6. Now…
Browse files Browse the repository at this point in the history 
… using strictEqual instead of ok for better reporting when tests fail. Tried to shrink the tests down a little better so they work in browserstack (which only goes up to 1280x1024).
  • Loading branch information
@zachleat
zachleat committed Nov 25, 2013
1 parent e4dd82d commit 33acb07
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 34 deletions.
4 changes: 2 additions & 2 deletions test/unit/index.html
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<link rel="stylesheet" href="qunit/qunit.css" media="screen"> <link rel="stylesheet" href="qunit/qunit.css" media="screen">
<script src="qunit/qunit.js"></script> <script src="qunit/qunit.js"></script>
<link href="test.css" rel="stylesheet" /> <link href="test.css" rel="stylesheet" />
<link href="test2.css" media="screen and (min-width: 1200px)" rel="stylesheet" /> <link href="test2.css" media="screen and (min-width: 950px)" rel="stylesheet" />
<link href="test3.css" media="screen and (min-width: 87.5em)" rel="stylesheet" /> <link href="test3.css" media="screen and (min-width: 68.75em)" rel="stylesheet" />
<script src="../../dest/respond.src.js"></script> <script src="../../dest/respond.src.js"></script>
<script src="tests.js"></script> <script src="tests.js"></script>


Expand Down
5 changes: 3 additions & 2 deletions test/unit/test.css
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@


#testelem { #testelem {
width: 50px; width: 50px;
overflow: hidden;
display: block; display: block;
} }


Expand Down Expand Up @@ -41,9 +42,9 @@
} }


/* testing em unit support - 33em should be 528px and 35em should be 560px in IE with default font settings */ /* testing em unit support - 33em should be 528px and 35em should be 560px in IE with default font settings */
@media screen and (min-width: 33em) and (max-width: 35em) { @media screen and (min-width: 33em) and (max-width: 38em) {
#testelem { #testelem {
width: 12px; width: 75px;
} }
} }


Expand Down
2 changes: 1 addition & 1 deletion test/unit/test2.css
View file
Original file line number Original file line Diff line number Diff line change
@@ -1,5 +1,5 @@
/* this stylesheet was referenced via a link that had a media attr defined /* this stylesheet was referenced via a link that had a media attr defined
it should only apply on window > 1200px */ it should only apply on window > 950px */
#testelem { #testelem {
width: 16px; width: 16px;
} }
60 changes: 31 additions & 29 deletions test/unit/tests.js
View file
Original file line number Original file line Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
Respond.js unit tests - based on qUnit Respond.js unit tests - based on qUnit
*/ */


QUnit.config.reorder = false;

window.onload = function(){ window.onload = function(){


function getNormalizedUrl( filename ) { function getNormalizedUrl( filename ) {
Expand Down Expand Up @@ -35,12 +37,11 @@ window.onload = function(){


var testElem = document.getElementById("testelem"); var testElem = document.getElementById("testelem");


//check if a particular style has applied properly function getWidth(){
function widthApplied( val ){ return testElem.offsetWidth;
return testElem.offsetWidth === val;
} }
function heightApplied( val ){ function getHeight(){
return testElem.offsetHeight === val; return testElem.offsetHeight;
} }


// A short snippet for detecting versions of IE in JavaScript - author: @padolsey // A short snippet for detecting versions of IE in JavaScript - author: @padolsey
Expand All @@ -64,92 +65,93 @@ window.onload = function(){


/* TESTS HERE */ /* TESTS HERE */
asyncTest( 'Styles not nested in media queries apply as expected', function() { asyncTest( 'Styles not nested in media queries apply as expected', function() {
window.resizeTo(200,600); window.resizeTo(200,800);
setTimeout(function(){ setTimeout(function(){
ok( widthApplied( 50 ), "testelem is 50px wide when window is 200px wide" ); strictEqual( getWidth(), 50, "testelem is 50px wide when window is 200px wide" );
start(); start();
}, 900); }, 900);
}); });


asyncTest( 'styles within min-width media queries apply properly', function() { asyncTest( 'styles within min-width media queries apply properly', function() {
window.resizeTo(520,600); window.resizeTo(520,800);
setTimeout(function(){ setTimeout(function(){
ok( widthApplied( 150 ), 'testelem is 150px wide when window is 500px wide' ); strictEqual( getWidth(), 150, 'testelem is 150px wide when window is 500px wide' );
start(); start();
}, 900); }, 900);
}); });


// This test is for a feature in IE7 and up // // This test is for a feature in IE7 and up
if( ie >= 7 ){ if( ie >= 7 ){
asyncTest( "attribute selectors still work (where supported) after respond runs its course", function() { asyncTest( "attribute selectors still work (where supported) after respond runs its course", function() {
window.resizeTo(520,600); window.resizeTo(520,800);
setTimeout(function(){ setTimeout(function(){
ok( heightApplied( 200 ), "testelem is 200px tall when window is 500px wide" ); strictEqual( getHeight(), 200, "testelem is 200px tall when window is 500px wide" );
start(); start();
}, 900); }, 900);
}); });
} }




asyncTest( 'styles within max-width media queries apply properly', function() { asyncTest( 'styles within max-width media queries apply properly', function() {
window.resizeTo(300,600); window.resizeTo(300,800);
setTimeout(function(){ setTimeout(function(){
ok( heightApplied( 150 ), 'testelem is 150px tall when window is under 480px wide' ); strictEqual( getHeight(), 150, 'testelem is 150px tall when window is under 480px wide' );
start(); start();
}, 900); }, 900);
}); });






asyncTest( 'min and max-width media queries that use EM units apply properly', function() { asyncTest( 'min and max-width media queries that use EM units apply properly', function() {
window.resizeTo(560,600); window.resizeTo(580,800);
setTimeout(function(){ setTimeout(function(){
ok( widthApplied( 12 ), 'testelem is 150px wide when window is 500px wide' ); strictEqual( getWidth(), 75, 'testelem is 75px wide when window is 580px wide (between 33em and 38em)' );
start(); start();
}, 900); }, 900);
}); });






asyncTest( "styles within a min-width media query with an \"only\" keyword apply properly", function() { asyncTest( "styles within a min-width media query with an \"only\" keyword apply properly", function() {
window.resizeTo(650,600); window.resizeTo(650,800);
setTimeout(function(){ setTimeout(function(){
ok( widthApplied( 250 ), "testelem is 250px wide when window is 650px wide" ); strictEqual( getWidth(), 250, "testelem is 250px wide when window is 650px wide" );
start(); start();
}, 900); }, 900);
}); });


asyncTest( "styles within a media query with a one true query among other false queries apply properly", function() { asyncTest( "styles within a media query with a one true query among other false queries apply properly", function() {
window.resizeTo(800,600); window.resizeTo(800,800);
setTimeout(function(){ setTimeout(function(){
ok( widthApplied( 350 ), "testelem is 350px wide when window is 750px wide" ); strictEqual( getWidth(), 350, "testelem is 350px wide when window is 750px wide" );
start(); start();
}, 900); }, 900);
}); });






asyncTest( "Styles within a false media query do not apply", function() { asyncTest( "Styles within a false media query do not apply", function() {
window.resizeTo(800,600); window.resizeTo(800,800);
setTimeout(function(){ setTimeout(function(){
ok( !widthApplied( 500 ), "testelem is not 500px wide when window is 800px wide" ); notStrictEqual( getWidth(), 500, "testelem is not 500px wide when window is 800px wide" );
start(); start();


}, 900); }, 900);
}); });

asyncTest( "stylesheets with a media query in a media attribute apply when they should", function() { asyncTest( "stylesheets with a media query in a media attribute apply when they should", function() {
window.resizeTo(1300,600); window.resizeTo(1000,800);
setTimeout(function(){ setTimeout(function(){
ok( widthApplied( 16 ), "testelem is 16px wide when window is 1300px wide" ); strictEqual( getWidth(), 16, "testelem is 16px wide when window is wider than 950px" );
start(); start();
}, 900); }, 900);
}); });


// Careful, browserstack has a default resolution of 1024x768
asyncTest( "stylesheets with an EM-based media query in a media attribute apply when they should", function() { asyncTest( "stylesheets with an EM-based media query in a media attribute apply when they should", function() {
window.resizeTo(1500,600); window.resizeTo(1150,800);
setTimeout(function(){ setTimeout(function(){
ok( widthApplied( 25 ), "testelem is 25px wide when window is > 1400px wide" ); strictEqual( getWidth(), 25, "testelem is 25px wide when window is wider than 1100px wide. Does your screen width go that wide?" );
start(); start();
}, 900); }, 900);
}); });
Expand Down

0 comments on commit 33acb07

Please sign in to comment.