From f3c0abef95c5353b97d877459b3acf47bcde00e7 Mon Sep 17 00:00:00 2001 From: Josh Johnson Date: Sat, 3 Nov 2018 12:26:02 +0000 Subject: [PATCH] Add e2e tests to interact with dropdown --- cypress/integration/select-multiple.spec.js | 38 ++++++++++++++++++++- cypress/integration/select-one.spec.js | 38 ++++++++++++++++++++- public/assets/styles/base.css | 4 +++ public/assets/styles/base.min.css | 2 +- public/test/select-multiple.html | 12 ++++++- public/test/select-one.html | 12 ++++++- server.js | 2 +- src/styles/base.scss | 4 +++ 8 files changed, 106 insertions(+), 6 deletions(-) diff --git a/cypress/integration/select-multiple.spec.js b/cypress/integration/select-multiple.spec.js index 8a5ea41..0dc8061 100644 --- 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 index f72d9d2..6d7e2cd 100644 --- 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 index 53522bb..d39866c 100644 --- 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 index edf33ff..10d2799 100644 --- a/public/assets/styles/base.min.css +++ b/public/assets/styles/base.min.css @@ -1 +1 @@ -*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label{margin-bottom:8px;font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0}hr{margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo__img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}.is-hidden{display:none}[data-test-hook]{margin-bottom:24px} \ No newline at end of file +*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label{margin-bottom:8px;font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0}hr{margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}.logo{display:block;margin-bottom:12px}.logo__img{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}.push-bottom{margin-bottom:24px}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}.is-hidden{display:none}[data-test-hook]{margin-bottom:24px} \ No newline at end of file diff --git a/public/test/select-multiple.html b/public/test/select-multiple.html index 20cdf94..5bec0a7 100644 --- a/public/test/select-multiple.html +++ b/public/test/select-multiple.html @@ -31,6 +31,8 @@

Select multiple inputs

+ +