diff --git a/web/src/lib/__mocks__/visual-viewport.mock.ts b/web/src/lib/__mocks__/visual-viewport.mock.ts new file mode 100644 index 0000000000000..23903d56cd0e7 --- /dev/null +++ b/web/src/lib/__mocks__/visual-viewport.mock.ts @@ -0,0 +1,9 @@ +export const getVisualViewportMock = () => ({ + height: window.innerHeight, + width: window.innerWidth, + scale: 1, + offsetLeft: 0, + offsetTop: 0, + addEventListener: vi.fn(), + removeEventListener: vi.fn(), +}); diff --git a/web/src/lib/components/shared-components/__test__/combobox.spec.ts b/web/src/lib/components/shared-components/__test__/combobox.spec.ts new file mode 100644 index 0000000000000..e1518809b4064 --- /dev/null +++ b/web/src/lib/components/shared-components/__test__/combobox.spec.ts @@ -0,0 +1,30 @@ +import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock'; +import { getVisualViewportMock } from '$lib/__mocks__/visual-viewport.mock'; +import Combobox from '$lib/components/shared-components/combobox.svelte'; +import { render, screen } from '@testing-library/svelte'; + +describe('Combobox component', () => { + beforeAll(() => { + vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock()); + vi.stubGlobal('visualViewport', getVisualViewportMock()); + }); + + it('shows selected option', () => { + render(Combobox, { + label: 'test', + selectedOption: { label: 'option-1', value: 'option-1' }, + }); + + expect(screen.getByRole('combobox')).toHaveValue('option-1'); + }); + + it('clears the selected option when set to undefined', async () => { + const { rerender } = render(Combobox, { + label: 'test', + selectedOption: { label: 'option-1', value: 'option-1' }, + }); + + await rerender({ selectedOption: undefined }); + expect(screen.getByRole('combobox')).toHaveValue(''); + }); +}); diff --git a/web/src/lib/components/shared-components/change-date.spec.ts b/web/src/lib/components/shared-components/change-date.spec.ts index 815acac5abcc8..38c72838e507f 100644 --- a/web/src/lib/components/shared-components/change-date.spec.ts +++ b/web/src/lib/components/shared-components/change-date.spec.ts @@ -1,4 +1,5 @@ import { getIntersectionObserverMock } from '$lib/__mocks__/intersection-observer.mock'; +import { getVisualViewportMock } from '$lib/__mocks__/visual-viewport.mock'; import { fireEvent, render, screen } from '@testing-library/svelte'; import { DateTime } from 'luxon'; import ChangeDate from './change-date.svelte'; @@ -16,16 +17,7 @@ describe('ChangeDate component', () => { beforeEach(() => { vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock()); - - vi.stubGlobal('visualViewport', { - height: window.innerHeight, - width: window.innerWidth, - scale: 1, - offsetLeft: 0, - offsetTop: 0, - addEventListener: vi.fn(), - removeEventListener: vi.fn(), - }); + vi.stubGlobal('visualViewport', getVisualViewportMock()); }); afterEach(() => { diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte index b17644f137360..9dcb4d8f25eaa 100644 --- a/web/src/lib/components/shared-components/combobox.svelte +++ b/web/src/lib/components/shared-components/combobox.svelte @@ -218,7 +218,7 @@ const getInputPosition = () => input?.getBoundingClientRect(); $effect(() => { - // searchQuery = selectedOption ? selectedOption.label : ''; + searchQuery = selectedOption ? selectedOption.label : ''; }); let filteredOptions = $derived(