From 620bfeae0d6386a2833c129d38b21d6dc9432ebb Mon Sep 17 00:00:00 2001
From: Josh Johnson <josh@joshuajohnson.co.uk>
Date: Sun, 21 Oct 2018 18:39:37 +0100
Subject: [PATCH] Add scrolling e2e tests

---
 cypress/integration/select-multiple.spec.js | 52 +++++++++++++++++++++
 cypress/integration/select-one.spec.js      | 52 +++++++++++++++++++++
 2 files changed, 104 insertions(+)

diff --git a/cypress/integration/select-multiple.spec.js b/cypress/integration/select-multiple.spec.js
index 67123f0..39facc3 100644
--- a/cypress/integration/select-multiple.spec.js
+++ b/cypress/integration/select-multiple.spec.js
@@ -189,6 +189,58 @@ 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', () => {
diff --git a/cypress/integration/select-one.spec.js b/cypress/integration/select-one.spec.js
index edaed62..d35895d 100644
--- a/cypress/integration/select-one.spec.js
+++ b/cypress/integration/select-one.spec.js
@@ -129,6 +129,58 @@ 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', () => {