mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-14 11:46:48 +02:00
Add ajax e2e tests
This commit is contained in:
parent
17e02df269
commit
462d8b764c
|
@ -414,5 +414,48 @@ describe('Choices - select multiple', () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('remote data', () => {
|
||||
beforeEach(() => {
|
||||
cy.reload(true);
|
||||
});
|
||||
|
||||
describe('when loading data', () => {
|
||||
it('shows a loading message as a placeholder', () => {
|
||||
cy.get('[data-test-hook=remote-data]')
|
||||
.find('.choices__input--cloned')
|
||||
.should('have.attr', 'placeholder', 'Loading...');
|
||||
});
|
||||
|
||||
describe('opening the dropdown', () => {
|
||||
it('displays "no choices to choose" prompt', () => {
|
||||
cy.get('[data-test-hook=remote-data]').click();
|
||||
cy.get('[data-test-hook=remote-data]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible')
|
||||
.should($dropdown => {
|
||||
const dropdownText = $dropdown.text().trim();
|
||||
expect(dropdownText).to.equal('No choices to choose from');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when data has loaded', () => {
|
||||
describe('opening the dropdown', () => {
|
||||
it('displays the loaded data', () => {
|
||||
cy.wait(2000);
|
||||
cy.get('[data-test-hook=remote-data]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.should('have.length', 50)
|
||||
.each(($choice, index) => {
|
||||
expect($choice.text().trim()).to.equal(`Label ${index + 1}`);
|
||||
expect($choice.data('value')).to.equal(`Value ${index + 1}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -351,5 +351,53 @@ describe('Choices - select one', () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('remote data', () => {
|
||||
beforeEach(() => {
|
||||
cy.reload(true);
|
||||
});
|
||||
|
||||
describe('when loading data', () => {
|
||||
it('shows a loading message as a placeholder', () => {
|
||||
cy.get('[data-test-hook=remote-data]')
|
||||
.find('.choices__list--single')
|
||||
.children()
|
||||
.first()
|
||||
.should('have.class', 'choices__placeholder')
|
||||
.and($placeholder => {
|
||||
expect($placeholder).to.contain('Loading...');
|
||||
});
|
||||
});
|
||||
|
||||
describe('opening the dropdown', () => {
|
||||
it('displays "no choices to choose" prompt', () => {
|
||||
cy.get('[data-test-hook=remote-data]').click();
|
||||
cy.get('[data-test-hook=remote-data]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible')
|
||||
.should($dropdown => {
|
||||
const dropdownText = $dropdown.text().trim();
|
||||
expect(dropdownText).to.equal('No choices to choose from');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('when data has loaded', () => {
|
||||
describe('opening the dropdown', () => {
|
||||
it('displays the loaded data', () => {
|
||||
cy.wait(2000);
|
||||
cy.get('[data-test-hook=remote-data]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.should('have.length', 50)
|
||||
.each(($choice, index) => {
|
||||
expect($choice.text().trim()).to.equal(`Label ${index + 1}`);
|
||||
expect($choice.data('value')).to.equal(`Value ${index + 1}`);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -106,6 +106,11 @@
|
|||
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="remote-data">
|
||||
<label for="choices-remote-data">Remote data</label>
|
||||
<select class="form-control" name="choices-remote-data" id="choices-remote-data" multiple></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
@ -139,6 +144,20 @@
|
|||
placeholder: true,
|
||||
placeholderValue: 'I am a placeholder',
|
||||
});
|
||||
|
||||
new Choices('#choices-remote-data', {
|
||||
shouldSort: false,
|
||||
}).ajax((callback) => {
|
||||
fetch('/data')
|
||||
.then((response) => {
|
||||
response.json().then((data) => {
|
||||
callback(data, 'value', 'label');
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
@ -94,6 +94,11 @@
|
|||
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="remote-data">
|
||||
<label for="choices-remote-data">Remote data</label>
|
||||
<select class="form-control" name="choices-remote-data" id="choices-remote-data"></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
@ -124,6 +129,20 @@
|
|||
new Choices('#choices-search-floor', {
|
||||
searchFloor: 10,
|
||||
});
|
||||
|
||||
new Choices('#choices-remote-data', {
|
||||
shouldSort: false,
|
||||
}).ajax((callback) => {
|
||||
fetch('/data')
|
||||
.then((response) => {
|
||||
response.json().then((data) => {
|
||||
callback(data, 'value', 'label');
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
16
server.js
16
server.js
|
@ -26,6 +26,22 @@ if (process.env.NODE_ENV !== 'production') {
|
|||
);
|
||||
|
||||
app.use(webpackHotMiddleware(compiler));
|
||||
|
||||
app.get('/data', (req, res) => {
|
||||
// prevent endpoint from being cached
|
||||
res.header('Cache-Control', 'private, no-cache, no-store, must-revalidate');
|
||||
res.header('Expires', '-1');
|
||||
res.header('Pragma', 'no-cache');
|
||||
|
||||
const fakeData = [...new Array(50)].map((_, index) => ({
|
||||
label: `Label ${index + 1}`,
|
||||
value: `Value ${index + 1}`,
|
||||
}));
|
||||
|
||||
setTimeout(() => {
|
||||
res.status(200).send(fakeData);
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
app.use(express.static(DIST_DIR));
|
||||
|
|
Loading…
Reference in a new issue