From: Evan Prothro Date: Wed, 12 Feb 2014 20:47:09 +0000 (-0600) Subject: Equalizer.js updates and testing updates: X-Git-Tag: v5.2.1~5^2~12^2~6^2 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=refs%2Fpull%2F4432%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git Equalizer.js updates and testing updates: * Use css('height', ...) instead of height(...) -- better equalizer support for padding, border, and margins * Use `get()` for heights `max.apply` calculation, as `$.map` returns object, not array (better equalizer browser support). * Update Contribution docs with JavaScript testing instruction * Update `jquery` testing matchers to new `bower` location --- diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index d975970df..8b6cf100b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,22 +2,6 @@ This is the Foundation project. We love making super awesome stuff, but even more we like to empower people to make changes on their own. Feel free to fork and improve Foundation. - - ## Compass Project If you have a compass project and would like updated assets you can run the following command at any given time from within your project directory: @@ -47,8 +31,23 @@ bundle exec compass create -r zurb-foundation --using foundation --force 1. Fork it 2. Create your feature branch (`git checkout -b my-new-feature`) -3. Test your changes to the best of your ability. We've provided a test/ folder, feel free to add to it as necessary. +3. Test your changes to the best of your ability. We've provided a spec/ folder, please run the tests to ensure your changes didn't break something add tests as necessary. 4. Update the documentation to reflect your changes if they add or changes current functionality. Make sure you are in the docs folder, then run `bundle && bundle exec foreman start` to compile to documentation. 5. Commit your changes (`git commit -am 'Added some feature'`) 6. Push to the branch (`git push origin my-new-feature`) 7. Create new Pull Request + +## JavaScript Testing + +The Foundation JS libraries are tested with Jasmine. Grunt can be used to run the test suite. + +1. Install `node.js` and `npm` with `brew install node` + * You may need to `source` your bash config or restart your terminal client to make sure your PATH is up to date. +2. From the root of the project, install required packages locally with `npm install` +3. Install bower with `npm install -g bower` and and required assets locally `bower install` +4. Install the command line interface for grunt with `npm install -g grunt-cli` +5. Install PhantomJS with `brew install PhantomJS` (we assume you have Chrome and Firefox installed) + * If you get connection errors with PhantomJS when running the suite, ensure `node -v` returns `v0.10.12` or later. Upgrade with `brew upgrade node` +6. Run `grunt karma:dev` to run the tests with some real browsers +7. Run `grunt build:assets` to compile any changes to foundation JS source into testing distribution + diff --git a/Gruntfile.js b/Gruntfile.js index 6942a55cb..bb04ecc5a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -93,7 +93,7 @@ module.exports = function(grunt) { 'dist/assets/js/vendor/placeholder.js': 'bower_components/jquery-placeholder/jquery.placeholder.js', 'dist/assets/js/vendor/fastclick.js': 'bower_components/fastclick/lib/fastclick.js', 'dist/assets/js/vendor/jquery.cookie.js': 'bower_components/jquery.cookie/jquery.cookie.js', - 'dist/assets/js/vendor/jquery.js': 'bower_components/jquery/jquery.js', + 'dist/assets/js/vendor/jquery.js': 'bower_components/jquery/dist/jquery.js', 'dist/assets/js/vendor/modernizr.js': 'bower_components/modernizr/modernizr.js' } } diff --git a/js/foundation/foundation.equalizer.js b/js/foundation/foundation.equalizer.js index 4a28334a8..504d89fac 100644 --- a/js/foundation/foundation.equalizer.js +++ b/js/foundation/foundation.equalizer.js @@ -28,7 +28,7 @@ vals = equalizer.find('[' + this.attr_name() + '-watch]'), firstTopOffset = vals.first().offset().top, settings = equalizer.data(this.attr_name(true)+'-init'); - + if (vals.length === 0) return; settings.before_height_change(); equalizer.trigger('before-height-change'); @@ -40,14 +40,14 @@ } }); if (isStacked) return; - - var heights = vals.map(function(){ return $(this).outerHeight() }); + + var heights = vals.map(function(){ return $(this).outerHeight() }).get(); if (settings.use_tallest) { var max = Math.max.apply(null, heights); - vals.height(max); + vals.css('height', max); } else { var min = Math.min.apply(null, heights); - vals.height(min); + vals.css('height', min); } settings.after_height_change(); equalizer.trigger('after-height-change'); diff --git a/karma.conf.js b/karma.conf.js index 3e2c17f37..4821e7240 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -12,7 +12,7 @@ module.exports = function(config) { {pattern: 'dist/assets/css/foundation.css', watched: true, served: true, included: true}, {pattern: 'bower_components/modernizr/modernizr.js', watched: true, served: true, included: true}, {pattern: 'bower_components/fastclick/lib/fastclick.js', watched: true, served: true, included: true}, - {pattern: 'bower_components/jquery/jquery.js', watched: true, served: true, included: true}, + {pattern: 'bower_components/jquery/dist/jquery.js', watched: true, served: true, included: true}, {pattern: 'bower_components/jquery-placeholder/jquery.placeholder.js', watched: true, served: true, included: true}, {pattern: 'bower_components/jquery.cookie/jquery.cookie.js', watched: true, served: true, included: true}, {pattern: 'dist/assets/js/foundation/foundation.js', watched: true, served: true, included: true}, diff --git a/spec/equalizer/basic.html b/spec/equalizer/basic.html new file mode 100644 index 000000000..377ba866d --- /dev/null +++ b/spec/equalizer/basic.html @@ -0,0 +1,24 @@ +
+
+
+

Panel 1

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

+
+
+
+
+

Panel 2

+
    +
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • +
  • Aliquam tincidunt mauris eu risus.
    • +
  • Vestibulum auctor dapibus neque.
    • +
+
+
+
+
+

Panel 3

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+
+
+
\ No newline at end of file diff --git a/spec/equalizer/equalizer.js b/spec/equalizer/equalizer.js new file mode 100644 index 000000000..eee56e5b0 --- /dev/null +++ b/spec/equalizer/equalizer.js @@ -0,0 +1,30 @@ +describe('equalizer:', function() { + beforeEach(function() { + this.addMatchers({ + // Place equalize-specific matchers here... + }); + + var origFunc = $.fn.foundation; + spyOn($.fn, 'foundation').andCallFake(function() { + var result = origFunc.apply(this, arguments); + jasmine.Clock.tick(1000); // Let things settle... + return result; + }); + }); + + describe('basic height', function() { + beforeEach(function() { + document.body.innerHTML = __html__['spec/equalizer/basic.html']; + }); + + it('should have equal heights on load', function() { + $(document).foundation(); + + var equalized = $('[data-equalizer-watch]'); + + equalized.each(function(){ + expect($(this).outerHeight()).toBe(equalized.first().outerHeight()); + }); + }); + }); +});