@triptease/tt-combobox 5.0.3

package/test/tt-combobox.test.ts

@@ -0,0 +1,413 @@
+import { html } from 'lit';
+import {fixture, expect, oneEvent, elementUpdated} from '@open-wc/testing';
+import { TtCombobox } from '../src/index.js';
+import '../src/tt-combobox.js';
+
+describe('TtCombobox', () => {
+  const getCombobox = (el: TtCombobox) => el.shadowRoot!.querySelector('[role="combobox"]') as HTMLInputElement;
+
+  const comboboxPlaceholderText = (combobox: HTMLInputElement) => combobox.getAttribute('placeholder');
+
+  it('Should render with the default placeholder text', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox id="combobox">
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+      </tt-combobox>`);
+
+    const combobox = getCombobox(el);
+
+    await expect(comboboxPlaceholderText(combobox)).to.equal('No options selected');
+  });
+
+  it('should render with the options visible when clicking the combobox', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox id="combobox">
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+      </tt-combobox>`);
+
+    const combobox = getCombobox(el);
+    combobox.click();
+
+    const options = el.shadowRoot!.querySelectorAll('[role="option"]');
+    await expect(options.length).to.equal(3);
+    options.forEach((option) => {
+      expect(option.checkVisibility()).to.be.true;
+    });
+  });
+
+  it('should update the placeholder with the selected option', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox id="combobox">
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+      </tt-combobox>`);
+
+    const combobox = getCombobox(el);
+    combobox.click();
+
+    const option = el.shadowRoot!.querySelector('[role="option"][data-value="2"]') as HTMLLIElement;
+    option.click();
+    await elementUpdated(el);
+    expect(comboboxPlaceholderText(combobox)).to.equal('Option 2');
+  });
+
+  it('should display select all option when multiselect is true and display-select-all is true, and select all options when clicked', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox id="combobox" multiselect display-select-all>
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+      </tt-combobox>`);
+
+    const combobox = getCombobox(el);
+    await combobox.click();
+
+    const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
+    expect(selectAll).to.exist;
+
+    selectAll.click();
+    await oneEvent(el, 'change');
+
+    const options = el.shadowRoot!.querySelectorAll('[role="option"]');
+    options.forEach((option) => {
+      expect(option.getAttribute('aria-selected')).to.equal('true');
+    });
+  });
+
+  it('should not allow a disabled option to be selected', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox id="combobox">
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2" disabled>Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+      </tt-combobox>`);
+
+    const combobox = getCombobox(el);
+    await combobox.click();
+
+    const option = el.shadowRoot!.querySelector('[role="option"][data-value="2"]') as HTMLLIElement;
+    option.click();
+
+    await expect(comboboxPlaceholderText(combobox)).to.equal('No options selected');
+  });
+
+  it('should disable the combobox when the disabled attribute is set', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox id="combobox" disabled>
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+      </tt-combobox>`);
+
+    const combobox = getCombobox(el);
+    expect(combobox.disabled).to.be.true;
+  });
+
+  xit('should render the error message', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox id="combobox">
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+        <span slot="error">There was an error</span>
+      </tt-combobox>`);
+    await elementUpdated(el);
+    const combobox = getCombobox(el);
+    const ariaInvalid = combobox.getAttribute('aria-invalid');
+    expect(ariaInvalid).to.equal('false');
+
+    const errorMessage = el.shadowRoot!.querySelector('[id="error-msg-combobox"]');
+    expect(errorMessage!.checkVisibility()).to.be.false;
+
+    el.invalid = true;
+
+    await elementUpdated(el);
+
+    expect(combobox).to.have.attribute('aria-invalid');
+    expect(errorMessage!.checkVisibility()).to.be.true;
+  });
+
+  it('should call the event handler when the value changes', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox id="combobox" >
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+      </tt-combobox>`);
+
+    const combobox = getCombobox(el);
+
+    combobox.click();
+
+    const option = el.shadowRoot!.querySelector('[role="option"][data-value="2"]') as HTMLLIElement;
+    option.click();
+
+    const event = await oneEvent(el, 'change');
+    const eventValue = (event.target! as HTMLLIElement).value;
+    expect(eventValue).to.be.an('array').that.includes('2');
+  })
+
+  it('Should prevent the form from submitting when it\'s required and no option is selected', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox id="combobox" required>
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+      </tt-combobox>`);
+
+
+    const form = document.createElement('form');
+    form.appendChild(el);
+    document.body.appendChild(form);
+
+    const submitEvent = new Event('submit', { bubbles: true });
+    form.dispatchEvent(submitEvent);
+
+    await elementUpdated(el);
+
+    expect(form.checkValidity()).to.be.false;
+
+  });
+
+  it('passes the a11y audit', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox></tt-combobox>`);
+
+    await expect(el).shadowDom.to.be.accessible();
+  });
+
+  it('should allow hidden options', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox id="combobox" multiselect display-select-all>
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+        <option slot="option" value="4" hidden>Option 4</option>
+      </tt-combobox>`);
+
+    const combobox = getCombobox(el);
+    combobox.click();
+
+    await combobox.click();
+
+    const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
+    expect(selectAll).to.exist;
+
+    selectAll.click();
+    const changeEvent = await oneEvent<InputEvent>(el, 'change');
+
+    expect(changeEvent).to.exist;
+    expect((changeEvent.target as TtCombobox).value).to.deep.equal(['1', '2', '3', '4']);
+
+    const hiddenOption = el.shadowRoot!.querySelector('[role="option"][data-value="4"]') as HTMLLIElement;
+    expect(hiddenOption).to.exist;
+    expect(hiddenOption).to.have.attribute('aria-hidden', 'true');
+  });
+
+  it('should not include hidden options in the placeholder text', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox id="combobox" multiselect display-select-all>
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+        <option slot="option" value="4" hidden>Option 4</option>
+      </tt-combobox>`);
+
+    const combobox = getCombobox(el);
+    combobox.click();
+
+    await combobox.click();
+
+    const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
+    expect(selectAll).to.exist;
+
+    selectAll.click();
+
+    (<HTMLLIElement>el.shadowRoot!.querySelector('[role="option"][data-value="3"]')).click();
+
+    const changeEvent = await oneEvent<InputEvent>(el, 'change');
+
+    expect(changeEvent).to.exist;
+    expect((changeEvent.target as TtCombobox).value).to.deep.equal(['1', '2', '4']);
+
+    expect(combobox.placeholder).to.equal('2 options selected');
+  });
+
+
+
+  it('should include selected options in the value', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox id="combobox" multiselect display-select-all>
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+        <option slot="option" value="4" selected>Option 4</option>
+      </tt-combobox>`);
+
+    await elementUpdated(el);
+    expect(el.value).to.deep.equal(['4']);
+  });
+
+  it('should not deselect preselected options', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox id="combobox" multiselect display-select-all>
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+        <option slot="option" value="4" selected>Option 4</option>
+      </tt-combobox>`);
+
+    await elementUpdated(el);
+
+    const combobox = getCombobox(el);
+    combobox.click();
+    const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
+    selectAll.click();
+    await elementUpdated(el);
+
+    expect(el.value).to.have.all.members(['1', '2', '3', '4']);
+
+    selectAll.click();
+    await elementUpdated(el);
+
+    expect(el.value).to.deep.equal(['4']);
+  });
+
+  it('should deselect an option when the selected attribute is removed', async () => {
+    const el = await fixture<TtCombobox>(html`
+      <tt-combobox id="combobox" multiselect display-select-all>
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+        <option slot="option" value="4" selected>Option 4</option>
+      </tt-combobox>`);
+
+    await elementUpdated(el);
+
+    expect(el.value).to.deep.equal(['4']);
+
+    const option = el.querySelector('option[selected]');
+    expect(option).not.to.be.null;
+
+    option!.removeAttribute('selected');
+
+    await elementUpdated(el);
+
+    expect(el.value).to.deep.equal([]);
+  });
+
+  describe('Form Integration', () => {
+    it('should include its values in FormData when submitted', async () => {
+      // Create a form with the combobox component
+      const form = await fixture<HTMLFormElement>(html`
+        <form method="post" action="#">
+          <input type="text" name="text_field" value="test_input">
+          <tt-combobox name="country_select" id="combobox">
+            <option slot="option" value="us">United States</option>
+            <option slot="option" value="ca">Canada</option>
+            <option slot="option" value="mx">Mexico</option>
+          </tt-combobox>
+          <button type="submit">Submit</button>
+        </form>
+      `);
+
+      const combobox = form.querySelector('tt-combobox') as TtCombobox;
+      expect(combobox).to.exist;
+
+      // Select an option by setting the value directly
+      combobox.value = ['ca'];
+      await elementUpdated(combobox);
+
+      // Create FormData from the form and verify the combobox's value is included
+      const formData = new FormData(form);
+      const comboboxValue = formData.get('country_select');
+
+      expect(comboboxValue).to.exist;
+      const parsedValue = JSON.parse(comboboxValue as string);
+      expect(parsedValue).to.deep.equal(['ca']);
+    });
+
+    it('should include multiple selected values in FormData when multiselect is true', async () => {
+      // Create a form with a multiselect combobox
+      const form = await fixture<HTMLFormElement>(html`
+        <form method="post" action="#">
+          <tt-combobox name="countries" multiselect id="multiselect-combobox">
+            <option slot="option" value="us">United States</option>
+            <option slot="option" value="ca">Canada</option>
+            <option slot="option" value="mx">Mexico</option>
+            <option slot="option" value="uk">United Kingdom</option>
+          </tt-combobox>
+          <button type="submit">Submit</button>
+        </form>
+      `);
+
+      const combobox = form.querySelector('tt-combobox') as TtCombobox;
+
+      // Select multiple options
+      combobox.value = ['us', 'mx', 'uk'];
+      await elementUpdated(combobox);
+
+      // Verify FormData contains the multiple selected values
+      const formData = new FormData(form);
+      const comboboxValue = formData.get('countries');
+
+      expect(comboboxValue).to.exist;
+      const parsedValue = JSON.parse(comboboxValue as string);
+      expect(parsedValue).to.be.an('array').that.includes('us');
+      expect(parsedValue).to.be.an('array').that.includes('mx');
+      expect(parsedValue).to.be.an('array').that.includes('uk');
+      expect(parsedValue).to.have.lengthOf(3);
+    });
+
+    it('should update FormData when selections change', async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form method="post" action="#">
+          <tt-combobox name="selection" id="combobox">
+            <option slot="option" value="option1">Option 1</option>
+            <option slot="option" value="option2">Option 2</option>
+            <option slot="option" value="option3">Option 3</option>
+          </tt-combobox>
+        </form>
+      `);
+
+      const combobox = form.querySelector('tt-combobox') as TtCombobox;
+
+      // Initial selection
+      combobox.value = ['option1'];
+      await elementUpdated(combobox);
+
+      // Check initial FormData
+      let formData = new FormData(form);
+      let value = JSON.parse(formData.get('selection') as string);
+      expect(value).to.deep.equal(['option1']);
+
+      // Change selection
+      combobox.value = ['option2'];
+      await elementUpdated(combobox);
+
+      // Check updated FormData
+      formData = new FormData(form);
+      value = JSON.parse(formData.get('selection') as string);
+      expect(value).to.deep.equal(['option2']);
+    });
+  });
+});

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "noEmitOnError": true,
+    "lib": ["es2021", "dom", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true,
+    "skipLibCheck": true
+  },
+  "include": ["**/*.ts"]
+}