From 15082ccd03c3223414f73f20cb653459978489a5 Mon Sep 17 00:00:00 2001
From: Josh Johnson <josh@joshuajohnson.co.uk>
Date: Sat, 27 Oct 2018 16:25:46 +0100
Subject: [PATCH] Add scrolling e2e tests

---
 cypress/integration/select-multiple.spec.js | 120 ++++++++++---------
 cypress/integration/select-one.spec.js      | 123 +++++++++++---------
 cypress/integration/text.spec.js            |   2 +-
 public/test/select-multiple.html            |  25 ++++
 public/test/select-one.html                 |  25 ++++
 5 files changed, 185 insertions(+), 110 deletions(-)

diff --git a/cypress/integration/select-multiple.spec.js b/cypress/integration/select-multiple.spec.js
index ab1f4d4..af74c4e 100644
--- a/cypress/integration/select-multiple.spec.js
+++ b/cypress/integration/select-multiple.spec.js
@@ -3,8 +3,8 @@ describe('Choices - select multiple', () => {
     cy.visit('/select-multiple.html');
   });
 
-  describe('configs', () => {
-    describe('basic', () => {
+  describe('scenarios', () => {
+    describe('basic setup', () => {
       beforeEach(() => {
         cy.get('[data-test-hook=basic]')
           .find('.choices__input--cloned')
@@ -189,58 +189,6 @@ describe('Choices - select multiple', () => {
           });
         });
       });
-
-      describe('scrolling choices', () => {
-        const choicesCount = 4;
-
-        it('highlights first choice on dropdown open', () => {
-          cy.get('[data-test-hook=basic]')
-            .find('.choices__list--dropdown .choices__list .is-highlighted')
-            .should($choice => {
-              expect($choice.text().trim()).to.equal('Dropdown item 1');
-            });
-        });
-
-        it('scrolls to next choice on down arrow', () => {
-          for (let index = 0; index < choicesCount; index++) {
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__list--dropdown .choices__list .is-highlighted')
-              .should($choice => {
-                expect($choice.text().trim()).to.equal(
-                  `Dropdown item ${index + 1}`,
-                );
-              });
-
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__input--cloned')
-              .type('{downarrow}');
-          }
-        });
-
-        it('scrolls up to previous choice on up arrow', () => {
-          // scroll to last choice
-          for (let index = 0; index < choicesCount; index++) {
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__input--cloned')
-              .type('{downarrow}');
-          }
-
-          // scroll up to first choice
-          for (let index = choicesCount; index > 0; index--) {
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__list--dropdown .choices__list .is-highlighted')
-              .should($choice => {
-                expect($choice.text().trim()).to.equal(
-                  `Dropdown item ${index}`,
-                );
-              });
-
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__input--cloned')
-              .type('{uparrow}');
-          }
-        });
-      });
     });
 
     describe('remove button', () => {
@@ -552,5 +500,69 @@ describe('Choices - select multiple', () => {
         });
       });
     });
+
+    describe('dropdown scrolling', () => {
+      let choicesCount;
+
+      beforeEach(() => {
+        cy.get('[data-test-hook=scrolling-dropdown]')
+          .find('.choices__list--dropdown .choices__list .choices__item')
+          .then($choices => {
+            choicesCount = $choices.length;
+          });
+
+        cy.get('[data-test-hook=scrolling-dropdown]')
+          .find('.choices__input--cloned')
+          .focus();
+      });
+
+      it('highlights first choice on dropdown open', () => {
+        cy.get('[data-test-hook=scrolling-dropdown]')
+          .find('.choices__list--dropdown .choices__list .is-highlighted')
+          .should($choice => {
+            expect($choice.text().trim()).to.equal('Dropdown item 1');
+          });
+      });
+
+      it('scrolls to next choice on down arrow', () => {
+        for (let index = 0; index < choicesCount; index++) {
+          cy.get('[data-test-hook=scrolling-dropdown]')
+            .find('.choices__list--dropdown .choices__list .is-highlighted')
+            .should($choice => {
+              expect($choice.text().trim()).to.equal(
+                `Dropdown item ${index + 1}`,
+              );
+            });
+
+          cy.get('[data-test-hook=scrolling-dropdown]')
+            .find('.choices__input--cloned')
+            .type('{downarrow}');
+        }
+      });
+
+      it('scrolls up to previous choice on up arrow', () => {
+        // scroll to last choice
+        for (let index = 0; index < choicesCount; index++) {
+          cy.get('[data-test-hook=scrolling-dropdown]')
+            .find('.choices__input--cloned')
+            .type('{downarrow}');
+        }
+
+        // scroll up to first choice
+        for (let index = choicesCount; index > 0; index--) {
+          cy.wait(100); // allow for dropdown animation to finish
+
+          cy.get('[data-test-hook=scrolling-dropdown]')
+            .find('.choices__list--dropdown .choices__list .is-highlighted')
+            .should($choice => {
+              expect($choice.text().trim()).to.equal(`Dropdown item ${index}`);
+            });
+
+          cy.get('[data-test-hook=scrolling-dropdown]')
+            .find('.choices__input--cloned')
+            .type('{uparrow}');
+        }
+      });
+    });
   });
 });
