From e07e14bd8f6027a06ef369f760ec164ead09fe5c Mon Sep 17 00:00:00 2001
From: Josh Johnson <josh@joshuajohnson.co.uk>
Date: Sat, 13 Oct 2018 16:38:51 +0100
Subject: [PATCH] Add select multiple e2e tests

---
 cypress/integration/select-multiple.spec.js   | 188 ++++++++++++++++++
 .../{text_element_spec.js => text.spec.js}    |  66 +++---
 public/test/select-multiple.html              |  67 +++++++
 src/scripts/constants.js                      |   4 +-
 4 files changed, 291 insertions(+), 34 deletions(-)
 create mode 100644 cypress/integration/select-multiple.spec.js
 rename cypress/integration/{text_element_spec.js => text.spec.js} (85%)
 create mode 100644 public/test/select-multiple.html

diff --git a/cypress/integration/select-multiple.spec.js b/cypress/integration/select-multiple.spec.js
new file mode 100644
index 0000000..fe600b6
--- /dev/null
+++ b/cypress/integration/select-multiple.spec.js
@@ -0,0 +1,188 @@
+describe('Choices - text element', () => {
+  beforeEach(() => {
+    cy.visit('/select-multiple.html');
+  });
+
+  describe('configs', () => {
+    describe('basic', () => {
+      describe('selecting choices', () => {
+        beforeEach(() => {
+          cy.get('[data-test-hook=basic]')
+            .find('.choices__input--cloned')
+            .focus();
+        });
+
+        describe('focusing on text input', () => {
+          const selectedChoiceText = 'Dropdown item 1';
+
+          it('displays a dropdown of choices', () => {
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__list--dropdown')
+              .should('be.visible');
+
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__list--dropdown .choices__list')
+              .children()
+              .should('have.length', 4)
+              .each(($choice, index) => {
+                expect($choice.text().trim()).to.equal(
+                  `Dropdown item ${index + 1}`,
+                );
+              });
+          });
+
+          it('allows me select choices from a dropdown', () => {
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__list--dropdown .choices__list')
+              .children()
+              .first()
+              .click();
+
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__list--multiple .choices__item')
+              .last()
+              .should($item => {
+                expect($item).to.contain(selectedChoiceText);
+              });
+          });
+
+          describe('selecting all available choices', () => {
+            beforeEach(() => {
+              for (let index = 0; index <= 4; index++) {
+                cy.get('[data-test-hook=basic]')
+                  .find('.choices__input--cloned')
+                  .focus();
+
+                cy.get('[data-test-hook=basic]')
+                  .find('.choices__list--dropdown .choices__list')
+                  .children()
+                  .first()
+                  .click();
+              }
+            });
+
+            it('displays dropdown prompt', () => {
+              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 choices to choose from');
+                });
+            });
+          });
+
+          it('removes selected choice from dropdown', () => {
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__list--dropdown .choices__list')
+              .children()
+              .first()
+              .click();
+
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__list--dropdown .choices__list')
+              .children()
+              .each($choice => {
+                expect($choice.text().trim()).to.not.equal(selectedChoiceText);
+              });
+          });
+
+          describe('pressing escape', () => {
+            beforeEach(() => {
+              cy.get('[data-test-hook=basic]')
+                .find('.choices__input--cloned')
+                .type('{esc}');
+            });
+
+            it('closes the dropdown', () => {
+              cy.get('[data-test-hook=basic]')
+                .find('.choices__list--dropdown')
+                .should('not.be.visible');
+            });
+
+            describe('typing more into the input', () => {
+              it('re-opens the dropdown', () => {
+                cy.get('[data-test-hook=basic]')
+                  .find('.choices__input--cloned')
+                  .type('test');
+
+                cy.get('[data-test-hook=basic]')
+                  .find('.choices__list--dropdown')
+                  .should('be.visible');
+              });
+            });
+          });
+        });
+      });
+
+      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()
+            .last()
+            .click();
+        });
+
+        describe('pressing backspace', () => {
+          it('removes last choice', () => {
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__input--cloned')
+              .type('{backspace}');
+
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__list--multiple')
+              .children()
+              .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();
+
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__list--multiple')
+              .children()
+              .should('have.length', 0);
+          });
+        });
+      });
+    });
+
+    describe('disabled choice', () => {
+      describe('selecting a disabled choice', () => {
+        beforeEach(() => {
+          cy.get('[data-test-hook=disabled-choice]')
+            .find('.choices__input--cloned')
+            .focus();
+
+          cy.get('[data-test-hook=disabled-choice]')
+            .find('.choices__list--dropdown .choices__item--disabled')
+            .click();
+        });
+
+        it('does not select choice', () => {
+          cy.get('[data-test-hook=disabled-choice]')
+            .find('.choices__list--multiple .choices__item')
+            .should('have.length', 0);
+        });
+
+        it('keeps choice dropdown open', () => {
+          cy.get('[data-test-hook=disabled-choice]')
+            .find('.choices__list--dropdown')
+            .should('be.visible');
+        });
+      });
+    });
+  });
+});
diff --git a/cypress/integration/text_element_spec.js b/cypress/integration/text.spec.js
similarity index 85%
rename from cypress/integration/text_element_spec.js
rename to cypress/integration/text.spec.js
index 596accf..398d727 100644
--- a/cypress/integration/text_element_spec.js
+++ b/cypress/integration/text.spec.js
@@ -86,41 +86,43 @@ describe('Choices - text element', () => {
             .type('{enter}');
         });
 
