Add e2e tests to interact with dropdown

destcodes · Nov 3, 2018 · f3c0abe · f3c0abe
1 parent 90a9265
commit f3c0abe
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 6 deletions.
diff --git a/cypress/integration/select-multiple.spec.js b/cypress/integration/select-multiple.spec.js
@@ -210,6 +210,42 @@ describe('Choices - select multiple', () => {
           });
         });
       });
+
+      describe('interacting with dropdown', () => {
+        describe('opening dropdown', () => {
+          it('opens dropdown', () => {
+            cy.get('[data-test-hook=basic]')
+              .find('button.open-dropdown')
+              .focus()
+              .click();
+
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__list--dropdown')
+              .should('be.visible');
+          });
+        });
+
+        describe('closing dropdown', () => {
+          beforeEach(() => {
+            // ensure dropdown is already open
+            cy.get('[data-test-hook=basic]')
+              .find('button.open-dropdown')
+              .focus()
+              .click();
+          });
+
+          it('closes dropdown', () => {
+            cy.get('[data-test-hook=basic]')
+              .find('button.close-dropdown')
+              .focus()
+              .click();
+
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__list--dropdown')
+              .should('not.be.visible');
+          });
+        });
+      });
     });
 
     describe('remove button', () => {
@@ -501,7 +537,7 @@ describe('Choices - select multiple', () => {
       describe('when data has loaded', () => {
         describe('opening the dropdown', () => {
           it('displays the loaded data', () => {
-            cy.wait(2000);
+            cy.wait(1000);
             cy.get('[data-test-hook=remote-data]')
               .find('.choices__list--dropdown .choices__list')
               .children()

diff --git a/cypress/integration/select-one.spec.js b/cypress/integration/select-one.spec.js
@@ -128,6 +128,42 @@ describe('Choices - select one', () => {
           });
         });
       });
+
+      describe('interacting with dropdown', () => {
+        describe('opening dropdown', () => {
+          it('opens dropdown', () => {
+            cy.get('[data-test-hook=basic]')
+              .find('button.open-dropdown')
+              .focus()
+              .click();
+
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__list--dropdown')
+              .should('be.visible');
+          });
+        });
+
+        describe('closing dropdown', () => {
+          beforeEach(() => {
+            // ensure dropdown is already open
+            cy.get('[data-test-hook=basic]')
+              .find('button.open-dropdown')
+              .focus()
+              .click();
+          });
+
+          it('closes dropdown', () => {
+            cy.get('[data-test-hook=basic]')
+              .find('button.close-dropdown')
+              .focus()
+              .click();
+
+            cy.get('[data-test-hook=basic]')
+              .find('.choices__list--dropdown')
+              .should('not.be.visible');
+          });
+        });
+      });
     });
 
     describe('remove button', () => {
@@ -452,7 +488,7 @@ describe('Choices - select one', () => {
       describe('when data has loaded', () => {
         describe('opening the dropdown', () => {
           it('displays the loaded data', () => {
-            cy.wait(2000);
+            cy.wait(1000);
             cy.get('[data-test-hook=remote-data]')
               .find('.choices__list--dropdown .choices__list')
               .children()

diff --git a/public/assets/styles/base.css b/public/assets/styles/base.css
@@ -156,6 +156,10 @@ h6,
   display: none;
 }
 
+.push-bottom {
+  margin-bottom: 24px;
+}
+
 .zero-bottom {
   margin-bottom: 0;
 }

diff --git a/public/assets/styles/base.min.css b/public/assets/styles/base.min.css
diff --git a/public/test/select-multiple.html b/public/test/select-multiple.html
@@ -31,6 +31,8 @@
         <h2>Select multiple inputs</h2>
         <div data-test-hook="basic">
           <label for="choices-basic">Basic</label>
+          <button class="open-dropdown push-bottom">Open dropdown</button>
+          <button class="close-dropdown push-bottom">Close dropdown</button>
           <select class="form-control" name="choices-basic" id="choices-basic" multiple>
             <option value="Choice 1">Choice 1</option>
             <option value="Choice 2">Choice 2</option>
@@ -175,7 +177,15 @@ <h2>Select multiple inputs</h2>
     </div>
     <script>
       document.addEventListener('DOMContentLoaded', function() {
-        new Choices('#choices-basic');
+        const choicesBasic = new Choices('#choices-basic');
+
+        document.querySelector('button.open-dropdown').addEventListener('click', () => {
+          choicesBasic.showDropdown();
+        });
+
+        document.querySelector('button.close-dropdown').addEventListener('click', () => {
+          choicesBasic.hideDropdown();
+        });
 
         new Choices('#choices-remove-button', {
           removeItemButton: true,

diff --git a/public/test/select-one.html b/public/test/select-one.html
@@ -31,6 +31,8 @@
         <h2>Select one inputs</h2>
         <div data-test-hook="basic">
           <label for="choices-basic">Basic</label>
+          <button class="open-dropdown push-bottom">Open dropdown</button>
+          <button class="close-dropdown push-bottom">Close dropdown</button>
           <select class="form-control" name="choices-basic" id="choices-basic">
             <option value="Choice 1">Choice 1</option>
             <option value="Choice 2">Choice 2</option>
@@ -179,7 +181,15 @@ <h2>Select one inputs</h2>
     </div>
     <script>
       document.addEventListener('DOMContentLoaded', function() {
-        new Choices('#choices-basic');
+        const choicesBasic = new Choices('#choices-basic');
+
+        document.querySelector('button.open-dropdown').addEventListener('click', () => {
+          choicesBasic.showDropdown();
+        });
+
+        document.querySelector('button.close-dropdown').addEventListener('click', () => {
+          choicesBasic.hideDropdown();
+        });
 
         new Choices('#choices-remove-button', {
           removeItemButton: true,

diff --git a/server.js b/server.js
@@ -40,7 +40,7 @@ if (process.env.NODE_ENV !== 'production') {
 
     setTimeout(() => {
       res.status(200).send(fakeData);
-    }, 2000);
+    }, 1000);
   });
 }
 

diff --git a/src/styles/base.scss b/src/styles/base.scss
@@ -160,6 +160,10 @@ h6,
   display: none;
 }
 
+.push-bottom {
+  margin-bottom: $global-guttering;
+}
+
 .zero-bottom {
   margin-bottom: 0;
 }