diff --git a/cypress/integration/select-one.spec.js b/cypress/integration/select-one.spec.js
index d7b8e0a..1be727f 100644
--- a/cypress/integration/select-one.spec.js
+++ b/cypress/integration/select-one.spec.js
@@ -3,12 +3,13 @@ describe('Choices - select one', () => {
     cy.visit('/select-one.html');
   });
 
-  describe('configs', () => {
+  describe('scenarios', () => {
     describe('basic', () => {
       beforeEach(() => {
+        // open dropdown
         cy.get('[data-test-hook=basic]')
-          .find('.choices__input--cloned')
-          .focus();
+          .find('.choices')
+          .click();
       });
 
       describe('selecting choice', () => {
@@ -129,58 +130,6 @@ describe('Choices - select one', () => {
           });
         });
       });
-
-      describe('scrolling choices', () => {
-        const choicesCount = 4;
-
-        it('highlights first choice on dropdown open', () => {
-          cy.get('[data-test-hook=basic]')
-            .find('.choices__list--dropdown .choices__list .is-highlighted')
-            .should($choice => {
-              expect($choice.text().trim()).to.equal('Dropdown item 1');
-            });
-        });
-
-        it('scrolls to next choice on down arrow', () => {
-          for (let index = 0; index < choicesCount; index++) {
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__list--dropdown .choices__list .is-highlighted')
-              .should($choice => {
-                expect($choice.text().trim()).to.equal(
-                  `Dropdown item ${index + 1}`,
-                );
-              });
-
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__input--cloned')
-              .type('{downarrow}');
-          }
-        });
-
-        it('scrolls up to previous choice on up arrow', () => {
-          // scroll to last choice
-          for (let index = 0; index < choicesCount; index++) {
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__input--cloned')
-              .type('{downarrow}');
-          }
-
-          // scroll up to first choice
-          for (let index = choicesCount; index > 0; index--) {
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__list--dropdown .choices__list .is-highlighted')
-              .should($choice => {
-                expect($choice.text().trim()).to.equal(
-                  `Dropdown item ${index}`,
-                );
-              });
-
-            cy.get('[data-test-hook=basic]')
-              .find('.choices__input--cloned')
-              .type('{uparrow}');
-          }
-        });
-      });
     });
 
     describe('remove button', () => {
@@ -499,5 +448,69 @@ describe('Choices - select one', () => {
         });
       });
     });
+
+    describe('scrolling dropdown', () => {
+      let choicesCount;
+
+      beforeEach(() => {
+        cy.get('[data-test-hook=scrolling-dropdown]')
+          .find('.choices__list--dropdown .choices__list .choices__item')
+          .then($choices => {
+            choicesCount = $choices.length;
+          });
+
+        cy.get('[data-test-hook=scrolling-dropdown]')
+          .find('.choices')
+          .click();
+      });
+
+      it('highlights first choice on dropdown open', () => {
+        cy.get('[data-test-hook=scrolling-dropdown]')
+          .find('.choices__list--dropdown .choices__list .is-highlighted')
+          .should($choice => {
+            expect($choice.text().trim()).to.equal('Dropdown item 1');
+          });
+      });
+
+      it('scrolls to next choice on down arrow', () => {
+        for (let index = 0; index < choicesCount; index++) {
+          cy.get('[data-test-hook=scrolling-dropdown]')
+            .find('.choices__list--dropdown .choices__list .is-highlighted')
+            .should($choice => {
+              expect($choice.text().trim()).to.equal(
+                `Dropdown item ${index + 1}`,
+              );
+            });
+
+          cy.get('[data-test-hook=scrolling-dropdown]')
+            .find('.choices__input--cloned')
+            .type('{downarrow}');
+        }
+      });
+
+      it('scrolls up to previous choice on up arrow', () => {
+        // scroll to last choice
+        for (let index = 0; index < choicesCount; index++) {
+          cy.get('[data-test-hook=scrolling-dropdown]')
+            .find('.choices__input--cloned')
+            .type('{downarrow}');
+        }
+
+        // scroll up to first choice
+        for (let index = choicesCount; index > 0; index--) {
+          cy.wait(100); // allow for dropdown animation to finish
+
+          cy.get('[data-test-hook=scrolling-dropdown]')
+            .find('.choices__list--dropdown .choices__list .is-highlighted')
+            .should($choice => {
+              expect($choice.text().trim()).to.equal(`Dropdown item ${index}`);
+            });
+
+          cy.get('[data-test-hook=scrolling-dropdown]')
+            .find('.choices__input--cloned')
+            .type('{uparrow}');
+        }
+      });
+    });
   });
 });
