mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-04 06:43:15 +02:00
Add e2e tests to interact with dropdown
This commit is contained in:
parent
90a92656be
commit
f3c0abef95
|
@ -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', () => {
|
describe('remove button', () => {
|
||||||
|
@ -501,7 +537,7 @@ describe('Choices - select multiple', () => {
|
||||||
describe('when data has loaded', () => {
|
describe('when data has loaded', () => {
|
||||||
describe('opening the dropdown', () => {
|
describe('opening the dropdown', () => {
|
||||||
it('displays the loaded data', () => {
|
it('displays the loaded data', () => {
|
||||||
cy.wait(2000);
|
cy.wait(1000);
|
||||||
cy.get('[data-test-hook=remote-data]')
|
cy.get('[data-test-hook=remote-data]')
|
||||||
.find('.choices__list--dropdown .choices__list')
|
.find('.choices__list--dropdown .choices__list')
|
||||||
.children()
|
.children()
|
||||||
|
|
|
@ -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', () => {
|
describe('remove button', () => {
|
||||||
|
@ -452,7 +488,7 @@ describe('Choices - select one', () => {
|
||||||
describe('when data has loaded', () => {
|
describe('when data has loaded', () => {
|
||||||
describe('opening the dropdown', () => {
|
describe('opening the dropdown', () => {
|
||||||
it('displays the loaded data', () => {
|
it('displays the loaded data', () => {
|
||||||
cy.wait(2000);
|
cy.wait(1000);
|
||||||
cy.get('[data-test-hook=remote-data]')
|
cy.get('[data-test-hook=remote-data]')
|
||||||
.find('.choices__list--dropdown .choices__list')
|
.find('.choices__list--dropdown .choices__list')
|
||||||
.children()
|
.children()
|
||||||
|
|
|
@ -156,6 +156,10 @@ h6,
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.push-bottom {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
.zero-bottom {
|
.zero-bottom {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
2
public/assets/styles/base.min.css
vendored
2
public/assets/styles/base.min.css
vendored
|
@ -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}
|
|
@ -31,6 +31,8 @@
|
||||||
<h2>Select multiple inputs</h2>
|
<h2>Select multiple inputs</h2>
|
||||||
<div data-test-hook="basic">
|
<div data-test-hook="basic">
|
||||||
<label for="choices-basic">Basic</label>
|
<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>
|
<select class="form-control" name="choices-basic" id="choices-basic" multiple>
|
||||||
<option value="Choice 1">Choice 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Choice 2">Choice 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
|
@ -175,7 +177,15 @@
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
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', {
|
new Choices('#choices-remove-button', {
|
||||||
removeItemButton: true,
|
removeItemButton: true,
|
||||||
|
|
|
@ -31,6 +31,8 @@
|
||||||
<h2>Select one inputs</h2>
|
<h2>Select one inputs</h2>
|
||||||
<div data-test-hook="basic">
|
<div data-test-hook="basic">
|
||||||
<label for="choices-basic">Basic</label>
|
<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">
|
<select class="form-control" name="choices-basic" id="choices-basic">
|
||||||
<option value="Choice 1">Choice 1</option>
|
<option value="Choice 1">Choice 1</option>
|
||||||
<option value="Choice 2">Choice 2</option>
|
<option value="Choice 2">Choice 2</option>
|
||||||
|
@ -179,7 +181,15 @@
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
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', {
|
new Choices('#choices-remove-button', {
|
||||||
removeItemButton: true,
|
removeItemButton: true,
|
||||||
|
|
|
@ -40,7 +40,7 @@ if (process.env.NODE_ENV !== 'production') {
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
res.status(200).send(fakeData);
|
res.status(200).send(fakeData);
|
||||||
}, 2000);
|
}, 1000);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -160,6 +160,10 @@ h6,
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.push-bottom {
|
||||||
|
margin-bottom: $global-guttering;
|
||||||
|
}
|
||||||
|
|
||||||
.zero-bottom {
|
.zero-bottom {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue