improved tests

jquery.matchHeight.js

@@ -137,6 +137,8 @@
  matchHeight._beforeUpdate = null;
  matchHeight._afterUpdate = null;
  matchHeight._rows = _rows;
+ matchHeight._parse = _parse;
+ matchHeight._parseOptions = _parseOptions;
 
  /*
  * matchHeight._apply

test/conf/cloud.conf.js

@@ -18,7 +18,7 @@ var capabilities = [
  {
  browser: 'iPhone',
  device: 'iPhone 6',
- deviceOrientation: 'landscape'
+ deviceOrientation: 'portrait'
  },
  {
  browser: 'iPad',
@@ -28,7 +28,7 @@ var capabilities = [
  {
  browser: 'android',
  device: 'Samsung Galaxy S5',
- deviceOrientation: 'landscape'
+ deviceOrientation: 'portrait'
  },
  {
  browser: 'android',
@@ -46,7 +46,7 @@ for (var i = 0; i < capabilities.length; i += 1) {
 
  if (!capability['deviceOrientation']) {
  capability['viewports'] = capability['viewports'] || viewports;
- capability['resolution'] = capability['resolution'] || '1680x1050';
+ capability['resolution'] = capability['resolution'] || '1600x1200';
  }
 }
 

test/specs/matchHeight.spec.js

@@ -1,21 +1,35 @@
 // NOTE: these test specs are a work in progress
 // manual testing before going into production is still advised!
+// the following features are implemented, but do not have specs yet:
 
-// TODO: spec for _parse
-// TODO: spec for _parseOptions
 // TODO: spec for $(elements).matchHeight({ property: 'min-height' })
 // TODO: spec for $(elements).matchHeight({ remove: true })
 // TODO: spec for events: ready, load, resize, orientationchange
-// TODO: spec for $.fn.matchHeight._update
-// TODO: spec for $.fn.matchHeight._beforeUpdate
-// TODO: spec for $.fn.matchHeight._afterUpdate
 // TODO: spec for $.fn.matchHeight._groups
 // TODO: spec for $.fn.matchHeight._throttle
 // TODO: spec for $.fn.matchHeight._maintainScroll
 // TODO: spec for handling box-sizing, padding, margin, border
 
 
 describe('matchHeight', function() {
+ beforeEach(function(){
+ jasmine.addMatchers({
+ toBeWithinTolerance: function() {
+ return {
+ compare: function(actual, expected, tolerance) {
+ if (tolerance !== 0) {
+ tolerance = tolerance || 1;
+ }
+
+ return {
+ pass: Math.abs(expected - actual) <= tolerance
+ };
+ }
+ }
+ }
+ });
+ });
+
  it('has been defined', function(done) {
  var matchHeight = $.fn.matchHeight;
  expect(typeof matchHeight).toBe('function');
@@ -40,12 +54,12 @@ describe('matchHeight', function() {
  if (currentBreakpoint === 'mobile') {
  // all heights will be different
  } else if (currentBreakpoint === 'tablet') {
- expect(item0Height).toBe(item1Height);
- expect(item2Height).toBe(item3Height);
+ expect(item0Height).toBeWithinTolerance(item1Height);
+ expect(item2Height).toBeWithinTolerance(item3Height);
  } else if (currentBreakpoint === 'desktop') {
- expect(item0Height).toBe(item3Height);
- expect(item1Height).toBe(item3Height);
- expect(item2Height).toBe(item3Height);
+ expect(item0Height).toBeWithinTolerance(item3Height);
+ expect(item1Height).toBeWithinTolerance(item3Height);
+ expect(item2Height).toBeWithinTolerance(item3Height);
  }
 
  done();
@@ -101,14 +115,14 @@ describe('matchHeight', function() {
  var naturalHeight = $item.outerHeight();
  $item.css('height', heightCss);
 
- expect(actualHeight).toBe(targetHeight);
+ expect(actualHeight).toBeWithinTolerance(targetHeight);
 
  if (naturalHeight > maxNaturalHeight) {
  maxNaturalHeight = naturalHeight;
  }
  });
 
- expect(targetHeight).toBe(maxNaturalHeight);
+ expect(targetHeight).toBeWithinTolerance(maxNaturalHeight);
  });
  });
 
@@ -139,15 +153,15 @@ describe('matchHeight', function() {
  var naturalHeight = $item.outerHeight();
  $item.css('height', heightCss);
 
- expect(actualHeight).toBe(targetHeight);
+ expect(actualHeight).toBeWithinTolerance(targetHeight);
 
  if (naturalHeight > maxNaturalHeight) {
  maxNaturalHeight = naturalHeight;
  }
  });
 
  // TODO: solve this for .nested-items-parent, .nested-items
- expect(targetHeight).toBe(maxNaturalHeight);
+ expect(targetHeight).toBeWithinTolerance(maxNaturalHeight);
  });
 
  $.each($.fn.matchHeight._groups, function() {
@@ -181,14 +195,14 @@ describe('matchHeight', function() {
  var naturalHeight = $item.outerHeight();
  $item.css('height', heightCss);
 
- expect(actualHeight).toBe(targetHeight);
+ expect(actualHeight).toBeWithinTolerance(targetHeight);
 
  if (naturalHeight > maxNaturalHeight) {
  maxNaturalHeight = naturalHeight;
  }
  });
 
- expect(targetHeight).toBe(maxNaturalHeight);
+ expect(targetHeight).toBeWithinTolerance(maxNaturalHeight);
  });
  });
 
@@ -206,12 +220,10 @@ describe('matchHeight', function() {
  item3Height = $items.find('.item-3').outerHeight();
 
  if (currentBreakpoint !== 'mobile') {
- expect(item0Height).toBe(item1Height);
- expect(item2Height).toBe(item3Height);
- expect(item0Height).not.toBe(item2Height);
- expect(item1Height).not.toBe(item3Height);
- } else {
- expect(true).toBe(true);
+ expect(item0Height).toBeWithinTolerance(item1Height);
+ expect(item2Height).toBeWithinTolerance(item3Height);
+ expect(item0Height).not.toBeWithinTolerance(item2Height);
+ expect(item1Height).not.toBeWithinTolerance(item3Height);
  }
 
  done();
@@ -224,9 +236,133 @@ describe('matchHeight', function() {
  item2Height = $items.find('.item-2').outerHeight(),
  item3Height = $items.find('.item-3').outerHeight();
 
- expect(item0Height).toBe(item1Height);
- expect(item2Height).toBe(item1Height);
- expect(item3Height).toBe(item1Height);
+ expect(item0Height).toBeWithinTolerance(item1Height);
+ expect(item2Height).toBeWithinTolerance(item1Height);
+ expect(item3Height).toBeWithinTolerance(item1Height);
+
+ done();
+ });
+
+ it('can manually update heights and fires global callbacks', function(done) {
+ var currentBreakpoint = testHelper.getCurrentBreakpoint(),
+ calledBefore = false,
+ calledAfter = false;
+
+ var oldBefore = $.fn.matchHeight._beforeUpdate,
+ oldAfter = $.fn.matchHeight._afterUpdate;
+
+ // set some test update callbacks
+ $.fn.matchHeight._beforeUpdate = function() {
+ calledBefore = true;
+ };
+
+ $.fn.matchHeight._afterUpdate = function() {
+ calledAfter = true;
+ };
+
+ // add more content to one of the items to change it's height
+ $('.simple-items .item-1').append('<p>Test content update.</p>');
+
+ // call update which should match heights again
+ $.fn.matchHeight._update();
+
+ if (currentBreakpoint === 'mobile') {
+ // all heights will be different
+ } else {
+ // check item heights are as expected
+ $('.simple-items').each(function() {
+ var $items = $(this).children('.item'),
+ rows = $.fn.matchHeight._rows($items);
+
+ $.each(rows, function(index, $row) {
+ var targetHeight = $row.first().outerHeight(),
+ maxNaturalHeight = 0;
+
+ $row.each(function() {
+ var $item = $(this),
+ heightCss = $item.css('height'),
+ actualHeight = $item.outerHeight();
+
+ $item.css('height', '');
+ var naturalHeight = $item.outerHeight();
+ $item.css('height', heightCss);
+
+ expect(actualHeight).toBeWithinTolerance(targetHeight);
+
+ if (naturalHeight > maxNaturalHeight) {
+ maxNaturalHeight = naturalHeight;
+ }
+ });
+
+ expect(targetHeight).toBeWithinTolerance(maxNaturalHeight);
+ });
+ });
+ }
+
+ // check callbacks were fired
+ expect(calledBefore).toBe(true);
+ expect(calledAfter).toBe(true);
+
+ // revert callbacks
+ $.fn.matchHeight._beforeUpdate = oldBefore;
+ $.fn.matchHeight._afterUpdate = oldAfter;
+
+ done();
+ });
+
+ it('parses numbers and NaN', function(done) {
+ var _parse = $.fn.matchHeight._parse;
+ expect(_parse(1)).toBe(1);
+ expect(_parse(1.1)).toBe(1.1);
+ expect(_parse('1')).toBe(1);
+ expect(_parse('1.1')).toBe(1.1);
+ expect(_parse(NaN)).toBe(0);
+ done();
+ });
+
+ it('parses options', function(done) {
+ var _parseOptions = $.fn.matchHeight._parseOptions,
+ defaultOptions = {
+ byRow: true,
+ property: 'height',
+ target: null,
+ remove: false
+ };
+
+ expect(_parseOptions()).toEqual(defaultOptions);
+
+ expect(_parseOptions({
+ byRow: false,
+ property: 'min-height',
+ target: null,
+ remove: true
+ })).toEqual({
+ byRow: false,
+ property: 'min-height',
+ target: null,
+ remove: true
+ });
+
+ expect(_parseOptions('remove')).toEqual({
+ byRow: defaultOptions.byRow,
+ property: defaultOptions.property,
+ target: defaultOptions.target,
+ remove: true
+ });
+
+ expect(_parseOptions(true)).toEqual({
+ byRow: true,
+ property: defaultOptions.property,
+ target: defaultOptions.target,
+ remove: defaultOptions.remove
+ });
+
+ expect(_parseOptions(false)).toEqual({
+ byRow: false,
+ property: defaultOptions.property,
+ target: defaultOptions.target,
+ remove: defaultOptions.remove
+ });
 
  done();
  });

test/specs/webdriver.spec.js

@@ -1,6 +1,15 @@
 var async = require('async');
 
 describe('matchHeight webdriver', function() {
+ var capabilities = browser.desiredCapabilities,
+ urls = capabilities.urls,
+ viewports = capabilities.viewports,
+ browserInfo = capabilities.browserName;
+
+ if (capabilities.browser) {
+ browserInfo = capabilities.browser + ' ' + capabilities.browser_version;
+ }
+
  var runAllTests = function(pageUrls, width, height, done) {
  var next = browser;
 
@@ -22,7 +31,7 @@ describe('matchHeight webdriver', function() {
  };
  })
  .then(function(ret) {
- var message = ret.value.failed.join(', ') + ' failed on ' + pageUrl;
+ var message = ret.value.failed.join(', ') + ' failed on ' + browserInfo + ' on ' + pageUrl;
  expect(ret.value.passed.length).toBe(ret.value.total.length, message);
 
  if (browser.options.pauseOnFail && ret.value.passed.length !== ret.value.total.length) {
@@ -35,9 +44,6 @@ describe('matchHeight webdriver', function() {
  }, done);
  };
 
- var urls = browser.desiredCapabilities.urls,
- viewports = browser.desiredCapabilities.viewports;
-
  if (viewports) {
  for (var i = 0; i < viewports.length; i += 1) {
  (function(width, height) {