ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: add checkboxIndeterminate test suite (#2013)

Browse source
This commit is contained in:
gerjanvangeest 2023-06-14 16:24:34 +02:00 committed by GitHub
parent 02e61285dd
commit 7ec90dcb06
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 341 additions and 340 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/neat-poets-hope.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
add CheckboxIndeterminate test suite

9
docs/components/checkbox-group/overview.md
View file

@ -11,14 +11,12 @@ import '@lion/ui/define/lion-checkbox-group.js';
import '@lion/ui/define/lion-checkbox.js'; import '@lion/ui/define/lion-checkbox.js';
``` ```
```js preview-story ```html preview-story
export const main = () => html` <lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox> <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox> <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
<lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox> <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
</lion-checkbox-group> </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. > 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 ```js
import '@lion/ui/define/lion-checkbox-group.js'; import '@lion/ui/define/lion-checkbox-group.js';
import '@lion/ui/define/lion-checkbox-indeterminate.js';
import '@lion/ui/define/lion-checkbox.js'; import '@lion/ui/define/lion-checkbox.js';
``` ```

88
docs/components/checkbox-group/use-cases.md
View file

@ -45,43 +45,32 @@ 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`. You can pre-select options by targeting the `modelValue` object of the option and setting the `checked` property to `true`.
```js preview-story ```html preview-story
export const preselect = () => html` <lion-checkbox-group name="scientists" label="Favorite scientists">
<lion-checkbox-group name="scientists" label="Favorite scientists">
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox> <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'} checked></lion-checkbox> <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'} checked></lion-checkbox>
<lion-checkbox <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
label="Marie Curie" </lion-checkbox-group>
.modelValue=${{ value: 'Marie Curie', checked: true }}
></lion-checkbox>
</lion-checkbox-group>
`;
``` ```
## Disabled ## Disabled
You can disable the entire group by setting the `disabled` attribute on the `<lion-checkbox-group>`. You can disable the entire group by setting the `disabled` attribute on the `<lion-checkbox-group>`.
```js preview-story ```html preview-story
export const disabled = () => html` <lion-checkbox-group name="scientists[]" label="Favorite scientists" disabled>
<lion-checkbox-group name="scientists[]" label="Favorite scientists" disabled>
<lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox> <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
<lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox> <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
<lion-checkbox <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
label="Marie Curie" </lion-checkbox-group>
.modelValue=${{ value: 'Marie Curie', checked: true }}
></lion-checkbox>
</lion-checkbox-group>
`;
``` ```
## Label ## 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. 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 ```html preview-story
export const label = () => html` <lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox .choiceValue=${'Archimedes'}> <lion-checkbox .choiceValue=${'Archimedes'}>
<label slot="label" <label slot="label"
><a href="https://wikipedia.org/wiki/Archimedes" target="_blank">Archimedes</a></label ><a href="https://wikipedia.org/wiki/Archimedes" target="_blank">Archimedes</a></label
@ -97,17 +86,15 @@ export const label = () => html`
><a href="https://wikipedia.org/wiki/Marie_Curie" target="_blank">Marie Curie</a></label ><a href="https://wikipedia.org/wiki/Marie_Curie" target="_blank">Marie Curie</a></label
> >
</lion-checkbox> </lion-checkbox>
</lion-checkbox-group> </lion-checkbox-group>
`;
``` ```
## Help text ## Help text
You can add help text on each checkbox with `help-text` attribute on the `<lion-checkbox>`. You can add help text on each checkbox with `help-text` attribute on the `<lion-checkbox>`.
```js preview-story ```html preview-story
export const helpText = () => html` <lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox <lion-checkbox
label="Archimedes" label="Archimedes"
.choiceValue=${'Archimedes'} .choiceValue=${'Archimedes'}
@ -123,8 +110,7 @@ export const helpText = () => html`
.choiceValue=${'Marie Curie'} .choiceValue=${'Marie Curie'}
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" 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>
</lion-checkbox-group> </lion-checkbox-group>
`;
``` ```
## Event ## 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. 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 ```html preview-story
export const indeterminateSiblings = () => html` <lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox-indeterminate label="Old Greek scientists"> <lion-checkbox-indeterminate label="Old Greek scientists">
<lion-checkbox <lion-checkbox
slot="checkbox"
label="Archimedes" label="Archimedes"
.choiceValue=${'Archimedes'} .choiceValue=${'Archimedes'}
></lion-checkbox> ></lion-checkbox>
<lion-checkbox slot="checkbox" label="Plato" .choiceValue=${'Plato'}></lion-checkbox> <lion-checkbox label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
<lion-checkbox <lion-checkbox
slot="checkbox"
label="Pythagoras" label="Pythagoras"
.choiceValue=${'Pythagoras'} .choiceValue=${'Pythagoras'}
></lion-checkbox> ></lion-checkbox>
</lion-checkbox-indeterminate> </lion-checkbox-indeterminate>
<lion-checkbox-indeterminate label="17th Century scientists"> <lion-checkbox-indeterminate label="17th Century scientists">
<lion-checkbox <lion-checkbox
slot="checkbox"
label="Isaac Newton" label="Isaac Newton"
.choiceValue=${'Isaac Newton'} .choiceValue=${'Isaac Newton'}
></lion-checkbox> ></lion-checkbox>
<lion-checkbox <lion-checkbox
slot="checkbox"
label="Galileo Galilei" label="Galileo Galilei"
.choiceValue=${'Galileo Galilei'} .choiceValue=${'Galileo Galilei'}
></lion-checkbox> ></lion-checkbox>
</lion-checkbox-indeterminate> </lion-checkbox-indeterminate>
</lion-checkbox-group> </lion-checkbox-group>
`;
``` ```
The `checkbox-indeterminate` can have another `checkbox-indeterminate` as a child. The `checkbox-indeterminate` can have another `checkbox-indeterminate` as a child.
```js preview-story ```html preview-story
export const indeterminateChildren = () => html` <lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox-indeterminate label="Scientists"> <lion-checkbox-indeterminate label="Scientists">
<lion-checkbox <lion-checkbox
slot="checkbox"
label="Isaac Newton" label="Isaac Newton"
.choiceValue=${'Isaac Newton'} .choiceValue=${'Isaac Newton'}
></lion-checkbox> ></lion-checkbox>
<lion-checkbox <lion-checkbox
slot="checkbox"
label="Galileo Galilei" label="Galileo Galilei"
.choiceValue=${'Galileo Galilei'} .choiceValue=${'Galileo Galilei'}
></lion-checkbox> ></lion-checkbox>
<lion-checkbox-indeterminate slot="checkbox" label="Old Greek scientists"> <lion-checkbox-indeterminate label="Old Greek scientists">
<lion-checkbox <lion-checkbox
slot="checkbox"
label="Archimedes" label="Archimedes"
.choiceValue=${'Archimedes'} .choiceValue=${'Archimedes'}
></lion-checkbox> ></lion-checkbox>
<lion-checkbox slot="checkbox" label="Plato" .choiceValue=${'Plato'}></lion-checkbox> <lion-checkbox label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
<lion-checkbox <lion-checkbox
slot="checkbox"
label="Pythagoras" label="Pythagoras"
.choiceValue=${'Pythagoras'} .choiceValue=${'Pythagoras'}
></lion-checkbox> ></lion-checkbox>
</lion-checkbox-indeterminate> </lion-checkbox-indeterminate>
</lion-checkbox-indeterminate> </lion-checkbox-indeterminate>
</lion-checkbox-group> </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. 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 ```html preview-story
export const mixedState = () => html` <lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox-group name="scientists[]" label="Favorite scientists">
<lion-checkbox-indeterminate mixed-state label="Scientists"> <lion-checkbox-indeterminate mixed-state label="Scientists">
<lion-checkbox <lion-checkbox
slot="checkbox"
label="Isaac Newton" label="Isaac Newton"
.choiceValue=${'Isaac Newton'} .choiceValue=${'Isaac Newton'}
></lion-checkbox> ></lion-checkbox>
<lion-checkbox <lion-checkbox
slot="checkbox"
label="Galileo Galilei" label="Galileo Galilei"
.choiceValue=${'Galileo Galilei'} .choiceValue=${'Galileo Galilei'}
></lion-checkbox> ></lion-checkbox>
<lion-checkbox-indeterminate mixed-state slot="checkbox" label="Old Greek scientists"> <lion-checkbox-indeterminate mixed-state label="Old Greek scientists">
<lion-checkbox <lion-checkbox
slot="checkbox"
label="Archimedes" label="Archimedes"
.choiceValue=${'Archimedes'} .choiceValue=${'Archimedes'}
></lion-checkbox> ></lion-checkbox>
<lion-checkbox slot="checkbox" label="Plato" .choiceValue=${'Plato'}></lion-checkbox> <lion-checkbox label="Plato" .choiceValue=${'Plato'}></lion-checkbox>
<lion-checkbox <lion-checkbox
slot="checkbox"
label="Pythagoras" label="Pythagoras"
.choiceValue=${'Pythagoras'} .choiceValue=${'Pythagoras'}
></lion-checkbox> ></lion-checkbox>
</lion-checkbox-indeterminate> </lion-checkbox-indeterminate>
</lion-checkbox-indeterminate> </lion-checkbox-indeterminate>
</lion-checkbox-group> </lion-checkbox-group>
`;
``` ```

