diff --git a/src/components/ui/SearchableDropdown.svelte.test.ts b/src/components/ui/SearchableDropdown.svelte.test.ts index bdc2f591a6..73d112de1f 100644 --- a/src/components/ui/SearchableDropdown.svelte.test.ts +++ b/src/components/ui/SearchableDropdown.svelte.test.ts @@ -1,11 +1,34 @@ import { cleanup, fireEvent, render } from '@testing-library/svelte'; -import { afterEach, describe, expect, it, vi } from 'vitest'; +import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest'; import type { DropdownOptions } from '../../types/dropdown'; import SearchableDropdown from './SearchableDropdown.svelte'; vi.mock('$env/dynamic/public', () => import.meta.env); // https://github.com/sveltejs/kit/issues/8180 describe('Searchable Dropdown component', () => { + // Store original function and restore after tests complete + const gbcr = window.Element.prototype.getBoundingClientRect; + + beforeAll(() => { + // TODO should try to use spy here but typing was tricky, need help + window.Element.prototype.getBoundingClientRect = () => ({ + bottom: 0, + height: 100, + left: 0, + right: 0, + toJSON: () => {}, + top: 0, + width: 100, + x: 0, + y: 0, + }); + }); + + afterAll(() => { + // Restore + window.Element.prototype.getBoundingClientRect = gbcr; + }); + const options: DropdownOptions = [ { display: 'Option 1', @@ -52,6 +75,33 @@ describe('Searchable Dropdown component', () => { expect(getByText(selectedOption.display)).toBeDefined(); }); + it('Should render the selected option label when provided and when an option is selected', () => { + const selectedOption = options[1]; + const selectedOptionLabel = 'Alternative Label'; + const placeholderText = 'None'; + const { getByText, queryByText } = render(SearchableDropdown, { + options, + placeholder: 'None', + selectedOptionLabel, + selectedOptionValues: [selectedOption.value], + }); + + expect(queryByText(placeholderText)).toBeNull(); + expect(getByText(selectedOptionLabel)).toBeDefined(); + }); + + it('Should render the selected value text when multiple options are selected', () => { + const placeholderText = 'None'; + const { getByText, queryByText } = render(SearchableDropdown, { + options, + placeholder: 'None', + selectedOptionValues: [options[0].value, options[1].value], + }); + + expect(queryByText(placeholderText)).toBeNull(); + expect(getByText(`${options[0].display}, ${options[1].display}`)).toBeDefined(); + }); + it('Should render the option items after clicking on the input', async () => { const selectedOption = options[0]; const { getByText, getAllByRole } = render(SearchableDropdown, { @@ -66,17 +116,20 @@ describe('Searchable Dropdown component', () => { }); it('Should render the filtered options after searching in the search field', async () => { - const { getByText, getAllByRole, getByPlaceholderText } = render(SearchableDropdown, { + const { getByLabelText, getAllByRole, findAllByRole, getByPlaceholderText } = render(SearchableDropdown, { options, placeholder: 'None', searchPlaceholder: 'Search options', }); - await fireEvent.click(getByText('None')); + await fireEvent.click(getByLabelText('None')); await fireEvent.click(getByPlaceholderText('Search options')); await fireEvent.input(getByPlaceholderText('Search options'), { target: { value: '2' } }); - expect(getAllByRole('menuitem')).toHaveLength(2); + expect(await findAllByRole('menuitem')).toHaveLength(2); + // await waitFor(() => { + // expect(getAllByRole('menuitem')) + // }); await fireEvent.input(getByPlaceholderText('Search options'), { target: { value: '1' } }); diff --git a/src/utilities/view.test.ts b/src/utilities/view.test.ts index bd2d074b2b..7a6b4fa3f5 100644 --- a/src/utilities/view.test.ts +++ b/src/utilities/view.test.ts @@ -1,7 +1,6 @@ import { describe, expect, test } from 'vitest'; import viewV0Migrated from '../tests/mocks/view/v0/view-migrated.json'; import viewV0 from '../tests/mocks/view/v0/view.json'; -import viewV1 from '../tests/mocks/view/v1/view.json'; import viewV2 from '../tests/mocks/view/v2/view.json'; import { applyViewDefinitionMigrations, @@ -66,7 +65,7 @@ describe('migrateViewDefinition', () => { const { anyMigrationsApplied, error, migratedViewDefinition } = applyViewDefinitionMigrations(viewV2 as any); expect(anyMigrationsApplied).toBeFalsy(); expect(error).toBeNull(); - expect(migratedViewDefinition).to.deep.eq(viewV1); + expect(migratedViewDefinition).to.deep.eq(viewV2); }); test('Should return errors if migration fails', async () => { const invalidView = structuredClone(viewV0);