mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-04 23:12:17 +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');
|
||||
});
|
||||
|
||||
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}');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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}');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -3,7 +3,7 @@ describe('Choices - text element', () => {
|
|||
cy.visit('/text.html');
|
||||
});
|
||||
|
||||
describe('configs', () => {
|
||||
describe('scenarios', () => {
|
||||
const textInput = 'testing';
|
||||
|
||||
describe('basic', () => {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue