mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-09 17:16:36 +02:00
test: select-multiple coverage
This commit is contained in:
viction
parent
3633c4ac0f
commit
c989be1491
|
|
@ -1,6 +1,10 @@
|
|||
describe('Choices - select multiple', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/select-multiple');
|
||||
cy.visit('/select-multiple', {
|
||||
onBeforeLoad(win) {
|
||||
cy.stub(win.console, 'warn').as('consoleWarn');
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
describe('scenarios', () => {
|
||||
|
|
@ -865,5 +869,78 @@ describe('Choices - select multiple', () => {
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('allow html', () => {
|
||||
describe('is undefined', () => {
|
||||
it('logs a deprecation warning', () => {
|
||||
cy.get('@consoleWarn').should(
|
||||
'be.calledOnceWithExactly',
|
||||
'Deprecation warning: allowHTML in the future will be defaulted to false. You must explicitly set it to true to properly display html tags in choices.',
|
||||
);
|
||||
});
|
||||
|
||||
it('does not show as text when selected', () => {
|
||||
cy.get('[data-test-hook=allowhtml-undefined]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 1');
|
||||
});
|
||||
});
|
||||
|
||||
it('does not show html as text in dropdown', () => {
|
||||
cy.get('[data-test-hook=allowhtml-undefined]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 2');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('set to true', () => {
|
||||
it('does not show as text when selected', () => {
|
||||
cy.get('[data-test-hook=allowhtml-true]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 1');
|
||||
});
|
||||
});
|
||||
|
||||
it('does not show html as text in dropdown', () => {
|
||||
cy.get('[data-test-hook=allowhtml-true]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Choice 2');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('set to false', () => {
|
||||
it('shows html as text when selected', () => {
|
||||
cy.get('[data-test-hook=allowhtml-false]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('<b>Choice 1</b>');
|
||||
});
|
||||
});
|
||||
|
||||
it('shows html as text', () => {
|
||||
cy.get('[data-test-hook=allowhtml-false]')
|
||||
.find('.choices__list--dropdown .choices__list')
|
||||
.children()
|
||||
.first()
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('<b>Choice 2</b>');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -345,11 +345,43 @@
|
|||
<option value="value2">label2</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="allowhtml-undefined">
|
||||
<label for="choices-allowhtml-undefined">HTML allowed by default</label>
|
||||
<select
|
||||
class="form-control"
|
||||
name="choices-allowhtml-undefined"
|
||||
id="choices-allowhtml-undefined"
|
||||
multiple
|
||||
></select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="allowhtml-true">
|
||||
<label for="choices-allowhtml-true">HTML allowed</label>
|
||||
<select
|
||||
class="form-control"
|
||||
name="choices-allowhtml-true"
|
||||
id="choices-allowhtml-true"
|
||||
multiple
|
||||
></select>
|
||||
</div>
|
||||
|
||||
<div data-test-hook="allowhtml-false">
|
||||
<label for="choices-allowhtml-false">HTML disabled</label>
|
||||
<select
|
||||
class="form-control"
|
||||
name="choices-allowhtml-false"
|
||||
id="choices-allowhtml-false"
|
||||
multiple
|
||||
></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const choicesBasic = new Choices('#choices-basic');
|
||||
const choicesBasic = new Choices('#choices-basic', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
document
|
||||
.querySelector('button.disable')
|
||||
|
|
@ -364,39 +396,54 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-remove-button', {
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-disabled-choice');
|
||||
new Choices('#choices-disabled-choice', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-add-items-disabled', {
|
||||
allowHTML: true,
|
||||
addItems: false,
|
||||
});
|
||||
|
||||
new Choices('#choices-disabled-via-attr');
|
||||
new Choices('#choices-disabled-via-attr', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-selection-limit', {
|
||||
allowHTML: true,
|
||||
maxItemCount: 5,
|
||||
});
|
||||
|
||||
new Choices('#choices-prepend-append', {
|
||||
allowHTML: true,
|
||||
prependValue: 'before-',
|
||||
appendValue: '-after',
|
||||
});
|
||||
|
||||
new Choices('#choices-render-choice-limit', {
|
||||
allowHTML: true,
|
||||
renderChoiceLimit: 1,
|
||||
});
|
||||
|
||||
new Choices('#choices-search-floor', {
|
||||
allowHTML: true,
|
||||
searchFloor: 5,
|
||||
});
|
||||
|
||||
new Choices('#choices-placeholder-via-option-value');
|
||||
new Choices('#choices-placeholder-via-option-value', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-placeholder-via-option-attr');
|
||||
new Choices('#choices-placeholder-via-option-attr', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-remote-data', {
|
||||
allowHTML: true,
|
||||
shouldSort: false,
|
||||
}).setChoices(async () => {
|
||||
const data = await fetch('/data');
|
||||
|
|
@ -404,12 +451,16 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-scrolling-dropdown', {
|
||||
allowHTML: true,
|
||||
shouldSort: false,
|
||||
});
|
||||
|
||||
new Choices('#choices-groups');
|
||||
new Choices('#choices-groups', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-custom-properties', {
|
||||
allowHTML: true,
|
||||
searchFields: ['label', 'value', 'customProperties.country'],
|
||||
choices: [
|
||||
{
|
||||
|
|
@ -440,6 +491,7 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-non-string-values', {
|
||||
allowHTML: true,
|
||||
choices: [
|
||||
{
|
||||
id: 1,
|
||||
|
|
@ -466,13 +518,83 @@
|
|||
],
|
||||
});
|
||||
|
||||
new Choices('#choices-within-form');
|
||||
new Choices('#choices-within-form', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-set-choice-by-value').setChoiceByValue(
|
||||
'Choice 2',
|
||||
);
|
||||
new Choices('#choices-set-choice-by-value', {
|
||||
allowHTML: true,
|
||||
}).setChoiceByValue('Choice 2');
|
||||
|
||||
new Choices('#choices-search-by-label', { searchFields: ['label'] });
|
||||
new Choices('#choices-search-by-label', {
|
||||
allowHTML: true,
|
||||
searchFields: ['label']
|
||||
});
|
||||
|
||||
new Choices('#choices-allowhtml-undefined', {
|
||||
choices: [
|
||||
{
|
||||
id: 1,
|
||||
label: '<b>Choice 1</b>',
|
||||
value: 'Choice 1',
|
||||
selected: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '<b>Choice 2</b>',
|
||||
value: 'Choice 2',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: 'Choice 3',
|
||||
value: 'Choice 3',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
new Choices('#choices-allowhtml-true', {
|
||||
allowHTML: true,
|
||||
choices: [
|
||||
{
|
||||
id: 1,
|
||||
label: '<b>Choice 1</b>',
|
||||
value: 'Choice 1',
|
||||
selected: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '<b>Choice 2</b>',
|
||||
value: 'Choice 2',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: 'Choice 3',
|
||||
value: 'Choice 3',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
new Choices('#choices-allowhtml-false', {
|
||||
allowHTML: false,
|
||||
choices: [
|
||||
{
|
||||
id: 1,
|
||||
label: '<b>Choice 1</b>',
|
||||
value: 'Choice 1',
|
||||
selected: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '<b>Choice 2</b>',
|
||||
value: 'Choice 2',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: 'Choice 3',
|
||||
value: 'Choice 3',
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue