@lion/ui 0.0.1

package/components/checkbox-group/test/lion-checkbox-indeterminate.test.js

@@ -0,0 +1,700 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.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/LionCheckboxIndeterminate.js').LionCheckboxIndeterminate} LionCheckboxIndeterminate
+ * @typedef {import('../src/LionCheckboxGroup.js').LionCheckboxGroup} LionCheckboxGroup
+ */
+
+/**
+ * @param {LionCheckboxIndeterminate} el
+ */
+function getCheckboxIndeterminateMembers(el) {
+  const obj = getFormControlMembers(el);
+  return {
+    ...obj,
+    ...{
+      // @ts-ignore [allow-protected] in test
+      _subCheckboxes: el._subCheckboxes,
+    },
+  };
+}
+
+describe('<lion-checkbox-indeterminate>', () => {
+  it('should have type = checkbox', async () => {
+    // Arrange
+    const el = await fixture(html`
+      <lion-checkbox-indeterminate
+        name="checkbox"
+        .choiceValue="${'male'}"
+      ></lion-checkbox-indeterminate>
+    `);
+
+    // Assert
+    expect(el.getAttribute('type')).to.equal('checkbox');
+  });
+
+  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>
+    `);
+    const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('lion-checkbox-indeterminate')
+    );
+
+    // 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>
+    `);
+    const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('lion-checkbox-indeterminate')
+    );
+
+    // Assert
+    expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.true;
+  });
+
+  it('should be checked if all children are 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" 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>
+      `)
+    );
+    const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('lion-checkbox-indeterminate')
+    );
+
+    // Assert
+    expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.false;
+    expect(elIndeterminate?.checked).to.be.true;
+  });
+
+  it('should become 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"></lion-checkbox>
+            <lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
+          </lion-checkbox-indeterminate>
+        </lion-checkbox-group>
+      `)
+    );
+    const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('lion-checkbox-indeterminate')
+    );
+
+    const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
+
+    // Act
+    _subCheckboxes[0].checked = true;
+    await el.updateComplete;
+
+    // Assert
+    expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.true;
+  });
+
+  it('should become checked if all children are 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"></lion-checkbox>
+            <lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
+          </lion-checkbox-indeterminate>
+        </lion-checkbox-group>
+      `)
+    );
+    const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('lion-checkbox-indeterminate')
+    );
+    const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
+
+    // Act
+    _subCheckboxes[0].checked = true;
+    _subCheckboxes[1].checked = true;
+    _subCheckboxes[2].checked = true;
+    await el.updateComplete;
+
+    // Assert
+    expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.false;
+    expect(elIndeterminate?.checked).to.be.true;
+  });
+
+  it('should become indeterminate if all children except disabled ones are 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" disabled></lion-checkbox>
+            <lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
+          </lion-checkbox-indeterminate>
+        </lion-checkbox-group>
+      `)
+    );
+    const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('lion-checkbox-indeterminate')
+    );
+    const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
+
+    // Act
+    _subCheckboxes[0].checked = true;
+    _subCheckboxes[2].checked = true;
+    await el.updateComplete;
+
+    // Assert
+    expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.true;
+    expect(elIndeterminate?.checked).to.be.false;
+  });
+
+  it('should sync all children when parent is checked (from indeterminate to 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>
+      `)
+    );
+    const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('lion-checkbox-indeterminate')
+    );
+    const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
+
+    // Act
+    _inputNode.click();
+    await elIndeterminate.updateComplete;
+
+    // Assert
+    expect(elIndeterminate.hasAttribute('indeterminate')).to.be.false;
+    expect(_subCheckboxes[0].hasAttribute('checked')).to.be.true;
+    expect(_subCheckboxes[1].hasAttribute('checked')).to.be.true;
+    expect(_subCheckboxes[2].hasAttribute('checked')).to.be.true;
+  });
+
+  it('should not sync any disabled children when parent is checked (from indeterminate to 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" disabled></lion-checkbox>
+            <lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
+          </lion-checkbox-indeterminate>
+        </lion-checkbox-group>
+      `)
+    );
+    const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('lion-checkbox-indeterminate')
+    );
+    const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
+
+    // Act
+    _inputNode.click();
+    await elIndeterminate.updateComplete;
+
+    // Assert
+    expect(elIndeterminate.hasAttribute('indeterminate')).to.be.true;
+    expect(_subCheckboxes[0].hasAttribute('checked')).to.be.true;
+    expect(_subCheckboxes[1].hasAttribute('checked')).to.be.false;
+    expect(_subCheckboxes[2].hasAttribute('checked')).to.be.true;
+  });
+
+  it('should remain unchecked when parent is clicked and all children are disabled', 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" 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>
+      `)
+    );
+    const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('lion-checkbox-indeterminate')
+    );
+    const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
+
+    // Act
+    _inputNode.click();
+    await elIndeterminate.updateComplete;
+
+    // Assert
+    expect(elIndeterminate.hasAttribute('indeterminate')).to.be.false;
+    expect(elIndeterminate.hasAttribute('checked')).to.be.false;
+    expect(_subCheckboxes[0].hasAttribute('checked')).to.be.false;
+    expect(_subCheckboxes[1].hasAttribute('checked')).to.be.false;
+    expect(_subCheckboxes[2].hasAttribute('checked')).to.be.false;
+  });
+
+  it('should remain checked when parent is clicked and all children are disabled and 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" 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>
+      `)
+    );
+    const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('lion-checkbox-indeterminate')
+    );
+    const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
+
+    // Act
+    _inputNode.click();
+    await elIndeterminate.updateComplete;
+
+    // Assert
+    expect(elIndeterminate.hasAttribute('indeterminate')).to.be.false;
+    expect(elIndeterminate.hasAttribute('checked')).to.be.true;
+    expect(_subCheckboxes[0].hasAttribute('checked')).to.be.true;
+    expect(_subCheckboxes[1].hasAttribute('checked')).to.be.true;
+    expect(_subCheckboxes[2].hasAttribute('checked')).to.be.true;
+  });
+
+  it('should sync all children when parent is checked (from unchecked to 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"></lion-checkbox>
+            <lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
+          </lion-checkbox-indeterminate>
+        </lion-checkbox-group>
+      `)
+    );
+    const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('lion-checkbox-indeterminate')
+    );
+    const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
+
+    // Act
+    _inputNode.click();
+    await elIndeterminate.updateComplete;
+
+    // Assert
+    expect(elIndeterminate.hasAttribute('indeterminate')).to.be.false;
+    expect(_subCheckboxes[0].hasAttribute('checked')).to.be.true;
+    expect(_subCheckboxes[1].hasAttribute('checked')).to.be.true;
+    expect(_subCheckboxes[2].hasAttribute('checked')).to.be.true;
+  });
+
+  it('should sync all children when parent is checked (from checked to unchecked)', 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" 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>
+      `)
+    );
+    const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('lion-checkbox-indeterminate')
+    );
+    const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
+
+    // Act
+    _inputNode.click();
+    await elIndeterminate.updateComplete;
+
+    // Assert
+    expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.false;
+    expect(_subCheckboxes[0].hasAttribute('checked')).to.be.false;
+    expect(_subCheckboxes[1].hasAttribute('checked')).to.be.false;
+    expect(_subCheckboxes[2].hasAttribute('checked')).to.be.false;
+  });
+
+  it('should work as expected with siblings checkbox-indeterminate', async () => {
+    // Arrange
+    const el = /**  @type {LionCheckboxGroup} */ (
+      await fixture(html`
+        <lion-checkbox-group name="scientists[]" label="Favorite scientists">
+          <lion-checkbox-indeterminate
+            label="Old Greek scientists"
+            id="first-checkbox-indeterminate"
+          >
+            <lion-checkbox
+              slot="checkbox"
+              label="Archimedes"
+              .choiceValue=${'Archimedes'}
+            ></lion-checkbox>
+            <lion-checkbox slot="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"
+            id="second-checkbox-indeterminate"
+          >
+            <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>
+      `)
+    );
+    const elFirstIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('#first-checkbox-indeterminate')
+    );
+
+    const elSecondIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('#second-checkbox-indeterminate')
+    );
+
+    const elFirstSubCheckboxes = getCheckboxIndeterminateMembers(elFirstIndeterminate);
+    const elSecondSubCheckboxes = getCheckboxIndeterminateMembers(elSecondIndeterminate);
+
+    // Act - check the first sibling
+    elFirstSubCheckboxes._inputNode.click();
+    await elFirstIndeterminate.updateComplete;
+    await elSecondIndeterminate.updateComplete;
+
+    // Assert - the second sibling should not be affected
+
+    expect(elFirstIndeterminate.hasAttribute('indeterminate')).to.be.false;
+    expect(elFirstSubCheckboxes._subCheckboxes[0].hasAttribute('checked')).to.be.true;
+    expect(elFirstSubCheckboxes._subCheckboxes[1].hasAttribute('checked')).to.be.true;
+    expect(elFirstSubCheckboxes._subCheckboxes[2].hasAttribute('checked')).to.be.true;
+
+    expect(elSecondSubCheckboxes._subCheckboxes[0].hasAttribute('checked')).to.be.false;
+    expect(elSecondSubCheckboxes._subCheckboxes[1].hasAttribute('checked')).to.be.false;
+  });
+
+  it('should work as expected with nested indeterminate checkboxes', async () => {
+    // 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
+              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"
+              id="nested-checkbox-indeterminate"
+            >
+              <lion-checkbox
+                slot="checkbox"
+                label="Archimedes"
+                .choiceValue=${'Archimedes'}
+              ></lion-checkbox>
+              <lion-checkbox slot="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>
+      `)
+    );
+    const elNestedIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('#nested-checkbox-indeterminate')
+    );
+    const elParentIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('#parent-checkbox-indeterminate')
+    );
+    const elNestedSubCheckboxes = getCheckboxIndeterminateMembers(elNestedIndeterminate);
+    const elParentSubCheckboxes = getCheckboxIndeterminateMembers(elParentIndeterminate);
+
+    // Act - check a nested checkbox
+    if (elNestedIndeterminate) {
+      // @ts-ignore [allow-protected] in test
+      elNestedSubCheckboxes._subCheckboxes[0]._inputNode.click();
+    }
+    await el.updateComplete;
+
+    // Assert
+    expect(elNestedIndeterminate?.hasAttribute('indeterminate')).to.be.true;
+    expect(elParentIndeterminate?.hasAttribute('indeterminate')).to.be.true;
+
+    // Act - check all nested checkbox
+    // @ts-ignore [allow-protected] in test
+    if (elNestedIndeterminate) elNestedSubCheckboxes._subCheckboxes[1]._inputNode.click();
+    // @ts-ignore [allow-protected] in test
+    if (elNestedIndeterminate) elNestedSubCheckboxes._subCheckboxes[2]._inputNode.click();
+    await el.updateComplete;
+
+    // Assert
+    expect(elNestedIndeterminate?.hasAttribute('checked')).to.be.true;
+    expect(elNestedIndeterminate?.hasAttribute('indeterminate')).to.be.false;
+    expect(elParentIndeterminate?.hasAttribute('checked')).to.be.false;
+    expect(elParentIndeterminate?.hasAttribute('indeterminate')).to.be.true;
+
+    // Act - finally check all remaining checkbox
+    if (elParentIndeterminate) {
+      // @ts-ignore [allow-protected] in test
+      elParentSubCheckboxes._subCheckboxes[0]._inputNode.click();
+    }
+    if (elParentIndeterminate) {
+      // @ts-ignore [allow-protected] in test
+      elParentSubCheckboxes._subCheckboxes[1]._inputNode.click();
+    }
+    await el.updateComplete;
+
+    // Assert
+    expect(elNestedIndeterminate?.hasAttribute('checked')).to.be.true;
+    expect(elNestedIndeterminate?.hasAttribute('indeterminate')).to.be.false;
+    expect(elParentIndeterminate?.hasAttribute('checked')).to.be.true;
+    expect(elParentIndeterminate?.hasAttribute('indeterminate')).to.be.false;
+  });
+
+  it('should work as expected if extra html', async () => {
+    // Arrange
+    const el = /**  @type {LionCheckboxGroup} */ (
+      await fixture(html`
+        <lion-checkbox-group name="scientists[]">
+          <div>
+            Let's have some fun
+            <div>Hello I'm a div</div>
+            <lion-checkbox-indeterminate label="Favorite scientists">
+              <div>useless div</div>
+              <lion-checkbox slot="checkbox" label="Archimedes"></lion-checkbox>
+              <lion-checkbox slot="checkbox" label="Francis Bacon"></lion-checkbox>
+              <div>absolutely useless</div>
+              <lion-checkbox slot="checkbox" label="Marie Curie"></lion-checkbox>
+            </lion-checkbox-indeterminate>
+          </div>
+          <div>Too much fun, stop it !</div>
+        </lion-checkbox-group>
+      `)
+    );
+    const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+      el.querySelector('lion-checkbox-indeterminate')
+    );
+    const { _subCheckboxes } = getCheckboxIndeterminateMembers(elIndeterminate);
+
+    // Act
+    _subCheckboxes[0].checked = true;
+    _subCheckboxes[1].checked = true;
+    _subCheckboxes[2].checked = true;
+    await el.updateComplete;
+
+    // Assert
+    expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.false;
+    expect(elIndeterminate?.checked).to.be.true;
+  });
+
+  // https://www.w3.org/TR/wai-aria-practices-1.1/examples/checkbox/checkbox-2/checkbox-2.html
+  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>
+      `);
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector('lion-checkbox-indeterminate')
+      );
+
+      expect(elIndeterminate.mixedState).to.be.true;
+      expect(elIndeterminate.checked).to.be.false;
+      expect(elIndeterminate.indeterminate).to.be.true;
+
+      // @ts-ignore for testing purposes, we access this protected getter
+      elIndeterminate._inputNode.click();
+      await elIndeterminate.updateComplete;
+      expect(elIndeterminate.checked).to.be.true;
+      expect(elIndeterminate.indeterminate).to.be.false;
+
+      // @ts-ignore for testing purposes, we access this protected getter
+      elIndeterminate._inputNode.click();
+      await elIndeterminate.updateComplete;
+      expect(elIndeterminate.checked).to.be.false;
+      expect(elIndeterminate.indeterminate).to.be.false;
+
+      // @ts-ignore for testing purposes, we access this protected getter
+      elIndeterminate._inputNode.click();
+      await elIndeterminate.updateComplete;
+      expect(elIndeterminate.checked).to.be.false;
+      expect(elIndeterminate.indeterminate).to.be.true;
+    });
+
+    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>
+      `);
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector('lion-checkbox-indeterminate')
+      );
+      const checkboxEls = /** @type {LionCheckbox[]} */ (
+        Array.from(el.querySelectorAll('lion-checkbox'))
+      );
+
+      expect(checkboxEls.map(checkboxEl => checkboxEl.checked)).to.eql([true, false, false]);
+
+      // @ts-ignore for testing purposes, we access this protected getter
+      elIndeterminate._inputNode.click();
+      await elIndeterminate.updateComplete;
+      expect(checkboxEls.map(checkboxEl => checkboxEl.checked)).to.eql([true, true, true]);
+
+      // @ts-ignore for testing purposes, we access this protected getter
+      elIndeterminate._inputNode.click();
+      await elIndeterminate.updateComplete;
+      expect(checkboxEls.map(checkboxEl => checkboxEl.checked)).to.eql([false, false, false]);
+
+      // @ts-ignore for testing purposes, we access this protected getter
+      elIndeterminate._inputNode.click();
+      await elIndeterminate.updateComplete;
+      expect(checkboxEls.map(checkboxEl => checkboxEl.checked)).to.eql([true, false, false]);
+    });
+
+    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>
+      `);
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector('lion-checkbox-indeterminate')
+      );
+      const checkboxEls = /** @type {LionCheckbox[]} */ (
+        Array.from(el.querySelectorAll('lion-checkbox'))
+      );
+
+      // Check when all child boxes in indeterminate state are unchecked
+      // we don't have a tri-state, but a duo-state.
+
+      // @ts-ignore for testing purposes, we access this protected getter
+      checkboxEls[0]._inputNode.click();
+      await elIndeterminate.updateComplete;
+
+      // @ts-ignore for testing purposes, we access this protected getter
+      elIndeterminate._inputNode.click();
+      await elIndeterminate.updateComplete;
+      expect(elIndeterminate.checked).to.be.true;
+      expect(elIndeterminate.indeterminate).to.be.false;
+
+      // @ts-ignore for testing purposes, we access this protected getter
+      elIndeterminate._inputNode.click();
+      await elIndeterminate.updateComplete;
+      expect(elIndeterminate.checked).to.be.false;
+      expect(elIndeterminate.indeterminate).to.be.false;
+
+      // @ts-ignore for testing purposes, we access this protected getter
+      elIndeterminate._inputNode.click();
+      await elIndeterminate.updateComplete;
+      expect(elIndeterminate.checked).to.be.true;
+      expect(elIndeterminate.indeterminate).to.be.false;
+
+      // Check when all child boxes in indeterminate state are getting checked
+      // we also don't have a tri-state, but a duo-state.
+
+      // @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();
+        // Give each checking of the sub checkbox a chance to finish updating
+        // This means indeterminate state will be true for a bit and the state gets stored
+        await checkEl.updateComplete;
+        await elIndeterminate.updateComplete;
+      }
+
+      expect(elIndeterminate.checked).to.be.true;
+      expect(elIndeterminate.indeterminate).to.be.false;
+
+      // @ts-ignore for testing purposes, we access this protected getter
+      elIndeterminate._inputNode.click();
+      await elIndeterminate.updateComplete;
+      expect(elIndeterminate.checked).to.be.false;
+      expect(elIndeterminate.indeterminate).to.be.false;
+
+      // @ts-ignore for testing purposes, we access this protected getter
+      elIndeterminate._inputNode.click();
+      await elIndeterminate.updateComplete;
+      expect(elIndeterminate.checked).to.be.true;
+      expect(elIndeterminate.indeterminate).to.be.false;
+    });
+  });
+});