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

Further e2e tests

Browse source
This commit is contained in:
Josh Johnson 2018-10-17 23:13:24 +01:00
parent 92cfd989ff
commit 544763017e
4 changed files with 227 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -141,7 +141,7 @@ describe('Choices - select multiple', () => {
describe('searching choices', () => {
describe('on input', () => {
describe('searching by label', () => {
it('displays choices filtered on inputted value', () => {
it('displays choices filtered by inputted value', () => {
cy.get('[data-test-hook=basic]')
.find('.choices__input--cloned')
.type('item 2');
@ -157,7 +157,7 @@ describe('Choices - select multiple', () => {
});
describe('searching by value', () => {
it('displays choices filtered on inputted value', () => {
it('displays choices filtered by inputted value', () => {
cy.get('[data-test-hook=basic]')
.find('.choices__input--cloned')
.type('find me');
@ -192,6 +192,12 @@ describe('Choices - select multiple', () => {
});
describe('remove button', () => {
/*
{
removeItemButton: true,
};
*/
beforeEach(() => {
cy.get('[data-test-hook=remove-button]')
.find('.choices__input--cloned')
@ -248,6 +254,12 @@ describe('Choices - select multiple', () => {
});
describe('selection limit', () => {
/*
{
maxItemCount: 5,
};
*/
const selectionLimit = 5;
beforeEach(() => {
@ -278,6 +290,12 @@ describe('Choices - select multiple', () => {
});
describe('prepend/append', () => {
/*
{
prependValue: 'before-',
appendValue: '-after',
};
*/
let selectedChoiceText;
beforeEach(() => {
@ -322,14 +340,66 @@ describe('Choices - select multiple', () => {
});
});
});
});
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')
.children()
.should('have.length', 1);
describe('render choice limit', () => {
/*
{
renderChoiceLimit: 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);
});
});
});
});
});
});
});

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

@ -81,7 +81,7 @@ describe('Choices - select one', () => {
describe('searching choices', () => {
describe('on input', () => {
describe('searching by label', () => {
it('displays choices filtered on inputted value', () => {
it('displays choices filtered by inputted value', () => {
cy.get('[data-test-hook=basic]')
.find('.choices__input--cloned')
.type('item 2');
@ -97,7 +97,7 @@ describe('Choices - select one', () => {
});
describe('searching by value', () => {
it('displays choices filtered on inputted value', () => {
it('displays choices filtered by inputted value', () => {
cy.get('[data-test-hook=basic]')
.find('.choices__input--cloned')
.type('find me');
@ -132,6 +132,11 @@ describe('Choices - select one', () => {
});
describe('remove button', () => {
/*
{
removeItemButton: true,
}
*/
beforeEach(() => {
cy.get('[data-test-hook=remove-button]')
.find('.choices__input--cloned')
@ -196,6 +201,13 @@ describe('Choices - select one', () => {
});
describe('prepend/append', () => {
/*
{
prependValue: 'before-',
appendValue: '-after',
};
*/
let selectedChoiceText;
beforeEach(() => {
@ -238,6 +250,12 @@ describe('Choices - select one', () => {
});
describe('render choice limit', () => {
/*
{
renderChoiceLimit: 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')
@ -245,5 +263,93 @@ describe('Choices - select one', () => {
.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);
});
});
});
});
});
});
});

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

@ -88,6 +88,15 @@
<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" 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>
<script>
@ -110,7 +119,11 @@
});
new Choices('#choices-render-choice-limit', {
renderChoiceLimit: 1
renderChoiceLimit: 1,
});
new Choices('#choices-search-floor', {
searchFloor: 10,
});
});
</script>

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

@ -76,6 +76,24 @@
<option value="Dropdown item 3">Dropdown item 3</option>
</select>
</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>
<script>
@ -98,6 +116,14 @@
new Choices('#choices-render-choice-limit', {
renderChoiceLimit: 1
});
new Choices('#choices-search-disabled', {
searchEnabled: false
})
new Choices('#choices-search-floor', {
searchFloor: 10,
});
});
</script>
</body>