Unit test fixes

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' } });
 

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);