@aquera/nile-elements 0.1.64-beta-1.1 → 0.1.64

package/dist/src/nile-virtual-select/nile-virtual-select.test.js

@@ -0,0 +1,631 @@
+/**
+ * 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';
+describe('<nile-virtual-select>', () => {
+    describe('maxOptionsVisible functionality', () => {
+        it('should show "+n More" when more options are selected than maxOptionsVisible', async () => {
+            const el = await fixture(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) => 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(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) => 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(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) => 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(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) => 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(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) => 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(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) => 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(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) => 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(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) => 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(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) => 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(html `
+        <nile-virtual-select multiple>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+            // Set renderItemFunction first
+            el.renderItemConfig = {
+                getDisplayText: (item) => 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(html `
+        <nile-virtual-select multiple>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+            // Set up test data
+            el.renderItemConfig = {
+                getDisplayText: (item) => 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(html `
+        <nile-virtual-select multiple>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+            // Set up test data
+            el.renderItemConfig = {
+                getDisplayText: (item) => 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;
+        });
+    });
+    describe('no results message functionality', () => {
+        it('should show no results message when data is empty and not loading', async () => {
+            const el = await fixture(html `
+        <nile-virtual-select>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+            // Set empty data and not loading
+            el.data = [];
+            el.optionsLoading = false;
+            el.open = true;
+            await el.updateComplete;
+            // Check that no results message is shown
+            const noResultsMessage = el.shadowRoot?.querySelector('.select__no-results');
+            expect(noResultsMessage).to.exist;
+            expect(noResultsMessage?.textContent?.trim()).to.equal('No results found');
+        });
+        it('should show custom no results message when provided', async () => {
+            const el = await fixture(html `
+        <nile-virtual-select no-results-message="No data available">
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+            // Set empty data and not loading
+            el.data = [];
+            el.optionsLoading = false;
+            el.open = true;
+            await el.updateComplete;
+            // Check that custom no results message is shown
+            const noResultsMessage = el.shadowRoot?.querySelector('.select__no-results');
+            expect(noResultsMessage).to.exist;
+            expect(noResultsMessage?.textContent?.trim()).to.equal('No data available');
+        });
+        it('should not show no results message when loading', async () => {
+            const el = await fixture(html `
+        <nile-virtual-select>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+            // Set empty data but loading
+            el.data = [];
+            el.optionsLoading = true;
+            el.open = true;
+            await el.updateComplete;
+            // Check that no results message is not shown when loading
+            const noResultsMessage = el.shadowRoot?.querySelector('.select__no-results');
+            expect(noResultsMessage).to.not.exist;
+        });
+        it('should show no results message when search returns no results', async () => {
+            const el = await fixture(html `
+        <nile-virtual-select search-enabled>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+            // Set up test data
+            el.data = [
+                { value: 'option-1', label: 'Apple' },
+                { value: 'option-2', label: 'Banana' },
+                { value: 'option-3', label: 'Cherry' }
+            ];
+            el.renderItemConfig = {
+                getDisplayText: (item) => item.label
+            };
+            el.open = true;
+            await el.updateComplete;
+            // Simulate search with no results
+            el.searchValue = 'Orange';
+            el.filterVirtualOptions('Orange');
+            await el.updateComplete;
+            // Check that no results message is shown
+            const noResultsMessage = el.shadowRoot?.querySelector('.select__no-results');
+            expect(noResultsMessage).to.exist;
+            expect(noResultsMessage?.textContent?.trim()).to.equal('No results found');
+        });
+        it('should hide no results message when data becomes available', async () => {
+            const el = await fixture(html `
+        <nile-virtual-select>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+            // Initially set empty data
+            el.data = [];
+            el.optionsLoading = false;
+            el.open = true;
+            await el.updateComplete;
+            // Check that no results message is shown initially
+            let noResultsMessage = el.shadowRoot?.querySelector('.select__no-results');
+            expect(noResultsMessage).to.exist;
+            // Now add data
+            el.data = [
+                { value: 'option-1', label: 'Option 1' },
+                { value: 'option-2', label: 'Option 2' }
+            ];
+            await el.updateComplete;
+            // Check that no results message is hidden
+            noResultsMessage = el.shadowRoot?.querySelector('.select__no-results');
+            expect(noResultsMessage).to.not.exist;
+        });
+    });
+    describe('scroll position reset functionality', () => {
+        it('should reset scroll position to top when dropdown opens', async () => {
+            const el = await fixture(html `
+        <nile-virtual-select>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+            // Set up test data with many items to ensure scrolling is possible
+            el.data = Array.from({ length: 100 }, (_, i) => ({
+                value: `option-${i}`,
+                label: `Option ${i}`
+            }));
+            el.renderItemConfig = {
+                getDisplayText: (item) => item.label
+            };
+            // Open the select to render options
+            el.open = true;
+            await el.updateComplete;
+            // Get the virtualized container
+            const virtualizedContainer = el.shadowRoot?.querySelector('.virtualized');
+            expect(virtualizedContainer).to.exist;
+            // Simulate scrolling to bottom
+            virtualizedContainer.scrollTop = 1000;
+            expect(virtualizedContainer.scrollTop).to.equal(1000);
+            // Close the dropdown
+            el.open = false;
+            await el.updateComplete;
+            // Reopen the dropdown
+            el.open = true;
+            await el.updateComplete;
+            // Check that scroll position is reset to top
+            expect(virtualizedContainer.scrollTop).to.equal(0);
+        });
+        it('should reset scroll position when search value changes', async () => {
+            const el = await fixture(html `
+        <nile-virtual-select search-enabled>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+            // Set up test data with many items
+            el.data = Array.from({ length: 100 }, (_, i) => ({
+                value: `option-${i}`,
+                label: `Option ${i}`
+            }));
+            el.renderItemConfig = {
+                getDisplayText: (item) => item.label
+            };
+            // Open the select
+            el.open = true;
+            await el.updateComplete;
+            // Get the virtualized container
+            const virtualizedContainer = el.shadowRoot?.querySelector('.virtualized');
+            expect(virtualizedContainer).to.exist;
+            // Simulate scrolling to bottom
+            virtualizedContainer.scrollTop = 1000;
+            expect(virtualizedContainer.scrollTop).to.equal(1000);
+            // Change search value
+            el.searchValue = 'test';
+            el.filterVirtualOptions('test');
+            await el.updateComplete;
+            // Check that scroll position is reset to top
+            expect(virtualizedContainer.scrollTop).to.equal(0);
+        });
+        it('should reset scroll position when show selected state changes', async () => {
+            const el = await fixture(html `
+        <nile-virtual-select multiple>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+            // Set up test data with many items
+            el.data = Array.from({ length: 100 }, (_, i) => ({
+                value: `option-${i}`,
+                label: `Option ${i}`
+            }));
+            el.renderItemConfig = {
+                getDisplayText: (item) => item.label
+            };
+            el.value = ['option-1', 'option-2', 'option-3'];
+            // Open the select
+            el.open = true;
+            await el.updateComplete;
+            // Get the virtualized container
+            const virtualizedContainer = el.shadowRoot?.querySelector('.virtualized');
+            expect(virtualizedContainer).to.exist;
+            // Simulate scrolling to bottom
+            virtualizedContainer.scrollTop = 1000;
+            expect(virtualizedContainer.scrollTop).to.equal(1000);
+            // Toggle show selected
+            const showSelectedCheckbox = el.shadowRoot?.querySelector('nile-checkbox');
+            showSelectedCheckbox?.click();
+            await el.updateComplete;
+            // Check that scroll position is reset to top
+            expect(virtualizedContainer.scrollTop).to.equal(0);
+        });
+    });
+    describe('small dataset handling', () => {
+        it('should render small datasets without virtualizer for better sizing', async () => {
+            const el = await fixture(html `
+        <nile-virtual-select>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+            // Set up test data with only 3 items (small dataset)
+            el.data = [
+                { value: 'option-1', label: 'Option 1' },
+                { value: 'option-2', label: 'Option 2' },
+                { value: 'option-3', label: 'Option 3' }
+            ];
+            el.renderItemConfig = {
+                getDisplayText: (item) => item.label
+            };
+            // Open the select to render options
+            el.open = true;
+            await el.updateComplete;
+            // Get the virtualized container
+            const virtualizedContainer = el.shadowRoot?.querySelector('.virtualized');
+            expect(virtualizedContainer).to.exist;
+            // For small datasets, there should be no lit-virtualizer element
+            const virtualizer = virtualizedContainer.querySelector('lit-virtualizer');
+            expect(virtualizer).to.not.exist;
+            // Check that all options are rendered directly
+            const options = virtualizedContainer.querySelectorAll('nile-option');
+            expect(options.length).to.equal(3);
+            // Verify the options have the correct values
+            const optionValues = Array.from(options).map(option => option.getAttribute('value'));
+            expect(optionValues).to.deep.equal(['option-1', 'option-2', 'option-3']);
+        });
+        it('should use virtualizer for large datasets', async () => {
+            const el = await fixture(html `
+        <nile-virtual-select>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+            // Set up test data with 100 items (large dataset)
+            el.data = Array.from({ length: 100 }, (_, i) => ({
+                value: `option-${i + 1}`,
+                label: `Option ${i + 1}`
+            }));
+            el.renderItemConfig = {
+                getDisplayText: (item) => item.label
+            };
+            // Open the select to render options
+            el.open = true;
+            await el.updateComplete;
+            // Get the virtualized container
+            const virtualizedContainer = el.shadowRoot?.querySelector('.virtualized');
+            expect(virtualizedContainer).to.exist;
+            // For large datasets, there should be a lit-virtualizer element
+            const virtualizer = virtualizedContainer.querySelector('lit-virtualizer');
+            expect(virtualizer).to.exist;
+        });
+        it('should fit snugly without extra space for small datasets', async () => {
+            const el = await fixture(html `
+        <nile-virtual-select>
+          <div slot="label">Test Select</div>
+        </nile-virtual-select>
+      `);
+            // Set up test data with only 3 items
+            el.data = [
+                { value: 'option-1', label: 'Option 1' },
+                { value: 'option-2', label: 'Option 2' },
+                { value: 'option-3', label: 'Option 3' }
+            ];
+            el.renderItemConfig = {
+                getDisplayText: (item) => item.label
+            };
+            // Open the select to render options
+            el.open = true;
+            await el.updateComplete;
+            // Get the listbox container
+            const listbox = el.shadowRoot?.querySelector('.select__listbox');
+            expect(listbox).to.exist;
+            // Get the virtualized container
+            const virtualizedContainer = el.shadowRoot?.querySelector('.virtualized');
+            expect(virtualizedContainer).to.exist;
+            // Check that the container doesn't have unnecessary extra space
+            // The height should be appropriate for the content
+            const containerHeight = virtualizedContainer.offsetHeight;
+            const options = virtualizedContainer.querySelectorAll('nile-option');
+            // Each option should be visible and the container should not have excessive height
+            expect(options.length).to.equal(3);
+            expect(containerHeight).to.be.greaterThan(0);
+            // The container should not have a fixed height that's too large for 3 items
+            // This is a qualitative check - the container should fit the content snugly
+            const totalOptionHeight = Array.from(options).reduce((total, option) => {
+                return total + option.offsetHeight;
+            }, 0);
+            // The container height should be close to the total option height (with some tolerance for padding)
+            expect(containerHeight).to.be.closeTo(totalOptionHeight, 20); // Allow 20px tolerance for padding
+        });
+    });
+});
+//# sourceMappingURL=nile-virtual-select.test.js.map