tests(style): header how should be offscreen yet visible

Author: awerlang

karma.conf.js

@@ -21,7 +21,7 @@ module.exports = function(config) {
       'bower_components/bootstrap/dist/css/bootstrap.css',
       'src/**/*.js',
       'src/**/*.css',
-      'tests/**/*.spec.js'
+      'tests/**/*.js'
     ],
 
 

tests/directive.spec.js

@@ -11,6 +11,43 @@ describe('directive', function () {
 		$rootScope = _$rootScope_;
 	}));
 
+	it('header rows are visible but offscreen', function () {
+		var markup = [
+		    '<table wt-responsive-table>',
+		    '    <thead>',
+		    '        <tr>',
+		    '            <th>First title</th>',
+		    '            <th>Second title</th>',
+		    '            <th>Third title</th>',
+		    '            <th>Forth title</th>',
+		    '        </tr>',
+		    '    </thead>',
+		    '    <tbody>',
+		    '        <tr>',
+		    '            <td>First column</td>',
+		    '            <td>Second column</td>',
+		    '            <td>Third column</td>',
+		    '            <td>Forth column</td>',
+		    '        </tr>',
+		    '        <tr>',
+		    '            <td>First column</td>',
+		    '            <td>Second column</td>',
+		    '            <td>Third column</td>',
+		    '            <td>Forth column</td>',
+		    '        </tr>',
+		    '    </tbody>',
+		    '</table>'
+		].join('');
+		var element = angular.element(markup);
+		document.body.appendChild(element[0]);
+		$compile(element);
+		$rootScope.$digest();
+
+		var headerRow = element.find('tr th');
+		expect(headerRow.is(':visible')).toBe(true);
+		expect(headerRow.is(':offscreen')).toBe(true);
+	});
+
 	it('supports rows with no <thead>', function () {
 		var markup = [
 		    '<table wt-responsive-table>',
@@ -43,7 +80,6 @@ describe('directive', function () {
 		expect(headerRow.eq(1).attr('data-title')).toBeUndefined();
 		expect(headerRow.eq(2).attr('data-title')).toBeUndefined();
 		expect(headerRow.eq(3).attr('data-title')).toBeUndefined();
-		expect(headerRow.is(':visible')).toBe(true);
 	});
 
 	it('supports colspan', function () {

tests/lib.js

@@ -0,0 +1,9 @@
+/// <reference path="../typings/jquery/jquery.d.ts"/>
+jQuery.expr.filters.offscreen = function(el) {
+  //console.log('el(' + el.textContent + '): (' + el.offsetLeft + ' x ' + el.offsetTop + ') -> (' + (el.offsetLeft+el.offsetWidth) + ' x ' + (el.offsetTop+el.offsetHeight) + ')');
+  return (
+              (el.offsetLeft + el.offsetWidth) < 0 
+              || (el.offsetTop + el.offsetHeight) < 0
+              || (el.offsetLeft > window.innerWidth || el.offsetTop > window.innerHeight)
+         );
+};