From 81b2e23d0da05570f6eb12438d98f5584ea36325 Mon Sep 17 00:00:00 2001
From: Josh Johnson <josh@joshuajohnson.co.uk>
Date: Thu, 11 Oct 2018 19:33:19 +0100
Subject: [PATCH] Use test.html for testing + add additional tests

---
 cypress/integration/choices_spec.js | 108 +++++++++++++++++++-------
 public/test.html                    | 115 ++++++++++++++++++++++++++++
 src/scripts/choices.js              |  10 ++-
 3 files changed, 202 insertions(+), 31 deletions(-)
 create mode 100644 public/test.html

diff --git a/cypress/integration/choices_spec.js b/cypress/integration/choices_spec.js
index a1bdf60..28f9aa6 100644
--- a/cypress/integration/choices_spec.js
+++ b/cypress/integration/choices_spec.js
@@ -1,28 +1,12 @@
 describe('Choices', () => {
   beforeEach(() => {
-    cy.visit('/');
+    cy.visit('/test.html');
   });
 
   describe('text element', () => {
+    const textInput = 'testing';
+
     describe('adding choices', () => {
-      const textInput = 'testing';
-
-      it('shows a dropdown prompt when inputting data', () => {
-        cy.get('.choices')
-          .first()
-          .find('.choices__input--cloned')
-          .type(textInput);
-
-        cy.get('.choices')
-          .first()
-          .find('.choices__list--dropdown')
-          .should('be.visible')
-          .should($dropdown => {
-            const dropdownText = $dropdown.text().trim();
-            expect(dropdownText).to.equal(`Press Enter to add "${textInput}"`);
-          });
-      });
-
       it('allows me to input choices', () => {
         cy.get('.choices')
           .first()
@@ -39,8 +23,28 @@ describe('Choices', () => {
           });
       });
 
+      describe('inputting data', () => {
+        it('shows a dropdown prompt', () => {
+          cy.get('.choices')
+            .first()
+            .find('.choices__input--cloned')
+            .type(textInput);
+
+          cy.get('.choices')
+            .first()
+            .find('.choices__list--dropdown')
+            .should('be.visible')
+            .should($dropdown => {
+              const dropdownText = $dropdown.text().trim();
+              expect(dropdownText).to.equal(
+                `Press Enter to add "${textInput}"`,
+              );
+            });
+        });
+      });
+
       describe('input limit', () => {
-        it('does not let me input more than 5 choices', () => {
+        beforeEach(() => {
           for (let index = 0; index < 6; index++) {
             cy.get('.choices')
               .first()
@@ -48,35 +52,81 @@ describe('Choices', () => {
               .type(`${textInput} + ${index}`)
               .type('{enter}');
           }
+        });
 
+        it('does not let me input more than 5 choices', () => {
           cy.get('.choices')
             .first()
-            .find('.choices__list')
+            .find('.choices__list--multiple')
             .first()
             .children()
             .should($items => {
               expect($items.length).to.equal(5);
             });
         });
+
+        it('hides dropdown prompt once limit has been reached', () => {
+          cy.get('.choices')
+            .first()
+            .find('.choices__list--dropdown')
+            .should('not.be.visible');
+        });
       });
 
-      describe.skip('unique values', () => {
-        it('only allows me to input unique values', () => {
+      describe('unique values', () => {
+        beforeEach(() => {
           cy.get('.choices')
             .eq(1) // second choices instance
-            .find('.choices__list .choices__item')
-            .should($choices => {
-              expect($choices.length).to.equal(0);
+            .find('.choices__input--cloned')
+            .type(`${textInput}`)
+            .type('{enter}')
+            .type(`${textInput}`)
+            .type('{enter}');
+        });
+
+        it('only allows me to input unique values', () => {
+          cy.get('.choices')
+            .eq(1)
+            .find('.choices__list--multiple')
+            .first()
+            .children()
+            .should($items => {
+              expect($items.length).to.equal(1);
             });
         });
+
+        describe('inputting a non-unique value', () => {
+          it('displays dropdown prompt', () => {
+            cy.get('.choices')
+              .eq(1)
+              .find('.choices__list--dropdown')
+              .should('be.visible')
+              .should($dropdown => {
+                const dropdownText = $dropdown.text().trim();
+                expect(dropdownText).to.equal(
+                  'Only unique values can be added.',
+                );
+              });
+          });
+        });
       });
     });
 
     describe('removing choices', () => {
+      beforeEach(() => {
+        cy.get('.choices')
+          .first() // second choices instance
+          .find('.choices__input--cloned')
+          .type(`${textInput}`)
+          .type('{enter}')
+          .type(`${textInput}`)
+          .type('{enter}');
+      });
+
       it('allows me to remove inputted choices', () => {
         cy.get('.choices')
           .first()
-          .find('.choices__list')
+          .find('.choices__list--multiple')
           .first()
           .children()
           .should($items => {
@@ -85,7 +135,7 @@ describe('Choices', () => {
 
         cy.get('.choices')
           .first()
-          .find('.choices__list .choices__item')
+          .find('.choices__list--multiple .choices__item')
           .last()
           .find('.choices__button')
           .focus()
@@ -93,7 +143,7 @@ describe('Choices', () => {
 
         cy.get('.choices')
           .first()
-          .find('.choices__list')
+          .find('.choices__list--multiple')
           .first()
           .should($items => {
             expect($items.length).to.equal(1);
diff --git a/public/test.html b/public/test.html
new file mode 100644
index 0000000..c8fbdb6
--- /dev/null
+++ b/public/test.html
@@ -0,0 +1,115 @@
+<!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 -->
+
+  <!-- Optional includes -->
+  <script src="https://cdn.polyfill.io/v2/polyfill.js?features=es5,fetch,Element.prototype.classList,requestAnimationFrame,Node.insertBefore,Node.firstChild,Object.assign"></script>
+  <!-- End optional includes -->
+
+  <!-- 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 -->
+
+  <!--[if lt IE 9]>
+    <style>
+        .hidden-ie { display: none; }
+        .visible-ie { display: block; }
+    </style>
+    <![endif]-->
+</head>
+
+<body>
+  <div class="container">
+    <div class="section">
+      <a href="https://github.com/jshjohnson/Choices" class="logo">
+        <img src="assets/images/logo.svg" alt="Choices.js logo" class="logo__img hidden-ie">
+        <h1 class="visible-ie">Choices.js</h1>
+      </a>
+      <h2>Text inputs</h2>
+      <label for="choices-text-remove-button">Limited to 5 values with remove button</label>
+      <input class="form-control" id="choices-text-remove-button" type="text" placeholder="Enter something">
+
+      <label for="choices-text-unique-values">Unique values only, no pasting</label>
+      <input class="form-control" id="choices-text-unique-values" type="text" placeholder="This is a placeholder"
+        class="custom class">
+
+      <label for="choices-text-email-filter">Email addresses only</label>
+      <input class="form-control" id="choices-text-email-filter" type="text" placeholder="This is a placeholder">
+
+      <label for="choices-text-disabled">Disabled</label>
+      <input class="form-control" id="choices-text-disabled" type="text" placeholder="This is a placeholder">
+
+      <label for="choices-text-prepend-append-value">Prepends and appends a value to each items return value</label>
+      <input class="form-control" id="choices-text-prepend-append-value" type="text" placeholder="This is a placeholder">
+
+      <hr>
+
+      <h2>Multiple select input</h2>
+
+      <hr>
+
+      <h2>Single select input</h2>
+
+    </div>
+  </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      var textRemove = new Choices('#choices-text-remove-button', {
+        delimiter: ',',
+        editItems: true,
+        maxItemCount: 5,
+        removeItemButton: true,
+      });
+
+      var textUniqueVals = new Choices('#choices-text-unique-values', {
+        paste: false,
+        duplicateItemsAllowed: false,
+        editItems: true,
+      });
+
+      var textEmailFilter = new Choices('#choices-text-email-filter', {
+        editItems: true,
+        regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+      });
+
+      var textDisabled = new Choices('#choices-text-disabled', {
+        addItems: false,
+        removeItems: false,
+      }).disable();
+
+      var textPrependAppendVal = new Choices('#choices-text-prepend-append-value', {
+        prependValue: 'item-',
+        appendValue: '-' + Date.now(),
+      }).removeActiveItems();
+    });
+  </script>
+
+  <!-- Google Analytics - Ignore me -->
+  <script>
+    window.ga = window.ga || function() { (ga.q = ga.q || []).push(arguments) }; ga.l = +new Date;
+    ga('create', 'UA-31575166-1', 'auto');
+    ga('send', 'pageview');
+  </script>
+  <script async src='https://www.google-analytics.com/analytics.js'></script>
+  <!-- End Google Analytics -->
+</body>
+
+</html>
diff --git a/src/scripts/choices.js b/src/scripts/choices.js
index 00ac946..ea5096a 100644
--- a/src/scripts/choices.js
+++ b/src/scripts/choices.js
@@ -71,6 +71,12 @@ class Choices {
       ? document.querySelector(element)
       : element;
 
+    if (!passedElement) {
+      return console.error(
+        'Could not find passed element or passed element was of an invalid type',
+      );
+    }
+
     this._isTextElement = passedElement.type === 'text';
     this._isSelectOneElement = passedElement.type === 'select-one';
     this._isSelectMultipleElement = passedElement.type === 'select-multiple';
@@ -90,8 +96,8 @@ class Choices {
       });
     }
 
-    if (!this.passedElement) {
-      throw new Error('Could not wrap passed element');
+    if (!passedElement) {
+      return console.error('Passed element was of an invalid type');
     }
 
     if (