Merge pull request Dogfalo#2356 from Dogfalo/selectTest

Select tests

Author: acburst

_SpecRunner.html

@@ -34,6 +34,8 @@
 
   <script src="tests/spec/collapsible/collapsibleSpec.js"></script>
 
+  <script src="tests/spec/select/selectSpec.js"></script>
+  
   <script src="tests/spec/toast/toastSpec.js"></script>
 
   <script src=".grunt/grunt-contrib-jasmine/reporter.js"></script>

tests/spec/select/selectFixture.html

@@ -0,0 +1,39 @@
+<div class="row">
+  <div class="input-field col s12">
+    <select class="normal">
+      <option value="" disabled>Choose your option</option>
+      <option value="1">Option 1</option>
+      <option value="2">Option 2</option>
+      <option value="3" selected>Option 3</option>
+    </select>
+    <label>Materialize Select</label>
+  </div>
+</div>
+
+<div class="row">
+  <div class="input-field col s12">
+    <select multiple class="multiple">
+      <option value="" disabled>Choose your option</option>
+      <option value="1">Option 1</option>
+      <option value="2">Option 2</option>
+      <option value="3" selected>Option 3</option>
+    </select>
+    <label>Materialize Select</label>
+  </div>
+</div>
+
+<div class="row">
+  <div class="input-field col s12">
+    <select class="optgroup">
+      <optgroup label="team 1">
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+      </optgroup>
+      <optgroup label="team 2">
+        <option value="3">Option 3</option>
+        <option value="4">Option 4</option>
+      </optgroup>
+    </select>
+    <label>Materialize Select</label>
+  </div>
+</div>

tests/spec/select/selectSpec.js

