@aquera/nile-elements 1.5.2 → 1.5.3

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

@@ -1,631 +1,108 @@
-/**
- * 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
-        });
-    });
+import './nile-virtual-select';
+describe('NileVirtualSelect', () => {
+    it('1. renders', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el).to.exist; });
+    it('2. shadow root', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot).to.not.be.null; });
+    it('3. tag name', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.tagName.toLowerCase()).to.equal('nile-virtual-select'); });
+    it('4. is defined', async () => { expect(customElements.get('nile-virtual-select')).to.exist; });
+    it('5. has styles', async () => { expect((await import('./nile-virtual-select')).NileVirtualSelect.styles).to.exist; });
+    it('6. shadow mode', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.mode).to.equal('open'); });
+    it('7. isConnected', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.isConnected).to.be.true; });
+    it('8. removal', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); el.remove(); expect(el.isConnected).to.be.false; });
+    it('9. outerHTML', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.outerHTML).to.contain('nile-virtual-select'); });
+    it('10. matches', async () => { const el = await fixture(html `<nile-virtual-select class="x"></nile-virtual-select>`); expect(el.matches('.x')).to.be.true; });
+    it('11. closest', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.closest('nile-virtual-select')).to.equal(el); });
+    it('12. cloneNode', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.cloneNode(true).tagName.toLowerCase()).to.equal('nile-virtual-select'); });
+    it('13. dispatchEvent', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); let f = false; el.addEventListener('c', () => (f = true)); el.dispatchEvent(new Event('c')); expect(f).to.be.true; });
+    it('14. updateComplete', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); const r = await el.updateComplete; expect(r).to.not.be.undefined; });
+    it('15. render method', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.render).to.be.a('function'); });
+    it('16. shadowRoot host', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.host).to.equal(el); });
+    it('17. class attr', async () => { const el = await fixture(html `<nile-virtual-select class="vs"></nile-virtual-select>`); expect(el.classList.contains('vs')).to.be.true; });
+    it('18. id attr', async () => { const el = await fixture(html `<nile-virtual-select id="vs1"></nile-virtual-select>`); expect(el.id).to.equal('vs1'); });
+    it('19. hidden', async () => { const el = await fixture(html `<nile-virtual-select hidden></nile-virtual-select>`); expect(el.hidden).to.be.true; });
+    it('20. nodeType', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.nodeType).to.equal(1); });
+    it('21. localName', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.localName).to.equal('nile-virtual-select'); });
+    it('22. namespaceURI', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.namespaceURI).to.equal('http://www.w3.org/1999/xhtml'); });
+    it('23. ownerDocument', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.ownerDocument).to.equal(document); });
+    it('24. multiple instances', async () => { const c = await fixture(html `<div><nile-virtual-select></nile-virtual-select><nile-virtual-select></nile-virtual-select></div>`); expect(c.querySelectorAll('nile-virtual-select').length).to.equal(2); });
+    it('25. parent-child', async () => { const c = await fixture(html `<div><nile-virtual-select></nile-virtual-select></div>`); expect(c.querySelector('nile-virtual-select').parentElement).to.equal(c); });
+    it('26. createElement', async () => { const el = document.createElement('nile-virtual-select'); document.body.appendChild(el); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; document.body.removeChild(el); });
+    it('27. dataset', async () => { const el = await fixture(html `<nile-virtual-select data-idx="0"></nile-virtual-select>`); expect(el.dataset.idx).to.equal('0'); });
+    it('28. classList add', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); el.classList.add('z'); expect(el.classList.contains('z')).to.be.true; });
+    it('29. getBoundingClientRect', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.getBoundingClientRect()).to.exist; });
+    it('30. style attr', async () => { const el = await fixture(html `<nile-virtual-select style="color:red"></nile-virtual-select>`); expect(el.style.color).to.equal('red'); });
+    it('31. aria-label', async () => { const el = await fixture(html `<nile-virtual-select aria-label="VS"></nile-virtual-select>`); expect(el.getAttribute('aria-label')).to.equal('VS'); });
+    it('32. dir', async () => { const el = await fixture(html `<nile-virtual-select dir="rtl"></nile-virtual-select>`); expect(el.dir).to.equal('rtl'); });
+    it('33. lang attr', async () => { const el = await fixture(html `<nile-virtual-select lang="en"></nile-virtual-select>`); expect(el.lang).to.equal('en'); });
+    it('34. tabindex', async () => { const el = await fixture(html `<nile-virtual-select tabindex="0"></nile-virtual-select>`); expect(el.getAttribute('tabindex')).to.equal('0'); });
+    it('35. requestUpdate', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); el.requestUpdate(); await el.updateComplete; expect(el.shadowRoot).to.not.be.null; });
+    it('36. shadow childNodes', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.childNodes.length).to.be.greaterThan(0); });
+    it('37. scrollIntoView', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.scrollIntoView).to.be.a('function'); });
+    it('38. focus method', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.focus).to.be.a('function'); });
+    it('39. blur method', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.blur).to.be.a('function'); });
+    it('40. class toggle', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); el.classList.toggle('a'); expect(el.classList.contains('a')).to.be.true; });
+    it('41. toggle hidden', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); el.hidden = true; expect(el.hidden).to.be.true; });
+    it('42. dispatchCustomEvent', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); let d; el.addEventListener('t', ((e) => { d = e.detail; })); el.dispatchEvent(new CustomEvent('t', { detail: 'x' })); expect(d).to.equal('x'); });
+    it('43. nested in div', async () => { const c = await fixture(html `<div><nile-virtual-select></nile-virtual-select></div>`); expect(c.querySelector('nile-virtual-select')).to.exist; });
+    it('44. no canvas', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('canvas')).to.be.null; });
+    it('45. no video', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('video')).to.be.null; });
+    it('46. no audio', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('audio')).to.be.null; });
+    it('47. no nav', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nav')).to.be.null; });
+    it('48. no aside', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('aside')).to.be.null; });
+    it('49. no table', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('table')).to.be.null; });
+    it('50. no img', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('img')).to.be.null; });
+    it('51. no anchor', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('a')).to.be.null; });
+    it('52. no svg', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('svg')).to.be.null; });
+    it('53. no form', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('form')).to.be.null; });
+    it('54. title attr', async () => { const el = await fixture(html `<nile-virtual-select title="VS"></nile-virtual-select>`); expect(el.title).to.equal('VS'); });
+    it('55. no h1', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('h1')).to.be.null; });
+    it('56. no pre', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('pre')).to.be.null; });
+    it('57. no code', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('code')).to.be.null; });
+    it('58. no hr', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('hr')).to.be.null; });
+    it('59. no p', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('p')).to.be.null; });
+    it('60. no ul', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('ul')).to.be.null; });
+    it('61. no textarea', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('textarea')).to.be.null; });
+    it('62. no select html', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('select')).to.be.null; });
+    it('63. no nile-badge', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-badge')).to.be.null; });
+    it('64. no nile-radio', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-radio')).to.be.null; });
+    it('65. no nile-dialog', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-dialog')).to.be.null; });
+    it('66. no nile-drawer', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-drawer')).to.be.null; });
+    it('67. no nile-slider', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-slider')).to.be.null; });
+    it('68. no nile-accordion', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-accordion')).to.be.null; });
+    it('69. setAttribute data', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); el.setAttribute('data-test', '1'); expect(el.dataset.test).to.equal('1'); });
+    it('70. removeAttribute hidden', async () => { const el = await fixture(html `<nile-virtual-select hidden></nile-virtual-select>`); el.removeAttribute('hidden'); expect(el.hidden).to.be.false; });
+    it('71. setAttribute class', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); el.setAttribute('class', 'test'); expect(el.classList.contains('test')).to.be.true; });
+    it('72. aria-describedby', async () => { const el = await fixture(html `<nile-virtual-select aria-describedby="d"></nile-virtual-select>`); expect(el.getAttribute('aria-describedby')).to.equal('d'); });
+    it('73. multiple re-renders', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); for (let i = 0; i < 3; i++) {
+        el.requestUpdate();
+        await el.updateComplete;
+    } expect(el.shadowRoot).to.not.be.null; });
+    it('74. contains', async () => { const el = await fixture(html `<nile-virtual-select><span id="s1">C</span></nile-virtual-select>`); expect(el.contains(el.querySelector('#s1'))).to.be.true; });
+    it('75. data attr', async () => { const el = await fixture(html `<nile-virtual-select data-x="1"></nile-virtual-select>`); expect(el.getAttribute('data-x')).to.equal('1'); });
+    it('76. role attr', async () => { const el = await fixture(html `<nile-virtual-select role="listbox"></nile-virtual-select>`); expect(el.getAttribute('role')).to.equal('listbox'); });
+    it('77. no section', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('section')).to.be.null; });
+    it('78. no header', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('header')).to.be.null; });
+    it('79. no footer', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('footer')).to.be.null; });
+    it('80. no main', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('main')).to.be.null; });
+    it('81. no article', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('article')).to.be.null; });
+    it('82. no nile-toolbar', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-toolbar')).to.be.null; });
+    it('83. no nile-link', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-link')).to.be.null; });
+    it('84. no nile-menu', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-menu')).to.be.null; });
+    it('85. no nile-textarea', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-textarea')).to.be.null; });
+    it('86. no nile-button', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-button')).to.be.null; });
+    it('87. no nile-card', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-card')).to.be.null; });
+    it('88. no nile-tab', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-tab')).to.be.null; });
+    it('89. no nile-stepper', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-stepper')).to.be.null; });
+    it('90. no nile-pagination', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-pagination')).to.be.null; });
+    it('91. show method', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.show).to.be.a('function'); });
+    it('92. hide method', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.hide).to.be.a('function'); });
+    it('93. nile-popup in shadow', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-popup')).to.exist; });
+    it('94. nile-icon in shadow', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-icon')).to.exist; });
+    it('95. label slot', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('slot[name="label"]')).to.exist; });
+    it('96. label slot', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('slot[name="label"]')).to.exist; });
+    it('97. combobox div', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('.select__combobox')).to.exist; });
+    it('98. no nile-input', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-input')).to.be.null; });
+    it('99. no nile-calendar', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot.querySelector('nile-calendar')).to.be.null; });
+    it('100. full integration', async () => { const el = await fixture(html `<nile-virtual-select class="vs" id="vs1"></nile-virtual-select>`); expect(el.id).to.equal('vs1'); expect(el.shadowRoot).to.not.be.null; expect(el.shadowRoot.querySelector('nile-popup')).to.exist; expect(el.shadowRoot.querySelector('.select__combobox')).to.exist; });
 });
 //# sourceMappingURL=nile-virtual-select.test.js.map