Skip to content

Commit

Permalink
fix(web): clear combobox value when selectedOption is undefined
Browse files Browse the repository at this point in the history
  • Loading branch information
michelheusschen committed Nov 25, 2024
1 parent b9e98d2 commit cec2e8d
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 11 deletions.
9 changes: 9 additions & 0 deletions web/src/lib/__mocks__/visual-viewport.mock.ts
Original file line number Diff line number Diff line change
@@ -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(),
});
30 changes: 30 additions & 0 deletions web/src/lib/components/shared-components/__test__/combobox.spec.ts
Original file line number Diff line number Diff line change
@@ -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('');
});
});
12 changes: 2 additions & 10 deletions web/src/lib/components/shared-components/change-date.spec.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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(() => {
Expand Down
2 changes: 1 addition & 1 deletion web/src/lib/components/shared-components/combobox.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@
const getInputPosition = () => input?.getBoundingClientRect();
$effect(() => {
// searchQuery = selectedOption ? selectedOption.label : '';
searchQuery = selectedOption ? selectedOption.label : '';
});
let filteredOptions = $derived(
Expand Down

0 comments on commit cec2e8d

Please sign in to comment.