deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-04-25 02:40:28 +02:00
Code Issues Projects Releases Wiki Activity

Add e2e tests to interact with dropdown

Browse source
This commit is contained in:
Josh Johnson 2018-11-03 12:26:02 +00:00
parent 90a92656be
commit f3c0abef95
8 changed files with 106 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
cypress/integration/select-multiple.spec.js
View file

@ -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()

38
cypress/integration/select-one.spec.js
View file

@ -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()

4
public/assets/styles/base.css
View file

@ -156,6 +156,10 @@ h6,
display: none;
}
.push-bottom {
margin-bottom: 24px;
}
.zero-bottom {
margin-bottom: 0;
}

2
public/assets/styles/base.min.css vendored
View file

@ -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}
*{-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}

12
public/test/select-multiple.html
View file

@ -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 @@
</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,

12
public/test/select-one.html
View file

@ -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 @@
</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,

2
server.js
View file

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

4
src/styles/base.scss
View file

@ -160,6 +160,10 @@ h6,
display: none;
}
.push-bottom {
margin-bottom: $global-guttering;
}
.zero-bottom {
margin-bottom: 0;
}