Tests!

Author: zachleat

.gitignore

@@ -1 +1,2 @@
 bower_components
+node_modules

Gruntfile.js

@@ -0,0 +1,21 @@
+/*global module:false*/
+module.exports = function(grunt) {
+
+	// Project configuration.
+	grunt.initConfig({
+		pkg: grunt.file.readJSON('package.json'),
+		watch: {
+			files: ['fixedsticky.css', 'fixedsticky.js', 'test/fixed-sticky-tests.js'],
+			tasks: 'qunit'
+		},
+		qunit: {
+			all: ['test/**/*.html']
+		}
+	});
+
+	require( 'matchdep' ).filterDev( 'grunt-*' ).forEach( grunt.loadNpmTasks );
+
+	// Default task.
+	grunt.registerTask( 'test', [ 'qunit' ] );
+	grunt.registerTask( 'default', [ 'qunit' ] );
+};

README.md

@@ -70,9 +70,7 @@ These tests were performed using fixed-sticky with fixed-fixed. It’s safest to
 
 ## TODO
 
-* Tests (of course). I have a serious case of developer guilt releasing this without tests.
 * Add support for table headers.
-* Method to unbind scroll/resize events.
 * Vanilla JS version.
 
 ## Release History

demos/demo.html

@@ -4,7 +4,7 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width,initial-scale=1">
 		<title>Fixed Sticky</title>
-		<link rel="stylesheet" href="fixedsticky.css">
+		<link rel="stylesheet" href="../fixedsticky.css">
 		<style>
 			/* Demo CSS */
 			body { font-family: sans-serif; color: #444; margin: 0 auto; padding: 50px 20px; max-width: 600px; }
@@ -177,9 +177,9 @@ <h2>Header Level 2</h2>
 			 <li>Aliquam tincidunt mauris eu risus.</li>
 		</ol>
 
-		<script src="bower_components/jquery/jquery.js"></script>
-		<script src="bower_components/filament-fixed/fixedfixed.js"></script>
-		<script src="fixedsticky.js"></script>
+		<script src="../bower_components/jquery/jquery.js"></script>
+		<script src="../bower_components/filament-fixed/fixedfixed.js"></script>
+		<script src="../fixedsticky.js"></script>
 		<script>
 		FixedSticky.tests.sticky = false;
 		$( '.top, .bottom' ).fixedsticky();

fixedsticky.js

@@ -21,6 +21,10 @@
 			clone: 'fixedsticky-dummy',
 			withoutFixedFixed: 'fixedsticky-withoutfixedfixed'
 		},
+		keys: {
+			offset: 'fixedStickyOffset',
+			position: 'fixedStickyPosition'
+		},
 		tests: {
 			sticky: featureTest( 'position', 'sticky' ),
 			fixed: featureTest( 'position', 'fixed', true )
@@ -41,26 +45,22 @@
 			if( !el.offsetWidth ) return;
 
 			var $el = $( el ),
-				keys = {
-					offset: 'fixedStickyOffset',
-					position: 'fixedStickyPosition'
-				},
 				height = $el.outerHeight(),
-				initialOffset = $el.data( keys.offset ),
+				initialOffset = $el.data( S.keys.offset ),
 				scroll = S.getScrollTop(),
 				isAlreadyOn = $el.is( '.' + S.classes.active ),
 				toggle = function( turnOn ) {
 					$el[ turnOn ? 'addClass' : 'removeClass' ]( S.classes.active );
 				},
 				viewportHeight = $( window ).height(),
-				position = $el.data( keys.position ),
+				position = $el.data( S.keys.position ),
 				skipSettingToFixed,
 				elTop,
 				elBottom;
 
 			if( !initialOffset ) {
 				initialOffset = $el.offset().top;
-				$el.data( keys.offset, initialOffset );
+				$el.data( S.keys.offset, initialOffset );
 				$el.after( $( '<div>' ).addClass( S.classes.clone ).height( height ) );
 			}
 
@@ -81,7 +81,7 @@
 					$el.css( 'position', '' );
 				}
 
-				$el.data( keys.position, position );
+				$el.data( S.keys.position, position );
 			}
 
 			elTop = parseInt( $( el ).css( 'top' ), 10 ) || 0;
@@ -107,7 +107,7 @@
 
 			return $el.each(function() {
 				$( this )
-					.removeData( [ keys.offset, keys.position ] )
+					.removeData( [ S.keys.offset, S.keys.position ] )
 					.removeClass( S.classes.active )
 					.nextUntil( S.classes.clone ).remove();
 			});

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "fixed-sticky",
+  "version": "0.1.1",
+  "description": "A position: sticky polyfill that works with filamentgroup/fixed-fixed for a safer position:fixed fallback.",
+  "main": "fixedsticky.js",
+  "scripts": {
+    "test": "grunt test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/filamentgroup/fixed-sticky.git"
+  },
+  "keywords": [
+    "sticky"
+  ],
+  "author": "Zach Leatherman",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/filamentgroup/fixed-sticky/issues"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-qunit": "~0.3.0",
+    "matchdep": "~0.3.0",
+    "grunt-contrib-watch": "~0.5.3"
+  }
+}

