Permalink
Browse files

Tests are now working! Tested in Win7 IE8, WinXP IE8 IE7 and IE6. Now…

… 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 committed Nov 25, 2013
1 parent e4dd82d commit 33acb07cd6966ad065edc045c89845338ffabd43
Showing with 37 additions and 34 deletions.
  1. +2 −2 test/unit/index.html
  2. +3 −2 test/unit/test.css
  3. +1 −1 test/unit/test2.css
  4. +31 −29 test/unit/tests.js
View
@@ -6,8 +6,8 @@
<link rel="stylesheet" href="qunit/qunit.css" media="screen">
<script src="qunit/qunit.js"></script>
<link href="test.css" rel="stylesheet" />
- <link href="test2.css" media="screen and (min-width: 1200px)" rel="stylesheet" />
- <link href="test3.css" media="screen and (min-width: 87.5em)" rel="stylesheet" />
+ <link href="test2.css" media="screen and (min-width: 950px)" rel="stylesheet" />
+ <link href="test3.css" media="screen and (min-width: 68.75em)" rel="stylesheet" />
<script src="../../dest/respond.src.js"></script>
<script src="tests.js"></script>
View
@@ -13,6 +13,7 @@
#testelem {
width: 50px;
+ overflow: hidden;
display: block;
}
@@ -41,9 +42,9 @@
}
/* 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 {
- width: 12px;
+ width: 75px;
}
}
View
@@ -1,5 +1,5 @@
/* 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 {
width: 16px;
}
View
@@ -2,6 +2,8 @@
Respond.js unit tests - based on qUnit
*/
+QUnit.config.reorder = false;
+
window.onload = function(){
function getNormalizedUrl( filename ) {
@@ -35,12 +37,11 @@ window.onload = function(){
var testElem = document.getElementById("testelem");
- //check if a particular style has applied properly
- function widthApplied( val ){
- return testElem.offsetWidth === val;
+ function getWidth(){
+ return testElem.offsetWidth;
}
- function heightApplied( val ){
- return testElem.offsetHeight === val;
+ function getHeight(){
+ return testElem.offsetHeight;
}
// A short snippet for detecting versions of IE in JavaScript - author: @padolsey
@@ -64,92 +65,93 @@ window.onload = function(){
/* TESTS HERE */
asyncTest( 'Styles not nested in media queries apply as expected', function() {
- window.resizeTo(200,600);
+ window.resizeTo(200,800);
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();
}, 900);
});
asyncTest( 'styles within min-width media queries apply properly', function() {
- window.resizeTo(520,600);
+ window.resizeTo(520,800);
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();
}, 900);
});
- // This test is for a feature in IE7 and up
- if( ie >= 7 ){
+ // // This test is for a feature in IE7 and up
+ if( ie >= 7 ){
asyncTest( "attribute selectors still work (where supported) after respond runs its course", function() {
- window.resizeTo(520,600);
+ window.resizeTo(520,800);
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();
}, 900);
});
}
asyncTest( 'styles within max-width media queries apply properly', function() {
- window.resizeTo(300,600);
+ window.resizeTo(300,800);
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();
}, 900);
});
asyncTest( 'min and max-width media queries that use EM units apply properly', function() {
- window.resizeTo(560,600);
+ window.resizeTo(580,800);
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();
}, 900);
});
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(){
- 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();
}, 900);
});
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(){
- 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();
}, 900);
});
asyncTest( "Styles within a false media query do not apply", function() {
- window.resizeTo(800,600);
+ window.resizeTo(800,800);
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();
}, 900);
});
-
+
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(){
- 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();
}, 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() {
- window.resizeTo(1500,600);
+ window.resizeTo(1150,800);
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();
}, 900);
});

0 comments on commit 33acb07

Please sign in to comment.