deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-04-27 11:41:57 +02:00
Code Issues Projects Releases Wiki Activity

Add e2e tests for choice groups

Browse source
This commit is contained in:
Josh Johnson 2018-10-27 18:12:15 +01:00
parent a06988406a
commit 315b2f8f36
5 changed files with 174 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -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 |

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

@ -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);
});
});
});
});
});
});

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

@ -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);
});
});
});
});
});
});

18
public/test/select-multiple.html
View file

@ -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>

18
public/test/select-one.html
View file

@ -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>