zurb-foundation-5 5.2.2

data/spec/abide/abide.js

@@ -0,0 +1,173 @@
+describe('abide:', function() {
+  beforeEach(function() {
+    this.addMatchers({
+      // Place abide-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 validation', function() {
+    beforeEach(function() {
+      document.body.innerHTML = __html__['spec/abide/basic.html'];
+    });
+
+    it('should not mark fields as invalid on load', function() {
+      $(document).foundation();
+
+      expect($('input[name="user_name"]')).not.toHaveData('invalid');
+      expect($('input[name="user_email"]')).not.toHaveData('invalid');
+    });
+
+    it('should trigger correct events for all required fields', function() {
+      $(document).foundation();
+
+      var settings = Foundation.libs.abide.settings;
+
+      spyOnEvent('form', 'invalid');
+      spyOnEvent('form', 'valid');
+
+      spyOnEvent('input[name="user_name"]', 'invalid');
+      spyOnEvent('input[name="user_name"]', 'valid');
+
+      spyOnEvent('input[name="user_email"]', 'invalid');
+      spyOnEvent('input[name="user_email"]', 'valid');
+
+      $('form').submit();
+
+      expect('valid').not.toHaveBeenTriggeredOn('form');
+      expect('valid').not.toHaveBeenTriggeredOn('input[name="user_name"]');
+      expect('valid').not.toHaveBeenTriggeredOn('input[name="user_email"]');      
+
+      expect('invalid').toHaveBeenTriggeredOn('form');
+      expect('invalid').toHaveBeenTriggeredOn('input[name="user_name"]');
+      expect('invalid').toHaveBeenTriggeredOn('input[name="user_email"]');
+    });
+
+    it('should mark missing required fields as invalid', function() {
+      $(document).foundation();
+
+      expect($('input[name="user_name"]')).not.toHaveData('invalid');
+      expect($('input[name="user_email"]')).not.toHaveData('invalid');
+
+      $('form').submit();
+
+      var invalid_fields = $('form').find('[data-invalid]');
+      expect(invalid_fields.length).toBe(2);
+
+      expect($('input[name="user_name"]')).toHaveData('invalid');
+      expect($('input[name="user_email"]')).toHaveData('invalid');
+    });
+
+    it('should pass validation when all fields are filled out correctly', function() {
+      $(document).foundation();
+
+      spyOnEvent('form', 'invalid');
+      spyOnEvent('form', 'valid');
+
+      spyOnEvent('input[name="user_name"]', 'invalid');
+      spyOnEvent('input[name="user_name"]', 'valid');
+
+      spyOnEvent('input[name="user_email"]', 'invalid');
+      spyOnEvent('input[name="user_email"]', 'valid');
+
+      $('input[name="user_name"]').val('John');
+      $('input[name="user_email"]').val('foo@bar.com');
+
+      $('form').submit();
+
+      expect('valid').toHaveBeenTriggeredOn('form');
+      expect('valid').toHaveBeenTriggeredOn('input[name="user_name"]');
+      expect('valid').toHaveBeenTriggeredOn('input[name="user_email"]');      
+
+      expect('invalid').not.toHaveBeenTriggeredOn('form');
+      expect('invalid').not.toHaveBeenTriggeredOn('input[name="user_name"]');
+      expect('invalid').not.toHaveBeenTriggeredOn('input[name="user_email"]');
+    });
+  });
+
+  describe('advanced validation', function() {
+    beforeEach(function() {
+      document.body.innerHTML = __html__['spec/abide/advanced.html'];
+    });
+
+    it('should support builtin equalTo validator', function() {
+      $(document).foundation({
+        abide: {
+          validators: {
+            range: function(){ return true; }
+          }
+        }
+      });
+
+
+      expect($('input[name="user_password"]')).not.toHaveAttr('data-invalid');
+      expect($('input[name="user_password_confirmation"]')).not.toHaveAttr('data-invalid');
+
+      $('input[name="user_password"]').val("foobarbaz");
+      // now they're not equal
+      $('form').submit();
+
+      var invalid_fields = $('form').find('[data-invalid]');
+      expect(invalid_fields.length).toBe(1);
+      expect($('input[name="user_password_confirmation"]')).toHaveAttr('data-invalid');
+
+      $('input[name="user_password_confirmation"]').val("foobarbaz");
+      // now they're equal
+      spyOnEvent('form', 'invalid');
+      spyOnEvent('form', 'valid');
+
+      $('form').submit();
+
+      expect('valid').toHaveBeenTriggeredOn('form');
+      expect($('input[name="user_password"]')).not.toHaveAttr('data-invalid');
+      expect($('input[name="user_password_confirmation"]')).not.toHaveAttr('data-invalid');
+    });
+
+    it('should support custom validators', function() {
+      $(document).foundation({
+        abide: {
+          validators: {
+            range: function(el, required, parent) {
+              var start = parseInt(this.S("[name='user_start_num']").val()),
+                  end = parseInt(el.value);
+
+              return start < end;
+            }
+          }
+        }
+      });
+
+      expect($('input[name="user_start_num"]')).not.toHaveData('invalid');
+      expect($('input[name="user_end_num"]')).not.toHaveData('invalid');
+
+      // invalid
+      $('input[name="user_start_num"]').val("10");
+      $('input[name="user_end_num"]').val("2");
+
+      $('form').submit();
+
+      var invalid_fields = $('form').find('[data-invalid]');
+      expect(invalid_fields.length).toBe(1);
+
+      expect($('input[name="user_start_num"]')).not.toHaveAttr('data-invalid');
+      expect($('input[name="user_end_num"]')).toHaveAttr('data-invalid');
+
+      // valid now
+      $('input[name="user_end_num"]').val("12");
+      spyOnEvent('form', 'invalid');
+      spyOnEvent('form', 'valid');
+
+      $('form').submit();
+
+      expect('valid').toHaveBeenTriggeredOn('form');
+      expect($('input[name="user_start_num"]')).not.toHaveAttr('data-invalid');
+      expect($('input[name="user_end_num"]')).not.toHaveAttr('data-invalid');
+    });
+  });
+});

data/spec/abide/advanced.html

@@ -0,0 +1,22 @@
+<form data-abide="ajax">
+  <div class="range-start-field">
+    <label>Starting number <small>required</small></label>
+    <input name="user_start_num" type="text">
+    <small class="error">Starting number must be before the end date</small>
+  </div>
+  <div class="range-end-field">
+    <label>Ending number <small>required</small></label>
+    <input name="user_end_num" type="text" data-abide-validator="range">
+    <small class="error">Ending number must be before the end date</small>
+  </div>
+  <div class="password-field">
+    <label>Password <small>required</small></label>
+    <input id="user_password" name="user_password" type="password">
+  </div>
+  <div class="password-confirmation-field">
+    <label>Password confirmation<small>required</small></label>
+    <input name="user_password_confirmation" type="password" data-abide-validator="equalTo" data-equalto="user_password">
+    <small class="error">Password and password confirmation must match.</small>
+  </div>
+  <button type="submit">Submit</button>
+</form>

data/spec/abide/basic.html

@@ -0,0 +1,13 @@
+<form data-abide="ajax">
+  <div class="name-field">
+    <label>Your name <small>required</small></label>
+    <input name="user_name" type="text" required pattern="[a-zA-Z]+">
+    <small class="error">Name is required and must be a string.</small>
+  </div>
+  <div class="email-field">
+    <label>Email <small>required</small></label>
+    <input name="user_email" type="email" required>
+    <small class="error">An email address is required.</small>
+  </div>
+  <button type="submit">Submit</button>
+</form>

data/spec/accordion/accordion.js

@@ -0,0 +1,94 @@
+describe('accordion:', function() {
+  beforeEach(function() {
+    this.addMatchers({
+      // Place accordion-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 accordion with tab child', function() {
+    beforeEach(function() {
+      document.body.innerHTML = __html__['spec/accordion/basic.html'];
+    });
+
+    it('should default to the active tab', function() {
+      $(document).foundation();
+
+      expect($('#panel1')).toBeVisible();
+      expect($('#panel2-1')).toBeVisible();
+      expect($('#panel2-2')).toBeHidden();
+      expect($('#panel2')).toBeHidden();
+      expect($('#panel3')).toBeHidden();
+    });
+
+    it('should switch to the clicked section', function() {
+      $(document).foundation();
+
+      $('#panel2').prev().click();
+
+      expect($('#panel1')).toBeHidden();
+      expect($('#panel2-1')).toBeHidden();
+      expect($('#panel2-2')).toBeHidden();
+      expect($('#panel2')).toBeVisible();
+      expect($('#panel3')).toBeHidden();
+    });
+  });
+
+  describe('embedded grid accordion', function() {
+    beforeEach(function() {
+      document.body.innerHTML = __html__['spec/accordion/grid.html'];
+    });
+
+    it('should switch to the clicked section', function() {
+      $(document).foundation();
+
+      $('#panel1c').prev().click();
+
+      expect($('#panel1c')).toBeVisible();
+      expect($('#panel2c')).toBeHidden();
+      expect($('#panel3c')).toBeHidden();
+      expect($('#panel4c')).toBeHidden();
+      expect($('#panel5c')).toBeHidden();
+      expect($('#panel6c')).toBeHidden();
+
+      $('#panel4c').prev().click();
+
+      expect($('#panel1c')).toBeHidden();
+      expect($('#panel2c')).toBeHidden();
+      expect($('#panel3c')).toBeHidden();
+      expect($('#panel4c')).toBeVisible();
+      expect($('#panel5c')).toBeHidden();
+      expect($('#panel6c')).toBeHidden();
+    });
+  });
+
+  describe('multi-expand accordion', function() {
+    beforeEach(function() {
+      document.body.innerHTML = __html__['spec/accordion/multiexpand.html'];
+    });
+
+    it('should default to the active panel', function() {
+      $(document).foundation('accordion', { multi_expand: true });
+
+      expect($('#panel1')).toBeHidden();
+      expect($('#panel2')).toBeVisible();
+      expect($('#panel3')).toBeHidden();
+    });
+
+    it('should open the clicked section, leaving previous active panels open', function() {
+      $(document).foundation('accordion', { multi_expand: true });
+
+      $('#panel3').prev().click();
+
+      expect($('#panel1')).toBeHidden();
+      expect($('#panel2')).toBeVisible();
+      expect($('#panel3')).toBeVisible();
+    });
+  });
+});

data/spec/accordion/basic.html

@@ -0,0 +1,39 @@
+<dl class="accordion" data-accordion>
+  <dd>
+    <a href="#panel1">Accordion 1</a>
+    <div id="panel1" class="content active">
+      <dl class="tabs" data-tab>
+        <dd class="active"><a href="#panel2-1">Tab 1</a></dd>
+        <dd><a href="#panel2-2">Tab 2</a></dd>
+        <dd><a href="#panel2-3">Tab 3</a></dd>
+        <dd><a href="#panel2-4">Tab 4</a></dd>
+      </dl>
+      <div class="tabs-content">
+        <div class="content active" id="panel2-1">
+          <p>First panel content goes here...</p>
+        </div>
+        <div class="content" id="panel2-2">
+          <p>Second panel content goes here...</p>
+        </div>
+        <div class="content" id="panel2-3">
+          <p>Third panel content goes here...</p>
+        </div>
+        <div class="content" id="panel2-4">
+          <p>Fourth panel content goes here...</p>
+        </div>
+      </div>
+    </div>
+  </dd>
+  <dd>
+    <a href="#panel2">Accordion 2</a>
+    <div id="panel2" class="content">
+      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </div>
+  </dd>
+  <dd>
+    <a href="#panel3">Accordion 3</a>
+    <div id="panel3" class="content">
+      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </div>
+  </dd>
+</dl>

data/spec/accordion/grid.html

@@ -0,0 +1,44 @@
+<dl class="accordion" data-accordion>
+  <ul class="small-block-grid-1 medium-block-grid-3">
+    <li>
+      <dd>
+        <a href="#panel1c">Accordion 1</a>
+        <div id="panel1c" class="content">
+          Panel 1. Lorem ipsum dolor
+        </div>
+      </dd>
+      <dd>
+        <a href="#panel2c">Accordion 2</a>
+        <div id="panel2c" class="content">
+          Panel 2. Lorem ipsum dolor
+        </div>
+      </dd>
+      <dd>
+        <a href="#panel3c">Accordion 3</a>
+        <div id="panel3c" class="content">
+          Panel 3. Lorem ipsum dolor
+        </div>
+      </dd>
+    </li>
+    <li>
+      <dd>
+        <a href="#panel4c">Accordion 4</a>
+        <div id="panel4c" class="content">
+          Panel 4. Lorem ipsum dolor
+        </div>
+      </dd>
+      <dd>
+        <a href="#panel5c">Accordion 5</a>
+        <div id="panel5c" class="content">
+          Panel 5. Lorem ipsum dolor
+        </div>
+      </dd>
+      <dd>
+        <a href="#panel6c">Accordion 6</a>
+        <div id="panel6c" class="content">
+          Panel 6. Lorem ipsum dolor
+        </div>
+      </dd>
+    </li>
+  </ul>
+</dl>

data/spec/accordion/multiexpand.html

@@ -0,0 +1,20 @@
+<dl class="accordion" data-accordion>
+  <dd>
+    <a href="#panel1">Accordion 1</a>
+    <div id="panel1" class="content">
+      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </div>
+  </dd>
+  <dd>
+    <a href="#panel2">Accordion 2</a>
+    <div id="panel2" class="content active">
+      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </div>
+  </dd>
+  <dd>
+    <a href="#panel3">Accordion 3</a>
+    <div id="panel3" class="content">
+      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    </div>
+  </dd>
+</dl>

data/spec/alert/alert.js

@@ -0,0 +1,35 @@
+describe('alert:', function() {
+  beforeEach(function() {
+    this.addMatchers({
+      // Place alert-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 alert', function() {
+    beforeEach(function() {
+      document.body.innerHTML = __html__['spec/alert/basic.html'];
+    });
+
+    it('should be visible by default', function() {
+      $(document).foundation();
+
+      expect($('#myAlert')).toBeVisible();
+    });
+
+    it('should be hidden when close is clicked', function() {
+      $(document).foundation();
+
+      // TODO: Figure out how to get this working... more difficult than it seems.  :)
+      // $('a.close').click();
+      // jasmine.Clock.tick(1000);
+      //expect($('#alertClose')).not.toBeVisible();
+    });
+  });
+});