@aquera/nile-elements 0.1.49 → 0.1.50-beta-1.0

package/src/nile-virtual-select/nile-virtual-select.test.ts

@@ -0,0 +1,414 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { expect, fixture, html } from '@open-wc/testing';
+import type NileVirtualSelect from './nile-virtual-select';
+
+describe('<nile-virtual-select>', () => {
+  describe('maxOptionsVisible functionality', () => {
+    it('should show "+n More" when more options are selected than maxOptionsVisible', async () => {
+      const el = await fixture<NileVirtualSelect>(html`
+        <nile-virtual-select multiple max-options-visible="2">
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+
+      // Set up test data
+      el.data = [
+        { value: 'option-1', label: 'Option 1' },
+        { value: 'option-2', label: 'Option 2' },
+        { value: 'option-3', label: 'Option 3' },
+        { value: 'option-4', label: 'Option 4' }
+      ];
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
+
+      // Set multiple values
+      el.value = ['option-1', 'option-2', 'option-3'];
+
+      await el.updateComplete;
+
+      // Check that the tags count element exists
+      const tagsCount = el.shadowRoot?.querySelector('.select__tags-count');
+      expect(tagsCount).to.exist;
+      expect(tagsCount?.textContent?.trim()).to.equal('+1 More');
+    });
+
+    it('should not show "+n More" when selected options are within maxOptionsVisible limit', async () => {
+      const el = await fixture<NileVirtualSelect>(html`
+        <nile-virtual-select multiple max-options-visible="3">
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+
+      // Set up test data
+      el.data = [
+        { value: 'option-1', label: 'Option 1' },
+        { value: 'option-2', label: 'Option 2' },
+        { value: 'option-3', label: 'Option 3' }
+      ];
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
+
+      // Set values within limit
+      el.value = ['option-1', 'option-2'];
+
+      await el.updateComplete;
+
+      // Check that the tags count element does not exist
+      const tagsCount = el.shadowRoot?.querySelector('.select__tags-count');
+      expect(tagsCount).to.not.exist;
+    });
+
+    it('should show all tags when maxOptionsVisible is 0', async () => {
+      const el = await fixture<NileVirtualSelect>(html`
+        <nile-virtual-select multiple max-options-visible="0">
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+
+      // Set up test data
+      el.data = [
+        { value: 'option-1', label: 'Option 1' },
+        { value: 'option-2', label: 'Option 2' },
+        { value: 'option-3', label: 'Option 3' },
+        { value: 'option-4', label: 'Option 4' }
+      ];
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
+
+      // Set multiple values
+      el.value = ['option-1', 'option-2', 'option-3', 'option-4'];
+
+      await el.updateComplete;
+
+      // Check that the tags count element does not exist
+      const tagsCount = el.shadowRoot?.querySelector('.select__tags-count');
+      expect(tagsCount).to.not.exist;
+
+      // Check that all tags are rendered
+      const tags = el.shadowRoot?.querySelectorAll('nile-tag');
+      expect(tags?.length).to.equal(4);
+    });
+  });
+
+  describe('option width functionality', () => {
+    it('should render options with full width', async () => {
+      const el = await fixture<NileVirtualSelect>(html`
+        <nile-virtual-select>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+
+      // Set up test data
+      el.data = [
+        { value: 'option-1', label: 'Option 1' },
+        { value: 'option-2', label: 'Option 2' },
+        { value: 'option-3', label: 'Option 3' }
+      ];
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
+
+      // Open the select to render options
+      el.open = true;
+      await el.updateComplete;
+
+      // Get the virtualized content
+      const virtualizedContent = el.shadowRoot?.querySelector('.virtualized');
+      expect(virtualizedContent).to.exist;
+
+      // Check that the select__options wrapper exists
+      const selectOptions = el.shadowRoot?.querySelector('.select__options');
+      expect(selectOptions).to.exist;
+
+      // Verify the structure matches the regular select
+      const listbox = el.shadowRoot?.querySelector('.select__listbox');
+      expect(listbox).to.exist;
+      expect(listbox?.querySelector('.select__options')).to.exist;
+    });
+
+    it('should render options with proper CSS classes for width', async () => {
+      const el = await fixture<NileVirtualSelect>(html`
+        <nile-virtual-select>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+
+      // Set up test data
+      el.data = [
+        { value: 'option-1', label: 'Option 1' },
+        { value: 'option-2', label: 'Option 2' }
+      ];
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
+
+      // Open the select to render options
+      el.open = true;
+      await el.updateComplete;
+
+      // Check that the virtualized container has the proper class
+      const virtualized = el.shadowRoot?.querySelector('.virtualized');
+      expect(virtualized).to.exist;
+
+      // Check that the select__options container exists and has proper styling
+      const selectOptions = el.shadowRoot?.querySelector('.select__options');
+      expect(selectOptions).to.exist;
+
+      // Check that the virtualizer element exists and has proper width styling
+      const virtualizer = el.shadowRoot?.querySelector('lit-virtualizer');
+      expect(virtualizer).to.exist;
+    });
+
+    it('should render virtualized options with full width structure', async () => {
+      const el = await fixture<NileVirtualSelect>(html`
+        <nile-virtual-select>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+
+      // Set up test data
+      el.data = [
+        { value: 'option-1', label: 'Option 1' },
+        { value: 'option-2', label: 'Option 2' },
+        { value: 'option-3', label: 'Option 3' }
+      ];
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
+
+      // Open the select to render options
+      el.open = true;
+      await el.updateComplete;
+
+      // Verify the complete structure matches the regular select
+      const listbox = el.shadowRoot?.querySelector('.select__listbox');
+      expect(listbox).to.exist;
+
+      const selectOptions = listbox?.querySelector('.select__options');
+      expect(selectOptions).to.exist;
+
+      const virtualized = selectOptions?.querySelector('.virtualized');
+      expect(virtualized).to.exist;
+
+      // Check that the structure is properly nested
+      expect(listbox?.contains(selectOptions || null)).to.be.true;
+      expect(selectOptions?.contains(virtualized || null)).to.be.true;
+    });
+  });
+
+  describe('selected options highlighting', () => {
+    it('should highlight selected options with red border in single select mode', async () => {
+      const el = await fixture<NileVirtualSelect>(html`
+        <nile-virtual-select>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+
+      // Set up test data
+      el.data = [
+        { value: 'option-1', label: 'Option 1' },
+        { value: 'option-2', label: 'Option 2' },
+        { value: 'option-3', label: 'Option 3' }
+      ];
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
+
+      // Set a selected value
+      el.value = 'option-2';
+
+      // Open the select to render options
+      el.open = true;
+      await el.updateComplete;
+
+      // Check that the selected option has the selected attribute
+      const selectedOption = el.shadowRoot?.querySelector('nile-option[selected]');
+      expect(selectedOption).to.exist;
+      expect(selectedOption?.getAttribute('value')).to.equal('option-2');
+    });
+
+    it('should highlight selected options with red border in multiple select mode', async () => {
+      const el = await fixture<NileVirtualSelect>(html`
+        <nile-virtual-select multiple>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+
+      // Set up test data
+      el.data = [
+        { value: 'option-1', label: 'Option 1' },
+        { value: 'option-2', label: 'Option 2' },
+        { value: 'option-3', label: 'Option 3' }
+      ];
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
+
+      // Set multiple selected values
+      el.value = ['option-1', 'option-3'];
+
+      // Open the select to render options
+      el.open = true;
+      await el.updateComplete;
+
+      // Check that the selected options have the selected attribute
+      const selectedOptions = el.shadowRoot?.querySelectorAll('nile-option[selected]');
+      expect(selectedOptions?.length).to.equal(2);
+      
+      const selectedValues = Array.from(selectedOptions || []).map(option => option.getAttribute('value'));
+      expect(selectedValues).to.include('option-1');
+      expect(selectedValues).to.include('option-3');
+    });
+
+    it('should not highlight unselected options', async () => {
+      const el = await fixture<NileVirtualSelect>(html`
+        <nile-virtual-select>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+
+      // Set up test data
+      el.data = [
+        { value: 'option-1', label: 'Option 1' },
+        { value: 'option-2', label: 'Option 2' },
+        { value: 'option-3', label: 'Option 3' }
+      ];
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
+
+      // Set a selected value
+      el.value = 'option-2';
+
+      // Open the select to render options
+      el.open = true;
+      await el.updateComplete;
+
+      // Check that unselected options don't have the selected attribute
+      const unselectedOption = el.shadowRoot?.querySelector('nile-option[value="option-1"]');
+      expect(unselectedOption).to.exist;
+      expect(unselectedOption?.hasAttribute('selected')).to.be.false;
+    });
+
+    it('should show tags for pre-selected values when data is set after value', async () => {
+      const el = await fixture<NileVirtualSelect>(html`
+        <nile-virtual-select multiple>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+
+      // Set renderItemFunction first
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
+
+      // Set value before data
+      el.value = ['option-1', 'option-3'];
+
+      await el.updateComplete;
+
+      // Initially, no tags should be shown because data is empty
+      const initialTags = el.shadowRoot?.querySelectorAll('nile-tag');
+      expect(initialTags?.length).to.equal(0);
+
+      // Now set data
+      el.data = [
+        { value: 'option-1', label: 'Option 1' },
+        { value: 'option-2', label: 'Option 2' },
+        { value: 'option-3', label: 'Option 3' }
+      ];
+
+      await el.updateComplete;
+
+      // Now tags should be shown
+      const tags = el.shadowRoot?.querySelectorAll('nile-tag');
+      expect(tags?.length).to.equal(2);
+      
+      const tagTexts = Array.from(tags || []).map(tag => tag.textContent?.trim());
+      expect(tagTexts).to.include('Option 1');
+      expect(tagTexts).to.include('Option 3');
+    });
+
+    it('should show tags immediately without opening dropdown', async () => {
+      const el = await fixture<NileVirtualSelect>(html`
+        <nile-virtual-select multiple>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+
+      // Set up test data
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
+      el.data = [
+        { value: 'option-1', label: 'Option 1' },
+        { value: 'option-2', label: 'Option 2' },
+        { value: 'option-3', label: 'Option 3' }
+      ];
+      el.value = ['option-1', 'option-3'];
+
+      await el.updateComplete;
+
+      // Ensure dropdown is closed
+      el.open = false;
+      await el.updateComplete;
+
+      // Check that tags are shown even when dropdown is closed
+      const tags = el.shadowRoot?.querySelectorAll('nile-tag');
+      expect(tags?.length).to.equal(2);
+      
+      const tagTexts = Array.from(tags || []).map(tag => tag.textContent?.trim());
+      expect(tagTexts).to.include('Option 1');
+      expect(tagTexts).to.include('Option 3');
+    });
+
+    it('should show checkbox as checked for selected options in multiple mode', async () => {
+      const el = await fixture<NileVirtualSelect>(html`
+        <nile-virtual-select multiple>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+
+      // Set up test data
+      el.renderItemConfig = {
+        getDisplayText: (item: any) => item.label
+      };
+      el.data = [
+        { value: 'option-1', label: 'Option 1' },
+        { value: 'option-2', label: 'Option 2' },
+        { value: 'option-3', label: 'Option 3' }
+      ];
+      el.value = ['option-1', 'option-3'];
+
+      // Open the select to render options
+      el.open = true;
+      await el.updateComplete;
+
+      // Check that selected options have checked checkboxes
+      const selectedOptions = el.shadowRoot?.querySelectorAll('nile-option[selected]');
+      expect(selectedOptions?.length).to.equal(2);
+      
+      selectedOptions?.forEach(option => {
+        const checkbox = option.shadowRoot?.querySelector('nile-checkbox');
+        expect(checkbox).to.exist;
+        expect(checkbox?.checked).to.be.true;
+      });
+
+      // Check that unselected options have unchecked checkboxes
+      const unselectedOption = el.shadowRoot?.querySelector('nile-option[value="option-2"]');
+      expect(unselectedOption).to.exist;
+      const unselectedCheckbox = unselectedOption?.shadowRoot?.querySelector('nile-checkbox');
+      expect(unselectedCheckbox).to.exist;
+      expect(unselectedCheckbox?.checked).to.be.false;
+    });
+  });
+});