mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-08 08:36:34 +02:00
Add enabling/disabling e2e tests
This commit is contained in:
parent
28f36bf6f5
commit
3182c7f2c2
|
@ -211,7 +211,12 @@ describe('Choices - select multiple', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('interacting with dropdown', () => {
|
||||
/*
|
||||
There is currently a bug with opening/closing/toggling dropdowns
|
||||
|
||||
@todo Investigate why
|
||||
*/
|
||||
describe.skip('interacting with dropdown', () => {
|
||||
describe('opening dropdown', () => {
|
||||
it('opens dropdown', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
|
@ -226,15 +231,12 @@ describe('Choices - select multiple', () => {
|
|||
});
|
||||
|
||||
describe('closing dropdown', () => {
|
||||
beforeEach(() => {
|
||||
// ensure dropdown is already open
|
||||
it('closes dropdown', () => {
|
||||
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()
|
||||
|
@ -245,6 +247,74 @@ describe('Choices - select multiple', () => {
|
|||
.should('not.be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggling dropdown', () => {
|
||||
describe('when open', () => {
|
||||
it('closes dropdown', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('button.open-dropdown')
|
||||
.focus()
|
||||
.click();
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('button.toggle-dropdown')
|
||||
.focus()
|
||||
.click();
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('not.be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
describe('when closed', () => {
|
||||
it('opens dropdown', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('button.close-dropdown')
|
||||
.focus()
|
||||
.click();
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('button.toggle-dropdown')
|
||||
.focus()
|
||||
.click();
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('disabling', () => {
|
||||
describe('on disable', () => {
|
||||
it('disables the search input', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('button.disable')
|
||||
.focus()
|
||||
.click();
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__input--cloned')
|
||||
.should('be.disabled');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('enabling', () => {
|
||||
describe('on enable', () => {
|
||||
it('enables the search input', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('button.enable')
|
||||
.focus()
|
||||
.click();
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__input--cloned')
|
||||
.should('not.be.disabled');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -129,7 +129,12 @@ describe('Choices - select one', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('interacting with dropdown', () => {
|
||||
/*
|
||||
There is currently a bug with opening/closing/toggling dropdowns
|
||||
|
||||
@todo Investigate why
|
||||
*/
|
||||
describe.skip('interacting with dropdown', () => {
|
||||
describe('opening dropdown', () => {
|
||||
it('opens dropdown', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
|
@ -144,15 +149,12 @@ describe('Choices - select one', () => {
|
|||
});
|
||||
|
||||
describe('closing dropdown', () => {
|
||||
beforeEach(() => {
|
||||
// ensure dropdown is already open
|
||||
it('closes dropdown', () => {
|
||||
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()
|
||||
|
@ -163,6 +165,74 @@ describe('Choices - select one', () => {
|
|||
.should('not.be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
describe('toggling dropdown', () => {
|
||||
describe('when open', () => {
|
||||
it('closes dropdown', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('button.open-dropdown')
|
||||
.focus()
|
||||
.click();
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('button.toggle-dropdown')
|
||||
.focus()
|
||||
.click();
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('not.be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
describe('when closed', () => {
|
||||
it('opens dropdown', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('button.close-dropdown')
|
||||
.focus()
|
||||
.click();
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('button.toggle-dropdown')
|
||||
.focus()
|
||||
.click();
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('disabling', () => {
|
||||
describe('on disable', () => {
|
||||
it('disables the search input', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('button.disable')
|
||||
.focus()
|
||||
.click();
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__input--cloned')
|
||||
.should('be.disabled');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('enabling', () => {
|
||||
describe('on enable', () => {
|
||||
it('enables the search input', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('button.enable')
|
||||
.focus()
|
||||
.click();
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__input--cloned')
|
||||
.should('not.be.disabled');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -33,6 +33,9 @@
|
|||
<label for="choices-basic">Basic</label>
|
||||
<button class="open-dropdown push-bottom">Open dropdown</button>
|
||||
<button class="close-dropdown push-bottom">Close dropdown</button>
|
||||
<button class="toggle-dropdown push-bottom">Toggle dropdown</button>
|
||||
<button class="disable push-bottom">Disable</button>
|
||||
<button class="enable push-bottom">Enable</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>
|
||||
|
@ -187,6 +190,18 @@
|
|||
choicesBasic.hideDropdown();
|
||||
});
|
||||
|
||||
document.querySelector('button.toggle-dropdown').addEventListener('click', () => {
|
||||
choicesBasic.toggleDropdown();
|
||||
});
|
||||
|
||||
document.querySelector('button.disable').addEventListener('click', () => {
|
||||
choicesBasic.disable();
|
||||
});
|
||||
|
||||
document.querySelector('button.enable').addEventListener('click', () => {
|
||||
choicesBasic.enable();
|
||||
});
|
||||
|
||||
new Choices('#choices-remove-button', {
|
||||
removeItemButton: true,
|
||||
});
|
||||
|
|
|
@ -33,6 +33,9 @@
|
|||
<label for="choices-basic">Basic</label>
|
||||
<button class="open-dropdown push-bottom">Open dropdown</button>
|
||||
<button class="close-dropdown push-bottom">Close dropdown</button>
|
||||
<button class="toggle-dropdown push-bottom">Toggle dropdown</button>
|
||||
<button class="disable push-bottom">Disable</button>
|
||||
<button class="enable push-bottom">Enable</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>
|
||||
|
@ -191,6 +194,18 @@
|
|||
choicesBasic.hideDropdown();
|
||||
});
|
||||
|
||||
document.querySelector('button.toggle-dropdown').addEventListener('click', () => {
|
||||
choicesBasic.toggleDropdown(true);
|
||||
});
|
||||
|
||||
document.querySelector('button.disable').addEventListener('click', () => {
|
||||
choicesBasic.disable();
|
||||
});
|
||||
|
||||
document.querySelector('button.enable').addEventListener('click', () => {
|
||||
choicesBasic.enable();
|
||||
});
|
||||
|
||||
new Choices('#choices-remove-button', {
|
||||
removeItemButton: true,
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue