mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-05 23:33:12 +02:00
Add select one e2e tests
This commit is contained in:
Josh Johnson
parent
e07e14bd8f
commit
b224a96e08
|
|
@ -1,4 +1,4 @@
|
|||
describe('Choices - text element', () => {
|
||||
describe('Choices - select multiple', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/select-multiple.html');
|
||||
});
|
||||
|
|
@ -72,7 +72,7 @@ describe('Choices - text element', () => {
|
|||
});
|
||||
});
|
||||
|
||||
it('removes selected choice from dropdown', () => {
|
||||
it('removes selected choice from dropdown list', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
|
|
@ -184,5 +184,81 @@ describe('Choices - text element', () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('selection limit', () => {
|
||||
const selectionLimit = 5;
|
||||
|
||||
beforeEach(() => {
|
||||
for (let index = 0; index < selectionLimit; index++) {
|
||||
cy.get('[data-test-hook=selection-limit]')
|
||||
.find('.choices__input--cloned')
|
||||
.focus();
|
||||
|
||||
cy.get('[data-test-hook=selection-limit]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.click();
|
||||
}
|
||||
});
|
||||
|
||||
it('shows dropdown prompt once limit has been reached', () => {
|
||||
cy.get('[data-test-hook=selection-limit]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible')
|
||||
.should($dropdown => {
|
||||
const dropdownText = $dropdown.text().trim();
|
||||
expect(dropdownText).to.equal(
|
||||
`Only ${selectionLimit} values can be added`,
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('prepend/append', () => {
|
||||
let selectedChoiceText;
|
||||
|
||||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__input--cloned')
|
||||
.focus();
|
||||
|
||||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.last()
|
||||
.then($choice => {
|
||||
selectedChoiceText = $choice.text().trim();
|
||||
})
|
||||
.click();
|
||||
});
|
||||
|
||||
it('works', () => {
|
||||
expect(true).to.equal(true);
|
||||
});
|
||||
|
||||
it('prepends and appends value to inputted value', () => {
|
||||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
expect($choice.data('value')).to.equal(
|
||||
`before-${selectedChoiceText}-after`,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
it('displays just the inputted value to the user', () => {
|
||||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
expect($choice.text()).to.not.contain(
|
||||
`before-${selectedChoiceText}-after`,
|
||||
);
|
||||
expect($choice.text()).to.contain(selectedChoiceText);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
186
cypress/integration/select-one.spec.js
Normal file
186
cypress/integration/select-one.spec.js
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
describe('Choices - select one', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/select-one.html');
|
||||
});
|
||||
|
||||
describe('configs', () => {
|
||||
describe('basic', () => {
|
||||
describe('selecting choices', () => {
|
||||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__input--cloned')
|
||||
.focus();
|
||||
});
|
||||
|
||||
describe('focusing on text input', () => {
|
||||
const selectedChoiceText = 'Dropdown item 1';
|
||||
|
||||
it('displays a dropdown of choices', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible');
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.should('have.length', 4)
|
||||
.each(($choice, index) => {
|
||||
expect($choice.text().trim()).to.equal(
|
||||
`Dropdown item ${index + 1}`,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
it('allows me select choices from a dropdown', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.click();
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($item => {
|
||||
expect($item).to.contain(selectedChoiceText);
|
||||
});
|
||||
});
|
||||
|
||||
it('does not remove selected choice from dropdown list', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.click();
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should($item => {
|
||||
expect($item).to.contain(selectedChoiceText);
|
||||
});
|
||||
});
|
||||
|
||||
describe('pressing escape', () => {
|
||||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__input--cloned')
|
||||
.type('{esc}');
|
||||
});
|
||||
|
||||
it('closes the dropdown', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('not.be.visible');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('removing choices', () => {
|
||||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__input--cloned')
|
||||
.focus();
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.last()
|
||||
.click();
|
||||
});
|
||||
|
||||
describe('remove button', () => {
|
||||
it('removes last choice', () => {
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.find('.choices__button')
|
||||
.focus()
|
||||
.click();
|
||||
|
||||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--single')
|
||||
.children()
|
||||
.should('have.length', 0);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('disabled choice', () => {
|
||||
describe('selecting a disabled choice', () => {
|
||||
let selectedChoiceText;
|
||||
|
||||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=disabled-choice]').click();
|
||||
|
||||
cy.get('[data-test-hook=disabled-choice]')
|
||||
.find('.choices__list--dropdown .choices__item--disabled')
|
||||
.then($choice => {
|
||||
selectedChoiceText = $choice.text().trim();
|
||||
})
|
||||
.click();
|
||||
});
|
||||
|
||||
it('does not change selected choice', () => {
|
||||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
expect($choice.text()).to.not.contain(selectedChoiceText);
|
||||
});
|
||||
});
|
||||
|
||||
it('closes the dropdown list', () => {
|
||||
cy.get('[data-test-hook=disabled-choice]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('not.be.visible');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('prepend/append', () => {
|
||||
let selectedChoiceText;
|
||||
|
||||
beforeEach(() => {
|
||||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__input--cloned')
|
||||
.focus();
|
||||
|
||||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.last()
|
||||
.then($choice => {
|
||||
selectedChoiceText = $choice.text().trim();
|
||||
})
|
||||
.click();
|
||||
});
|
||||
|
||||
it('prepends and appends value to inputted value', () => {
|
||||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
expect($choice.data('value')).to.equal(
|
||||
`before-${selectedChoiceText}-after`,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
it('displays just the inputted value to the user', () => {
|
||||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--single .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
expect($choice.text()).to.not.contain(
|
||||
`before-${selectedChoiceText}-after`,
|
||||
);
|
||||
expect($choice.text()).to.contain(selectedChoiceText);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
</div>
|
||||
|
||||
<div data-test-hook="disabled-choice">
|
||||
<label for="choices-disabled-choice">Basic</label>
|
||||
<label for="choices-disabled-choice">Disabled choice</label>
|
||||
<select class="form-control" name="choices-disabled-choice" id="choices-disabled-choice" placeholder="This is a placeholder"
|
||||
multiple>
|
||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
||||
|
|
@ -50,6 +50,29 @@
|
|||
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="selection-limit">
|
||||
<label for="choices-selection-limit">Input limit</label>
|
||||
<select class="form-control" name="choices-selection-limit" id="choices-selection-limit" 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>
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="prepend-append">
|
||||
<label for="choices-prepend-append">Prepend/append</label>
|
||||
<select class="form-control" name="choices-prepend-append" id="choices-prepend-append" 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>
|
||||
|
|
@ -61,6 +84,15 @@
|
|||
new Choices('#choices-disabled-choice', {
|
||||
removeItemButton: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-selection-limit', {
|
||||
maxItemCount: 5,
|
||||
});
|
||||
|
||||
new Choices('#choices-prepend-append', {
|
||||
prependValue: 'before-',
|
||||
appendValue: '-after',
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
79
public/test/select-one.html
Normal file
79
public/test/select-one.html
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<title>Choices</title>
|
||||
<meta name=description itemprop=description content="A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="../assets/images/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" href="../assets/images/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="../assets/images/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="manifest" href="../assets/images/manifest.json">
|
||||
<link rel="mask-icon" href="../assets/images/safari-pinned-tab.svg" color="#00bcd4">
|
||||
<link rel="shortcut icon" href="../assets/images/favicon.ico">
|
||||
<meta name="msapplication-config" content="../assets/images/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<!-- Ignore these -->
|
||||
<link rel="stylesheet" href="../assets/styles/base.min.css?version=3.0.2">
|
||||
<!-- End ignore these -->
|
||||
|
||||
<!-- Choices includes -->
|
||||
<link rel="stylesheet" href="../assets/styles/choices.min.css?version=3.0.2">
|
||||
<script src="../assets/scripts/choices.min.js?version=2.8.8"></script>
|
||||
<!-- End Choices includes -->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="section">
|
||||
<h2>Select one inputs</h2>
|
||||
<div data-test-hook="basic">
|
||||
<label for="choices-basic">Basic</label>
|
||||
<select class="form-control" name="choices-basic" id="choices-basic" 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>
|
||||
<option value="Dropdown item 4">Dropdown item 4</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="disabled-choice">
|
||||
<label for="choices-disabled-choice">Disabled choice</label>
|
||||
<select class="form-control" name="choices-disabled-choice" id="choices-disabled-choice" 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>
|
||||
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="prepend-append">
|
||||
<label for="choices-prepend-append">Prepend/append</label>
|
||||
<select class="form-control" name="choices-prepend-append" id="choices-prepend-append" 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>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
new Choices('#choices-basic', {
|
||||
removeItemButton: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-disabled-choice', {
|
||||
removeItemButton: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-prepend-append', {
|
||||
prependValue: 'before-',
|
||||
appendValue: '-after',
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue