From 5959861404d6f95e580ca6c3dfee215c82672fec Mon Sep 17 00:00:00 2001 From: Rotem Date: Mon, 25 May 2026 23:52:38 +0300 Subject: [PATCH 1/4] Create test to select --- src/components/UI/Select/SGLSelect.test.tsx | 58 +++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 src/components/UI/Select/SGLSelect.test.tsx diff --git a/src/components/UI/Select/SGLSelect.test.tsx b/src/components/UI/Select/SGLSelect.test.tsx new file mode 100644 index 0000000..5b18970 --- /dev/null +++ b/src/components/UI/Select/SGLSelect.test.tsx @@ -0,0 +1,58 @@ +import { describe, it, expect, afterEach } from 'vitest' +import '@testing-library/jest-dom/vitest' +import { render, screen, fireEvent, cleanup } from '@testing-library/react' + +import { SGLSelect } from './SGLSelect' + +afterEach(() => { + cleanup() +}) + +describe('SGLSelect', () => { + const options = ['Apple', 'Banana', 'Orange'] + + it('should select the relevant item', () => { + render() + + const select = screen.getByRole('combobox') + + fireEvent.mouseDown(select) + + const option = screen.getByText('Banana') + fireEvent.click(option) + + expect(select).toHaveTextContent('Banana') + }) + + + it('should not select any item when dropdown is opened and closed', () => { + render() + + const select = screen.getByRole('combobox') + + fireEvent.mouseDown(select) + fireEvent.keyDown(select, { key: 'Escape' }) + + expect(select).not.toHaveTextContent('Banana') + }) + + it('should change the selected value when selecting a different option', () => { + render() + + const select = screen.getByRole('combobox') + + fireEvent.mouseDown(select) + + const bananaOption = screen.getByText('Banana') + fireEvent.click(bananaOption) + + expect(select).toHaveTextContent('Banana') + + fireEvent.mouseDown(select) + + const orangeOption = screen.getByText('Orange') + fireEvent.click(orangeOption) + + expect(select).toHaveTextContent('Orange') +}) +}) \ No newline at end of file From 50f9bf2f37bf7bfd83c1420482a784f399bc576b Mon Sep 17 00:00:00 2001 From: Rotem Date: Mon, 1 Jun 2026 15:54:00 +0300 Subject: [PATCH 2/4] Fix SGLSelect tests --- src/components/UI/Select/SGLSelect.test.tsx | 43 ++++++++++++++------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/src/components/UI/Select/SGLSelect.test.tsx b/src/components/UI/Select/SGLSelect.test.tsx index 5b18970..8d46c20 100644 --- a/src/components/UI/Select/SGLSelect.test.tsx +++ b/src/components/UI/Select/SGLSelect.test.tsx @@ -1,6 +1,8 @@ import { describe, it, expect, afterEach } from 'vitest' import '@testing-library/jest-dom/vitest' import { render, screen, fireEvent, cleanup } from '@testing-library/react' +import { ThemeProvider } from '@mui/material/styles' +import { theme } from '../../../theme' import { SGLSelect } from './SGLSelect' @@ -12,7 +14,11 @@ describe('SGLSelect', () => { const options = ['Apple', 'Banana', 'Orange'] it('should select the relevant item', () => { - render() + render( + + + , + ) const select = screen.getByRole('combobox') @@ -22,11 +28,14 @@ describe('SGLSelect', () => { fireEvent.click(option) expect(select).toHaveTextContent('Banana') - }) - + }) it('should not select any item when dropdown is opened and closed', () => { - render() + render( + + + , + ) const select = screen.getByRole('combobox') @@ -37,22 +46,26 @@ describe('SGLSelect', () => { }) it('should change the selected value when selecting a different option', () => { - render() + render( + + + , + ) - const select = screen.getByRole('combobox') + const select = screen.getByRole('combobox') - fireEvent.mouseDown(select) + fireEvent.mouseDown(select) - const bananaOption = screen.getByText('Banana') - fireEvent.click(bananaOption) + const bananaOption = screen.getByText('Banana') + fireEvent.click(bananaOption) - expect(select).toHaveTextContent('Banana') + expect(select).toHaveTextContent('Banana') - fireEvent.mouseDown(select) + fireEvent.mouseDown(select) - const orangeOption = screen.getByText('Orange') - fireEvent.click(orangeOption) + const orangeOption = screen.getByText('Orange') + fireEvent.click(orangeOption) - expect(select).toHaveTextContent('Orange') + expect(select).toHaveTextContent('Orange') + }) }) -}) \ No newline at end of file From ff73993d9a0be49b2564972f5a9d1db64d368105 Mon Sep 17 00:00:00 2001 From: Rotem Date: Sat, 6 Jun 2026 15:47:13 +0300 Subject: [PATCH 3/4] Extract shared test helper --- src/components/UI/Select/SGLSelect.test.tsx | 24 +++++---------------- src/tests/renderWithTheme.tsx | 8 +++++++ 2 files changed, 13 insertions(+), 19 deletions(-) create mode 100644 src/tests/renderWithTheme.tsx diff --git a/src/components/UI/Select/SGLSelect.test.tsx b/src/components/UI/Select/SGLSelect.test.tsx index 8d46c20..625bb51 100644 --- a/src/components/UI/Select/SGLSelect.test.tsx +++ b/src/components/UI/Select/SGLSelect.test.tsx @@ -1,9 +1,7 @@ import { describe, it, expect, afterEach } from 'vitest' import '@testing-library/jest-dom/vitest' -import { render, screen, fireEvent, cleanup } from '@testing-library/react' -import { ThemeProvider } from '@mui/material/styles' -import { theme } from '../../../theme' - +import { screen, fireEvent, cleanup } from '@testing-library/react' +import { renderWithTheme } from '../../../tests/renderWithTheme' import { SGLSelect } from './SGLSelect' afterEach(() => { @@ -14,11 +12,7 @@ describe('SGLSelect', () => { const options = ['Apple', 'Banana', 'Orange'] it('should select the relevant item', () => { - render( - - - , - ) + renderWithTheme() const select = screen.getByRole('combobox') @@ -31,11 +25,7 @@ describe('SGLSelect', () => { }) it('should not select any item when dropdown is opened and closed', () => { - render( - - - , - ) + renderWithTheme() const select = screen.getByRole('combobox') @@ -46,11 +36,7 @@ describe('SGLSelect', () => { }) it('should change the selected value when selecting a different option', () => { - render( - - - , - ) + renderWithTheme() const select = screen.getByRole('combobox') diff --git a/src/tests/renderWithTheme.tsx b/src/tests/renderWithTheme.tsx new file mode 100644 index 0000000..122424b --- /dev/null +++ b/src/tests/renderWithTheme.tsx @@ -0,0 +1,8 @@ +import { render } from '@testing-library/react' +import { ThemeProvider } from '@mui/material/styles' +import type { ReactElement } from 'react' + +import { theme } from '../theme' + +export const renderWithTheme = (ui: ReactElement) => + render({ui}) From fb7fc70d5cb0f4e46cea41303a58716c03e6c5a2 Mon Sep 17 00:00:00 2001 From: Rotem Date: Tue, 9 Jun 2026 13:26:47 +0300 Subject: [PATCH 4/4] Use wrapper component with children --- src/tests/renderWithTheme.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/tests/renderWithTheme.tsx b/src/tests/renderWithTheme.tsx index 122424b..6c4fd40 100644 --- a/src/tests/renderWithTheme.tsx +++ b/src/tests/renderWithTheme.tsx @@ -1,8 +1,11 @@ import { render } from '@testing-library/react' import { ThemeProvider } from '@mui/material/styles' -import type { ReactElement } from 'react' +import type { PropsWithChildren, ReactElement } from 'react' import { theme } from '../theme' -export const renderWithTheme = (ui: ReactElement) => - render({ui}) +const Wrapper = ({ children }: PropsWithChildren) => ( + {children} +) + +export const renderWithTheme = (ui: ReactElement) => render(ui, { wrapper: Wrapper })