4
packages/ui/components/checkbox-group/src/LionCheckboxIndeterminate.js
View file

@ -13,7 +13,7 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
:host .choice-field__nested-checkboxes { :host .choice-field__nested-checkboxes {
display: block; display: block;
} }
::slotted([slot='checkbox']) { ::slotted(*) {
padding-left: 8px; padding-left: 8px;
} }
`, `,
@ -198,7 +198,7 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
_afterTemplate() { _afterTemplate() {
return html` return html`
<div class="choice-field__nested-checkboxes"> <div class="choice-field__nested-checkboxes">
<slot name="checkbox"></slot> <slot></slot>
</div> </div>
`; `;
} }

366
packages/ui/components/checkbox-group/test/lion-checkbox-indeterminate.test.js → packages/ui/components/checkbox-group/test-suites/CheckboxIndeterminate.suite.js
View file

@ -1,9 +1,5 @@
import { expect, fixture } from '@open-wc/testing'; import { expect, fixture, html, unsafeStatic } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
import { getFormControlMembers } from '@lion/ui/form-core-test-helpers.js'; 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 * @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 () => { it('should have type = checkbox', async () => {
// Arrange // Arrange
const el = await fixture(html` const el = await fixture(html`
<lion-checkbox-indeterminate <${tag}
name="checkbox" name="checkbox"
.choiceValue="${'male'}" .choiceValue="${'male'}"
></lion-checkbox-indeterminate> ></${tag}>
`); `);
// Assert // Assert
@ -42,37 +64,38 @@ describe('<lion-checkbox-indeterminate>', () => {
it('should not be indeterminate by default if all children are unchecked', async () => { it('should not be indeterminate by default if all children are unchecked', async () => {
// Arrange // Arrange
const el = await fixture(html` const el = await fixture(html`
<lion-checkbox-group name="scientists[]"> <${groupTag} name="scientists[]">
<lion-checkbox-indeterminate label="Favorite scientists"> <${tag} label="Favorite scientists">
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox> <${childTag} label="Archimedes"></${childTag}>
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox> <${childTag} label="Francis Bacon"></${childTag}>
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox> <${childTag} label="Marie Curie"></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`); `);
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector('lion-checkbox-indeterminate') el.querySelector(`${cfg.tagString}`)
); );
// Assert // Assert
expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.false; expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.false;
}); });
});
it('should be indeterminate if one child is checked', async () => { it('should be indeterminate if one child is checked', async () => {
// Arrange // Arrange
const el = /** @type {LionCheckboxGroup} */ await fixture(html` const el = /** @type {LionCheckboxGroup} */ await fixture(html`
<lion-checkbox-group name="scientists[]"> <${groupTag} name="scientists[]">
<lion-checkbox-indeterminate label="Favorite scientists"> <${tag} label="Favorite scientists">
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox> <${childTag} label="Archimedes"></${childTag}>
<lion-checkbox slot="checkbox" label="Francis Bacon" checked></lion-checkbox> <${childTag} label="Francis Bacon" checked></${childTag}>
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox> <${childTag} label="Marie Curie"></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`); `);
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector('lion-checkbox-indeterminate')
);
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector(`${cfg.tagString}`)
);
// Assert // Assert
expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.true; expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.true;
}); });
@ -81,17 +104,17 @@ describe('<lion-checkbox-indeterminate>', () => {
// Arrange // Arrange
const el = /** @type {LionCheckboxGroup} */ ( const el = /** @type {LionCheckboxGroup} */ (
await fixture(html` await fixture(html`
<lion-checkbox-group name="scientists[]"> <${groupTag} name="scientists[]">
<lion-checkbox-indeterminate label="Favorite scientists"> <${tag} label="Favorite scientists">
<lion-checkbox slot="checkbox" label="Archimedes" checked></lion-checkbox> <${childTag} label="Archimedes" checked></${childTag}>
<lion-checkbox slot="checkbox" label="Francis Bacon" checked></lion-checkbox> <${childTag} label="Francis Bacon" checked></${childTag}>
<lion-checkbox slot="checkbox" label="Marie Curie" checked></lion-checkbox> <${childTag} label="Marie Curie" checked></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`) `)
); );
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector('lion-checkbox-indeterminate') el.querySelector(`${cfg.tagString}`)
); );
// Assert // Assert
@ -103,17 +126,17 @@ describe('<lion-checkbox-indeterminate>', () => {
// Arrange // Arrange
const el = /** @type {LionCheckboxGroup} */ ( const el = /** @type {LionCheckboxGroup} */ (
await fixture(html` await fixture(html`
<lion-checkbox-group name="scientists[]"> <${groupTag} name="scientists[]">
<lion-checkbox-indeterminate label="Favorite scientists"> <${tag} label="Favorite scientists">
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox> <${childTag} label="Archimedes"></${childTag}>
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox> <${childTag} label="Francis Bacon"></${childTag}>
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox> <${childTag} label="Marie Curie"></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`) `)
); );
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector('lion-checkbox-indeterminate') el.querySelector(`${cfg.tagString}`)
); );
const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate); const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
@ -130,17 +153,17 @@ describe('<lion-checkbox-indeterminate>', () => {
// Arrange // Arrange
const el = /** @type {LionCheckboxGroup} */ ( const el = /** @type {LionCheckboxGroup} */ (
await fixture(html` await fixture(html`
<lion-checkbox-group name="scientists[]"> <${groupTag} name="scientists[]">
<lion-checkbox-indeterminate label="Favorite scientists"> <${tag} label="Favorite scientists">
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox> <${childTag} label="Archimedes"></${childTag}>
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox> <${childTag} label="Francis Bacon"></${childTag}>
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox> <${childTag} label="Marie Curie"></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`) `)
); );
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector('lion-checkbox-indeterminate') el.querySelector(`${cfg.tagString}`)
); );
const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate); const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
@ -159,17 +182,17 @@ describe('<lion-checkbox-indeterminate>', () => {
// Arrange // Arrange
const el = /** @type {LionCheckboxGroup} */ ( const el = /** @type {LionCheckboxGroup} */ (
await fixture(html` await fixture(html`
<lion-checkbox-group name="scientists[]"> <${groupTag} name="scientists[]">
<lion-checkbox-indeterminate label="Favorite scientists"> <${tag} label="Favorite scientists">
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox> <${childTag} label="Archimedes"></${childTag}>
<lion-checkbox slot="checkbox" label="Francis Bacon" disabled></lion-checkbox> <${childTag} label="Francis Bacon" disabled></${childTag}>
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox> <${childTag} label="Marie Curie"></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`) `)
); );
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector('lion-checkbox-indeterminate') el.querySelector(`${cfg.tagString}`)
); );
const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate); const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
@ -187,17 +210,17 @@ describe('<lion-checkbox-indeterminate>', () => {
// Arrange // Arrange
const el = /** @type {LionCheckboxGroup} */ ( const el = /** @type {LionCheckboxGroup} */ (
await fixture(html` await fixture(html`
<lion-checkbox-group name="scientists[]"> <${groupTag} name="scientists[]">
<lion-checkbox-indeterminate label="Favorite scientists"> <${tag} label="Favorite scientists">
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox> <${childTag} label="Archimedes"></${childTag}>
<lion-checkbox slot="checkbox" label="Francis Bacon" checked></lion-checkbox> <${childTag} label="Francis Bacon" checked></${childTag}>
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox> <${childTag} label="Marie Curie"></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`) `)
); );
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector('lion-checkbox-indeterminate') el.querySelector(`${cfg.tagString}`)
); );
const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate); const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
@ -216,17 +239,17 @@ describe('<lion-checkbox-indeterminate>', () => {
// Arrange // Arrange
const el = /** @type {LionCheckboxGroup} */ ( const el = /** @type {LionCheckboxGroup} */ (
await fixture(html` await fixture(html`
<lion-checkbox-group name="scientists[]"> <${groupTag} name="scientists[]">
<lion-checkbox-indeterminate label="Favorite scientists"> <${tag} label="Favorite scientists">
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox> <${childTag} label="Archimedes"></${childTag}>
<lion-checkbox slot="checkbox" label="Francis Bacon" disabled></lion-checkbox> <${childTag} label="Francis Bacon" disabled></${childTag}>
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox> <${childTag} label="Marie Curie"></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`) `)
); );
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector('lion-checkbox-indeterminate') el.querySelector(`${cfg.tagString}`)
); );
const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate); const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
@ -245,17 +268,17 @@ describe('<lion-checkbox-indeterminate>', () => {
// Arrange // Arrange
const el = /** @type {LionCheckboxGroup} */ ( const el = /** @type {LionCheckboxGroup} */ (
await fixture(html` await fixture(html`
<lion-checkbox-group name="scientists[]"> <${groupTag} name="scientists[]">
<lion-checkbox-indeterminate label="Favorite scientists"> <${tag} label="Favorite scientists">
<lion-checkbox slot="checkbox" label="Archimedes" disabled></lion-checkbox> <${childTag} label="Archimedes" disabled></${childTag}>
<lion-checkbox slot="checkbox" label="Francis Bacon" disabled></lion-checkbox> <${childTag} label="Francis Bacon" disabled></${childTag}>
<lion-checkbox slot="checkbox" label="Marie Curie" disabled></lion-checkbox> <${childTag} label="Marie Curie" disabled></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`) `)
); );
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector('lion-checkbox-indeterminate') el.querySelector(`${cfg.tagString}`)
); );
const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate); const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
@ -275,17 +298,17 @@ describe('<lion-checkbox-indeterminate>', () => {
// Arrange // Arrange
const el = /** @type {LionCheckboxGroup} */ ( const el = /** @type {LionCheckboxGroup} */ (
await fixture(html` await fixture(html`
<lion-checkbox-group name="scientists[]"> <${groupTag} name="scientists[]">
<lion-checkbox-indeterminate label="Favorite scientists"> <${tag} label="Favorite scientists">
<lion-checkbox slot="checkbox" label="Archimedes" disabled checked></lion-checkbox> <${childTag} label="Archimedes" disabled checked></${childTag}>
<lion-checkbox slot="checkbox" label="Francis Bacon" disabled checked></lion-checkbox> <${childTag} label="Francis Bacon" disabled checked></${childTag}>
<lion-checkbox slot="checkbox" label="Marie Curie" disabled checked></lion-checkbox> <${childTag} label="Marie Curie" disabled checked></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`) `)
); );
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector('lion-checkbox-indeterminate') el.querySelector(`${cfg.tagString}`)
); );
const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate); const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
@ -305,17 +328,17 @@ describe('<lion-checkbox-indeterminate>', () => {
// Arrange // Arrange
const el = /** @type {LionCheckboxGroup} */ ( const el = /** @type {LionCheckboxGroup} */ (
await fixture(html` await fixture(html`
<lion-checkbox-group name="scientists[]"> <${groupTag} name="scientists[]">
<lion-checkbox-indeterminate label="Favorite scientists"> <${tag} label="Favorite scientists">
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox> <${childTag} label="Archimedes"></${childTag}>
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox> <${childTag} label="Francis Bacon"></${childTag}>
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox> <${childTag} label="Marie Curie"></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`) `)
); );
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector('lion-checkbox-indeterminate') el.querySelector(`${cfg.tagString}`)
); );
const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate); const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
@ -334,17 +357,17 @@ describe('<lion-checkbox-indeterminate>', () => {
// Arrange // Arrange
const el = /** @type {LionCheckboxGroup} */ ( const el = /** @type {LionCheckboxGroup} */ (
await fixture(html` await fixture(html`
<lion-checkbox-group name="scientists[]"> <${groupTag} name="scientists[]">
<lion-checkbox-indeterminate label="Favorite scientists"> <${tag} label="Favorite scientists">
<lion-checkbox slot="checkbox" label="Archimedes" checked></lion-checkbox> <${childTag} label="Archimedes" checked></${childTag}>
<lion-checkbox slot="checkbox" label="Francis Bacon" checked></lion-checkbox> <${childTag} label="Francis Bacon" checked></${childTag}>
<lion-checkbox slot="checkbox" label="Marie Curie" checked></lion-checkbox> <${childTag} label="Marie Curie" checked></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`) `)
); );
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector('lion-checkbox-indeterminate') el.querySelector(`${cfg.tagString}`)
); );
const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate); const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
@ -363,39 +386,39 @@ describe('<lion-checkbox-indeterminate>', () => {
// Arrange // Arrange
const el = /** @type {LionCheckboxGroup} */ ( const el = /** @type {LionCheckboxGroup} */ (
await fixture(html` await fixture(html`
<lion-checkbox-group name="scientists[]" label="Favorite scientists"> <${groupTag} name="scientists[]" label="Favorite scientists">
<lion-checkbox-indeterminate <${tag}
label="Old Greek scientists" label="Old Greek scientists"
id="first-checkbox-indeterminate" id="first-checkbox-indeterminate"
> >
<lion-checkbox <${childTag}
slot="checkbox" slot="checkbox"
label="Archimedes" label="Archimedes"
.choiceValue=${'Archimedes'} .choiceValue=${'Archimedes'}
></lion-checkbox> ></${childTag}>
<lion-checkbox slot="checkbox" label="Plato" .choiceValue=${'Plato'}></lion-checkbox> <${childTag} label="Plato" .choiceValue=${'Plato'}></${childTag}>
<lion-checkbox <${childTag}
slot="checkbox" slot="checkbox"
label="Pythagoras" label="Pythagoras"
.choiceValue=${'Pythagoras'} .choiceValue=${'Pythagoras'}
></lion-checkbox> ></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
<lion-checkbox-indeterminate <${tag}
label="17th Century scientists" label="17th Century scientists"
id="second-checkbox-indeterminate" id="second-checkbox-indeterminate"
> >
<lion-checkbox <${childTag}
slot="checkbox" slot="checkbox"
label="Isaac Newton" label="Isaac Newton"
.choiceValue=${'Isaac Newton'} .choiceValue=${'Isaac Newton'}
></lion-checkbox> ></${childTag}>
<lion-checkbox <${childTag}
slot="checkbox" slot="checkbox"
label="Galileo Galilei" label="Galileo Galilei"
.choiceValue=${'Galileo Galilei'} .choiceValue=${'Galileo Galilei'}
></lion-checkbox> ></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`) `)
); );
const elFirstIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elFirstIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
@ -429,37 +452,37 @@ describe('<lion-checkbox-indeterminate>', () => {
// Arrange // Arrange
const el = /** @type {LionCheckboxGroup} */ ( const el = /** @type {LionCheckboxGroup} */ (
await fixture(html` await fixture(html`
<lion-checkbox-group name="scientists[]" label="Favorite scientists"> <${groupTag} name="scientists[]" label="Favorite scientists">
<lion-checkbox-indeterminate label="Scientists" id="parent-checkbox-indeterminate"> <${tag} label="Scientists" id="parent-checkbox-indeterminate">
<lion-checkbox <${childTag}
slot="checkbox" slot="checkbox"
label="Isaac Newton" label="Isaac Newton"
.choiceValue=${'Isaac Newton'} .choiceValue=${'Isaac Newton'}
></lion-checkbox> ></${childTag}>
<lion-checkbox <${childTag}
slot="checkbox" slot="checkbox"
label="Galileo Galilei" label="Galileo Galilei"
.choiceValue=${'Galileo Galilei'} .choiceValue=${'Galileo Galilei'}
></lion-checkbox> ></${childTag}>
<lion-checkbox-indeterminate <${tag}
slot="checkbox" slot="checkbox"
label="Old Greek scientists" label="Old Greek scientists"
id="nested-checkbox-indeterminate" id="nested-checkbox-indeterminate"
> >
<lion-checkbox <${childTag}
slot="checkbox" slot="checkbox"
label="Archimedes" label="Archimedes"
.choiceValue=${'Archimedes'} .choiceValue=${'Archimedes'}
></lion-checkbox> ></${childTag}>
<lion-checkbox slot="checkbox" label="Plato" .choiceValue=${'Plato'}></lion-checkbox> <${childTag} label="Plato" .choiceValue=${'Plato'}></${childTag}>
<lion-checkbox <${childTag}
slot="checkbox" slot="checkbox"
label="Pythagoras" label="Pythagoras"
.choiceValue=${'Pythagoras'} .choiceValue=${'Pythagoras'}
></lion-checkbox> ></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`) `)
); );
const elNestedIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elNestedIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
@ -517,24 +540,24 @@ describe('<lion-checkbox-indeterminate>', () => {
// Arrange // Arrange
const el = /** @type {LionCheckboxGroup} */ ( const el = /** @type {LionCheckboxGroup} */ (
await fixture(html` await fixture(html`
<lion-checkbox-group name="scientists[]"> <${groupTag} name="scientists[]">
<div> <div>
Let's have some fun Let's have some fun
<div>Hello I'm a div</div> <div>Hello I'm a div</div>
<lion-checkbox-indeterminate label="Favorite scientists"> <${tag} label="Favorite scientists">
<div>useless div</div> <div>useless div</div>
<lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox> <${childTag} label="Archimedes"></${childTag}>
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox> <${childTag} label="Francis Bacon"></${childTag}>
<div>absolutely useless</div> <div>absolutely useless</div>
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox> <${childTag} label="Marie Curie"></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</div> </div>
<div>Too much fun, stop it !</div> <div>Too much fun, stop it !</div>
</lion-checkbox-group> </${groupTag}>
`) `)
); );
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector('lion-checkbox-indeterminate') el.querySelector(`${cfg.tagString}`)
); );
const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate); const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
@ -553,16 +576,16 @@ describe('<lion-checkbox-indeterminate>', () => {
describe('mixed-state', () => { describe('mixed-state', () => {
it('can have a mixed-state (using mixed-state attribute), none -> indeterminate -> all, cycling through', async () => { it('can have a mixed-state (using mixed-state attribute), none -> indeterminate -> all, cycling through', async () => {
const el = await fixture(html` const el = await fixture(html`
<lion-checkbox-group name="scientists[]"> <${groupTag} name="scientists[]">
<lion-checkbox-indeterminate mixed-state label="Favorite scientists"> <${tag} mixed-state label="Favorite scientists">
<lion-checkbox slot="checkbox" label="Archimedes" checked></lion-checkbox> <${childTag} label="Archimedes" checked></${childTag}>
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox> <${childTag} label="Francis Bacon"></${childTag}>
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox> <${childTag} label="Marie Curie"></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`); `);
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector('lion-checkbox-indeterminate') el.querySelector(`${cfg.tagString}`)
); );
expect(elIndeterminate.mixedState).to.be.true; 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 () => { it('should reset to old child checkbox states when reaching indeterminate state', async () => {
const el = await fixture(html` const el = await fixture(html`
<lion-checkbox-group name="scientists[]"> <${groupTag} name="scientists[]">
<lion-checkbox-indeterminate mixed-state label="Favorite scientists"> <${tag} mixed-state label="Favorite scientists">
<lion-checkbox slot="checkbox" label="Archimedes" checked></lion-checkbox> <${childTag} label="Archimedes" checked></${childTag}>
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox> <${childTag} label="Francis Bacon"></${childTag}>
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox> <${childTag} label="Marie Curie"></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`); `);
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector('lion-checkbox-indeterminate') el.querySelector(`${cfg.tagString}`)
); );
const checkboxEls = /** @type {LionCheckbox[]} */ ( 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]); 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 () => { 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` const el = await fixture(html`
<lion-checkbox-group name="scientists[]"> <${groupTag} name="scientists[]">
<lion-checkbox-indeterminate mixed-state label="Favorite scientists"> <${tag} mixed-state label="Favorite scientists">
<lion-checkbox slot="checkbox" label="Archimedes" checked></lion-checkbox> <${childTag} label="Archimedes" checked></${childTag}>
<lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox> <${childTag} label="Francis Bacon"></${childTag}>
<lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox> <${childTag} label="Marie Curie"></${childTag}>
</lion-checkbox-indeterminate> </${tag}>
</lion-checkbox-group> </${groupTag}>
`); `);
const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ ( const elIndeterminate = /** @type {LionCheckboxIndeterminate} */ (
el.querySelector('lion-checkbox-indeterminate') el.querySelector(`${cfg.tagString}`)
); );
const checkboxEls = /** @type {LionCheckbox[]} */ ( 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 // 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 // @ts-ignore for testing purposes, we access this protected getter
elIndeterminate._inputNode.click(); // unchecked elIndeterminate._inputNode.click(); // unchecked
await elIndeterminate.updateComplete; await elIndeterminate.updateComplete;
for (const checkEl of checkboxEls) { for (const checkEl of checkboxEls) {
// @ts-ignore for testing purposes, we access this protected getter // @ts-ignore for testing purposes, we access this protected getter
checkEl._inputNode.click(); checkEl._inputNode.click();
@ -697,4 +719,4 @@ describe('<lion-checkbox-indeterminate>', () => {
expect(elIndeterminate.indeterminate).to.be.false; expect(elIndeterminate.indeterminate).to.be.false;
}); });
}); });
}); }

6
packages/ui/components/checkbox-group/test/lion-checkbox-indeterminate-integrations.test.js
View file

@ -1,4 +1,10 @@
import '@lion/ui/define/lion-checkbox-indeterminate.js'; import '@lion/ui/define/lion-checkbox-indeterminate.js';
import { runChoiceInputMixinSuite } from '@lion/ui/form-core-test-suites.js'; import { runChoiceInputMixinSuite } from '@lion/ui/form-core-test-suites.js';
import { runCheckboxIndeterminateSuite } from '../test-suites/CheckboxIndeterminate.suite.js';
runChoiceInputMixinSuite({ tagString: 'lion-checkbox-indeterminate' }); 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
View file

@ -0,0 +1 @@
export { runCheckboxIndeterminateSuite } from '../components/checkbox-group/test-suites/CheckboxIndeterminate.suite.js';