chore: add checkboxIndeterminate test suite (#2013)
This commit is contained in:
gerjanvangeest
GitHub
parent
02e61285dd
commit
7ec90dcb06
7 changed files with 341 additions and 340 deletions
5
.changeset/neat-poets-hope.md
Normal file
5
.changeset/neat-poets-hope.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
'@lion/ui': patch
|
||||
---
|
||||
|
||||
add CheckboxIndeterminate test suite
|
||||
|
|
@ -11,14 +11,12 @@ import '@lion/ui/define/lion-checkbox-group.js';
|
|||
import '@lion/ui/define/lion-checkbox.js';
|
||||
```
|
||||
|
||||
```js preview-story
|
||||
export const main = () => html`
|
||||
```html preview-story
|
||||
<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" .choiceValue=${'Marie Curie'}></lion-checkbox>
|
||||
</lion-checkbox-group>
|
||||
`;
|
||||
```
|
||||
|
||||
> Make sure that the checkbox-group also has a name attribute, this is necessary for our [form](../form/overview.md)'s serialization result.
|
||||
|
|
@ -36,5 +34,6 @@ npm i --save @lion/ui
|
|||
|
||||
```js
|
||||
import '@lion/ui/define/lion-checkbox-group.js';
|
||||
import '@lion/ui/define/lion-checkbox-indeterminate.js';
|
||||
import '@lion/ui/define/lion-checkbox.js';
|
||||
```
|
||||
|
|
|
|||
|
|
@ -45,42 +45,31 @@ Our recommendation would be to set the `name` attribute only on the `lion-checkb
|
|||
|
||||
You can pre-select options by targeting the `modelValue` object of the option and setting the `checked` property to `true`.
|
||||
|
||||
```js preview-story
|
||||
export const preselect = () => html`
|
||||
```html preview-story
|
||||
<lion-checkbox-group name="scientists" label="Favorite scientists">
|
||||
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
|
||||
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'} checked></lion-checkbox>
|
||||
<lion-checkbox
|
||||
label="Marie Curie"
|
||||
.modelValue=${{ value: 'Marie Curie', checked: true }}
|
||||
></lion-checkbox>
|
||||
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
|
||||
</lion-checkbox-group>
|
||||
`;
|
||||
```
|
||||
|
||||
## Disabled
|
||||
|
||||
You can disable the entire group by setting the `disabled` attribute on the `<lion-checkbox-group>`.
|
||||
|
||||
```js preview-story
|
||||
export const disabled = () => html`
|
||||
```html preview-story
|
||||
<lion-checkbox-group name="scientists[]" label="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 label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
|
||||
</lion-checkbox-group>
|
||||
`;
|
||||
```
|
||||
|
||||
## Label
|
||||
|
||||
You can use `slot="label"` instead of the `label` attribute for defining more complex labels, such as containing screen reader only text or an anchor.
|
||||
|
||||
```js preview-story
|
||||
export const label = () => html`
|
||||
```html preview-story
|
||||
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
|
||||
<lion-checkbox .choiceValue=${'Archimedes'}>
|
||||
<label slot="label"
|
||||
|
|
@ -98,15 +87,13 @@ export const label = () => html`
|
|||
>
|
||||
</lion-checkbox>
|
||||
</lion-checkbox-group>
|
||||
`;
|
||||
```
|
||||
|
||||
## Help text
|
||||
|
||||
You can add help text on each checkbox with `help-text` attribute on the `<lion-checkbox>`.
|
||||
|
||||
```js preview-story
|
||||
export const helpText = () => html`
|
||||
```html preview-story
|
||||
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
|
||||
<lion-checkbox
|
||||
label="Archimedes"
|
||||
|
|
@ -124,7 +111,6 @@ export const helpText = () => html`
|
|||
help-text="Marie Skłodowska Curie born Maria Salomea Skłodowska, was a Polish and naturalized-French physicist and chemist who conducted pioneering research on radioactivity"
|
||||
></lion-checkbox>
|
||||
</lion-checkbox-group>
|
||||
`;
|
||||
```
|
||||
|
||||
## Event
|
||||
|
|
@ -156,102 +142,84 @@ export const event = ({ shadowRoot }) => html`
|
|||
|
||||
A `checkbox-indeterminate`'s value is neither true nor false, but is instead indeterminate, meaning that its state cannot be determined or stated in pure binary terms, based on it's `checkbox` children.
|
||||
|
||||
```js preview-story
|
||||
export const indeterminateSiblings = () => html`
|
||||
```html preview-story
|
||||
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
|
||||
<lion-checkbox-indeterminate label="Old Greek scientists">
|
||||
<lion-checkbox
|
||||
slot="checkbox"
|
||||
label="Archimedes"
|
||||
.choiceValue=${'Archimedes'}
|
||||
></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
|
||||
<lion-checkbox label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
|
||||
<lion-checkbox
|
||||
slot="checkbox"
|
||||
label="Pythagoras"
|
||||
.choiceValue=${'Pythagoras'}
|
||||
></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
<lion-checkbox-indeterminate label="17th Century scientists">
|
||||
<lion-checkbox
|
||||
slot="checkbox"
|
||||
label="Isaac Newton"
|
||||
.choiceValue=${'Isaac Newton'}
|
||||
></lion-checkbox>
|
||||
<lion-checkbox
|
||||
slot="checkbox"
|
||||
label="Galileo Galilei"
|
||||
.choiceValue=${'Galileo Galilei'}
|
||||
></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
`;
|
||||
```
|
||||
|
||||
The `checkbox-indeterminate` can have another `checkbox-indeterminate` as a child.
|
||||
|
||||
```js preview-story
|
||||
export const indeterminateChildren = () => html`
|
||||
```html preview-story
|
||||
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
|
||||
<lion-checkbox-indeterminate label="Scientists">
|
||||
<lion-checkbox
|
||||
slot="checkbox"
|
||||
label="Isaac Newton"
|
||||
.choiceValue=${'Isaac Newton'}
|
||||
></lion-checkbox>
|
||||
<lion-checkbox
|
||||
slot="checkbox"
|
||||
label="Galileo Galilei"
|
||||
.choiceValue=${'Galileo Galilei'}
|
||||
></lion-checkbox>
|
||||
<lion-checkbox-indeterminate slot="checkbox" label="Old Greek scientists">
|
||||
<lion-checkbox-indeterminate label="Old Greek scientists">
|
||||
<lion-checkbox
|
||||
slot="checkbox"
|
||||
label="Archimedes"
|
||||
.choiceValue=${'Archimedes'}
|
||||
></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
|
||||
<lion-checkbox label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
|
||||
<lion-checkbox
|
||||
slot="checkbox"
|
||||
label="Pythagoras"
|
||||
.choiceValue=${'Pythagoras'}
|
||||
></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
`;
|
||||
```
|
||||
|
||||
You can also use `mixed-state` attribute so your indeterminate checkbox toggles through three states (indeterminate, checked, unchecked), where for indeterminate state the old children states are restored when you toggle back into this.
|
||||
|
||||
```js preview-story
|
||||
export const mixedState = () => html`
|
||||
```html preview-story
|
||||
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
|
||||
<lion-checkbox-indeterminate mixed-state label="Scientists">
|
||||
<lion-checkbox
|
||||
slot="checkbox"
|
||||
label="Isaac Newton"
|
||||
.choiceValue=${'Isaac Newton'}
|
||||
></lion-checkbox>
|
||||
<lion-checkbox
|
||||
slot="checkbox"
|
||||
label="Galileo Galilei"
|
||||
.choiceValue=${'Galileo Galilei'}
|
||||
></lion-checkbox>
|
||||
<lion-checkbox-indeterminate mixed-state slot="checkbox" label="Old Greek scientists">
|
||||
<lion-checkbox-indeterminate mixed-state label="Old Greek scientists">
|
||||
<lion-checkbox
|
||||
slot="checkbox"
|
||||
label="Archimedes"
|
||||
.choiceValue=${'Archimedes'}
|
||||
></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
|
||||
<lion-checkbox label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
|
||||
<lion-checkbox
|
||||
slot="checkbox"
|
||||
label="Pythagoras"
|
||||
.choiceValue=${'Pythagoras'}
|
||||
></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
`;
|
||||
```
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
|
|||
:host .choice-field__nested-checkboxes {
|
||||
display: block;
|
||||
}
|
||||
::slotted([slot='checkbox']) {
|
||||
::slotted(*) {
|
||||
padding-left: 8px;
|
||||
}
|
||||
`,
|
||||
|
|
@ -198,7 +198,7 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
|
|||
_afterTemplate() {
|
||||
return html`
|
||||
<div class="choice-field__nested-checkboxes">
|
||||
<slot name="checkbox"></slot>
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
import { expect, fixture } from '@open-wc/testing';
|
||||
import { html } from 'lit/static-html.js';
|
||||
import { expect, fixture, html, unsafeStatic } from '@open-wc/testing';
|
||||
import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js';
|
||||
import '@lion/ui/define/lion-checkbox.js';
|
||||
import '@lion/ui/define/lion-checkbox-group.js';
|
||||
import '@lion/ui/define/lion-checkbox-indeterminate.js';
|
||||
|
||||
/**
|
||||
* @typedef {import('../src/LionCheckbox.js').LionCheckbox} LionCheckbox
|
||||
|
|
@ -25,14 +21,40 @@ function getCheckboxIndeterminateMembers(el) {
|
|||
};
|
||||
}
|
||||
|
||||
describe('<lion-checkbox-indeterminate>', () => {
|
||||
/**
|
||||
* @param {{tagString?: string, groupTagString?: string, childTagString?: string}} [customConfig]
|
||||
*/
|
||||
export function runCheckboxIndeterminateSuite(customConfig) {
|
||||
const cfg = {
|
||||
tagString: null,
|
||||
groupTagString: null,
|
||||
childTagString: null,
|
||||
...customConfig,
|
||||
};
|
||||
|
||||
/** @type {{_$litStatic$: any}} */
|
||||
let tag;
|
||||
/** @type {{_$litStatic$: any}} */
|
||||
let groupTag;
|
||||
/** @type {{_$litStatic$: any}} */
|
||||
let childTag;
|
||||
|
||||
before(async () => {
|
||||
tag = unsafeStatic(cfg.tagString);
|
||||
groupTag = unsafeStatic(cfg.groupTagString);
|
||||
childTag = unsafeStatic(cfg.childTagString);
|
||||
});
|
||||
|
||||
describe('CheckboxIndeterminate', async () => {
|
||||
/** @type {{_$litStatic$: any}} */
|
||||
|
||||
it('should have type = checkbox', async () => {
|
||||
// Arrange
|
||||
const el = await fixture(html`
|
||||
<lion-checkbox-indeterminate
|
||||
<${tag}
|
||||
name="checkbox"
|
||||
.choiceValue="${'male'}"
|
||||
></lion-checkbox-indeterminate>
|
||||
></${tag}>
|
||||
`);
|
||||
|
||||
// Assert
|
||||
|
|
@ -42,37 +64,38 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
it('should not be indeterminate by default if all children are unchecked', async () => {
|
||||
// Arrange
|
||||
const el = await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]">
|
||||
<lion-checkbox-indeterminate label="Favorite scientists">
|
||||
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
<${groupTag} name="scientists[]">
|
||||
<${tag} label="Favorite scientists">
|
||||
<${childTag} label="Archimedes"></${childTag}>
|
||||
<${childTag} label="Francis Bacon"></${childTag}>
|
||||
<${childTag} label="Marie Curie"></${childTag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`);
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector('lion-checkbox-indeterminate')
|
||||
el.querySelector(`${cfg.tagString}`)
|
||||
);
|
||||
|
||||
// Assert
|
||||
expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.false;
|
||||
});
|
||||
});
|
||||
|
||||
it('should be indeterminate if one child is checked', async () => {
|
||||
// Arrange
|
||||
const el = /** @type {LionCheckboxGroup} */ await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]">
|
||||
<lion-checkbox-indeterminate label="Favorite scientists">
|
||||
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Francis Bacon" checked></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
<${groupTag} name="scientists[]">
|
||||
<${tag} label="Favorite scientists">
|
||||
<${childTag} label="Archimedes"></${childTag}>
|
||||
<${childTag} label="Francis Bacon" checked></${childTag}>
|
||||
<${childTag} label="Marie Curie"></${childTag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`);
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector('lion-checkbox-indeterminate')
|
||||
);
|
||||
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector(`${cfg.tagString}`)
|
||||
);
|
||||
// Assert
|
||||
expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.true;
|
||||
});
|
||||
|
|
@ -81,17 +104,17 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
// Arrange
|
||||
const el = /** @type {LionCheckboxGroup} */ (
|
||||
await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]">
|
||||
<lion-checkbox-indeterminate label="Favorite scientists">
|
||||
<lion-checkbox slot="checkbox" label="Archimedes" checked></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Francis Bacon" checked></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Marie Curie" checked></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
<${groupTag} name="scientists[]">
|
||||
<${tag} label="Favorite scientists">
|
||||
<${childTag} label="Archimedes" checked></${childTag}>
|
||||
<${childTag} label="Francis Bacon" checked></${childTag}>
|
||||
<${childTag} label="Marie Curie" checked></${childTag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`)
|
||||
);
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector('lion-checkbox-indeterminate')
|
||||
el.querySelector(`${cfg.tagString}`)
|
||||
);
|
||||
|
||||
// Assert
|
||||
|
|
@ -103,17 +126,17 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
// Arrange
|
||||
const el = /** @type {LionCheckboxGroup} */ (
|
||||
await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]">
|
||||
<lion-checkbox-indeterminate label="Favorite scientists">
|
||||
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
<${groupTag} name="scientists[]">
|
||||
<${tag} label="Favorite scientists">
|
||||
<${childTag} label="Archimedes"></${childTag}>
|
||||
<${childTag} label="Francis Bacon"></${childTag}>
|
||||
<${childTag} label="Marie Curie"></${childTag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`)
|
||||
);
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector('lion-checkbox-indeterminate')
|
||||
el.querySelector(`${cfg.tagString}`)
|
||||
);
|
||||
|
||||
const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
|
||||
|
|
@ -130,17 +153,17 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
// Arrange
|
||||
const el = /** @type {LionCheckboxGroup} */ (
|
||||
await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]">
|
||||
<lion-checkbox-indeterminate label="Favorite scientists">
|
||||
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
<${groupTag} name="scientists[]">
|
||||
<${tag} label="Favorite scientists">
|
||||
<${childTag} label="Archimedes"></${childTag}>
|
||||
<${childTag} label="Francis Bacon"></${childTag}>
|
||||
<${childTag} label="Marie Curie"></${childTag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`)
|
||||
);
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector('lion-checkbox-indeterminate')
|
||||
el.querySelector(`${cfg.tagString}`)
|
||||
);
|
||||
const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
|
||||
|
||||
|
|
@ -159,17 +182,17 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
// Arrange
|
||||
const el = /** @type {LionCheckboxGroup} */ (
|
||||
await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]">
|
||||
<lion-checkbox-indeterminate label="Favorite scientists">
|
||||
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Francis Bacon" disabled></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
<${groupTag} name="scientists[]">
|
||||
<${tag} label="Favorite scientists">
|
||||
<${childTag} label="Archimedes"></${childTag}>
|
||||
<${childTag} label="Francis Bacon" disabled></${childTag}>
|
||||
<${childTag} label="Marie Curie"></${childTag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`)
|
||||
);
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector('lion-checkbox-indeterminate')
|
||||
el.querySelector(`${cfg.tagString}`)
|
||||
);
|
||||
const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
|
||||
|
||||
|
|
@ -187,17 +210,17 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
// Arrange
|
||||
const el = /** @type {LionCheckboxGroup} */ (
|
||||
await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]">
|
||||
<lion-checkbox-indeterminate label="Favorite scientists">
|
||||
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Francis Bacon" checked></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
<${groupTag} name="scientists[]">
|
||||
<${tag} label="Favorite scientists">
|
||||
<${childTag} label="Archimedes"></${childTag}>
|
||||
<${childTag} label="Francis Bacon" checked></${childTag}>
|
||||
<${childTag} label="Marie Curie"></${childTag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`)
|
||||
);
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector('lion-checkbox-indeterminate')
|
||||
el.querySelector(`${cfg.tagString}`)
|
||||
);
|
||||
const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
|
||||
|
||||
|
|
@ -216,17 +239,17 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
// Arrange
|
||||
const el = /** @type {LionCheckboxGroup} */ (
|
||||
await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]">
|
||||
<lion-checkbox-indeterminate label="Favorite scientists">
|
||||
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Francis Bacon" disabled></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
<${groupTag} name="scientists[]">
|
||||
<${tag} label="Favorite scientists">
|
||||
<${childTag} label="Archimedes"></${childTag}>
|
||||
<${childTag} label="Francis Bacon" disabled></${childTag}>
|
||||
<${childTag} label="Marie Curie"></${childTag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`)
|
||||
);
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector('lion-checkbox-indeterminate')
|
||||
el.querySelector(`${cfg.tagString}`)
|
||||
);
|
||||
const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
|
||||
|
||||
|
|
@ -245,17 +268,17 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
// Arrange
|
||||
const el = /** @type {LionCheckboxGroup} */ (
|
||||
await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]">
|
||||
<lion-checkbox-indeterminate label="Favorite scientists">
|
||||
<lion-checkbox slot="checkbox" label="Archimedes" disabled></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Francis Bacon" disabled></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Marie Curie" disabled></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
<${groupTag} name="scientists[]">
|
||||
<${tag} label="Favorite scientists">
|
||||
<${childTag} label="Archimedes" disabled></${childTag}>
|
||||
<${childTag} label="Francis Bacon" disabled></${childTag}>
|
||||
<${childTag} label="Marie Curie" disabled></${childTag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`)
|
||||
);
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector('lion-checkbox-indeterminate')
|
||||
el.querySelector(`${cfg.tagString}`)
|
||||
);
|
||||
const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
|
||||
|
||||
|
|
@ -275,17 +298,17 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
// Arrange
|
||||
const el = /** @type {LionCheckboxGroup} */ (
|
||||
await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]">
|
||||
<lion-checkbox-indeterminate label="Favorite scientists">
|
||||
<lion-checkbox slot="checkbox" label="Archimedes" disabled checked></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Francis Bacon" disabled checked></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Marie Curie" disabled checked></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
<${groupTag} name="scientists[]">
|
||||
<${tag} label="Favorite scientists">
|
||||
<${childTag} label="Archimedes" disabled checked></${childTag}>
|
||||
<${childTag} label="Francis Bacon" disabled checked></${childTag}>
|
||||
<${childTag} label="Marie Curie" disabled checked></${childTag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`)
|
||||
);
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector('lion-checkbox-indeterminate')
|
||||
el.querySelector(`${cfg.tagString}`)
|
||||
);
|
||||
const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
|
||||
|
||||
|
|
@ -305,17 +328,17 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
// Arrange
|
||||
const el = /** @type {LionCheckboxGroup} */ (
|
||||
await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]">
|
||||
<lion-checkbox-indeterminate label="Favorite scientists">
|
||||
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
<${groupTag} name="scientists[]">
|
||||
<${tag} label="Favorite scientists">
|
||||
<${childTag} label="Archimedes"></${childTag}>
|
||||
<${childTag} label="Francis Bacon"></${childTag}>
|
||||
<${childTag} label="Marie Curie"></${childTag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`)
|
||||
);
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector('lion-checkbox-indeterminate')
|
||||
el.querySelector(`${cfg.tagString}`)
|
||||
);
|
||||
const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
|
||||
|
||||
|
|
@ -334,17 +357,17 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
// Arrange
|
||||
const el = /** @type {LionCheckboxGroup} */ (
|
||||
await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]">
|
||||
<lion-checkbox-indeterminate label="Favorite scientists">
|
||||
<lion-checkbox slot="checkbox" label="Archimedes" checked></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Francis Bacon" checked></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Marie Curie" checked></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
<${groupTag} name="scientists[]">
|
||||
<${tag} label="Favorite scientists">
|
||||
<${childTag} label="Archimedes" checked></${childTag}>
|
||||
<${childTag} label="Francis Bacon" checked></${childTag}>
|
||||
<${childTag} label="Marie Curie" checked></${childTag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`)
|
||||
);
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector('lion-checkbox-indeterminate')
|
||||
el.querySelector(`${cfg.tagString}`)
|
||||
);
|
||||
const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
|
||||
|
||||
|
|
@ -363,39 +386,39 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
// Arrange
|
||||
const el = /** @type {LionCheckboxGroup} */ (
|
||||
await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
|
||||
<lion-checkbox-indeterminate
|
||||
<${groupTag} name="scientists[]" label="Favorite scientists">
|
||||
<${tag}
|
||||
label="Old Greek scientists"
|
||||
id="first-checkbox-indeterminate"
|
||||
>
|
||||
<lion-checkbox
|
||||
<${childTag}
|
||||
slot="checkbox"
|
||||
label="Archimedes"
|
||||
.choiceValue=${'Archimedes'}
|
||||
></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
|
||||
<lion-checkbox
|
||||
></${childTag}>
|
||||
<${childTag} label="Plato" .choiceValue=${'Plato'}></${childTag}>
|
||||
<${childTag}
|
||||
slot="checkbox"
|
||||
label="Pythagoras"
|
||||
.choiceValue=${'Pythagoras'}
|
||||
></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
<lion-checkbox-indeterminate
|
||||
></${childTag}>
|
||||
</${tag}>
|
||||
<${tag}
|
||||
label="17th Century scientists"
|
||||
id="second-checkbox-indeterminate"
|
||||
>
|
||||
<lion-checkbox
|
||||
<${childTag}
|
||||
slot="checkbox"
|
||||
label="Isaac Newton"
|
||||
.choiceValue=${'Isaac Newton'}
|
||||
></lion-checkbox>
|
||||
<lion-checkbox
|
||||
></${childTag}>
|
||||
<${childTag}
|
||||
slot="checkbox"
|
||||
label="Galileo Galilei"
|
||||
.choiceValue=${'Galileo Galilei'}
|
||||
></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
></${childTag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`)
|
||||
);
|
||||
const elFirstIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
|
|
@ -429,37 +452,37 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
// Arrange
|
||||
const el = /** @type {LionCheckboxGroup} */ (
|
||||
await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
|
||||
<lion-checkbox-indeterminate label="Scientists" id="parent-checkbox-indeterminate">
|
||||
<lion-checkbox
|
||||
<${groupTag} name="scientists[]" label="Favorite scientists">
|
||||
<${tag} label="Scientists" id="parent-checkbox-indeterminate">
|
||||
<${childTag}
|
||||
slot="checkbox"
|
||||
label="Isaac Newton"
|
||||
.choiceValue=${'Isaac Newton'}
|
||||
></lion-checkbox>
|
||||
<lion-checkbox
|
||||
></${childTag}>
|
||||
<${childTag}
|
||||
slot="checkbox"
|
||||
label="Galileo Galilei"
|
||||
.choiceValue=${'Galileo Galilei'}
|
||||
></lion-checkbox>
|
||||
<lion-checkbox-indeterminate
|
||||
></${childTag}>
|
||||
<${tag}
|
||||
slot="checkbox"
|
||||
label="Old Greek scientists"
|
||||
id="nested-checkbox-indeterminate"
|
||||
>
|
||||
<lion-checkbox
|
||||
<${childTag}
|
||||
slot="checkbox"
|
||||
label="Archimedes"
|
||||
.choiceValue=${'Archimedes'}
|
||||
></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
|
||||
<lion-checkbox
|
||||
></${childTag}>
|
||||
<${childTag} label="Plato" .choiceValue=${'Plato'}></${childTag}>
|
||||
<${childTag}
|
||||
slot="checkbox"
|
||||
label="Pythagoras"
|
||||
.choiceValue=${'Pythagoras'}
|
||||
></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
></${childTag}>
|
||||
</${tag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`)
|
||||
);
|
||||
const elNestedIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
|
|
@ -517,24 +540,24 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
// Arrange
|
||||
const el = /** @type {LionCheckboxGroup} */ (
|
||||
await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]">
|
||||
<${groupTag} name="scientists[]">
|
||||
<div>
|
||||
Let's have some fun
|
||||
<div>Hello I'm a div</div>
|
||||
<lion-checkbox-indeterminate label="Favorite scientists">
|
||||
<${tag} label="Favorite scientists">
|
||||
<div>useless div</div>
|
||||
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox>
|
||||
<${childTag} label="Archimedes"></${childTag}>
|
||||
<${childTag} label="Francis Bacon"></${childTag}>
|
||||
<div>absolutely useless</div>
|
||||
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
<${childTag} label="Marie Curie"></${childTag}>
|
||||
</${tag}>
|
||||
</div>
|
||||
<div>Too much fun, stop it !</div>
|
||||
</lion-checkbox-group>
|
||||
</${groupTag}>
|
||||
`)
|
||||
);
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector('lion-checkbox-indeterminate')
|
||||
el.querySelector(`${cfg.tagString}`)
|
||||
);
|
||||
const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
|
||||
|
||||
|
|
@ -553,16 +576,16 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
describe('mixed-state', () => {
|
||||
it('can have a mixed-state (using mixed-state attribute), none -> indeterminate -> all, cycling through', async () => {
|
||||
const el = await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]">
|
||||
<lion-checkbox-indeterminate mixed-state label="Favorite scientists">
|
||||
<lion-checkbox slot="checkbox" label="Archimedes" checked></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
<${groupTag} name="scientists[]">
|
||||
<${tag} mixed-state label="Favorite scientists">
|
||||
<${childTag} label="Archimedes" checked></${childTag}>
|
||||
<${childTag} label="Francis Bacon"></${childTag}>
|
||||
<${childTag} label="Marie Curie"></${childTag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`);
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector('lion-checkbox-indeterminate')
|
||||
el.querySelector(`${cfg.tagString}`)
|
||||
);
|
||||
|
||||
expect(elIndeterminate.mixedState).to.be.true;
|
||||
|
|
@ -590,19 +613,19 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
|
||||
it('should reset to old child checkbox states when reaching indeterminate state', async () => {
|
||||
const el = await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]">
|
||||
<lion-checkbox-indeterminate mixed-state label="Favorite scientists">
|
||||
<lion-checkbox slot="checkbox" label="Archimedes" checked></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
<${groupTag} name="scientists[]">
|
||||
<${tag} mixed-state label="Favorite scientists">
|
||||
<${childTag} label="Archimedes" checked></${childTag}>
|
||||
<${childTag} label="Francis Bacon"></${childTag}>
|
||||
<${childTag} label="Marie Curie"></${childTag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`);
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector('lion-checkbox-indeterminate')
|
||||
el.querySelector(`${cfg.tagString}`)
|
||||
);
|
||||
const checkboxEls = /** @type {LionCheckbox[]} */ (
|
||||
Array.from(el.querySelectorAll('lion-checkbox'))
|
||||
Array.from(el.querySelectorAll(`${cfg.childTagString}`))
|
||||
);
|
||||
|
||||
expect(checkboxEls.map(checkboxEl => checkboxEl.checked)).to.eql([true, false, false]);
|
||||
|
|
@ -625,19 +648,19 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
|
||||
it('should no longer reach indeterminate state if the child boxes are all checked or all unchecked during indeterminate state', async () => {
|
||||
const el = await fixture(html`
|
||||
<lion-checkbox-group name="scientists[]">
|
||||
<lion-checkbox-indeterminate mixed-state label="Favorite scientists">
|
||||
<lion-checkbox slot="checkbox" label="Archimedes" checked></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox>
|
||||
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
|
||||
</lion-checkbox-indeterminate>
|
||||
</lion-checkbox-group>
|
||||
<${groupTag} name="scientists[]">
|
||||
<${tag} mixed-state label="Favorite scientists">
|
||||
<${childTag} label="Archimedes" checked></${childTag}>
|
||||
<${childTag} label="Francis Bacon"></${childTag}>
|
||||
<${childTag} label="Marie Curie"></${childTag}>
|
||||
</${tag}>
|
||||
</${groupTag}>
|
||||
`);
|
||||
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
|
||||
el.querySelector('lion-checkbox-indeterminate')
|
||||
el.querySelector(`${cfg.tagString}`)
|
||||
);
|
||||
const checkboxEls = /** @type {LionCheckbox[]} */ (
|
||||
Array.from(el.querySelectorAll('lion-checkbox'))
|
||||
Array.from(el.querySelectorAll(`${cfg.childTagString}`))
|
||||
);
|
||||
|
||||
// Check when all child boxes in indeterminate state are unchecked
|
||||
|
|
@ -671,7 +694,6 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
// @ts-ignore for testing purposes, we access this protected getter
|
||||
elIndeterminate._inputNode.click(); // unchecked
|
||||
await elIndeterminate.updateComplete;
|
||||
|
||||
for (const checkEl of checkboxEls) {
|
||||
// @ts-ignore for testing purposes, we access this protected getter
|
||||
checkEl._inputNode.click();
|
||||
|
|
@ -697,4 +719,4 @@ describe('<lion-checkbox-indeterminate>', () => {
|
|||
expect(elIndeterminate.indeterminate).to.be.false;
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -1,4 +1,10 @@
|
|||
import '@lion/ui/define/lion-checkbox-indeterminate.js';
|
||||
import { runChoiceInputMixinSuite } from '@lion/ui/form-core-test-suites.js';
|
||||
import { runCheckboxIndeterminateSuite } from '../test-suites/CheckboxIndeterminate.suite.js';
|
||||
|
||||
runChoiceInputMixinSuite({ tagString: 'lion-checkbox-indeterminate' });
|
||||
runCheckboxIndeterminateSuite({
|
||||
tagString: 'lion-checkbox-indeterminate',
|
||||
groupTagString: 'lion-checkbox-group',
|
||||
childTagString: 'lion-checkbox',
|
||||
});
|
||||
|
|
|
|||
1
packages/ui/exports/checkbox-group-test-suites.js
Normal file
1
packages/ui/exports/checkbox-group-test-suites.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
export { runCheckboxIndeterminateSuite } from '../components/checkbox-group/test-suites/CheckboxIndeterminate.suite.js';
|
||||
Loading…
Reference in a new issue