Add e2e tests for addItems: false

cypress/integration/select-multiple.spec.js

@@ -304,11 +304,59 @@ describe('Choices - select multiple', () => {
       });
     });
 
+    describe('adding items disabled', () => {
+      /*
+        {
+          addItems: false,
+        }
+      */
+      beforeEach(() => {
+        cy.get('[data-test-hook=add-items-disabled]')
+          .find('.choices')
+          .click();
+      });
+
+      it('disables the search input', () => {
+        cy.get('[data-test-hook=add-items-disabled]')
+          .find('.choices__input--cloned')
+          .should('be.disabled');
+      });
+
+      describe('on click', () => {
+        it('opens choice dropdown', () => {
+          cy.get('[data-test-hook=add-items-disabled]')
+            .find('.choices__list--dropdown')
+            .should('be.visible');
+        });
+      });
+
+      describe('attempting to select choice', () => {
+        let selectedChoice;
+
+        it('does not select choice', () => {
+          cy.get('[data-test-hook=add-items-disabled]')
+            .find('.choices__list--dropdown .choices__item')
+            .last()
+            .then($lastChoice => {
+              selectedChoice = $lastChoice;
+            })
+            .click();
+
+          cy.get('[data-test-hook=add-items-disabled]')
+            .find('.choices__list--multiple .choices__item')
+            .last()
+            .should($item => {
+              expect($item.text()).to.not.contain(selectedChoice.text());
+            });
+        });
+      });
+    });
+
     describe('selection limit', () => {
       /*
         {
           maxItemCount: 5,
-        };
+        }
       */
       const selectionLimit = 5;
 
@@ -344,7 +392,7 @@ describe('Choices - select multiple', () => {
         {
           prependValue: 'before-',
           appendValue: '-after',
-        };
+        }
       */
       let selectedChoiceText;
 
@@ -363,10 +411,6 @@ describe('Choices - select multiple', () => {
           .click();
       });
 
-      it('works', () => {
-        expect(true).to.equal(true);
-      });
-
       it('prepends and appends value to inputted value', () => {
         cy.get('[data-test-hook=prepend-append]')
           .find('.choices__list--multiple .choices__item')
@@ -395,7 +439,7 @@ describe('Choices - select multiple', () => {
       /*
         {
           renderChoiceLimit: 1,
-        };
+        }
       */
       it('only displays given number of choices in the dropdown', () => {
         cy.get('[data-test-hook=render-choice-limit]')
@@ -409,9 +453,8 @@ describe('Choices - select multiple', () => {
       /*
         {
           searchFloor: 10,
-        };
+        }
       */
-
       describe('on input', () => {
         describe('search floor not reached', () => {
           it('displays choices not filtered by inputted value', () => {

cypress/integration/select-one.spec.js

@@ -252,6 +252,54 @@ describe('Choices - select one', () => {
       });
     });
 
+    describe('adding items disabled', () => {
+      /*
+        {
+          addItems: false,
+        }
+      */
+      beforeEach(() => {
+        cy.get('[data-test-hook=add-items-disabled]')
+          .find('.choices')
+          .click();
+      });
+
+      it('disables the search input', () => {
+        cy.get('[data-test-hook=add-items-disabled]')
+          .find('.choices__input--cloned')
+          .should('be.disabled');
+      });
+
+      describe('on click', () => {
+        it('opens choice dropdown', () => {
+          cy.get('[data-test-hook=add-items-disabled]')
+            .find('.choices__list--dropdown')
+            .should('be.visible');
+        });
+      });
+
+      describe('attempting to select choice', () => {
+        let selectedChoice;
+
+        it('does not select choice', () => {
+          cy.get('[data-test-hook=add-items-disabled]')
+            .find('.choices__list--dropdown .choices__item')
+            .last()
+            .then($lastChoice => {
+              selectedChoice = $lastChoice;
+            })
+            .click();
+
+          cy.get('[data-test-hook=add-items-disabled]')
+            .find('.choices__list--single .choices__item')
+            .last()
+            .should($item => {
+              expect($item.text()).to.not.contain(selectedChoice.text());
+            });
+        });
+      });
+    });
+
     describe('prepend/append', () => {
       /*
         {

public/test/select-multiple.html

@@ -59,6 +59,15 @@
           </select>
         </div>
 
+        <div data-test-hook="add-items-disabled">
+          <label for="choices-add-items-disabled">Add items disabled</label>
+          <select class="form-control" name="choices-add-items-disabled" id="choices-add-items-disabled" multiple>
+            <option value="Dropdown item 1" selected>Dropdown item 1</option>
+            <option value="Dropdown item 2">Dropdown item 2</option>
+            <option value="Dropdown item 3">Dropdown item 3</option>
+          </select>
+        </div>
+
         <div data-test-hook="selection-limit">
           <label for="choices-selection-limit">Input limit</label>
           <select class="form-control" name="choices-selection-limit" id="choices-selection-limit" multiple>
@@ -99,7 +108,7 @@
         </div>
 
         <div data-test-hook="placeholder">
-          <label for="choices-placeholder">Search floor</label>
+          <label for="choices-placeholder">Placeholder</label>
           <select class="form-control" name="choices-placeholder" id="choices-placeholder" multiple>
             <option value="Dropdown item 1">Dropdown item 1</option>
             <option value="Dropdown item 2">Dropdown item 2</option>
@@ -123,6 +132,10 @@
 
         new Choices('#choices-disabled-choice');
 
+        new Choices('#choices-add-items-disabled', {
+          addItems: false,
+        });
+
         new Choices('#choices-selection-limit', {
           maxItemCount: 5,
         });

public/test/select-one.html

@@ -59,6 +59,15 @@
           </select>
         </div>
 
+        <div data-test-hook="add-items-disabled">
+          <label for="choices-add-items-disabled">Add items disabled</label>
+          <select class="form-control" name="choices-add-items-disabled" id="choices-add-items-disabled">
+            <option value="Dropdown item 1" selected>Dropdown item 1</option>
+            <option value="Dropdown item 2">Dropdown item 2</option>
+            <option value="Dropdown item 3">Dropdown item 3</option>
+          </select>
+        </div>
+
         <div data-test-hook="prepend-append">
           <label for="choices-prepend-append">Prepend/append</label>
           <select class="form-control" name="choices-prepend-append" id="choices-prepend-append">
@@ -113,6 +122,10 @@
           removeItemButton: true,
         });
 
+        new Choices('#choices-add-items-disabled', {
+          addItems: false,
+        });
+
         new Choices('#choices-prepend-append', {
           prependValue: 'before-',
           appendValue: '-after',

public/test/text.html

@@ -119,7 +119,7 @@
             value: 'joe@bloggs.co.uk',
             label: 'Joe Bloggs',
             customProperties: {
-              description: 'Joe Blogg is such a generic name'
+              description: 'Joe Blogg is such a generic name',
             }
           }],
         });