Add search tests + refactor tests

cypress/integration/select-multiple.spec.js

@@ -5,13 +5,13 @@ describe('Choices - select multiple', () => {
 
   describe('configs', () => {
     describe('basic', () => {
-      describe('selecting choices', () => {
-        beforeEach(() => {
-          cy.get('[data-test-hook=basic]')
-            .find('.choices__input--cloned')
-            .focus();
-        });
+      beforeEach(() => {
+        cy.get('[data-test-hook=basic]')
+          .find('.choices__input--cloned')
+          .focus();
+      });
 
+      describe('selecting choices', () => {
         describe('focusing on text input', () => {
           const selectedChoiceText = 'Dropdown item 1';
 
@@ -61,7 +61,7 @@ describe('Choices - select multiple', () => {
               }
             });
 
-            it('displays dropdown prompt', () => {
+            it('displays "no choices to choose" prompt', () => {
               cy.get('[data-test-hook=basic]')
                 .find('.choices__list--dropdown')
                 .should('be.visible')
@@ -117,10 +117,6 @@ describe('Choices - select multiple', () => {
 
       describe('removing choices', () => {
         beforeEach(() => {
-          cy.get('[data-test-hook=basic]')
-            .find('.choices__input--cloned')
-            .focus();
-
           cy.get('[data-test-hook=basic]')
             .find('.choices__list--dropdown .choices__list')
             .children()
@@ -128,7 +124,7 @@ describe('Choices - select multiple', () => {
             .click();
         });
 
-        describe('pressing backspace', () => {
+        describe('on backspace', () => {
           it('removes last choice', () => {
             cy.get('[data-test-hook=basic]')
               .find('.choices__input--cloned')
@@ -140,21 +136,87 @@ describe('Choices - select multiple', () => {
               .should('have.length', 0);
           });
         });
+      });
 
-        describe('remove button', () => {
-          it('removes last choice', () => {
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__list--multiple .choices__item')
-              .last()
-              .find('.choices__button')
-              .focus()
-              .click();
+      describe('searching choices', () => {
+        describe('on input', () => {
+          describe('searching by label', () => {
+            it('displays choices filtered on inputted value', () => {
+              cy.get('[data-test-hook=basic]')
+                .find('.choices__input--cloned')
+                .type('item 2');
 
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__list--multiple')
-              .children()
-              .should('have.length', 0);
+              cy.get('[data-test-hook=basic]')
+                .find('.choices__list--dropdown .choices__list')
+                .children()
+                .first()
+                .should($choice => {
+                  expect($choice.text().trim()).to.equal('Dropdown item 2');
+                });
+            });
           });
+
+          describe('searching by value', () => {
+            it('displays choices filtered on inputted value', () => {
+              cy.get('[data-test-hook=basic]')
+                .find('.choices__input--cloned')
+                .type('find me');
+
+              cy.get('[data-test-hook=basic]')
+                .find('.choices__list--dropdown .choices__list')
+                .children()
+                .first()
+                .should($choice => {
+                  expect($choice.text().trim()).to.equal('Dropdown item 3');
+                });
+            });
+          });
+
+          describe('no results found', () => {
+            it('displays "no results found" prompt', () => {
+              cy.get('[data-test-hook=basic]')
+                .find('.choices__input--cloned')
+                .type('faergge');
+
+              cy.get('[data-test-hook=basic]')
+                .find('.choices__list--dropdown')
+                .should('be.visible')
+                .should($dropdown => {
+                  const dropdownText = $dropdown.text().trim();
+                  expect(dropdownText).to.equal('No results found');
+                });
+            });
+          });
+        });
+      });
+    });
+
+    describe('remove button', () => {
+      beforeEach(() => {
+        cy.get('[data-test-hook=remove-button]')
+          .find('.choices__input--cloned')
+          .focus();
+
+        cy.get('[data-test-hook=remove-button]')
+          .find('.choices__list--dropdown .choices__list')
+          .children()
+          .last()
+          .click();
+      });
+
+      describe('on click', () => {
+        it('removes respective choice', () => {
+          cy.get('[data-test-hook=remove-button]')
+            .find('.choices__list--multiple .choices__item')
+            .last()
+            .find('.choices__button')
+            .focus()
+            .click();
+
+          cy.get('[data-test-hook=remove-button]')
+            .find('.choices__list--multiple')
+            .children()
+            .should('have.length', 0);
         });
       });
     });
@@ -202,7 +264,7 @@ describe('Choices - select multiple', () => {
         }
       });
 
-      it('shows dropdown prompt once limit has been reached', () => {
+      it('displays "limit reached" prompt', () => {
         cy.get('[data-test-hook=selection-limit]')
           .find('.choices__list--dropdown')
           .should('be.visible')
@@ -261,4 +323,13 @@ describe('Choices - select multiple', () => {
       });
     });
   });
+
+  describe('render choice limit', () => {
+    it('only displays given number of choices in the dropdown', () => {
+      cy.get('[data-test-hook=render-choice-limit]')
+        .find('.choices__list--dropdown .choices__list')
+        .children()
+        .should('have.length', 1);
+    });
+  });
 });

cypress/integration/select-one.spec.js

@@ -5,13 +5,13 @@ describe('Choices - select one', () => {
 
   describe('configs', () => {
     describe('basic', () => {
-      describe('selecting choices', () => {
-        beforeEach(() => {
-          cy.get('[data-test-hook=basic]')
-            .find('.choices__input--cloned')
-            .focus();
-        });
+      beforeEach(() => {
+        cy.get('[data-test-hook=basic]')
+          .find('.choices__input--cloned')
+          .focus();
+      });
 
+      describe('selecting choice', () => {
         describe('focusing on text input', () => {
           const selectedChoiceText = 'Dropdown item 1';
 
@@ -78,29 +78,83 @@ describe('Choices - select one', () => {
         });
       });
 
-      describe('removing choices', () => {
-        beforeEach(() => {
-          cy.get('[data-test-hook=basic]')
-            .find('.choices__input--cloned')
-            .focus();
+      describe('searching choices', () => {
+        describe('on input', () => {
+          describe('searching by label', () => {
+            it('displays choices filtered on inputted value', () => {
+              cy.get('[data-test-hook=basic]')
+                .find('.choices__input--cloned')
+                .type('item 2');
 
-          cy.get('[data-test-hook=basic]')
-            .find('.choices__list--dropdown .choices__list')
-            .children()
-            .last()
-            .click();
+              cy.get('[data-test-hook=basic]')
+                .find('.choices__list--dropdown .choices__list')
+                .children()
+                .first()
+                .should($choice => {
+                  expect($choice.text().trim()).to.equal('Dropdown item 2');
+                });
+            });
+          });
+
+          describe('searching by value', () => {
+            it('displays choices filtered on inputted value', () => {
+              cy.get('[data-test-hook=basic]')
+                .find('.choices__input--cloned')
+                .type('find me');
+
+              cy.get('[data-test-hook=basic]')
+                .find('.choices__list--dropdown .choices__list')
+                .children()
+                .first()
+                .should($choice => {
+                  expect($choice.text().trim()).to.equal('Dropdown item 3');
+                });
+            });
+          });
+
+          describe('no results found', () => {
+            it('displays "no results found" prompt', () => {
+              cy.get('[data-test-hook=basic]')
+                .find('.choices__input--cloned')
+                .type('faergge');
+
+              cy.get('[data-test-hook=basic]')
+                .find('.choices__list--dropdown')
+                .should('be.visible')
+                .should($dropdown => {
+                  const dropdownText = $dropdown.text().trim();
+                  expect(dropdownText).to.equal('No results found');
+                });
+            });
+          });
         });
+      });
+    });
 
-        describe('remove button', () => {
-          it('removes last choice', () => {
-            cy.get('[data-test-hook=basic]')
+    describe('remove button', () => {
+      beforeEach(() => {
+        cy.get('[data-test-hook=remove-button]')
+          .find('.choices__input--cloned')
+          .focus();
+
+        cy.get('[data-test-hook=remove-button]')
+          .find('.choices__list--dropdown .choices__list')
+          .children()
+          .last()
+          .click();
+      });
+
+      describe('remove button', () => {
+        describe('on click', () => {
+          it('removes selected choice', () => {
+            cy.get('[data-test-hook=remove-button]')
               .find('.choices__list--single .choices__item')
               .last()
               .find('.choices__button')
               .focus()
               .click();
 
-            cy.get('[data-test-hook=basic]')
+            cy.get('[data-test-hook=remove-button]')
               .find('.choices__list--single')
               .children()
               .should('have.length', 0);
@@ -182,5 +236,14 @@ describe('Choices - select one', () => {
           });
       });
     });
+
+    describe('render choice limit', () => {
+      it('only displays given number of choices in the dropdown', () => {
+        cy.get('[data-test-hook=render-choice-limit]')
+          .find('.choices__list--dropdown .choices__list')
+          .children()
+          .should('have.length', 1);
+      });
+    });
   });
 });

cypress/integration/text.spec.js

@@ -7,8 +7,8 @@ describe('Choices - text element', () => {
     const textInput = 'testing';
 
     describe('basic', () => {
-      describe('adding choices', () => {
-        it('allows me to input choices', () => {
+      describe('adding items', () => {
+        it('allows me to input items', () => {
           cy.get('[data-test-hook=basic]')
             .find('.choices__input--cloned')
             .type(textInput)
@@ -51,78 +51,78 @@ describe('Choices - text element', () => {
           });
         });
       });
+    });
 
-      describe('editing choices', () => {
-        beforeEach(() => {
-          cy.get('[data-test-hook=basic]')
-            .find('.choices__input--cloned')
-            .type(textInput)
-            .type('{enter}');
-        });
-
-        describe('pressing back space', () => {
-          it('allows me to change my entry', () => {
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__input--cloned')
-              .type('{backspace}')
-              .type('-edited')
-              .type('{enter}');
-
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__list--multiple .choices__item')
-              .last()
-              .should($choice => {
-                expect($choice.data('value')).to.equal(`${textInput}-edited`);
-              });
-          });
-        });
+    describe('editing items', () => {
+      beforeEach(() => {
+        cy.get('[data-test-hook=edit-items]')
+          .find('.choices__input--cloned')
+          .type(textInput)
+          .type('{enter}');
       });
 
-      describe('removing choices', () => {
-        beforeEach(() => {
-          cy.get('[data-test-hook=basic]')
+      describe('on back space', () => {
+        it('allows me to change my entry', () => {
+          cy.get('[data-test-hook=edit-items]')
             .find('.choices__input--cloned')
-            .type(`${textInput}`)
+            .type('{backspace}')
+            .type('-edited')
             .type('{enter}');
+
+          cy.get('[data-test-hook=edit-items]')
+            .find('.choices__list--multiple .choices__item')
+            .last()
+            .should($choice => {
+              expect($choice.data('value')).to.equal(`${textInput}-edited`);
+            });
+        });
+      });
+    });
+
+    describe('remove button', () => {
+      beforeEach(() => {
+        cy.get('[data-test-hook=remove-button]')
+          .find('.choices__input--cloned')
+          .type(`${textInput}`)
+          .type('{enter}');
+      });
+
+      describe('on click', () => {
+        it('removes respective choice', () => {
+          cy.get('[data-test-hook=remove-button]')
+            .find('.choices__list--multiple')
+            .children()
+            .should($items => {
+              expect($items.length).to.equal(1);
+            });
+
+          cy.get('[data-test-hook=remove-button]')
+            .find('.choices__list--multiple .choices__item')
+            .last()
+            .find('.choices__button')
+            .focus()
+            .click();
+
+          cy.get('[data-test-hook=remove-button]')
+            .find('.choices__list--multiple .choices__item')
+            .should($items => {
+              expect($items.length).to.equal(0);
+            });
         });
 
-        describe('remove button', () => {
-          it('allows me to remove inputted choices', () => {
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__list--multiple')
-              .children()
-              .should($items => {
-                expect($items.length).to.equal(1);
-              });
+        it('updates the value of the original input', () => {
+          cy.get('[data-test-hook=remove-button]')
+            .find('.choices__list--multiple .choices__item')
+            .last()
+            .find('.choices__button')
+            .focus()
+            .click();
 
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__list--multiple .choices__item')
-              .last()
-              .find('.choices__button')
-              .focus()
-              .click();
-
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__list--multiple .choices__item')
-              .should($items => {
-                expect($items.length).to.equal(0);
-              });
-          });
-
-          it('updates the value of the original input', () => {
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__list--multiple .choices__item')
-              .last()
-              .find('.choices__button')
-              .focus()
-              .click();
-
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__input.is-hidden')
-              .then($input => {
-                expect($input.val()).to.not.contain(textInput);
-              });
-          });
+          cy.get('[data-test-hook=remove-button]')
+            .find('.choices__input.is-hidden')
+            .then($input => {
+              expect($input.val()).to.not.contain(textInput);
+            });
         });
       });
     });

public/test/select-multiple.html

@@ -31,8 +31,17 @@
         <h2>Select multiple inputs</h2>
         <div data-test-hook="basic">
           <label for="choices-basic">Basic</label>
-          <select class="form-control" name="choices-basic" id="choices-basic" placeholder="This is a placeholder"
-            multiple>
+          <select class="form-control" name="choices-basic" id="choices-basic" placeholder="This is a placeholder" multiple>
+            <option value="Dropdown item 1">Dropdown item 1</option>
+            <option value="Dropdown item 2">Dropdown item 2</option>
+            <option value="Find me">Dropdown item 3</option>
+            <option value="Dropdown item 4">Dropdown item 4</option>
+          </select>
+        </div>
+
+        <div data-test-hook="remove-button">
+          <label for="choices-remove-button">Remove button</label>
+          <select class="form-control" name="choices-remove-button" id="choices-remove-button" placeholder="This is a placeholder" multiple>
             <option value="Dropdown item 1">Dropdown item 1</option>
             <option value="Dropdown item 2">Dropdown item 2</option>
             <option value="Dropdown item 3">Dropdown item 3</option>
@@ -42,8 +51,7 @@
 
         <div data-test-hook="disabled-choice">
           <label for="choices-disabled-choice">Disabled choice</label>
-          <select class="form-control" name="choices-disabled-choice" id="choices-disabled-choice" placeholder="This is a placeholder"
-            multiple>
+          <select class="form-control" name="choices-disabled-choice" id="choices-disabled-choice" placeholder="This is a placeholder" multiple>
             <option value="Dropdown item 1">Dropdown item 1</option>
             <option value="Dropdown item 2">Dropdown item 2</option>
             <option value="Dropdown item 3">Dropdown item 3</option>
@@ -53,8 +61,7 @@
 
         <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" placeholder="This is a placeholder"
-            multiple>
+          <select class="form-control" name="choices-selection-limit" id="choices-selection-limit" placeholder="This is a placeholder" multiple>
             <option value="Dropdown item 1">Dropdown item 1</option>
             <option value="Dropdown item 2">Dropdown item 2</option>
             <option value="Dropdown item 3">Dropdown item 3</option>
@@ -66,8 +73,16 @@
 
         <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" placeholder="This is a placeholder"
-            multiple>
+          <select class="form-control" name="choices-prepend-append" id="choices-prepend-append" placeholder="This is a placeholder" multiple>
+            <option value="Dropdown item 1">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="render-choice-limit">
+          <label for="choices-render-choice-limit">Render choice limit</label>
+          <select class="form-control" name="choices-render-choice-limit" id="choices-render-choice-limit" placeholder="This is a placeholder" multiple>
             <option value="Dropdown item 1">Dropdown item 1</option>
             <option value="Dropdown item 2">Dropdown item 2</option>
             <option value="Dropdown item 3">Dropdown item 3</option>
@@ -77,13 +92,13 @@
     </div>
     <script>
       document.addEventListener('DOMContentLoaded', function() {
-        new Choices('#choices-basic', {
+        new Choices('#choices-basic');
+
+        new Choices('#choices-remove-button', {
           removeItemButton: true,
         });
 
-        new Choices('#choices-disabled-choice', {
-          removeItemButton: true,
-        });
+        new Choices('#choices-disabled-choice');
 
         new Choices('#choices-selection-limit', {
           maxItemCount: 5,
@@ -93,6 +108,10 @@
           prependValue: 'before-',
           appendValue: '-after',
         });
+
+        new Choices('#choices-render-choice-limit', {
+          renderChoiceLimit: 1
+        });
       });
     </script>
   </body>

public/test/select-one.html

@@ -32,6 +32,16 @@
         <div data-test-hook="basic">
           <label for="choices-basic">Basic</label>
           <select class="form-control" name="choices-basic" id="choices-basic" placeholder="This is a placeholder">
+            <option value="Dropdown item 1">Dropdown item 1</option>
+            <option value="Dropdown item 2">Dropdown item 2</option>
+            <option value="Find me">Dropdown item 3</option>
+            <option value="Dropdown item 4">Dropdown item 4</option>
+          </select>
+        </div>
+
+        <div data-test-hook="remove-button">
+          <label for="choices-remove-button">Remove button</label>
+          <select class="form-control" name="choices-remove-button" id="choices-remove-button" placeholder="This is a placeholder">
             <option value="Dropdown item 1">Dropdown item 1</option>
             <option value="Dropdown item 2">Dropdown item 2</option>
             <option value="Dropdown item 3">Dropdown item 3</option>
@@ -57,11 +67,22 @@
             <option value="Dropdown item 3">Dropdown item 3</option>
           </select>
         </div>
+
+        <div data-test-hook="render-choice-limit">
+          <label for="choices-render-choice-limit">Render choice limit</label>
+          <select class="form-control" name="choices-render-choice-limit" id="choices-render-choice-limit" placeholder="This is a placeholder">
+            <option value="Dropdown item 1">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>
     </div>
     <script>
       document.addEventListener('DOMContentLoaded', function() {
-        new Choices('#choices-basic', {
+        new Choices('#choices-basic');
+
+        new Choices('#choices-remove-button', {
           removeItemButton: true,
         });
 
@@ -73,6 +94,10 @@
           prependValue: 'before-',
           appendValue: '-after',
         });
+
+        new Choices('#choices-render-choice-limit', {
+          renderChoiceLimit: 1
+        });
       });
     </script>
   </body>

public/test/text.html

@@ -34,6 +34,16 @@
           <input class="form-control" id="choices-basic" type="text" placeholder="Enter something">
         </div>
 
+        <div data-test-hook="edit-items">
+          <label for="choices-edit-items">Edit items</label>
+          <input class="form-control" id="choices-edit-items" type="text" placeholder="Enter something">
+        </div>
+
+        <div data-test-hook="remove-button">
+          <label for="choices-remove-button">Remove button</label>
+          <input class="form-control" id="choices-remove-button" type="text" placeholder="Enter something">
+        </div>
+
         <div data-test-hook="unique-values">
           <label for="choices-unique-values">Unique values</label>
           <input class="form-control" id="choices-unique-values" type="text" placeholder="This is a placeholder">
@@ -67,8 +77,13 @@
     </div>
     <script>
       document.addEventListener('DOMContentLoaded', function() {
-        new Choices('#choices-basic', {
+        new Choices('#choices-basic');
+
+        new Choices('#choices-edit-items', {
           editItems: true,
+        });
+
+        new Choices('#choices-remove-button', {
           removeItemButton: true,
         });