-        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);
-            });
+        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);
+              });
 
-          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')
+              .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);
-            });
-        });
+            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();
+          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=basic]')
+              .find('.choices__input.is-hidden')
+              .then($input => {
+                expect($input.val()).to.not.contain(textInput);
+              });
+          });
         });
       });
     });
@@ -154,7 +156,7 @@ describe('Choices - text element', () => {
               .should($dropdown => {
                 const dropdownText = $dropdown.text().trim();
                 expect(dropdownText).to.equal(
-                  'Only unique values can be added.',
+                  'Only unique values can be added',
                 );
               });
           });
diff --git a/public/test/select-multiple.html b/public/test/select-multiple.html
new file mode 100644
index 0000000..db4a7d5
--- /dev/null
+++ b/public/test/select-multiple.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
+  <title>Choices</title>
+  <meta name=description itemprop=description content="A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.">
+  <link rel="apple-touch-icon" sizes="180x180" href="../assets/images/apple-touch-icon.png">
+  <link rel="icon" type="image/png" href="../assets/images/favicon-32x32.png" sizes="32x32">
+  <link rel="icon" type="image/png" href="../assets/images/favicon-16x16.png" sizes="16x16">
+  <link rel="manifest" href="../assets/images/manifest.json">
+  <link rel="mask-icon" href="../assets/images/safari-pinned-tab.svg" color="#00bcd4">
+  <link rel="shortcut icon" href="../assets/images/favicon.ico">
+  <meta name="msapplication-config" content="../assets/images/browserconfig.xml">
+  <meta name="theme-color" content="#ffffff">
+
+  <!-- Ignore these -->
+  <link rel="stylesheet" href="../assets/styles/base.min.css?version=3.0.2">
+  <!-- End ignore these -->
+
+  <!-- Choices includes -->
+  <link rel="stylesheet" href="../assets/styles/choices.min.css?version=3.0.2">
+  <script src="../assets/scripts/choices.min.js?version=2.8.8"></script>
+  <!-- End Choices includes -->
+  </head>
+
+  <body>
+    <div class="container">
+      <div class="section">
+        <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>
+            <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>
+            <option value="Dropdown item 4">Dropdown item 4</option>
+          </select>
+        </div>
+
+        <div data-test-hook="disabled-choice">
+          <label for="choices-disabled-choice">Basic</label>
+          <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>
+            <option value="Dropdown item 4" disabled>Dropdown item 4</option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        new Choices('#choices-basic', {
+          removeItemButton: true,
+        });
+
+        new Choices('#choices-disabled-choice', {
+          removeItemButton: true,
+        });
+      });
+    </script>
+  </body>
+  </html>
diff --git a/src/scripts/constants.js b/src/scripts/constants.js
index 2ef4e87..1f844c3 100644
--- a/src/scripts/constants.js
+++ b/src/scripts/constants.js
@@ -63,9 +63,9 @@ export const DEFAULT_CONFIG = {
   noResultsText: 'No results found',
   noChoicesText: 'No choices to choose from',
   itemSelectText: 'Press to select',
-  uniqueItemText: 'Only unique values can be added.',
+  uniqueItemText: 'Only unique values can be added',
   addItemText: value => `Press Enter to add <b>"${stripHTML(value)}"</b>`,
-  maxItemText: maxItemCount => `Only ${maxItemCount} values can be added.`,
+  maxItemText: maxItemCount => `Only ${maxItemCount} values can be added`,
   itemComparer: (choice, item) => choice === item,
   fuseOptions: {
     includeScore: true,