deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-01 21:42:46 +02:00
Code Issues Projects Releases Wiki Activity

Add scrolling e2e tests

Browse source
This commit is contained in:
Josh Johnson 2018-10-27 16:25:46 +01:00
parent 54c026ec61
commit 15082ccd03
5 changed files with 185 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -3,8 +3,8 @@ describe('Choices - select multiple', () => {
cy.visit('/select-multiple.html');
});
describe('configs', () => {
describe('basic', () => {
describe('scenarios', () => {
describe('basic setup', () => {
beforeEach(() => {
cy.get('[data-test-hook=basic]')
.find('.choices__input--cloned')
@ -189,58 +189,6 @@ describe('Choices - select multiple', () => {
});
});
});
describe('scrolling choices', () => {
const choicesCount = 4;
it('highlights first choice on dropdown open', () => {
cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.should($choice => {
expect($choice.text().trim()).to.equal('Dropdown item 1');
});
});
it('scrolls to next choice on down arrow', () => {
for (let index = 0; index < choicesCount; index++) {
cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.should($choice => {
expect($choice.text().trim()).to.equal(
`Dropdown item ${index + 1}`,
);
});
cy.get('[data-test-hook=basic]')
.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=basic]')
.find('.choices__input--cloned')
.type('{downarrow}');
}
// scroll up to first choice
for (let index = choicesCount; index > 0; index--) {
cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.should($choice => {
expect($choice.text().trim()).to.equal(
`Dropdown item ${index}`,
);
});
cy.get('[data-test-hook=basic]')
.find('.choices__input--cloned')
.type('{uparrow}');
}
});
});
});
describe('remove button', () => {
@ -552,5 +500,69 @@ describe('Choices - select multiple', () => {
});
});
});
describe('dropdown scrolling', () => {
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__input--cloned')
.focus();
});
it('highlights first choice on dropdown open', () => {
cy.get('[data-test-hook=scrolling-dropdown]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.should($choice => {
expect($choice.text().trim()).to.equal('Dropdown item 1');
});
});
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 => {
expect($choice.text().trim()).to.equal(
`Dropdown item ${index + 1}`,
);
});
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 => {
expect($choice.text().trim()).to.equal(`Dropdown item ${index}`);
});
cy.get('[data-test-hook=scrolling-dropdown]')
.find('.choices__input--cloned')
.type('{uparrow}');
}
});
});
});
});

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

@ -3,12 +3,13 @@ describe('Choices - select one', () => {
cy.visit('/select-one.html');
});
describe('configs', () => {
describe('scenarios', () => {
describe('basic', () => {
beforeEach(() => {
// open dropdown
cy.get('[data-test-hook=basic]')
.find('.choices__input--cloned')
.focus();
.find('.choices')
.click();
});
describe('selecting choice', () => {
@ -129,58 +130,6 @@ describe('Choices - select one', () => {
});
});
});
describe('scrolling choices', () => {
const choicesCount = 4;
it('highlights first choice on dropdown open', () => {
cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.should($choice => {
expect($choice.text().trim()).to.equal('Dropdown item 1');
});
});
it('scrolls to next choice on down arrow', () => {
for (let index = 0; index < choicesCount; index++) {
cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.should($choice => {
expect($choice.text().trim()).to.equal(
`Dropdown item ${index + 1}`,
);
});
cy.get('[data-test-hook=basic]')
.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=basic]')
.find('.choices__input--cloned')
.type('{downarrow}');
}
// scroll up to first choice
for (let index = choicesCount; index > 0; index--) {
cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown .choices__list .is-highlighted')
.should($choice => {
expect($choice.text().trim()).to.equal(
`Dropdown item ${index}`,
);
});
cy.get('[data-test-hook=basic]')
.find('.choices__input--cloned')
.type('{uparrow}');
}
});
});
});
describe('remove button', () => {
@ -499,5 +448,69 @@ describe('Choices - select one', () => {
});
});
});
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 => {
expect($choice.text().trim()).to.equal('Dropdown item 1');
});
});
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 => {
expect($choice.text().trim()).to.equal(
`Dropdown item ${index + 1}`,
);
});
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 => {
expect($choice.text().trim()).to.equal(`Dropdown item ${index}`);
});
cy.get('[data-test-hook=scrolling-dropdown]')
.find('.choices__input--cloned')
.type('{uparrow}');
}
});
});
});
});

2
cypress/integration/text.spec.js
View file

@ -3,7 +3,7 @@ describe('Choices - text element', () => {
cy.visit('/text.html');
});
describe('configs', () => {
describe('scenarios', () => {
const textInput = 'testing';
describe('basic', () => {

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

@ -120,6 +120,27 @@
<label for="choices-remote-data">Remote data</label>
<select class="form-control" name="choices-remote-data" id="choices-remote-data" multiple></select>
</div>
<div data-test-hook="scrolling-dropdown">
<label for="choices-scrolling-dropdown">Scrolling dropdown</label>
<select class="form-control" name="choices-scrolling-dropdown" id="choices-scrolling-dropdown" multiple>
<option value="Dropdown item 1">Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
<option value="Dropdown item 4">Dropdown item 4</option>
<option value="Dropdown item 5">Dropdown item 5</option>
<option value="Dropdown item 6">Dropdown item 6</option>
<option value="Dropdown item 7">Dropdown item 7</option>
<option value="Dropdown item 8">Dropdown item 8</option>
<option value="Dropdown item 9">Dropdown item 9</option>
<option value="Dropdown item 10">Dropdown item 10</option>
<option value="Dropdown item 11">Dropdown item 11</option>
<option value="Dropdown item 12">Dropdown item 12</option>
<option value="Dropdown item 13">Dropdown item 13</option>
<option value="Dropdown item 14">Dropdown item 14</option>
<option value="Dropdown item 15">Dropdown item 15</option>
</select>
</div>
</div>
</div>
<script>
@ -171,6 +192,10 @@
console.error(error);
});
});
new Choices('#choices-scrolling-dropdown', {
shouldSort: false,
});
});
</script>
</body>

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

@ -108,6 +108,27 @@
<label for="choices-remote-data">Remote data</label>
<select class="form-control" name="choices-remote-data" id="choices-remote-data"></select>
</div>
<div data-test-hook="scrolling-dropdown">
<label for="choices-scrolling-dropdown">Scrolling dropdown</label>
<select class="form-control" name="choices-scrolling-dropdown" id="choices-scrolling-dropdown">
<option value="Dropdown item 1">Dropdown item 1</option>
<option value="Dropdown item 2">Dropdown item 2</option>
<option value="Dropdown item 3">Dropdown item 3</option>
<option value="Dropdown item 4">Dropdown item 4</option>
<option value="Dropdown item 5">Dropdown item 5</option>
<option value="Dropdown item 6">Dropdown item 6</option>
<option value="Dropdown item 7">Dropdown item 7</option>
<option value="Dropdown item 8">Dropdown item 8</option>
<option value="Dropdown item 9">Dropdown item 9</option>
<option value="Dropdown item 10">Dropdown item 10</option>
<option value="Dropdown item 11">Dropdown item 11</option>
<option value="Dropdown item 12">Dropdown item 12</option>
<option value="Dropdown item 13">Dropdown item 13</option>
<option value="Dropdown item 14">Dropdown item 14</option>
<option value="Dropdown item 15">Dropdown item 15</option>
</select>
</div>
</div>
</div>
<script>
@ -156,6 +177,10 @@
console.error(error);
});
});
new Choices('#choices-scrolling-dropdown', {
shouldSort: false,
});
});
</script>
</body>