Permalink
Browse files

Unit tests started. YAY

  • Loading branch information...
1 parent c79e5d3 commit cf943544f8cb5a54a72e97419bfda94329dd03b6 scottjehl committed May 13, 2011
Showing with 184 additions and 0 deletions.
  1. +28 −0 test/unit/index.html
  2. +56 −0 test/unit/test.css
  3. +5 −0 test/unit/test2.css
  4. +95 −0 test/unit/tests.js
View
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <title>Respond.js Test Suite</title>
+ <link rel="stylesheet" href="http://github.com/jquery/qunit/raw/master/qunit/qunit.css" media="screen">
+ <script src="http://github.com/jquery/qunit/raw/master/qunit/qunit.js"></script>
+ <script src="../../respond.src.js"></script>
+ <link href="test.css" rel="stylesheet" />
+ <link href="test2.css" media="all and (min-width: 1200px)" rel="stylesheet" />
+ <script src="tests.js"></script>
+
+</head>
+<body>
+ <h1 id="qunit-header">Respond.js Test Suite</h1>
+ <h2 id="qunit-banner"></h2>
+ <div id="qunit-testrunner-toolbar"></div>
+ <h2 id="qunit-userAgent"></h2>
+ <ol id="qunit-tests"></ol>
+
+ <!-- tests must run in new window -->
+ <div id="launcher"></div>
+
+ <!-- elem for applying css via queries -->
+ <div id="testelem"></div>
+
+</body>
+</html>
View
@@ -0,0 +1,56 @@
+
+
+.launcher #qunit-testrunner-toolbar,
+.launcher #qunit-userAgent,
+.launcher #qunit-tests,
+.launcher #qunit-testresult {
+ display: none;
+}
+.launcher #launcher {
+
+ font: 1.5em/1 bold Helvetica, sans-serif;
+}
+
+#testelem {
+ width: 50px;
+}
+
+/*styles for 480px and up */
+@media screen and (min-width: 480px) {
+ #testelem {
+ width: 150px;
+ }
+}/*/mediaquery*/
+
+/*styles for 500px and under*/
+@media screen and (max-width: 480px) {
+ #testelem {
+ height: 150px;
+ }
+}/*/mediaquery*/
+
+
+
+
+/*styles for 620px and up */
+@media only screen and (min-width: 620px) {
+ #testelem {
+ width: 250px;
+ }
+}/*/mediaquery*/
+
+
+/*styles for 760px and up */
+@media only print, only screen and (min-width: 760px) {
+ #testelem {
+ width: 350px;
+ }
+}/*/mediaquery*/
+
+
+/*styles for print that shouldn't apply */
+@media only print and (min-width: 800px) {
+ #testelem {
+ width: 500px;
+ }
+}/*/mediaquery*/
View
@@ -0,0 +1,5 @@
+/* this stylesheet was referenced via a link that had a media attr defined
+it should only apply on screen > 1200px */
+#testelem {
+ width: 16px;
+}
View
@@ -0,0 +1,95 @@
+/*
+ Respond.js unit tests - based on qUnit
+*/
+
+window.onload = function(){
+
+ if( !window.opener ){
+
+ document.documentElement.className = "launcher";
+
+ document.getElementById("launcher").innerHTML = '<p>Tests must run in a popup window. <a href="suite.html" id="suitelink">Open test suite</a></p>';
+
+ document.getElementById( "suitelink" ).onclick = function(){
+ window.open( location.href + "?" + Math.random(), 'win', 'width=800,height=600,scrollbars=1,resizable=1' );
+ return false;
+ };
+
+ }
+ else {
+
+ var testElem = document.getElementById("testelem");
+
+ //check if a particular style has applied properly
+ function widthApplied( val ){
+ return testElem.offsetWidth === val;
+ }
+ function heightApplied( val ){
+ return testElem.offsetHeight === val;
+ }
+
+
+
+ /* TESTS HERE */
+ asyncTest( 'Styles not nested in media queries apply as expected', function() {
+ window.resizeTo(200,600);
+ setTimeout(function(){
+ ok( widthApplied( 50 ), "testelem is 50px wide when window is 200px wide" );
+ start();
+ }, 50);
+ });
+
+ asyncTest( 'styles within min-width media queries apply properly', function() {
+ window.resizeTo(500,600);
+ setTimeout(function(){
+ ok( widthApplied( 150 ), 'testelem is 150px wide when window is 500px wide' );
+ start();
+ }, 50);
+ });
+
+ asyncTest( 'styles within max-width media queries apply properly', function() {
+ window.resizeTo(300,600);
+ setTimeout(function(){
+ ok( heightApplied( 150 ), 'testelem is 150px tall when window is under 480px wide' );
+ start();
+ }, 50);
+ });
+
+
+
+ asyncTest( "styles within a min-width media query with an \"only\" keyword apply properly", function() {
+ window.resizeTo(650,600);
+ setTimeout(function(){
+ ok( widthApplied( 250 ), "testelem is 250px wide when window is 650px wide" );
+ start();
+ }, 50);
+ });
+
+ asyncTest( "styles within a media query with a one true query among other false queries apply properly", function() {
+ window.resizeTo(800,600);
+ setTimeout(function(){
+ ok( widthApplied( 350 ), "testelem is 350px wide when window is 750px wide" );
+ start();
+ }, 50);
+ });
+
+ asyncTest( "stylesheets with a media query in a media attribute apply when they should", function() {
+ window.resizeTo(1300,600);
+ setTimeout(function(){
+ ok( widthApplied( 16 ), "testelem is 16px wide when window is 1300px wide" );
+ start();
+ }, 50);
+ });
+
+ asyncTest( "Styles within a false media query do not apply", function() {
+ window.resizeTo(800,600);
+ setTimeout(function(){
+ ok( !widthApplied( 500 ), "testelem is not 500px wide when window is 1300px wide" );
+ start();
+
+ }, 50);
+ });
+
+ }
+
+};

0 comments on commit cf94354

Please sign in to comment.