]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Equalizer.js updates and testing updates: 4432/head
authorEvan Prothro <evan.prothro@gmail.com>
Wed, 12 Feb 2014 20:47:09 +0000 (14:47 -0600)
committerEvan Prothro <evan.prothro@gmail.com>
Fri, 21 Feb 2014 16:43:27 +0000 (10:43 -0600)
* 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

CONTRIBUTING.md
Gruntfile.js
js/foundation/foundation.equalizer.js
karma.conf.js
spec/equalizer/basic.html [new file with mode: 0644]
spec/equalizer/equalizer.js [new file with mode: 0644]

index d975970df07894e2dea8e82e3a61a46562a6939e..8b6cf100b76a52453c24e341f2df9f17384b12ea 100644 (file)
@@ -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.
 
-<!-- ### JavaScript
-
-The Foundation JS libraries are tested with qUnit. You can run the tests in your browser by opening up the respective `.html` files in `test/javascripts/tests/`.
-
-For more convenient testing using the command line and watcher functionality, you can also run the tests through Grunt with PhantomJS.
-
-**Setting up Grunt for command line testing.**
-
-1. Install [PhantomJS](http://phantomjs.org/)
-2. Install [Node.js](http://nodejs.org/)
-3. You may need to reboot your machine to make sure your PATH is up to date.
-4. From the root of the project, `npm install`. This will install the grunt tasks locally.
-5. Install the grunt command line interface with `npm install -g grunt-cli`.
-
-Now you should have two new commands available. `grunt qunit` will execute all of the qUnit tests. `grunt watch` will watch for changes to the JS files and test files, and execute the tests when something changes. -->
-
 ## 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
+
index 6942a55cbe1b34fd62b6fe304758f6ef89d374d4..bb04ecc5a288a27bf7691e0b9ea6aa48e3213975 100644 (file)
@@ -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'
         }
       }
index 4a28334a8b8cc9335b765c6ac516a84f834dfdf1..504d89fac4319e46cd959ebcbc051809bd13d9a7 100644 (file)
@@ -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');
         }
       });
       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');
index 3e2c17f379dd2820bbc8fa8b422e66cd97a6d8a5..4821e7240e681d182aa298aa0fa7354209e44eff 100644 (file)
@@ -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 (file)
index 0000000..377ba86
--- /dev/null
@@ -0,0 +1,24 @@
+<div class="row" data-equalizer="">
+  <div class="small-4 columns">
+    <div class="panel" data-equalizer-watch="" id="watchee1">
+      <h3>Panel 1</h3>
+      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
+    </div>
+  </div>
+  <div class="small-4 columns">
+    <div class="callout panel" data-equalizer-watch="" id="watchee2">
+      <h3>Panel 2</h3>
+      <ul>
+         <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+         <li>Aliquam tincidunt mauris eu risus.</li>
+         <li>Vestibulum auctor dapibus neque.</li>
+      </ul>
+    </div>
+  </div>
+  <div class="small-4 columns">
+    <div class="panel" data-equalizer-watch="" id="watchee3">
+      <h3>Panel 3</h3>
+      <p>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.</p>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/spec/equalizer/equalizer.js b/spec/equalizer/equalizer.js
new file mode 100644 (file)
index 0000000..eee56e5
--- /dev/null
@@ -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());
+      });
+    });
+  });
+});