@@ -0,0 +1,155 @@
+jasmine.getFixtures().fixturesPath = 'tests/spec';
+
+describe("Select Plugin", function () {
+  beforeEach(function() {
+    loadFixtures('select/selectFixture.html');
+    $('select').not('.disabled').material_select();
+  });
+
+  describe("Select", function () {
+    var browserSelect, normalInput, normalDropdown;
+
+    beforeEach(function() {
+      browserSelect = $('select.normal');
+    });
+
+    it("should open dropdown and select option", function (done) {
+      normalInput = browserSelect.parent().find('input.select-dropdown');
+      normalDropdown = browserSelect.parent().find('ul.select-dropdown');
+
+      expect(normalInput).toExist('Should dynamically generate select dropdown structure.');
+      expect(normalDropdown).toExist('Should dynamically generate select dropdown structure.');
+      expect(normalInput).toBeVisible('Should be hidden before dropdown is opened.');
+      expect(normalDropdown).toBeHidden('Should be hidden before dropdown is opened.');
+
+      normalInput.click();
+
+      setTimeout(function() {
+        expect(normalDropdown).toBeVisible('Should be visible after opening.');
+        var firstOption = normalDropdown.find('li:not(.disabled)').first();
+        firstOption.click();
+        normalInput.blur();
+
+        setTimeout(function() {
+          expect(normalDropdown).toBeHidden('Should be hidden after choosing item.');
+          expect(normalInput.val()).toEqual(firstOption[0].innerText, 'Value should equal chosen option.');
+          done();
+        }, 400);
+      }, 400);
+    });
+
+    it("should have pre-selected value", function () {
+      normalInput = browserSelect.parent().find('input.select-dropdown');
+      normalDropdown = browserSelect.parent().find('ul.select-dropdown');
+
+      var firstOption = browserSelect.find('option[selected]');
+      expect(normalInput.val()).toEqual(firstOption.text(), 'Value should be equal to preselected option.');
+    });
+  });
+
+  describe("Multiple Select", function () {
+    var browserSelect, multipleInput, multipleDropdown;
+
+    beforeEach(function() {
+      browserSelect = $('select.multiple');
+    });
+
+    it("should open dropdown and select multiple options", function(done) {
+      multipleInput = browserSelect.parent().find('input.select-dropdown');
+      multipleDropdown = browserSelect.parent().find('ul.select-dropdown');
+
+      expect(multipleInput).toExist('Should dynamically generate select dropdown structure.');
+      expect(multipleDropdown).toExist('Should dynamically generate select dropdown structure.');
+      expect(multipleInput).toBeVisible('Should be hidden before dropdown is opened.');
+      expect(multipleDropdown).toBeHidden('Should be hidden before dropdown is opened.');
+
+      multipleInput.click();
+
+      setTimeout(function() {
+        expect(multipleDropdown).toBeVisible('Should be visible after opening.');
+        var firstOption = multipleDropdown.find('li:not(.disabled)').first();
+        var thirdOption = multipleDropdown.find('li:not(.disabled)').eq(2);
+        firstOption.click();
+        thirdOption.click();
+        $('body').click();
+
+        setTimeout(function() {
+          expect(multipleDropdown).toBeHidden('Should be hidden after choosing item.');
+          expect(multipleInput.val()).toEqual(firstOption[0].innerText + ', ' + thirdOption[0].innerText, 'Value should equal chosen multiple options.');
+          done();
+        }, 400);
+      }, 400);
+    });
+
+  });
+
+  describe("Optgroup Select", function () {
+    var browserSelect, optInput, optDropdown;
+
+    beforeEach(function() {
+      browserSelect = $('select.optgroup');
+    });
+
+    it("should open dropdown and select options", function(done) {
+      optInput = browserSelect.parent().find('input.select-dropdown');
+      optDropdown = browserSelect.parent().find('ul.select-dropdown');
+
+      var optgroups = optDropdown.find('li.optgroup');
+      browserSelect.find('optgroup').each(function(i) {
+        expect($(this).attr('label')).toEqual(optgroups.eq(i)[0].innerText, 'should generate optgroup structure.');
+      });
+
+      expect(optInput).toExist('Should dynamically generate select dropdown structure.');
+      expect(optDropdown).toExist('Should dynamically generate select dropdown structure.');
+      expect(optInput).toBeVisible('Should be hidden before dropdown is opened.');
+      expect(optDropdown).toBeHidden('Should be hidden before dropdown is opened.');
+
+      optInput.click();
+
+      setTimeout(function() {
+        expect(optDropdown).toBeVisible('Should be visible after opening.');
+        var secondOption = optDropdown.find('li:not(.disabled):not(.optgroup)').eq(1);
+        secondOption.click();
+        optInput.blur();
+
+        setTimeout(function() {
+          expect(optDropdown).toBeHidden('Should be hidden after choosing item.');
+          expect(optInput.val()).toEqual(secondOption[0].innerText, 'Value should be equal to selected option.');
+          done();
+        }, 400);
+      }, 400);
+    });
+
+    it("should not do anything when optgroup li clicked", function(done) {
+      optInput = browserSelect.parent().find('input.select-dropdown');
+      optDropdown = browserSelect.parent().find('ul.select-dropdown');
+      var originalVal = optInput.val();
+
+      var optgroups = optDropdown.find('li.optgroup');
+      browserSelect.find('optgroup').each(function(i) {
+        expect($(this).attr('label')).toEqual(optgroups.eq(i)[0].innerText, 'should generate optgroup structure.');
+      });
+
+      expect(optInput).toExist('Should dynamically generate select dropdown structure.');
+      expect(optDropdown).toExist('Should dynamically generate select dropdown structure.');
+      expect(optInput).toBeVisible('Should be hidden before dropdown is opened.');
+      expect(optDropdown).toBeHidden('Should be hidden before dropdown is opened.');
+
+      optInput.click();
+
+      setTimeout(function() {
+        expect(optDropdown).toBeVisible('Should be visible after opening.');
+        var optgroup = optDropdown.find('li.optgroup').first();
+        optgroup.click();
+        optInput.blur();
+
+        setTimeout(function() {
+          expect(optDropdown).toBeHidden('Should be hidden after choosing invalid item.');
+          expect(optInput.val()).toEqual(originalVal, 'Value should be equal to original option.');
+          done();
+        }, 400);
+      }, 400);
+    });
+
+  });
+});