mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-18 21:46:33 +02:00
Further e2e tests
This commit is contained in:
parent
92cfd989ff
commit
544763017e
|
@ -141,7 +141,7 @@ describe('Choices - select multiple', () => {
|
||||||
describe('searching choices', () => {
|
describe('searching choices', () => {
|
||||||
describe('on input', () => {
|
describe('on input', () => {
|
||||||
describe('searching by label', () => {
|
describe('searching by label', () => {
|
||||||
it('displays choices filtered on inputted value', () => {
|
it('displays choices filtered by inputted value', () => {
|
||||||
cy.get('[data-test-hook=basic]')
|
cy.get('[data-test-hook=basic]')
|
||||||
.find('.choices__input--cloned')
|
.find('.choices__input--cloned')
|
||||||
.type('item 2');
|
.type('item 2');
|
||||||
|
@ -157,7 +157,7 @@ describe('Choices - select multiple', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('searching by value', () => {
|
describe('searching by value', () => {
|
||||||
it('displays choices filtered on inputted value', () => {
|
it('displays choices filtered by inputted value', () => {
|
||||||
cy.get('[data-test-hook=basic]')
|
cy.get('[data-test-hook=basic]')
|
||||||
.find('.choices__input--cloned')
|
.find('.choices__input--cloned')
|
||||||
.type('find me');
|
.type('find me');
|
||||||
|
@ -192,6 +192,12 @@ describe('Choices - select multiple', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('remove button', () => {
|
describe('remove button', () => {
|
||||||
|
/*
|
||||||
|
{
|
||||||
|
removeItemButton: true,
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
cy.get('[data-test-hook=remove-button]')
|
cy.get('[data-test-hook=remove-button]')
|
||||||
.find('.choices__input--cloned')
|
.find('.choices__input--cloned')
|
||||||
|
@ -248,6 +254,12 @@ describe('Choices - select multiple', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('selection limit', () => {
|
describe('selection limit', () => {
|
||||||
|
/*
|
||||||
|
{
|
||||||
|
maxItemCount: 5,
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
||||||
const selectionLimit = 5;
|
const selectionLimit = 5;
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
@ -278,6 +290,12 @@ describe('Choices - select multiple', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('prepend/append', () => {
|
describe('prepend/append', () => {
|
||||||
|
/*
|
||||||
|
{
|
||||||
|
prependValue: 'before-',
|
||||||
|
appendValue: '-after',
|
||||||
|
};
|
||||||
|
*/
|
||||||
let selectedChoiceText;
|
let selectedChoiceText;
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
@ -322,14 +340,66 @@ describe('Choices - select multiple', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
describe('render choice limit', () => {
|
describe('render choice limit', () => {
|
||||||
it('only displays given number of choices in the dropdown', () => {
|
/*
|
||||||
cy.get('[data-test-hook=render-choice-limit]')
|
{
|
||||||
.find('.choices__list--dropdown .choices__list')
|
renderChoiceLimit: 1,
|
||||||
.children()
|
};
|
||||||
.should('have.length', 1);
|
*/
|
||||||
|
|
||||||
|
it('only displays given number of choices in the dropdown', () => {
|
||||||
|
cy.get('[data-test-hook=render-choice-limit]')
|
||||||
|
.find('.choices__list--dropdown .choices__list')
|
||||||
|
.children()
|
||||||
|
.should('have.length', 1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('search floor', () => {
|
||||||
|
/*
|
||||||
|
{
|
||||||
|
searchFloor: 10,
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
||||||
|
describe('on input', () => {
|
||||||
|
describe('search floor not reached', () => {
|
||||||
|
it('displays choices not filtered by inputted value', () => {
|
||||||
|
const searchTerm = 'item 2';
|
||||||
|
|
||||||
|
cy.get('[data-test-hook=search-floor]')
|
||||||
|
.find('.choices__input--cloned')
|
||||||
|
.type(searchTerm);
|
||||||
|
|
||||||
|
cy.get('[data-test-hook=search-floor]')
|
||||||
|
.find('.choices__list--dropdown .choices__list')
|
||||||
|
.children()
|
||||||
|
.first()
|
||||||
|
.should($choice => {
|
||||||
|
expect($choice.text().trim()).to.not.contain(searchTerm);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('search floor reached', () => {
|
||||||
|
it('displays choices filtered by inputted value', () => {
|
||||||
|
const searchTerm = 'Dropdown item 2';
|
||||||
|
|
||||||
|
cy.get('[data-test-hook=search-floor]')
|
||||||
|
.find('.choices__input--cloned')
|
||||||
|
.type(searchTerm);
|
||||||
|
|
||||||
|
cy.get('[data-test-hook=search-floor]')
|
||||||
|
.find('.choices__list--dropdown .choices__list')
|
||||||
|
.children()
|
||||||
|
.first()
|
||||||
|
.should($choice => {
|
||||||
|
expect($choice.text().trim()).to.contain(searchTerm);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -81,7 +81,7 @@ describe('Choices - select one', () => {
|
||||||
describe('searching choices', () => {
|
describe('searching choices', () => {
|
||||||
describe('on input', () => {
|
describe('on input', () => {
|
||||||
describe('searching by label', () => {
|
describe('searching by label', () => {
|
||||||
it('displays choices filtered on inputted value', () => {
|
it('displays choices filtered by inputted value', () => {
|
||||||
cy.get('[data-test-hook=basic]')
|
cy.get('[data-test-hook=basic]')
|
||||||
.find('.choices__input--cloned')
|
.find('.choices__input--cloned')
|
||||||
.type('item 2');
|
.type('item 2');
|
||||||
|
@ -97,7 +97,7 @@ describe('Choices - select one', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('searching by value', () => {
|
describe('searching by value', () => {
|
||||||
it('displays choices filtered on inputted value', () => {
|
it('displays choices filtered by inputted value', () => {
|
||||||
cy.get('[data-test-hook=basic]')
|
cy.get('[data-test-hook=basic]')
|
||||||
.find('.choices__input--cloned')
|
.find('.choices__input--cloned')
|
||||||
.type('find me');
|
.type('find me');
|
||||||
|
@ -132,6 +132,11 @@ describe('Choices - select one', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('remove button', () => {
|
describe('remove button', () => {
|
||||||
|
/*
|
||||||
|
{
|
||||||
|
removeItemButton: true,
|
||||||
|
}
|
||||||
|
*/
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
cy.get('[data-test-hook=remove-button]')
|
cy.get('[data-test-hook=remove-button]')
|
||||||
.find('.choices__input--cloned')
|
.find('.choices__input--cloned')
|
||||||
|
@ -196,6 +201,13 @@ describe('Choices - select one', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('prepend/append', () => {
|
describe('prepend/append', () => {
|
||||||
|
/*
|
||||||
|
{
|
||||||
|
prependValue: 'before-',
|
||||||
|
appendValue: '-after',
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
||||||
let selectedChoiceText;
|
let selectedChoiceText;
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
|
@ -238,6 +250,12 @@ describe('Choices - select one', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('render choice limit', () => {
|
describe('render choice limit', () => {
|
||||||
|
/*
|
||||||
|
{
|
||||||
|
renderChoiceLimit: 1
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
it('only displays given number of choices in the dropdown', () => {
|
it('only displays given number of choices in the dropdown', () => {
|
||||||
cy.get('[data-test-hook=render-choice-limit]')
|
cy.get('[data-test-hook=render-choice-limit]')
|
||||||
.find('.choices__list--dropdown .choices__list')
|
.find('.choices__list--dropdown .choices__list')
|
||||||
|
@ -245,5 +263,93 @@ describe('Choices - select one', () => {
|
||||||
.should('have.length', 1);
|
.should('have.length', 1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('search disabled', () => {
|
||||||
|
/*
|
||||||
|
{
|
||||||
|
searchEnabled: false
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
const selectedChoiceText = 'Dropdown item 3';
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
cy.get('[data-test-hook=search-disabled]')
|
||||||
|
.find('.choices')
|
||||||
|
.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('does not display a search input', () => {
|
||||||
|
cy.get('[data-test-hook=search-disabled]')
|
||||||
|
.find('.choices__input--cloned')
|
||||||
|
.should('not.exist');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('allows me select choices from a dropdown', () => {
|
||||||
|
cy.get('[data-test-hook=search-disabled]')
|
||||||
|
.find('.choices__list--dropdown .choices__list')
|
||||||
|
.children()
|
||||||
|
.last()
|
||||||
|
.click();
|
||||||
|
|
||||||
|
cy.get('[data-test-hook=search-disabled]')
|
||||||
|
.find('.choices__list--single .choices__item')
|
||||||
|
.last()
|
||||||
|
.should($item => {
|
||||||
|
expect($item).to.contain(selectedChoiceText);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('search floor', () => {
|
||||||
|
/*
|
||||||
|
{
|
||||||
|
searchFloor: 10,
|
||||||
|
};
|
||||||
|
*/
|
||||||
|
|
||||||
|
describe('on input', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
cy.get('[data-test-hook=search-floor]')
|
||||||
|
.find('.choices__input--cloned')
|
||||||
|
.focus();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('search floor not reached', () => {
|
||||||
|
it('displays choices not filtered by inputted value', () => {
|
||||||
|
const searchTerm = 'item 2';
|
||||||
|
|
||||||
|
cy.get('[data-test-hook=search-floor]')
|
||||||
|
.find('.choices__input--cloned')
|
||||||
|
.type(searchTerm);
|
||||||
|
|
||||||
|
cy.get('[data-test-hook=search-floor]')
|
||||||
|
.find('.choices__list--dropdown .choices__list')
|
||||||
|
.children()
|
||||||
|
.first()
|
||||||
|
.should($choice => {
|
||||||
|
expect($choice.text().trim()).to.not.contain(searchTerm);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('search floor reached', () => {
|
||||||
|
it('displays choices filtered by inputted value', () => {
|
||||||
|
const searchTerm = 'Dropdown item 2';
|
||||||
|
|
||||||
|
cy.get('[data-test-hook=search-floor]')
|
||||||
|
.find('.choices__input--cloned')
|
||||||
|
.type(searchTerm);
|
||||||
|
|
||||||
|
cy.get('[data-test-hook=search-floor]')
|
||||||
|
.find('.choices__list--dropdown .choices__list')
|
||||||
|
.children()
|
||||||
|
.first()
|
||||||
|
.should($choice => {
|
||||||
|
expect($choice.text().trim()).to.contain(searchTerm);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -88,6 +88,15 @@
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div data-test-hook="search-floor">
|
||||||
|
<label for="choices-search-floor">Search floor</label>
|
||||||
|
<select class="form-control" name="choices-search-floor" id="choices-search-floor" placeholder="This is a placeholder" 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>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
@ -110,7 +119,11 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
new Choices('#choices-render-choice-limit', {
|
new Choices('#choices-render-choice-limit', {
|
||||||
renderChoiceLimit: 1
|
renderChoiceLimit: 1,
|
||||||
|
});
|
||||||
|
|
||||||
|
new Choices('#choices-search-floor', {
|
||||||
|
searchFloor: 10,
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -76,6 +76,24 @@
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div data-test-hook="search-disabled">
|
||||||
|
<label for="choices-search-disabled">Search disabled</label>
|
||||||
|
<select class="form-control" name="choices-search-disabled" id="choices-search-disabled" placeholder="This is a placeholder">
|
||||||
|
<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>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div data-test-hook="search-floor">
|
||||||
|
<label for="choices-search-floor">Search floor</label>
|
||||||
|
<select class="form-control" name="choices-search-floor" id="choices-search-floor" placeholder="This is a placeholder">
|
||||||
|
<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>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
@ -98,6 +116,14 @@
|
||||||
new Choices('#choices-render-choice-limit', {
|
new Choices('#choices-render-choice-limit', {
|
||||||
renderChoiceLimit: 1
|
renderChoiceLimit: 1
|
||||||
});
|
});
|
||||||
|
|
||||||
|
new Choices('#choices-search-disabled', {
|
||||||
|
searchEnabled: false
|
||||||
|
})
|
||||||
|
|
||||||
|
new Choices('#choices-search-floor', {
|
||||||
|
searchFloor: 10,
|
||||||
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in a new issue