mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-07 08:06:35 +02:00
fix: Custom template displaying/unit tests
This commit is contained in:
viction
parent
c989be1491
commit
545a442f5c
|
|
@ -534,6 +534,7 @@
|
|||
for (i = 0; i < genericExamples.length; ++i) {
|
||||
var element = genericExamples[i];
|
||||
new Choices(element, {
|
||||
allowHTML: true,
|
||||
placeholderValue: 'This is a placeholder set in the config',
|
||||
searchPlaceholderValue: 'This is a search placeholder',
|
||||
});
|
||||
|
|
@ -542,6 +543,7 @@
|
|||
var textRemove = new Choices(
|
||||
document.getElementById('choices-text-remove-button'),
|
||||
{
|
||||
allowHTML: true,
|
||||
delimiter: ',',
|
||||
editItems: true,
|
||||
maxItemCount: 5,
|
||||
|
|
@ -550,12 +552,14 @@
|
|||
);
|
||||
|
||||
var textUniqueVals = new Choices('#choices-text-unique-values', {
|
||||
allowHTML: true,
|
||||
paste: false,
|
||||
duplicateItemsAllowed: false,
|
||||
editItems: true,
|
||||
});
|
||||
|
||||
var texti18n = new Choices('#choices-text-i18n', {
|
||||
allowHTML: true,
|
||||
paste: false,
|
||||
duplicateItemsAllowed: false,
|
||||
editItems: true,
|
||||
|
|
@ -572,6 +576,7 @@
|
|||
});
|
||||
|
||||
var textEmailFilter = new Choices('#choices-text-email-filter', {
|
||||
allowHTML: true,
|
||||
editItems: true,
|
||||
addItemFilter: function(value) {
|
||||
if (!value) {
|
||||
|
|
@ -585,6 +590,7 @@
|
|||
}).setValue(['joe@bloggs.com']);
|
||||
|
||||
var textDisabled = new Choices('#choices-text-disabled', {
|
||||
allowHTML: true,
|
||||
addItems: false,
|
||||
removeItems: false,
|
||||
}).disable();
|
||||
|
|
@ -592,12 +598,14 @@
|
|||
var textPrependAppendVal = new Choices(
|
||||
'#choices-text-prepend-append-value',
|
||||
{
|
||||
allowHTML: true,
|
||||
prependValue: 'item-',
|
||||
appendValue: '-' + Date.now(),
|
||||
}
|
||||
).removeActiveItems();
|
||||
|
||||
var textPresetVal = new Choices('#choices-text-preset-values', {
|
||||
allowHTML: true,
|
||||
items: [
|
||||
'Josh Johnson',
|
||||
{
|
||||
|
|
@ -611,10 +619,12 @@
|
|||
});
|
||||
|
||||
var multipleDefault = new Choices(
|
||||
document.getElementById('choices-multiple-groups')
|
||||
document.getElementById('choices-multiple-groups'),
|
||||
{ allowHTML: true }
|
||||
);
|
||||
|
||||
var multipleFetch = new Choices('#choices-multiple-remote-fetch', {
|
||||
allowHTML: true,
|
||||
placeholder: true,
|
||||
placeholderValue: 'Pick an Strokes record',
|
||||
maxItemCount: 5,
|
||||
|
|
@ -635,12 +645,14 @@
|
|||
var multipleCancelButton = new Choices(
|
||||
'#choices-multiple-remove-button',
|
||||
{
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
}
|
||||
);
|
||||
|
||||
/* Use label on event */
|
||||
var choicesSelect = new Choices('#choices-multiple-labels', {
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
choices: [
|
||||
{ value: 'One', label: 'Label One' },
|
||||
|
|
@ -675,6 +687,7 @@
|
|||
);
|
||||
|
||||
var singleFetch = new Choices('#choices-single-remote-fetch', {
|
||||
allowHTML: true,
|
||||
searchPlaceholderValue: 'Search for an Arctic Monkeys record',
|
||||
})
|
||||
.setChoices(function() {
|
||||
|
|
@ -695,6 +708,7 @@
|
|||
});
|
||||
|
||||
var singleXhrRemove = new Choices('#choices-single-remove-xhr', {
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
searchPlaceholderValue: "Search for a Smiths' record",
|
||||
}).setChoices(function(callback) {
|
||||
|
|
@ -712,6 +726,7 @@
|
|||
});
|
||||
|
||||
var singleNoSearch = new Choices('#choices-single-no-search', {
|
||||
allowHTML: true,
|
||||
searchEnabled: false,
|
||||
removeItemButton: true,
|
||||
choices: [
|
||||
|
|
@ -731,6 +746,7 @@
|
|||
);
|
||||
|
||||
var singlePresetOpts = new Choices('#choices-single-preset-options', {
|
||||
allowHTML: true,
|
||||
placeholder: true,
|
||||
}).setChoices(
|
||||
[
|
||||
|
|
@ -760,6 +776,7 @@
|
|||
);
|
||||
|
||||
var singleSelectedOpt = new Choices('#choices-single-selected-option', {
|
||||
allowHTML: true,
|
||||
searchFields: ['label', 'value', 'customProperties.description'],
|
||||
choices: [
|
||||
{ value: 'One', label: 'Label One', selected: true },
|
||||
|
|
@ -777,17 +794,20 @@
|
|||
var customChoicesPropertiesViaDataAttributes = new Choices(
|
||||
'#choices-with-custom-props-via-html',
|
||||
{
|
||||
allowHTML: true,
|
||||
searchFields: ['label', 'value', 'customProperties'],
|
||||
}
|
||||
);
|
||||
|
||||
var singleNoSorting = new Choices('#choices-single-no-sorting', {
|
||||
allowHTML: true,
|
||||
shouldSort: false,
|
||||
});
|
||||
|
||||
var cities = new Choices(document.getElementById('cities'));
|
||||
var cities = new Choices(document.getElementById('cities'), { allowHTML: true });
|
||||
var tubeStations = new Choices(
|
||||
document.getElementById('tube-stations')
|
||||
document.getElementById('tube-stations'),
|
||||
{ allowHTML: true }
|
||||
).disable();
|
||||
|
||||
cities.passedElement.element.addEventListener('change', function(e) {
|
||||
|
|
@ -801,11 +821,12 @@
|
|||
var customTemplates = new Choices(
|
||||
document.getElementById('choices-single-custom-templates'),
|
||||
{
|
||||
allowHTML: true,
|
||||
callbackOnCreateTemplates: function(strToEl) {
|
||||
var classNames = this.config.classNames;
|
||||
var itemSelectText = this.config.itemSelectText;
|
||||
return {
|
||||
item: function(classNames, data) {
|
||||
item: function({ classNames }, data) {
|
||||
return strToEl(
|
||||
'\
|
||||
<div\
|
||||
|
|
@ -839,7 +860,7 @@
|
|||
'
|
||||
);
|
||||
},
|
||||
choice: function(classNames, data) {
|
||||
choice: function({ classNames }, data) {
|
||||
return strToEl(
|
||||
'\
|
||||
<div\
|
||||
|
|
@ -889,9 +910,12 @@
|
|||
}
|
||||
);
|
||||
|
||||
var resetSimple = new Choices(document.getElementById('reset-simple'));
|
||||
var resetSimple = new Choices(document.getElementById('reset-simple'), {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
var resetMultiple = new Choices('#reset-multiple', {
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ describe('choices', () => {
|
|||
passedElement.className = 'js-choices';
|
||||
document.body.appendChild(passedElement);
|
||||
|
||||
instance = new Choices(passedElement);
|
||||
instance = new Choices(passedElement, { allowHTML: true });
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
|
|
@ -55,6 +55,7 @@ describe('choices', () => {
|
|||
`;
|
||||
|
||||
const config = {
|
||||
allowHTML: true,
|
||||
renderChoiceLimit: 5,
|
||||
};
|
||||
instance = new Choices('[data-choice]', config);
|
||||
|
|
@ -73,6 +74,7 @@ describe('choices', () => {
|
|||
`;
|
||||
|
||||
instance = new Choices('[data-choice]', {
|
||||
allowHTML: true,
|
||||
searchEnabled: false,
|
||||
});
|
||||
|
||||
|
|
@ -88,6 +90,7 @@ describe('choices', () => {
|
|||
`;
|
||||
|
||||
instance = new Choices('[data-choice]', {
|
||||
allowHTML: true,
|
||||
renderSelectedChoices: 'test' as any,
|
||||
});
|
||||
|
||||
|
|
@ -108,7 +111,7 @@ describe('choices', () => {
|
|||
const inputs = document.querySelectorAll('[data-choice]');
|
||||
expect(inputs.length).to.equal(3);
|
||||
|
||||
instance = new Choices();
|
||||
instance = new Choices(undefined, { allowHTML: true });
|
||||
|
||||
expect(instance.passedElement.element.id).to.equal(inputs[0].id);
|
||||
});
|
||||
|
|
@ -116,7 +119,7 @@ describe('choices', () => {
|
|||
describe('when an element cannot be found in the DOM', () => {
|
||||
it('throws an error', () => {
|
||||
document.body.innerHTML = ``;
|
||||
expect(() => new Choices()).to.throw(
|
||||
expect(() => new Choices(undefined, { allowHTML: true })).to.throw(
|
||||
TypeError,
|
||||
'Expected one of the following types text|select-one|select-multiple',
|
||||
);
|
||||
|
|
@ -133,7 +136,7 @@ describe('choices', () => {
|
|||
});
|
||||
|
||||
it('sets the initialised flag to true', () => {
|
||||
instance = new Choices('#input-1');
|
||||
instance = new Choices('#input-1', { allowHTML: true });
|
||||
expect(instance.initialised).to.equal(true);
|
||||
});
|
||||
|
||||
|
|
@ -141,6 +144,7 @@ describe('choices', () => {
|
|||
const initSpy = spy();
|
||||
// initialise with the same element
|
||||
instance = new Choices('#input-1', {
|
||||
allowHTML: true,
|
||||
silent: true,
|
||||
callbackOnInit: initSpy,
|
||||
});
|
||||
|
|
@ -156,12 +160,12 @@ describe('choices', () => {
|
|||
`;
|
||||
|
||||
// initialise once
|
||||
new Choices('#input-1', { silent: true });
|
||||
new Choices('#input-1', { allowHTML: true, silent: true });
|
||||
});
|
||||
|
||||
it('sets the initialised flag to true', () => {
|
||||
// initialise with the same element
|
||||
instance = new Choices('#input-1', { silent: true });
|
||||
instance = new Choices('#input-1', { allowHTML: true, silent: true });
|
||||
|
||||
expect(instance.initialised).to.equal(true);
|
||||
});
|
||||
|
|
@ -170,6 +174,7 @@ describe('choices', () => {
|
|||
const initSpy = spy();
|
||||
// initialise with the same element
|
||||
instance = new Choices('#input-1', {
|
||||
allowHTML: true,
|
||||
silent: true,
|
||||
callbackOnInit: initSpy,
|
||||
});
|
||||
|
|
@ -185,7 +190,7 @@ describe('choices', () => {
|
|||
<input data-choice type="text" id="input-1" />
|
||||
`;
|
||||
|
||||
instance = new Choices('[data-choice]');
|
||||
instance = new Choices('[data-choice]', { allowHTML: true });
|
||||
|
||||
expect(instance.passedElement).to.be.an.instanceOf(WrappedInput);
|
||||
});
|
||||
|
|
@ -197,7 +202,7 @@ describe('choices', () => {
|
|||
<select data-choice id="select-1"></select>
|
||||
`;
|
||||
|
||||
instance = new Choices('[data-choice]');
|
||||
instance = new Choices('[data-choice]', { allowHTML: true });
|
||||
|
||||
expect(instance.passedElement).to.be.an.instanceOf(WrappedSelect);
|
||||
});
|
||||
|
|
@ -211,7 +216,7 @@ describe('choices', () => {
|
|||
<input data-choice type="text" id="input-1" />
|
||||
`;
|
||||
|
||||
instance = new Choices('[data-choice]');
|
||||
instance = new Choices('[data-choice]', { allowHTML: true });
|
||||
|
||||
expect(instance.passedElement).to.be.an.instanceOf(WrappedInput);
|
||||
});
|
||||
|
|
@ -223,7 +228,7 @@ describe('choices', () => {
|
|||
<select data-choice id="select-1"></select>
|
||||
`;
|
||||
|
||||
instance = new Choices('[data-choice]');
|
||||
instance = new Choices('[data-choice]', { allowHTML: true });
|
||||
|
||||
expect(instance.passedElement).to.be.an.instanceOf(WrappedSelect);
|
||||
});
|
||||
|
|
@ -235,7 +240,7 @@ describe('choices', () => {
|
|||
document.body.innerHTML = `
|
||||
<div data-choice id="div-1"></div>
|
||||
`;
|
||||
expect(() => new Choices('[data-choice]')).to.throw(
|
||||
expect(() => new Choices('[data-choice]', { allowHTML: true })).to.throw(
|
||||
TypeError,
|
||||
'Expected one of the following types text|select-one|select-multiple',
|
||||
);
|
||||
|
|
@ -250,6 +255,7 @@ describe('choices', () => {
|
|||
|
||||
beforeEach(() => {
|
||||
instance = new Choices(passedElement, {
|
||||
allowHTML: true,
|
||||
callbackOnInit: callbackOnInitSpy,
|
||||
silent: true,
|
||||
});
|
||||
|
|
@ -330,7 +336,7 @@ describe('choices', () => {
|
|||
passedElement.className = 'js-choices';
|
||||
document.body.appendChild(passedElement);
|
||||
|
||||
instance = new Choices(passedElement);
|
||||
instance = new Choices(passedElement, { allowHTML: true });
|
||||
});
|
||||
|
||||
describe('not already initialised', () => {
|
||||
|
|
@ -1188,7 +1194,7 @@ describe('choices', () => {
|
|||
describe('select element', () => {
|
||||
it('fetches and sets choices', async () => {
|
||||
document.body.innerHTML = '<select id="test" />';
|
||||
const choice = new Choices('#test');
|
||||
const choice = new Choices('#test', { allowHTML: true });
|
||||
const handleLoadingStateSpy = spy(choice, '_handleLoadingState');
|
||||
|
||||
let fetcherCalled = false;
|
||||
|
|
@ -2063,7 +2069,7 @@ describe('choices', () => {
|
|||
output = instance._getTemplate(templateKey, customArg);
|
||||
expect(output).to.deep.equal(element);
|
||||
expect(instance._templates[templateKey]).to.have.been.calledOnceWith(
|
||||
instance.config.classNames,
|
||||
instance.config,
|
||||
customArg,
|
||||
);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue