@triptease/tt-combobox 5.4.2 → 5.5.1

package/test/tt-combobox.test.ts

@@ -2,6 +2,7 @@ import { html } from 'lit';
 import { elementUpdated, expect, fixture, oneEvent } from '@open-wc/testing';
 import { TtCombobox } from '../src/index.js';
 import '../src/tt-combobox.js';
+import { TtOption } from '../src/tt-option/TtOption.js';
 
 describe('TtCombobox', () => {
   const getCombobox = (el: TtCombobox) => el.shadowRoot!.querySelector('[role="combobox"]') as HTMLInputElement;
@@ -40,7 +41,7 @@ describe('TtCombobox', () => {
     const combobox = getCombobox(el);
     combobox.click();
 
-    const options = el.shadowRoot!.querySelectorAll('[role="option"]');
+    const options = el.shadowRoot!.querySelectorAll('tt-option');
     await expect(options.length).to.equal(3);
     options.forEach((option) => {
       expect(option.checkVisibility()).to.be.true;
@@ -59,7 +60,7 @@ describe('TtCombobox', () => {
     const combobox = getCombobox(el);
     combobox.click();
 
-    const option = el.shadowRoot!.querySelector('[role="option"][data-value="2"]') as HTMLLIElement;
+    const option = el.shadowRoot!.querySelector('tt-option[value="2"]') as HTMLLIElement;
     option.click();
     await elementUpdated(el);
     expect(comboboxPlaceholderText(combobox)).to.equal('Option 2');
@@ -93,15 +94,15 @@ describe('TtCombobox', () => {
     const combobox = getCombobox(el);
     await combobox.click();
 
-    const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
+    const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as HTMLLIElement;
     expect(selectAll).to.exist;
 
     selectAll.click();
     await oneEvent(el, 'change');
 
-    const options = el.shadowRoot!.querySelectorAll('[role="option"]');
+    const options = el.shadowRoot!.querySelectorAll('tt-option');
     options.forEach((option) => {
-      expect(option.getAttribute('aria-selected')).to.equal('true');
+      expect(option.selected).to.be.true;
     });
   });
 
@@ -117,10 +118,17 @@ describe('TtCombobox', () => {
     const combobox = getCombobox(el);
     await combobox.click();
 
-    const option = el.shadowRoot!.querySelector('[role="option"][data-value="2"]') as HTMLLIElement;
+    await elementUpdated(el);
+
+    const option = el.shadowRoot!.querySelector('tt-option[value="2"]') as TtOption;
+
+    await expect(option.disabled).to.be.true;
     option.click();
 
+    await elementUpdated(el);
+
     await expect(comboboxPlaceholderText(combobox)).to.equal('No options selected');
+    await expect(el.value).to.deep.equal([]);
   });
 
   it('should disable the combobox when the disabled attribute is set', async () => {
@@ -174,7 +182,7 @@ describe('TtCombobox', () => {
 
     combobox.click();
 
-    const option = el.shadowRoot!.querySelector('[role="option"][data-value="2"]') as HTMLLIElement;
+    const option = el.shadowRoot!.querySelector('tt-option[value="2"]') as HTMLLIElement;
     option.click();
 
     const event = await oneEvent(el, 'change');
@@ -227,7 +235,7 @@ describe('TtCombobox', () => {
 
     await combobox.click();
 
-    const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
+    const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;
     expect(selectAll).to.exist;
 
     selectAll.click();
@@ -236,9 +244,8 @@ describe('TtCombobox', () => {
     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;
+    const hiddenOption = el.shadowRoot!.querySelector('tt-option[value="4"][hidden]') as TtOption;
     expect(hiddenOption).to.exist;
-    expect(hiddenOption).to.have.attribute('aria-hidden', 'true');
   });
 
   it('should not include hidden options in the placeholder text', async () => {
@@ -256,12 +263,12 @@ describe('TtCombobox', () => {
 
     await combobox.click();
 
-    const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
+    const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;
     expect(selectAll).to.exist;
 
     selectAll.click();
 
-    (<HTMLLIElement>el.shadowRoot!.querySelector('[role="option"][data-value="3"]')).click();
+    (<TtOption>el.shadowRoot!.querySelector('tt-option[value="3"]')).click();
 
     const changeEvent = await oneEvent<InputEvent>(el, 'change');
 
@@ -283,21 +290,18 @@ describe('TtCombobox', () => {
     const combobox = getCombobox(el);
     combobox.click();
 
-    let options = el.shadowRoot!.querySelectorAll('[role="option"]');
+    let options = el.shadowRoot!.querySelectorAll('tt-option');
     expect(options.length).to.equal(3);
 
 
-    const option = el.shadowRoot!.querySelector('[role="option"][data-value="2"]') as HTMLLIElement;
+    const option = el.shadowRoot!.querySelector('tt-option[value="2"]') as HTMLLIElement;
     option.click();
     await elementUpdated(el);
 
-    options = el.shadowRoot!.querySelectorAll('[role="option"]');
+    options = el.shadowRoot!.querySelectorAll('tt-option');
     options.forEach((o) => {
       expect(o.checkVisibility()).to.be.false;
     });
-
-
-
   });
 
 
@@ -335,9 +339,9 @@ describe('TtCombobox', () => {
       </tt-combobox>`);
 
     await expect(el.value).to.deep.equal(value);
-    const selectedOptions = el.shadowRoot!.querySelectorAll('li[role="option"][aria-selected="true"]');
+    const selectedOptions = el.shadowRoot!.querySelectorAll('tt-option[selected]') as NodeListOf<TtOption>;
     expect(selectedOptions).to.have.lengthOf(2);
-    await expect(Array.from(selectedOptions).map(option => option.getAttribute('data-value'))).to.deep.equal(value);
+    await expect(Array.from(selectedOptions).map(option => option.value)).to.deep.equal(value);
   });
 
   it('should display the passed placeholder when all options are selected', async () => {
@@ -352,7 +356,7 @@ describe('TtCombobox', () => {
     const combobox = getCombobox(el);
     combobox.click();
 
-    const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
+    const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;
     expect(selectAll).to.exist;
 
     selectAll.click();
@@ -374,7 +378,7 @@ describe('TtCombobox', () => {
     combobox.click();
 
     // Select all options
-    const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
+    const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;
     expect(selectAll).to.exist;
 
     selectAll.click();
@@ -386,7 +390,7 @@ describe('TtCombobox', () => {
     await elementUpdated(el);
 
     // Deselect "Option 1"
-    const option1 = el.shadowRoot!.querySelector('[role="option"][data-value="1"]') as HTMLLIElement;
+    const option1 = el.shadowRoot!.querySelector('tt-option[value="1"]') as TtOption;
     expect(option1).to.exist;
 
     option1.click();
@@ -398,7 +402,7 @@ describe('TtCombobox', () => {
     await elementUpdated(el);
 
     // Verify selected options
-    const selectedOptions = el.shadowRoot!.querySelectorAll('li[role="option"][aria-selected="true"]');
+    const selectedOptions = el.shadowRoot!.querySelectorAll('tt-option[selected]');
     expect(selectedOptions).to.have.lengthOf(2);
   });
 
@@ -420,12 +424,12 @@ describe('TtCombobox', () => {
     await elementUpdated(el);
 
     // Only Option 1 should be visible
-    const visibleOptions = el.shadowRoot!.querySelectorAll('[role="option"]:not([data-value="select-all"]):not([aria-hidden="true"])');
+    const visibleOptions = el.shadowRoot!.querySelectorAll('tt-option:not(.select-all, [hidden])');
     await expect(visibleOptions.length).to.equal(1);
-    await expect(visibleOptions[0].getAttribute('data-value')).to.equal('1');
+    await expect(visibleOptions[0].getAttribute('value')).to.equal('1');
 
     // Click "Select All"
-    const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
+    const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;
     selectAll.click();
     await elementUpdated(el);
 
@@ -451,7 +455,7 @@ describe('TtCombobox', () => {
     combobox.click();
 
     // Click "Select All"
-    const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
+    const selectAll = el.shadowRoot!.querySelector('tt-option.select-all') as TtOption;
     selectAll.click();
     await elementUpdated(el);