deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-06-01 13:32:23 +02:00
Code Issues Projects Releases Wiki Activity

Fix bug where selected options were not being selected

Browse source
This commit is contained in:
Josh Johnson 2018-10-28 09:32:35 +00:00
parent 8e6daa64f0
commit 608358a9f8
4 changed files with 167 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -11,33 +11,64 @@ describe('Choices - select multiple', () => {
.focus(); .focus();
}); });
describe('selecting choices', () => { describe('focusing on text input', () => {
describe('focusing on text input', () => { it('displays a dropdown of choices', () => {
const selectedChoiceText = 'Choice 1'; cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown')
.should('be.visible');
it('displays a dropdown of choices', () => { cy.get('[data-test-hook=basic]')
cy.get('[data-test-hook=basic]') .find('.choices__list--dropdown .choices__list')
.find('.choices__list--dropdown') .children()
.should('be.visible'); .should('have.length', 4)
.each(($choice, index) => {
expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
});
});
describe('pressing escape', () => {
beforeEach(() => {
cy.get('[data-test-hook=basic]') cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown .choices__list') .find('.choices__input--cloned')
.children() .type('{esc}');
.should('have.length', 4)
.each(($choice, index) => {
expect($choice.text().trim()).to.equal(
`Choice ${index + 1}`,
);
});
}); });
it('allows me select choices from a dropdown', () => { it('closes the dropdown', () => {
cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown')
.should('not.be.visible');
});
describe('typing more into the input', () => {
it('re-opens the dropdown', () => {
cy.get('[data-test-hook=basic]')
.find('.choices__input--cloned')
.type('test');
cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown')
.should('be.visible');
});
});
});
});
describe('selecting choices', () => {
describe('selecting a single choice', () => {
let selectedChoiceText;
beforeEach(() => {
cy.get('[data-test-hook=basic]') cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown .choices__list') .find('.choices__list--dropdown .choices__list')
.children() .children()
.first() .first()
.then($choice => {
selectedChoiceText = $choice.text().trim();
})
.click(); .click();
});
it('allows me select choices from a dropdown', () => {
cy.get('[data-test-hook=basic]') cy.get('[data-test-hook=basic]')
.find('.choices__list--multiple .choices__item') .find('.choices__list--multiple .choices__item')
.last() .last()
@ -46,39 +77,15 @@ describe('Choices - select multiple', () => {
}); });
}); });
describe('selecting all available choices', () => { it('updates the value of the original input', () => {
beforeEach(() => { cy.get('[data-test-hook=basic]')
for (let index = 0; index <= 4; index++) { .find('.choices__input.is-hidden')
cy.get('[data-test-hook=basic]') .should($select => {
.find('.choices__input--cloned') expect($select.val()).to.contain(selectedChoiceText);
.focus(); });
cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown .choices__list')
.children()
.first()
.click();
}
});
it('displays "no choices to choose" prompt', () => {
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 choices to choose from');
});
});
}); });
it('removes selected choice from dropdown list', () => { it('removes 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]') cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown .choices__list') .find('.choices__list--dropdown .choices__list')
.children() .children()
@ -86,55 +93,69 @@ describe('Choices - select multiple', () => {
expect($choice.text().trim()).to.not.equal(selectedChoiceText); expect($choice.text().trim()).to.not.equal(selectedChoiceText);
}); });
}); });
});
describe('pressing escape', () => { describe('selecting all available choices', () => {
beforeEach(() => { beforeEach(() => {
for (let index = 0; index <= 4; index++) {
cy.get('[data-test-hook=basic]') cy.get('[data-test-hook=basic]')
.find('.choices__input--cloned') .find('.choices__input--cloned')
.type('{esc}'); .focus();
});
it('closes the dropdown', () => {
cy.get('[data-test-hook=basic]') cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown') .find('.choices__list--dropdown .choices__list')
.should('not.be.visible'); .children()
}); .first()
.click();
}
});
describe('typing more into the input', () => { it('displays "no choices to choose" prompt', () => {
it('re-opens the dropdown', () => { cy.get('[data-test-hook=basic]')
cy.get('[data-test-hook=basic]') .find('.choices__list--dropdown')
.find('.choices__input--cloned') .should('be.visible')
.type('test'); .should($dropdown => {
const dropdownText = $dropdown.text().trim();
cy.get('[data-test-hook=basic]') expect(dropdownText).to.equal('No choices to choose from');
.find('.choices__list--dropdown')
.should('be.visible');
}); });
});
}); });
}); });
}); });
describe('removing choices', () => { describe('removing choices', () => {
let removedChoiceText;
beforeEach(() => { beforeEach(() => {
cy.get('[data-test-hook=basic]') cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown .choices__list') .find('.choices__list--dropdown .choices__list')
.children() .children()
.last() .last()
.then($choice => {
removedChoiceText = $choice.text().trim();
})
.click(); .click();
cy.get('[data-test-hook=basic]')
.find('.choices__input--cloned')
.type('{backspace}');
}); });
describe('on backspace', () => { describe('on backspace', () => {
it('removes last choice', () => { it('removes last choice', () => {
cy.get('[data-test-hook=basic]')
.find('.choices__input--cloned')
.type('{backspace}');
cy.get('[data-test-hook=basic]') cy.get('[data-test-hook=basic]')
.find('.choices__list--multiple') .find('.choices__list--multiple')
.children() .children()
.should('have.length', 0); .should('have.length', 0);
}); });
it('updates the value of the original input', () => {
cy.get('[data-test-hook=basic]')
.find('.choices__input.is-hidden')
.should($select => {
const val = $select.val() || [];
expect(val).to.not.contain(removedChoiceText);
});
});
}); });
}); });
@ -529,9 +550,7 @@ describe('Choices - select multiple', () => {
cy.get('[data-test-hook=scrolling-dropdown]') cy.get('[data-test-hook=scrolling-dropdown]')
.find('.choices__list--dropdown .choices__list .is-highlighted') .find('.choices__list--dropdown .choices__list .is-highlighted')
.should($choice => { .should($choice => {
expect($choice.text().trim()).to.equal( expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
`Choice ${index + 1}`,
);
}); });
cy.get('[data-test-hook=scrolling-dropdown]') cy.get('[data-test-hook=scrolling-dropdown]')

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

@ -12,68 +12,68 @@ describe('Choices - select one', () => {
.click(); .click();
}); });
describe('selecting choice', () => { describe('focusing on text input', () => {
describe('focusing on text input', () => { it('displays a dropdown of choices', () => {
const selectedChoiceText = 'Choice 1'; cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown')
.should('be.visible');
it('displays a dropdown of choices', () => { cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown .choices__list')
.children()
.should('have.length', 4)
.each(($choice, index) => {
expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
});
});
describe('pressing escape', () => {
beforeEach(() => {
cy.get('[data-test-hook=basic]')
.find('.choices__input--cloned')
.type('{esc}');
});
it('closes the dropdown', () => {
cy.get('[data-test-hook=basic]') cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown') .find('.choices__list--dropdown')
.should('be.visible'); .should('not.be.visible');
cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown .choices__list')
.children()
.should('have.length', 4)
.each(($choice, index) => {
expect($choice.text().trim()).to.equal(`Choice ${index + 1}`);
});
}); });
});
});
it('allows me select choices from a dropdown', () => { describe('selecting choices', () => {
cy.get('[data-test-hook=basic]') const selectedChoiceText = 'Choice 1';
.find('.choices__list--dropdown .choices__list')
.children()
.first()
.click();
cy.get('[data-test-hook=basic]') it('allows me select choices from a dropdown', () => {
.find('.choices__list--single .choices__item') cy.get('[data-test-hook=basic]')
.last() .find('.choices__list--dropdown .choices__list')
.should($item => { .children()
expect($item).to.contain(selectedChoiceText); .first()
}); .click();
});
it('does not remove selected choice from dropdown list', () => { cy.get('[data-test-hook=basic]')
cy.get('[data-test-hook=basic]') .find('.choices__list--single .choices__item')
.find('.choices__list--dropdown .choices__list') .last()
.children() .should($item => {
.first() expect($item).to.contain(selectedChoiceText);
.click();
cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown .choices__list')
.children()
.first()
.should($item => {
expect($item).to.contain(selectedChoiceText);
});
});
describe('pressing escape', () => {
beforeEach(() => {
cy.get('[data-test-hook=basic]')
.find('.choices__input--cloned')
.type('{esc}');
}); });
});
it('closes the dropdown', () => { it('does not remove selected choice from dropdown list', () => {
cy.get('[data-test-hook=basic]') cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown') .find('.choices__list--dropdown .choices__list')
.should('not.be.visible'); .children()
.first()
.click();
cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown .choices__list')
.children()
.first()
.should($item => {
expect($item).to.contain(selectedChoiceText);
}); });
});
}); });
}); });
@ -150,19 +150,41 @@ describe('Choices - select one', () => {
describe('remove button', () => { describe('remove button', () => {
describe('on click', () => { describe('on click', () => {
it('removes selected choice', () => { let removedChoiceText;
beforeEach(() => {
cy.get('[data-test-hook=remove-button]')
.find('.choices__list--single .choices__item')
.last()
.then($choice => {
removedChoiceText = $choice.text().trim();
})
.click();
cy.get('[data-test-hook=remove-button]') cy.get('[data-test-hook=remove-button]')
.find('.choices__list--single .choices__item') .find('.choices__list--single .choices__item')
.last() .last()
.find('.choices__button') .find('.choices__button')
.focus() .focus()
.click(); .click();
});
it('removes selected choice', () => {
cy.get('[data-test-hook=remove-button]') cy.get('[data-test-hook=remove-button]')
.find('.choices__list--single') .find('.choices__list--single')
.children() .children()
.should('have.length', 0); .should('have.length', 0);
}); });
it('updates the value of the original input', () => {
cy.get('[data-test-hook=remove-button]')
.find('.choices__input.is-hidden')
.should($select => {
const val = $select.val() || [];
expect(val).to.not.contain(removedChoiceText);
});
});
}); });
}); });
}); });

2
src/scripts/templates.js
View file

@ -223,7 +223,7 @@ export const TEMPLATES = {
}, },
option(data) { option(data) {
return strToEl(` return strToEl(`
<option value="${data.value}" ${data.selected ? 'selected' : ''} ${ <option value="${data.value}" ${data.active ? 'selected' : ''} ${
data.disabled ? 'disabled' : '' data.disabled ? 'disabled' : ''
}>${data.label}</option> }>${data.label}</option>
`); `);

2
src/scripts/templates.test.js
View file

@ -623,7 +623,7 @@ describe('templates', () => {
beforeEach(() => { beforeEach(() => {
data = { data = {
...data, ...data,
selected: true, active: true,
}; };
}); });