mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-09 17:16:36 +02:00
Add e2e tests for choice groups
This commit is contained in:
parent
a06988406a
commit
315b2f8f36
|
@ -932,8 +932,10 @@ To setup a local environment: clone this repo, navigate into it's directory in a
|
|||
| `npm run start` | Fire up local server for development |
|
||||
| `npm run test:unit` | Run sequence of tests once |
|
||||
| `npm run test:unit:watch` | Fire up test server and re-test on file change |
|
||||
| `npm run test:e2e` | Run sequence of e2e tests |
|
||||
| `npm run test` | Run both unit and e2e tests |
|
||||
| `npm run test:e2e` | Run sequence of e2e tests (with local server) |
|
||||
| `npm run test` | Run both unit and e2e tests |
|
||||
| `npm run cypress:open` | Run Cypress e2e tests (GUI) |
|
||||
| `npm run cypress:run` | Run Cypress e2e tests (CLI) |
|
||||
| `npm run js:build` | Compile Choices to an uglified JavaScript file |
|
||||
| `npm run css:watch` | Watch SCSS files for changes. On a change, run build process |
|
||||
| `npm run css:build` | Compile, minify and prefix SCSS files to CSS |
|
||||
|
|
|
@ -564,5 +564,72 @@ describe('Choices - select multiple', () => {
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -512,5 +512,72 @@ describe('Choices - select one', () => {
|
|||
}
|
||||
});
|
||||
});
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -141,6 +141,22 @@
|
|||
<option value="Dropdown item 15">Dropdown item 15</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="groups">
|
||||
<label for="choices-groups">Choice groups</label>
|
||||
<select class="form-control" name="choices-groups" id="choices-groups" multiple>
|
||||
<optgroup label="UK">
|
||||
<option value="London">London</option>
|
||||
<option value="Manchester">Manchester</option>
|
||||
<option value="Liverpool">Liverpool</option>
|
||||
</optgroup>
|
||||
<optgroup label="FR">
|
||||
<option value="Paris">Paris</option>
|
||||
<option value="Lyon">Lyon</option>
|
||||
<option value="Marseille">Marseille</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
@ -196,6 +212,8 @@
|
|||
new Choices('#choices-scrolling-dropdown', {
|
||||
shouldSort: false,
|
||||
});
|
||||
|
||||
new Choices('#choices-groups');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
@ -129,6 +129,22 @@
|
|||
<option value="Dropdown item 15">Dropdown item 15</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="groups">
|
||||
<label for="choices-groups">Choice groups</label>
|
||||
<select class="form-control" name="choices-groups" id="choices-groups" multiple>
|
||||
<optgroup label="UK">
|
||||
<option value="London">London</option>
|
||||
<option value="Manchester">Manchester</option>
|
||||
<option value="Liverpool">Liverpool</option>
|
||||
</optgroup>
|
||||
<optgroup label="FR">
|
||||
<option value="Paris">Paris</option>
|
||||
<option value="Lyon">Lyon</option>
|
||||
<option value="Marseille">Marseille</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
@ -181,6 +197,8 @@
|
|||
new Choices('#choices-scrolling-dropdown', {
|
||||
shouldSort: false,
|
||||
});
|
||||
|
||||
new Choices('#choices-groups');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
Loading…
Reference in a new issue