120 lines
4.5 KiB
JavaScript
120 lines
4.5 KiB
JavaScript
import { localizeTearDown } from '@lion/localize/test-helpers';
|
|
import { expect, fixture as _fixture, html } from '@open-wc/testing';
|
|
import '@lion/checkbox-group/define';
|
|
|
|
/**
|
|
* @typedef {import('../src/LionCheckboxGroup').LionCheckboxGroup} LionCheckboxGroup
|
|
* @typedef {import('@lion/core').TemplateResult} TemplateResult
|
|
*/
|
|
|
|
const fixture = /** @type {(arg: TemplateResult) => Promise<LionCheckboxGroup>} */ (_fixture);
|
|
|
|
beforeEach(() => {
|
|
localizeTearDown();
|
|
});
|
|
|
|
describe('<lion-checkbox-group>', () => {
|
|
describe('resetGroup', () => {
|
|
// TODO move to FormGroupMixin test suite and let CheckboxGroup make use of them
|
|
it('restores default values of arrays if changes were made', async () => {
|
|
const el = await fixture(html`
|
|
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
|
|
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
|
|
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
|
|
<lion-checkbox
|
|
label="Marie Curie"
|
|
.modelValue=${{ value: 'Marie Curie', checked: false }}
|
|
></lion-checkbox>
|
|
</lion-checkbox-group>
|
|
`);
|
|
el.formElements[0].checked = true;
|
|
expect(el.modelValue).to.deep.equal(['Archimedes']);
|
|
|
|
el.resetGroup();
|
|
expect(el.modelValue).to.deep.equal([]);
|
|
});
|
|
|
|
it('restores default values of arrays if changes were made', async () => {
|
|
const el = await fixture(html`
|
|
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
|
|
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
|
|
<lion-checkbox
|
|
label="Francis Bacon"
|
|
.modelValue=${{ value: 'Francis Bacon', checked: true }}
|
|
></lion-checkbox>
|
|
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
|
|
</lion-checkbox-group>
|
|
`);
|
|
el.formElements[0].checked = true;
|
|
expect(el.modelValue).to.deep.equal(['Archimedes', 'Francis Bacon']);
|
|
|
|
el.resetGroup();
|
|
expect(el.modelValue).to.deep.equal(['Francis Bacon']);
|
|
|
|
el.formElements[2].checked = true;
|
|
expect(el.modelValue).to.deep.equal(['Francis Bacon', 'Marie Curie']);
|
|
|
|
el.resetGroup();
|
|
expect(el.modelValue).to.deep.equal(['Francis Bacon']);
|
|
});
|
|
});
|
|
|
|
it('is accessible', async () => {
|
|
const el = await fixture(html`
|
|
<lion-checkbox-group name="scientists[]" label="Who are your favorite scientists?">
|
|
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
|
|
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
|
|
<lion-checkbox
|
|
label="Marie Curie"
|
|
.modelValue=${{ value: 'Marie Curie', checked: false }}
|
|
></lion-checkbox>
|
|
</lion-checkbox-group>
|
|
`);
|
|
await expect(el).to.be.accessible();
|
|
});
|
|
|
|
it('is accessible when pre-selected', async () => {
|
|
const el = await fixture(html`
|
|
<lion-checkbox-group name="scientists[]" label="Who are your favorite scientists?">
|
|
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
|
|
<lion-checkbox
|
|
label="Francis Bacon"
|
|
.choiceValue=${'Francis Bacon'}
|
|
.choiceChecked=${true}
|
|
></lion-checkbox>
|
|
<lion-checkbox
|
|
label="Marie Curie"
|
|
.modelValue=${{ value: 'Marie Curie', checked: true }}
|
|
></lion-checkbox>
|
|
</lion-checkbox-group>
|
|
`);
|
|
await expect(el).to.be.accessible();
|
|
});
|
|
|
|
it('is accessible when disabled', async () => {
|
|
const el = await fixture(html`
|
|
<lion-checkbox-group name="scientists[]" label="Who are your favorite scientists?" disabled>
|
|
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
|
|
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
|
|
<lion-checkbox
|
|
label="Marie Curie"
|
|
.modelValue=${{ value: 'Marie Curie', checked: true }}
|
|
></lion-checkbox>
|
|
</lion-checkbox-group>
|
|
`);
|
|
await expect(el).to.be.accessible();
|
|
});
|
|
|
|
it("should throw exception if name doesn't end in []", async () => {
|
|
const el = await fixture(html`<lion-checkbox-group name="woof[]"></lion-checkbox-group>`);
|
|
el.name = 'woof';
|
|
let err;
|
|
try {
|
|
await el.updateComplete;
|
|
} catch (e) {
|
|
err = e;
|
|
}
|
|
expect(err).to.be.an.instanceof(Error);
|
|
expect(err.message).to.equal('Names should end in "[]".');
|
|
});
|
|
});
|