test/fixed-sticky-tests.js

@@ -0,0 +1,72 @@
+/*global QUnit:false, module:false, test:false, asyncTest:false, expect:false, start:false, stop:false, ok:false, equal:false, notEqual:false, deepEqual:false, notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false, SocialCount:true */
+(function($) {
+
+	/*
+		======== A Handy Little QUnit Reference ========
+		http://docs.jquery.com/QUnit
+
+		Test methods:
+			expect(numAssertions)
+			stop(increment)
+			start(decrement)
+		Test assertions:
+			ok(value, [message])
+			equal(actual, expected, [message])
+			notEqual(actual, expected, [message])
+			deepEqual(actual, expected, [message])
+			notDeepEqual(actual, expected, [message])
+			strictEqual(actual, expected, [message])
+			notStrictEqual(actual, expected, [message])
+			raises(block, [expected], [message])
+	*/
+
+	module('testDefault');
+
+	test( 'Setup', function() {
+		// These tests require non-native sticky support. Should be set in the test runner.
+		ok( !FixedSticky.tests.sticky );
+	});
+
+	test( 'Standard Top', function() {
+		$('#qunit-fixture').html(
+				['<style>#sticky { top: 0; }</style>',
+				'<div id="sticky" class="fixedsticky">Sticky</div>',
+				'<div style="width: 100%; height: 2000px">Test</div>'].join( '' ) );
+
+		var $sticky = $( '#sticky' );
+		$sticky.fixedsticky();
+
+		ok( $sticky.hasClass( 'fixedsticky' ) );
+		$(window).scrollTop( 1000 ).trigger( 'scroll' );
+		equal( $sticky.css( 'position' ), 'fixed' );
+		equal( $sticky.offset().top, 1000 );
+	});
+
+	test( 'Standard Bottom', function() {
+		$('#qunit-fixture').html(
+				['<style>#sticky { bottom: 0; }</style>',
+				'<div style="width: 100%; height: 2000px">Test</div>',
+				'<div id="sticky" class="fixedsticky">Sticky</div>'].join( '' ) );
+
+		var $sticky = $( '#sticky' );
+		$sticky.fixedsticky();
+
+		ok( $sticky.hasClass( 'fixedsticky' ) );
+		$(window).scrollTop( 1000 ).trigger( 'scroll' );
+		equal( $sticky.css( 'position' ), 'fixed' );
+		equal( $sticky.offset().top, 1000 + $( window ).height() - $sticky.height() );
+	});
+
+	test( 'Cleanup', function() {
+		$('#qunit-fixture').html('<div id="sticky" class="fixedsticky">Sticky</div>' );
+
+		var $sticky = $( '#sticky' );
+			$sticky.fixedsticky();
+
+		ok( $sticky.next().hasClass( FixedSticky.classes.clone ) );
+
+		$sticky.fixedsticky( 'destroy' );
+		ok( !$sticky.siblings( '.' + FixedSticky.classes.clone ).length );
+	});
+
+}( jQuery ));

test/fixed-sticky.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>fixed-sticky Test Suite</title>
+	<!-- Load local jQuery, removing access to $ (use jQuery, not $). -->
+	<script src="../bower_components/jquery/jquery.js"></script>
+	<script>jQuery.noConflict()</script>
+	<!-- Load local QUnit (grunt requires v1.0.0 or newer). -->
+	<link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css">
+	<style>
+	#qunit-fixture {
+		position: static !important;
+		width: auto;
+		height: auto;
+	}
+	</style>
+	<link rel="stylesheet" href="../fixedsticky.css">
+	<script src="../bower_components/qunit/qunit/qunit.js"></script>
+	<!-- Load local lib and tests. -->
+	<script src="../fixedsticky.js"></script>
+	<script>
+	FixedSticky.tests.sticky = false;
+	</script>
+	<script src="fixed-sticky-tests.js"></script>
+</head>
+<body>
+	<h1 id="qunit-header">fixed-sticky Test Suite</h1>
+	<h2 id="qunit-banner"></h2>
+	<div id="qunit-testrunner-toolbar"></div>
+	<h2 id="qunit-userAgent"></h2>
+	<ol id="qunit-tests"></ol>
+	<div id="qunit-fixture"></div>
+</body>
+</html>