mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-17 13:06:34 +02:00
Add scrolling e2e tests
This commit is contained in:
parent
54c026ec61
commit
15082ccd03
|
@ -3,8 +3,8 @@ describe('Choices - select multiple', () => {
|
||||||
cy.visit('/select-multiple.html');
|
cy.visit('/select-multiple.html');
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('configs', () => {
|
describe('scenarios', () => {
|
||||||
describe('basic', () => {
|
describe('basic setup', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
cy.get('[data-test-hook=basic]')
|
cy.get('[data-test-hook=basic]')
|
||||||
.find('.choices__input--cloned')
|
.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', () => {
|
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}');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -3,12 +3,13 @@ describe('Choices - select one', () => {
|
||||||
cy.visit('/select-one.html');
|
cy.visit('/select-one.html');
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('configs', () => {
|
describe('scenarios', () => {
|
||||||
describe('basic', () => {
|
describe('basic', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
// open dropdown
|
||||||
cy.get('[data-test-hook=basic]')
|
cy.get('[data-test-hook=basic]')
|
||||||
.find('.choices__input--cloned')
|
.find('.choices')
|
||||||
.focus();
|
.click();
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('selecting choice', () => {
|
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', () => {
|
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}');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -3,7 +3,7 @@ describe('Choices - text element', () => {
|
||||||
cy.visit('/text.html');
|
cy.visit('/text.html');
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('configs', () => {
|
describe('scenarios', () => {
|
||||||
const textInput = 'testing';
|
const textInput = 'testing';
|
||||||
|
|
||||||
describe('basic', () => {
|
describe('basic', () => {
|
||||||
|
|
|
@ -120,6 +120,27 @@
|
||||||
<label for="choices-remote-data">Remote data</label>
|
<label for="choices-remote-data">Remote data</label>
|
||||||
<select class="form-control" name="choices-remote-data" id="choices-remote-data" multiple></select>
|
<select class="form-control" name="choices-remote-data" id="choices-remote-data" multiple></select>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
@ -171,6 +192,10 @@
|
||||||
console.error(error);
|
console.error(error);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
new Choices('#choices-scrolling-dropdown', {
|
||||||
|
shouldSort: false,
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -108,6 +108,27 @@
|
||||||
<label for="choices-remote-data">Remote data</label>
|
<label for="choices-remote-data">Remote data</label>
|
||||||
<select class="form-control" name="choices-remote-data" id="choices-remote-data"></select>
|
<select class="form-control" name="choices-remote-data" id="choices-remote-data"></select>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
@ -156,6 +177,10 @@
|
||||||
console.error(error);
|
console.error(error);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
new Choices('#choices-scrolling-dropdown', {
|
||||||
|
shouldSort: false,
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in a new issue