2018-10-14 17:00:46 +02:00
|
|
|
describe('Choices - select one', () => {
|
|
|
|
beforeEach(() => {
|
2019-11-02 14:49:33 +01:00
|
|
|
cy.visit('/select-one');
|
2018-10-14 17:00:46 +02:00
|
|
|
});
|
|
|
|
|
2018-10-27 17:25:46 +02:00
|
|
|
describe('scenarios', () => {
|
2018-10-14 17:00:46 +02:00
|
|
|
describe('basic', () => {
|
2019-11-13 16:40:47 +01:00
|
|
|
describe('focusing on container', () => {
|
|
|
|
describe('pressing enter key', () => {
|
|
|
|
it('toggles the dropdown', () => {
|
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices')
|
|
|
|
.focus()
|
|
|
|
.type('{enter}');
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices__list--dropdown')
|
2019-11-22 20:09:45 +01:00
|
|
|
.should('be.visible');
|
2019-11-13 16:40:47 +01:00
|
|
|
|
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices')
|
|
|
|
.focus()
|
|
|
|
.type('{enter}');
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices__list--dropdown')
|
2019-11-22 20:09:45 +01:00
|
|
|
.should('not.be.visible');
|
2019-11-13 16:40:47 +01:00
|
|
|
});
|
|
|
|
});
|
2018-10-28 10:32:35 +01:00
|
|
|
|
2019-11-22 20:09:45 +01:00
|
|
|
describe('pressing an alpha-numeric key', () => {
|
|
|
|
it('opens the dropdown and the input value', () => {
|
|
|
|
const inputValue = 'test';
|
2018-10-14 17:00:46 +02:00
|
|
|
|
|
|
|
cy.get('[data-test-hook=basic]')
|
2019-11-22 20:09:45 +01:00
|
|
|
.find('.choices')
|
|
|
|
.focus()
|
|
|
|
.type(inputValue);
|
2018-10-14 17:00:46 +02:00
|
|
|
|
|
|
|
cy.get('[data-test-hook=basic]')
|
2018-10-28 10:32:35 +01:00
|
|
|
.find('.choices__list--dropdown')
|
2019-11-22 20:09:45 +01:00
|
|
|
.should('be.visible');
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.should('have.value', inputValue);
|
2018-10-14 17:00:46 +02:00
|
|
|
});
|
2018-10-28 10:32:35 +01:00
|
|
|
});
|
|
|
|
});
|
2018-10-14 17:00:46 +02:00
|
|
|
|
2018-10-28 10:32:35 +01:00
|
|
|
describe('selecting choices', () => {
|
2019-11-22 20:09:45 +01:00
|
|
|
beforeEach(() => {
|
|
|
|
// open dropdown
|
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices')
|
|
|
|
.click();
|
|
|
|
});
|
|
|
|
|
2018-10-28 10:32:35 +01:00
|
|
|
const selectedChoiceText = 'Choice 1';
|
|
|
|
|
2019-02-22 23:04:55 +01:00
|
|
|
it('allows selecting choices from dropdown', () => {
|
2018-10-28 10:32:35 +01:00
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.click();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices__list--single .choices__item')
|
|
|
|
.last()
|
|
|
|
.should($item => {
|
|
|
|
expect($item).to.contain(selectedChoiceText);
|
2018-10-14 17:00:46 +02:00
|
|
|
});
|
2018-10-28 10:32:35 +01:00
|
|
|
});
|
2018-10-14 17:00:46 +02:00
|
|
|
|
2018-10-28 10:32:35 +01:00
|
|
|
it('does not remove selected choice from dropdown list', () => {
|
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.click();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.should($item => {
|
|
|
|
expect($item).to.contain(selectedChoiceText);
|
2018-10-14 17:00:46 +02:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-10-17 23:36:37 +02:00
|
|
|
describe('searching choices', () => {
|
2019-11-22 20:09:45 +01:00
|
|
|
beforeEach(() => {
|
|
|
|
// open dropdown
|
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices')
|
|
|
|
.click();
|
|
|
|
});
|
|
|
|
|
2018-10-17 23:36:37 +02:00
|
|
|
describe('on input', () => {
|
|
|
|
describe('searching by label', () => {
|
2018-10-18 00:13:24 +02:00
|
|
|
it('displays choices filtered by inputted value', () => {
|
2018-10-17 23:36:37 +02:00
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.type('item 2');
|
2018-10-14 17:00:46 +02:00
|
|
|
|
2018-10-17 23:36:37 +02:00
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.should($choice => {
|
2018-10-27 22:00:49 +02:00
|
|
|
expect($choice.text().trim()).to.equal('Choice 2');
|
2018-10-17 23:36:37 +02:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('searching by value', () => {
|
2018-10-18 00:13:24 +02:00
|
|
|
it('displays choices filtered by inputted value', () => {
|
2018-10-17 23:36:37 +02:00
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.type('find me');
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.should($choice => {
|
2018-10-27 22:00:49 +02:00
|
|
|
expect($choice.text().trim()).to.equal('Choice 3');
|
2018-10-17 23:36:37 +02:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('no results found', () => {
|
|
|
|
it('displays "no results found" prompt', () => {
|
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.type('faergge');
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=basic]')
|
|
|
|
.find('.choices__list--dropdown')
|
|
|
|
.should('be.visible')
|
|
|
|
.should($dropdown => {
|
|
|
|
const dropdownText = $dropdown.text().trim();
|
|
|
|
expect(dropdownText).to.equal('No results found');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-10-14 17:00:46 +02:00
|
|
|
});
|
2018-10-17 23:36:37 +02:00
|
|
|
});
|
2018-11-03 13:26:02 +01:00
|
|
|
|
2018-11-09 09:38:12 +01:00
|
|
|
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');
|
|
|
|
});
|
|
|
|
});
|
2018-11-03 13:26:02 +01:00
|
|
|
});
|
2018-10-17 23:36:37 +02:00
|
|
|
});
|
2018-10-14 17:00:46 +02:00
|
|
|
|
2018-10-17 23:36:37 +02:00
|
|
|
describe('remove button', () => {
|
2018-10-18 00:13:24 +02:00
|
|
|
/*
|
|
|
|
{
|
|
|
|
removeItemButton: true,
|
|
|
|
}
|
|
|
|
*/
|
2018-10-17 23:36:37 +02:00
|
|
|
beforeEach(() => {
|
|
|
|
cy.get('[data-test-hook=remove-button]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.focus();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=remove-button]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.last()
|
|
|
|
.click();
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('remove button', () => {
|
|
|
|
describe('on click', () => {
|
2018-10-28 10:32:35 +01:00
|
|
|
let removedChoiceText;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
cy.get('[data-test-hook=remove-button]')
|
|
|
|
.find('.choices__list--single .choices__item')
|
|
|
|
.last()
|
|
|
|
.then($choice => {
|
|
|
|
removedChoiceText = $choice.text().trim();
|
|
|
|
})
|
|
|
|
.click();
|
|
|
|
|
2018-10-17 23:36:37 +02:00
|
|
|
cy.get('[data-test-hook=remove-button]')
|
2018-10-14 17:00:46 +02:00
|
|
|
.find('.choices__list--single .choices__item')
|
|
|
|
.last()
|
|
|
|
.find('.choices__button')
|
|
|
|
.focus()
|
|
|
|
.click();
|
2018-10-28 10:32:35 +01:00
|
|
|
});
|
2018-10-14 17:00:46 +02:00
|
|
|
|
2018-10-28 10:32:35 +01:00
|
|
|
it('removes selected choice', () => {
|
2018-10-17 23:36:37 +02:00
|
|
|
cy.get('[data-test-hook=remove-button]')
|
2018-10-14 17:00:46 +02:00
|
|
|
.find('.choices__list--single')
|
|
|
|
.children()
|
|
|
|
.should('have.length', 0);
|
|
|
|
});
|
2018-10-28 10:32:35 +01:00
|
|
|
|
|
|
|
it('updates the value of the original input', () => {
|
|
|
|
cy.get('[data-test-hook=remove-button]')
|
2019-10-24 19:09:44 +02:00
|
|
|
.find('.choices__input[hidden]')
|
2018-10-28 10:32:35 +01:00
|
|
|
.should($select => {
|
|
|
|
const val = $select.val() || [];
|
|
|
|
|
|
|
|
expect(val).to.not.contain(removedChoiceText);
|
|
|
|
});
|
|
|
|
});
|
2018-10-14 17:00:46 +02:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('disabled choice', () => {
|
|
|
|
describe('selecting a disabled choice', () => {
|
|
|
|
let selectedChoiceText;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
cy.get('[data-test-hook=disabled-choice]').click();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=disabled-choice]')
|
|
|
|
.find('.choices__list--dropdown .choices__item--disabled')
|
|
|
|
.then($choice => {
|
|
|
|
selectedChoiceText = $choice.text().trim();
|
|
|
|
})
|
|
|
|
.click();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not change selected choice', () => {
|
|
|
|
cy.get('[data-test-hook=prepend-append]')
|
|
|
|
.find('.choices__list--single .choices__item')
|
|
|
|
.last()
|
|
|
|
.should($choice => {
|
|
|
|
expect($choice.text()).to.not.contain(selectedChoiceText);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('closes the dropdown list', () => {
|
|
|
|
cy.get('[data-test-hook=disabled-choice]')
|
|
|
|
.find('.choices__list--dropdown')
|
|
|
|
.should('not.be.visible');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-10-21 20:26:19 +02:00
|
|
|
describe('adding items disabled', () => {
|
|
|
|
/*
|
|
|
|
{
|
|
|
|
addItems: false,
|
|
|
|
}
|
|
|
|
*/
|
|
|
|
it('disables the search input', () => {
|
|
|
|
cy.get('[data-test-hook=add-items-disabled]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.should('be.disabled');
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('on click', () => {
|
2018-10-30 21:28:40 +01:00
|
|
|
it('does not open choice dropdown', () => {
|
2018-10-30 22:21:11 +01:00
|
|
|
cy.get('[data-test-hook=add-items-disabled]')
|
|
|
|
.find('.choices')
|
2018-10-30 22:44:58 +01:00
|
|
|
.click();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=add-items-disabled]')
|
2018-10-21 20:26:19 +02:00
|
|
|
.find('.choices__list--dropdown')
|
2018-10-30 22:44:58 +01:00
|
|
|
.should('not.have.class', 'is-active');
|
2018-10-21 20:26:19 +02:00
|
|
|
});
|
|
|
|
});
|
2018-10-30 21:21:52 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
describe('disabled via attribute', () => {
|
|
|
|
it('disables the search input', () => {
|
|
|
|
cy.get('[data-test-hook=disabled-via-attr]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.should('be.disabled');
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('on click', () => {
|
2018-10-30 21:52:10 +01:00
|
|
|
it('does not open choice dropdown', () => {
|
2018-10-30 22:21:11 +01:00
|
|
|
cy.get('[data-test-hook=disabled-via-attr]')
|
|
|
|
.find('.choices')
|
2018-10-30 22:44:58 +01:00
|
|
|
.click();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=disabled-via-attr]')
|
2018-10-30 21:21:52 +01:00
|
|
|
.find('.choices__list--dropdown')
|
2018-10-30 22:44:58 +01:00
|
|
|
.should('not.have.class', 'is-active');
|
2018-10-30 21:21:52 +01:00
|
|
|
});
|
|
|
|
});
|
2018-10-21 20:26:19 +02:00
|
|
|
});
|
|
|
|
|
2018-10-14 17:00:46 +02:00
|
|
|
describe('prepend/append', () => {
|
2018-10-18 00:13:24 +02:00
|
|
|
/*
|
|
|
|
{
|
|
|
|
prependValue: 'before-',
|
|
|
|
appendValue: '-after',
|
|
|
|
};
|
|
|
|
*/
|
|
|
|
|
2018-10-14 17:00:46 +02:00
|
|
|
let selectedChoiceText;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
cy.get('[data-test-hook=prepend-append]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.focus();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=prepend-append]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.last()
|
|
|
|
.then($choice => {
|
|
|
|
selectedChoiceText = $choice.text().trim();
|
|
|
|
})
|
|
|
|
.click();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('prepends and appends value to inputted value', () => {
|
|
|
|
cy.get('[data-test-hook=prepend-append]')
|
|
|
|
.find('.choices__list--single .choices__item')
|
|
|
|
.last()
|
|
|
|
.should($choice => {
|
|
|
|
expect($choice.data('value')).to.equal(
|
|
|
|
`before-${selectedChoiceText}-after`,
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays just the inputted value to the user', () => {
|
|
|
|
cy.get('[data-test-hook=prepend-append]')
|
|
|
|
.find('.choices__list--single .choices__item')
|
|
|
|
.last()
|
|
|
|
.should($choice => {
|
|
|
|
expect($choice.text()).to.not.contain(
|
|
|
|
`before-${selectedChoiceText}-after`,
|
|
|
|
);
|
|
|
|
expect($choice.text()).to.contain(selectedChoiceText);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-10-17 23:36:37 +02:00
|
|
|
|
|
|
|
describe('render choice limit', () => {
|
2018-10-18 00:13:24 +02:00
|
|
|
/*
|
|
|
|
{
|
|
|
|
renderChoiceLimit: 1
|
|
|
|
}
|
|
|
|
*/
|
|
|
|
|
2018-10-17 23:36:37 +02:00
|
|
|
it('only displays given number of choices in the dropdown', () => {
|
|
|
|
cy.get('[data-test-hook=render-choice-limit]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.should('have.length', 1);
|
|
|
|
});
|
|
|
|
});
|
2018-10-18 00:13:24 +02:00
|
|
|
|
|
|
|
describe('search disabled', () => {
|
|
|
|
/*
|
|
|
|
{
|
|
|
|
searchEnabled: false
|
|
|
|
}
|
|
|
|
*/
|
2018-10-27 22:00:49 +02:00
|
|
|
const selectedChoiceText = 'Choice 3';
|
2018-10-18 00:13:24 +02:00
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
cy.get('[data-test-hook=search-disabled]')
|
|
|
|
.find('.choices')
|
|
|
|
.click();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not display a search input', () => {
|
|
|
|
cy.get('[data-test-hook=search-disabled]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.should('not.exist');
|
|
|
|
});
|
|
|
|
|
2019-02-22 23:04:55 +01:00
|
|
|
it('allows selecting choices from dropdown', () => {
|
2018-10-18 00:13:24 +02:00
|
|
|
cy.get('[data-test-hook=search-disabled]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.last()
|
|
|
|
.click();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=search-disabled]')
|
|
|
|
.find('.choices__list--single .choices__item')
|
|
|
|
.last()
|
|
|
|
.should($item => {
|
|
|
|
expect($item).to.contain(selectedChoiceText);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('search floor', () => {
|
|
|
|
/*
|
|
|
|
{
|
|
|
|
searchFloor: 10,
|
|
|
|
};
|
|
|
|
*/
|
|
|
|
|
|
|
|
describe('on input', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
cy.get('[data-test-hook=search-floor]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.focus();
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('search floor not reached', () => {
|
|
|
|
it('displays choices not filtered by inputted value', () => {
|
|
|
|
const searchTerm = 'item 2';
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=search-floor]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.type(searchTerm);
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=search-floor]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.should($choice => {
|
|
|
|
expect($choice.text().trim()).to.not.contain(searchTerm);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('search floor reached', () => {
|
|
|
|
it('displays choices filtered by inputted value', () => {
|
2018-10-27 22:00:49 +02:00
|
|
|
const searchTerm = 'Choice 2';
|
2018-10-18 00:13:24 +02:00
|
|
|
|
|
|
|
cy.get('[data-test-hook=search-floor]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.type(searchTerm);
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=search-floor]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.should($choice => {
|
|
|
|
expect($choice.text().trim()).to.contain(searchTerm);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-10-20 14:32:58 +02:00
|
|
|
|
2019-11-02 14:49:33 +01:00
|
|
|
describe('placeholder via empty option value', () => {
|
|
|
|
describe('when no choice has been selected', () => {
|
|
|
|
it('displays a placeholder', () => {
|
|
|
|
cy.get('[data-test-hook=placeholder-via-option-value]')
|
|
|
|
.find('.choices__list--single')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.should('have.class', 'choices__placeholder')
|
|
|
|
.and($placeholder => {
|
|
|
|
expect($placeholder).to.contain('I am a placeholder');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when a choice has been selected', () => {
|
|
|
|
it('does not display a placeholder', () => {
|
|
|
|
cy.get('[data-test-hook=placeholder-via-option-value]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.focus();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=placeholder-via-option-value]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.click();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=placeholder-via-option-value]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.should('not.have.value', 'I am a placeholder');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when choice list is open', () => {
|
|
|
|
it('displays the placeholder choice first', () => {
|
|
|
|
cy.get('[data-test-hook=placeholder-via-option-value]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.focus();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=placeholder-via-option-value]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.should('have.class', 'choices__placeholder')
|
|
|
|
.should('have.text', 'I am a placeholder');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('placeholder via option attribute', () => {
|
|
|
|
describe('when no choice has been selected', () => {
|
|
|
|
it('displays a placeholder', () => {
|
|
|
|
cy.get('[data-test-hook=placeholder-via-option-attr]')
|
|
|
|
.find('.choices__list--single')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.should('have.class', 'choices__placeholder')
|
|
|
|
.and($placeholder => {
|
|
|
|
expect($placeholder).to.contain('I am a placeholder');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when a choice has been selected', () => {
|
|
|
|
it('does not display a placeholder', () => {
|
|
|
|
cy.get('[data-test-hook=placeholder-via-option-attr]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.focus();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=placeholder-via-option-attr]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.click();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=placeholder-via-option-attr]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.should('not.have.value', 'I am a placeholder');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when choice list is open', () => {
|
|
|
|
it('displays the placeholder choice first', () => {
|
|
|
|
cy.get('[data-test-hook=placeholder-via-option-attr]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.focus();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=placeholder-via-option-attr]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.should('have.class', 'choices__placeholder')
|
|
|
|
.should('have.text', 'I am a placeholder');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-10-20 14:32:58 +02:00
|
|
|
describe('remote data', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
cy.reload(true);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when loading data', () => {
|
|
|
|
it('shows a loading message as a placeholder', () => {
|
|
|
|
cy.get('[data-test-hook=remote-data]')
|
|
|
|
.find('.choices__list--single')
|
|
|
|
.children()
|
2019-11-02 14:49:33 +01:00
|
|
|
.should('have.length', 1)
|
2018-10-20 14:32:58 +02:00
|
|
|
.first()
|
|
|
|
.should('have.class', 'choices__placeholder')
|
|
|
|
.and($placeholder => {
|
|
|
|
expect($placeholder).to.contain('Loading...');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-11-03 14:24:52 +01:00
|
|
|
describe('on click', () => {
|
2019-10-21 22:43:38 +02:00
|
|
|
it('does not open choice dropdown', () => {
|
2018-10-20 14:32:58 +02:00
|
|
|
cy.get('[data-test-hook=remote-data]')
|
2018-11-03 14:24:52 +01:00
|
|
|
.find('.choices')
|
|
|
|
.click()
|
2018-10-20 14:32:58 +02:00
|
|
|
.find('.choices__list--dropdown')
|
2018-11-03 14:24:52 +01:00
|
|
|
.should('not.have.class', 'is-active');
|
2018-10-20 14:32:58 +02:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('when data has loaded', () => {
|
|
|
|
describe('opening the dropdown', () => {
|
|
|
|
it('displays the loaded data', () => {
|
2018-11-03 13:26:02 +01:00
|
|
|
cy.wait(1000);
|
2018-10-20 14:32:58 +02:00
|
|
|
cy.get('[data-test-hook=remote-data]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
2019-11-02 14:49:33 +01:00
|
|
|
.should('have.length', 51) // 50 choices + 1 placeholder choice
|
2018-10-20 14:32:58 +02:00
|
|
|
.each(($choice, index) => {
|
2019-11-02 14:49:33 +01:00
|
|
|
if (index === 0) {
|
|
|
|
expect($choice.text().trim()).to.equal('I am a placeholder');
|
|
|
|
} else {
|
|
|
|
expect($choice.text().trim()).to.equal(`Label ${index}`);
|
|
|
|
expect($choice.data('value')).to.equal(`Value ${index}`);
|
|
|
|
}
|
2018-10-20 14:32:58 +02:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-10-27 17:25:46 +02:00
|
|
|
|
|
|
|
describe('scrolling dropdown', () => {
|
|
|
|
let choicesCount;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
|
|
|
.find('.choices__list--dropdown .choices__list .choices__item')
|
|
|
|
.then($choices => {
|
|
|
|
choicesCount = $choices.length;
|
|
|
|
});
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
|
|
|
.find('.choices')
|
|
|
|
.click();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('highlights first choice on dropdown open', () => {
|
|
|
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
|
|
|
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
|
|
|
.should($choice => {
|
2018-10-27 22:00:49 +02:00
|
|
|
expect($choice.text().trim()).to.equal('Choice 1');
|
2018-10-27 17:25:46 +02:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('scrolls to next choice on down arrow', () => {
|
|
|
|
for (let index = 0; index < choicesCount; index++) {
|
|
|
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
|
|
|
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
|
|
|
.should($choice => {
|
2018-10-27 22:00:49 +02:00
|
|
|
expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
|
2018-10-27 17:25:46 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.type('{downarrow}');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
it('scrolls up to previous choice on up arrow', () => {
|
|
|
|
// scroll to last choice
|
|
|
|
for (let index = 0; index < choicesCount; index++) {
|
|
|
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.type('{downarrow}');
|
|
|
|
}
|
|
|
|
|
|
|
|
// scroll up to first choice
|
|
|
|
for (let index = choicesCount; index > 0; index--) {
|
|
|
|
cy.wait(100); // allow for dropdown animation to finish
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
|
|
|
.find('.choices__list--dropdown .choices__list .is-highlighted')
|
|
|
|
.should($choice => {
|
2018-10-27 22:00:49 +02:00
|
|
|
expect($choice.text().trim()).to.equal(`Choice ${index}`);
|
2018-10-27 17:25:46 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=scrolling-dropdown]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.type('{uparrow}');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
2018-10-27 19:12:15 +02:00
|
|
|
|
|
|
|
describe('choice groups', () => {
|
|
|
|
const choicesInGroup = 3;
|
|
|
|
let groupValue;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
cy.get('[data-test-hook=groups]')
|
|
|
|
.find('.choices__list--dropdown .choices__list .choices__group')
|
|
|
|
.first()
|
|
|
|
.then($group => {
|
|
|
|
groupValue = $group.text().trim();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('selecting all choices in group', () => {
|
|
|
|
it('removes group from dropdown', () => {
|
|
|
|
for (let index = 0; index < choicesInGroup; index++) {
|
|
|
|
cy.get('[data-test-hook=groups]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.focus();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=groups]')
|
|
|
|
.find('.choices__list--dropdown .choices__list .choices__item')
|
|
|
|
.first()
|
|
|
|
.click();
|
|
|
|
}
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=groups]')
|
|
|
|
.find('.choices__list--dropdown .choices__list .choices__group')
|
|
|
|
.first()
|
|
|
|
.should($group => {
|
|
|
|
expect($group.text().trim()).to.not.equal(groupValue);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('deselecting all choices in group', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
for (let index = 0; index < choicesInGroup; index++) {
|
|
|
|
cy.get('[data-test-hook=groups]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.focus();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=groups]')
|
|
|
|
.find('.choices__list--dropdown .choices__list .choices__item')
|
|
|
|
.first()
|
|
|
|
.click();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
it('shows group in dropdown', () => {
|
|
|
|
for (let index = 0; index < choicesInGroup; index++) {
|
|
|
|
cy.get('[data-test-hook=groups]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.focus()
|
|
|
|
.type('{backspace}');
|
|
|
|
}
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=groups]')
|
|
|
|
.find('.choices__list--dropdown .choices__list .choices__group')
|
|
|
|
.first()
|
|
|
|
.should($group => {
|
|
|
|
expect($group.text().trim()).to.equal(groupValue);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-10-27 22:00:49 +02:00
|
|
|
|
2018-10-27 22:07:01 +02:00
|
|
|
describe('parent/child', () => {
|
2018-10-27 22:00:49 +02:00
|
|
|
describe('selecting "Parent choice 2"', () => {
|
|
|
|
it('enables the child Choices instance', () => {
|
2018-10-27 22:12:28 +02:00
|
|
|
cy.get('[data-test-hook=parent-child]')
|
2018-10-27 22:00:49 +02:00
|
|
|
.find('.choices')
|
|
|
|
.eq(1)
|
|
|
|
.should('have.class', 'is-disabled');
|
|
|
|
|
2018-10-27 22:12:28 +02:00
|
|
|
cy.get('[data-test-hook=parent-child]')
|
2018-10-27 22:00:49 +02:00
|
|
|
.find('.choices')
|
|
|
|
.eq(0)
|
|
|
|
.click();
|
|
|
|
|
2018-10-27 22:12:28 +02:00
|
|
|
cy.get('[data-test-hook=parent-child]')
|
2018-10-27 22:00:49 +02:00
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.eq(1)
|
|
|
|
.click();
|
|
|
|
|
2018-10-27 22:12:28 +02:00
|
|
|
cy.get('[data-test-hook=parent-child]')
|
2018-10-27 22:00:49 +02:00
|
|
|
.find('.choices')
|
|
|
|
.eq(1)
|
|
|
|
.should('not.have.class', 'is-disabled');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('changing selection from "Parent choice 2" to something else', () => {
|
|
|
|
it('disables the child Choices instance', () => {
|
|
|
|
// open parent instance and select second choice
|
2018-10-27 22:12:28 +02:00
|
|
|
cy.get('[data-test-hook=parent-child]')
|
2018-10-27 22:00:49 +02:00
|
|
|
.find('.choices')
|
|
|
|
.eq(0)
|
|
|
|
.click()
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.eq(1)
|
|
|
|
.click();
|
|
|
|
|
2018-10-27 22:12:28 +02:00
|
|
|
cy.get('[data-test-hook=parent-child]')
|
2018-10-27 22:00:49 +02:00
|
|
|
.find('.choices')
|
|
|
|
.eq(1)
|
|
|
|
.should('not.have.class', 'is-disabled');
|
|
|
|
|
|
|
|
// open parent instance and select third choice
|
2018-10-27 22:12:28 +02:00
|
|
|
cy.get('[data-test-hook=parent-child]')
|
2018-10-27 22:00:49 +02:00
|
|
|
.find('.choices')
|
|
|
|
.eq(0)
|
|
|
|
.click()
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.eq(2)
|
|
|
|
.click();
|
|
|
|
|
2018-10-27 22:12:28 +02:00
|
|
|
cy.get('[data-test-hook=parent-child]')
|
2018-10-27 22:00:49 +02:00
|
|
|
.find('.choices')
|
|
|
|
.eq(1)
|
|
|
|
.should('have.class', 'is-disabled');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-11-03 13:00:37 +01:00
|
|
|
|
|
|
|
describe('custom properties', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
cy.get('[data-test-hook=custom-properties]')
|
|
|
|
.find('.choices')
|
|
|
|
.click();
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('on input', () => {
|
|
|
|
it('filters choices based on custom property', () => {
|
|
|
|
const data = [
|
|
|
|
{
|
|
|
|
country: 'Germany',
|
|
|
|
city: 'Berlin',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
country: 'United Kingdom',
|
|
|
|
city: 'London',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
country: 'Portugal',
|
|
|
|
city: 'Lisbon',
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
data.forEach(({ country, city }) => {
|
|
|
|
cy.get('[data-test-hook=custom-properties]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.type(country);
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=custom-properties]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.should($choice => {
|
|
|
|
expect($choice.text().trim()).to.equal(city);
|
|
|
|
});
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=custom-properties]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.type('{selectall}{del}');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-11-24 18:48:03 +01:00
|
|
|
|
2019-02-22 23:04:55 +01:00
|
|
|
describe('non-string values', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
cy.get('[data-test-hook=non-string-values]')
|
|
|
|
.find('.choices')
|
|
|
|
.click();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('displays expected amount of choices in dropdown', () => {
|
|
|
|
cy.get('[data-test-hook=non-string-values]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.should('have.length', 4);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('allows selecting choices from dropdown', () => {
|
|
|
|
let $selectedChoice;
|
|
|
|
cy.get('[data-test-hook=non-string-values]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.then($choice => {
|
|
|
|
$selectedChoice = $choice;
|
|
|
|
})
|
|
|
|
.click();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=non-string-values]')
|
|
|
|
.find('.choices__list--single .choices__item')
|
|
|
|
.last()
|
|
|
|
.should($item => {
|
|
|
|
expect($item.text().trim()).to.equal($selectedChoice.text().trim());
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-11-24 18:48:03 +01:00
|
|
|
describe('within form', () => {
|
|
|
|
describe('selecting choice', () => {
|
|
|
|
describe('on enter key', () => {
|
|
|
|
it('does not submit form', () => {
|
|
|
|
cy.get('[data-test-hook=within-form] form').then($form => {
|
|
|
|
$form.submit(() => {
|
|
|
|
// this will fail the test if the form submits
|
|
|
|
throw new Error('Form submitted');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=within-form]')
|
|
|
|
.find('.choices')
|
|
|
|
.click()
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.type('{enter}');
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=within-form]')
|
|
|
|
.find('.choices')
|
|
|
|
.click();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=within-form]')
|
|
|
|
.find('.choices__list--single .choices__item')
|
|
|
|
.last()
|
|
|
|
.should($item => {
|
|
|
|
expect($item).to.contain('Choice 1');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2018-11-25 13:48:49 +01:00
|
|
|
|
|
|
|
describe('dynamically setting choice by value', () => {
|
|
|
|
const dynamicallySelectedChoiceValue = 'Choice 2';
|
|
|
|
|
|
|
|
it('selects choice', () => {
|
|
|
|
cy.get('[data-test-hook=set-choice-by-value]')
|
|
|
|
.find('.choices__list--single .choices__item')
|
|
|
|
.last()
|
|
|
|
.should($choice => {
|
|
|
|
expect($choice.text().trim()).to.equal(
|
|
|
|
dynamicallySelectedChoiceValue,
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('does not remove choice from dropdown list', () => {
|
|
|
|
cy.get('[data-test-hook=set-choice-by-value]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.then($choicesList => {
|
|
|
|
expect($choicesList).to.contain(dynamicallySelectedChoiceValue);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('updates the value of the original input', () => {
|
|
|
|
cy.get('[data-test-hook=set-choice-by-value]')
|
2019-10-24 19:09:44 +02:00
|
|
|
.find('.choices__input[hidden]')
|
2018-11-25 13:48:49 +01:00
|
|
|
.should($select => {
|
|
|
|
const val = $select.val() || [];
|
|
|
|
expect(val).to.contain(dynamicallySelectedChoiceValue);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2019-01-19 15:47:22 +01:00
|
|
|
|
|
|
|
describe('searching by label only', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
cy.get('[data-test-hook=search-by-label]')
|
|
|
|
.find('.choices')
|
|
|
|
.click();
|
|
|
|
});
|
|
|
|
|
|
|
|
it('gets zero results when searching by value', () => {
|
|
|
|
cy.get('[data-test-hook=search-by-label]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.type('value1');
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=search-by-label]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.should($choice => {
|
|
|
|
expect($choice.text().trim()).to.equal('No results found');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('gets a result when searching by label', () => {
|
|
|
|
cy.get('[data-test-hook=search-by-label]')
|
|
|
|
.find('.choices__input--cloned')
|
|
|
|
.type('label1');
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=search-by-label]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.should($choice => {
|
|
|
|
expect($choice.text().trim()).to.equal('label1');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2019-11-07 09:50:19 +01:00
|
|
|
|
|
|
|
describe('disabling first choice via options', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
cy.get('[data-test-hook=disabled-first-choice-via-options]')
|
|
|
|
.find('.choices')
|
|
|
|
.click();
|
|
|
|
});
|
|
|
|
|
|
|
|
let disabledValue;
|
|
|
|
|
|
|
|
it('disables the first choice', () => {
|
|
|
|
cy.get('[data-test-hook=disabled-first-choice-via-options]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.first()
|
|
|
|
.should('have.class', 'choices__item--disabled')
|
|
|
|
.then($choice => {
|
|
|
|
disabledValue = $choice.val();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it('selects the first enabled choice', () => {
|
|
|
|
cy.get('[data-test-hook=disabled-first-choice-via-options]')
|
|
|
|
.find('.choices__input[hidden]')
|
|
|
|
.then($option => {
|
|
|
|
expect($option.text().trim()).to.not.equal(disabledValue);
|
|
|
|
});
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=disabled-first-choice-via-options]')
|
|
|
|
.find('.choices__item.choices__item--selectable')
|
|
|
|
.first()
|
|
|
|
.should($choice => {
|
|
|
|
expect($choice.text().trim()).to.not.equal(disabledValue);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2019-11-17 13:34:34 +01:00
|
|
|
|
|
|
|
describe('re-initialising a choices instance', () => {
|
|
|
|
it('preserves the choices list', () => {
|
|
|
|
cy.get('[data-test-hook=new-destroy-init]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.should('have.length', 3);
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=new-destroy-init]')
|
|
|
|
.find('button.destroy')
|
|
|
|
.click();
|
|
|
|
cy.get('[data-test-hook=new-destroy-init]')
|
|
|
|
.find('button.init')
|
|
|
|
.click();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=new-destroy-init]')
|
|
|
|
.find('.choices__list--dropdown .choices__list')
|
|
|
|
.children()
|
|
|
|
.should('have.length', 3);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('destroying the choices instance', () => {
|
|
|
|
it('preserves the original select element', () => {
|
|
|
|
cy.get('[data-test-hook=new-destroy-init]')
|
|
|
|
.find('button.destroy')
|
|
|
|
.click();
|
|
|
|
|
|
|
|
cy.get('[data-test-hook=new-destroy-init]')
|
|
|
|
.find('select')
|
|
|
|
.children()
|
|
|
|
.should('have.length', 3);
|
|
|
|
});
|
|
|
|
});
|
2018-10-14 17:00:46 +02:00
|
|
|
});
|
|
|
|
});
|