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

Finish up e2e tests for text elements

Browse source
This commit is contained in:
Josh Johnson 2018-10-13 12:42:33 +01:00
parent 2f96c239ff
commit 57f16c23ee
2 changed files with 76 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
cypress/integration/text_element_spec.js
View file

@ -52,6 +52,32 @@ describe('Choices - text element', () => {
});
});
describe('editing choices', () => {
beforeEach(() => {
cy.get('[data-test-hook=basic]')
.find('.choices__input--cloned')
.type(textInput)
.type('{enter}');
});
describe('pressing back space', () => {
it('allows me to change my entry', () => {
cy.get('[data-test-hook=basic]')
.find('.choices__input--cloned')
.type('{backspace}')
.type('-edited')
.type('{enter}');
cy.get('[data-test-hook=basic]')
.find('.choices__list--multiple .choices__item')
.last()
.should($choice => {
expect($choice.data('value')).to.equal(`${textInput}-edited`);
});
});
});
});
describe('removing choices', () => {
beforeEach(() => {
cy.get('[data-test-hook=basic]')
@ -162,10 +188,10 @@ describe('Choices - text element', () => {
.type('{enter}');
cy.get('[data-test-hook=regex-filter]')
.find('.choices__list .choices__item')
.find('.choices__list--multiple .choices__item')
.last()
.should($choice => {
expect($choice).to.contain(input);
expect($choice.text().trim()).to.equal(input);
});
});
});
@ -200,6 +226,16 @@ describe('Choices - text element', () => {
expect($choice.data('value')).to.equal(`before-${textInput}-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-${textInput}-after`);
expect($choice.text()).to.contain(textInput);
});
});
});
describe('disabled', () => {
@ -209,5 +245,29 @@ describe('Choices - text element', () => {
.should('be.disabled');
});
});
describe('pre-populated choices', () => {
it('pre-populates choices', () => {
cy.get('[data-test-hook=prepopulated]')
.find('.choices__list--multiple .choices__item')
.should($choices => {
expect($choices.length).to.equal(2);
});
cy.get('[data-test-hook=prepopulated]')
.find('.choices__list--multiple .choices__item')
.first()
.should($choice => {
expect($choice.text().trim()).to.equal('Josh Johnson');
});
cy.get('[data-test-hook=prepopulated]')
.find('.choices__list--multiple .choices__item')
.last()
.should($choice => {
expect($choice.text().trim()).to.equal('Joe Bloggs');
});
});
});
});
});

36
public/test/text.html
View file

@ -39,10 +39,6 @@
<body>
<div class="container">
<div class="section">
<a href="https://github.com/jshjohnson/Choices" class="logo">
<img src="../assets/images/logo.svg" alt="Choices.js logo" class="logo__img hidden-ie">
<h1 class="visible-ie">Choices.js</h1>
</a>
<h2>Text inputs</h2>
<div data-test-hook="basic">
<label for="choices-basic">Basic</label>
@ -74,14 +70,10 @@
<input class="form-control" id="choices-prepend-append" type="text" placeholder="This is a placeholder">
</div>
<hr>
<h2>Multiple select input</h2>
<hr>
<h2>Single select input</h2>
<div data-test-hook="prepopulated">
<label for="choices-prepopulated">Pre-populated choices</label>
<input class="form-control" id="choices-prepopulated" type="text" placeholder="This is a placeholder">
</div>
</div>
</div>
<script>
@ -112,17 +104,17 @@
prependValue: 'before-',
appendValue: '-after',
});
new Choices('#choices-prepopulated', {
items: ['Josh Johnson', {
value: 'joe@bloggs.co.uk',
label: 'Joe Bloggs',
customProperties: {
description: 'Joe Blogg is such a generic name'
}
}],
});
});
</script>
<!-- Google Analytics - Ignore me -->
<script>
window.ga = window.ga || function() { (ga.q = ga.q || []).push(arguments) }; ga.l = +new Date;
ga('create', 'UA-31575166-1', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->
</body>
</html>