diff --git a/cypress/integration/text.spec.js b/cypress/integration/text.spec.js
index 8aa288f..961eb4a 100644
--- a/cypress/integration/text.spec.js
+++ b/cypress/integration/text.spec.js
@@ -3,7 +3,7 @@ describe('Choices - text element', () => {
     cy.visit('/text.html');
   });
 
-  describe('configs', () => {
+  describe('scenarios', () => {
     const textInput = 'testing';
 
     describe('basic', () => {
diff --git a/public/test/select-multiple.html b/public/test/select-multiple.html
index 975e88a..4186339 100644
--- a/public/test/select-multiple.html
+++ b/public/test/select-multiple.html
@@ -120,6 +120,27 @@
           <label for="choices-remote-data">Remote data</label>
           <select class="form-control" name="choices-remote-data" id="choices-remote-data" multiple></select>
         </div>
+
+        <div data-test-hook="scrolling-dropdown">
+          <label for="choices-scrolling-dropdown">Scrolling dropdown</label>
+          <select class="form-control" name="choices-scrolling-dropdown" id="choices-scrolling-dropdown" 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>
+            <option value="Dropdown item 5">Dropdown item 5</option>
+            <option value="Dropdown item 6">Dropdown item 6</option>
+            <option value="Dropdown item 7">Dropdown item 7</option>
+            <option value="Dropdown item 8">Dropdown item 8</option>
+            <option value="Dropdown item 9">Dropdown item 9</option>
+            <option value="Dropdown item 10">Dropdown item 10</option>
+            <option value="Dropdown item 11">Dropdown item 11</option>
+            <option value="Dropdown item 12">Dropdown item 12</option>
+            <option value="Dropdown item 13">Dropdown item 13</option>
+            <option value="Dropdown item 14">Dropdown item 14</option>
+            <option value="Dropdown item 15">Dropdown item 15</option>
+          </select>
+        </div>
       </div>
     </div>
     <script>
@@ -171,6 +192,10 @@
               console.error(error);
             });
         });
+
+        new Choices('#choices-scrolling-dropdown', {
+          shouldSort: false,
+        });
       });
     </script>
   </body>
diff --git a/public/test/select-one.html b/public/test/select-one.html
index de5e8a2..aa5d802 100644
--- a/public/test/select-one.html
+++ b/public/test/select-one.html
@@ -108,6 +108,27 @@
           <label for="choices-remote-data">Remote data</label>
           <select class="form-control" name="choices-remote-data" id="choices-remote-data"></select>
         </div>
+
+        <div data-test-hook="scrolling-dropdown">
+          <label for="choices-scrolling-dropdown">Scrolling dropdown</label>
+          <select class="form-control" name="choices-scrolling-dropdown" id="choices-scrolling-dropdown">
+            <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>
+            <option value="Dropdown item 5">Dropdown item 5</option>
+            <option value="Dropdown item 6">Dropdown item 6</option>
+            <option value="Dropdown item 7">Dropdown item 7</option>
+            <option value="Dropdown item 8">Dropdown item 8</option>
+            <option value="Dropdown item 9">Dropdown item 9</option>
+            <option value="Dropdown item 10">Dropdown item 10</option>
+            <option value="Dropdown item 11">Dropdown item 11</option>
+            <option value="Dropdown item 12">Dropdown item 12</option>
+            <option value="Dropdown item 13">Dropdown item 13</option>
+            <option value="Dropdown item 14">Dropdown item 14</option>
+            <option value="Dropdown item 15">Dropdown item 15</option>
+          </select>
+        </div>
       </div>
     </div>
     <script>
@@ -156,6 +177,10 @@
               console.error(error);
             });
         });
+
+        new Choices('#choices-scrolling-dropdown', {
+          shouldSort: false,
+        });
       });
     </script>
   </body>