From 5959861404d6f95e580ca6c3dfee215c82672fec Mon Sep 17 00:00:00 2001 From: Rotem Date: Mon, 25 May 2026 23:52:38 +0300 Subject: [PATCH 1/9] 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/9] 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 6dc6e8a09182fe7df01f98ec85a84a913d21ed60 Mon Sep 17 00:00:00 2001 From: Rotem Date: Tue, 2 Jun 2026 12:56:49 +0300 Subject: [PATCH 3/9] Add PrintQR page --- src/pages/QRPrint/PrintQR.tsx | 51 +++++++++++++++++++++++++++++++++++ src/pages/QRPrint/styles.ts | 27 +++++++++++++++++++ 2 files changed, 78 insertions(+) create mode 100644 src/pages/QRPrint/PrintQR.tsx create mode 100644 src/pages/QRPrint/styles.ts diff --git a/src/pages/QRPrint/PrintQR.tsx b/src/pages/QRPrint/PrintQR.tsx new file mode 100644 index 0000000..e96e574 --- /dev/null +++ b/src/pages/QRPrint/PrintQR.tsx @@ -0,0 +1,51 @@ +import { SGLCard } from '../../components/UI/Card/SGLCard' +import { SGLButton } from '../../components/UI/Button/SGLButton' +import { SGLTypography } from '../../components/UI/Typography/SGLTypography' +import { SGLImage } from '../../components/UI/Image/SGLImage' +import { useTranslation } from 'react-i18next' +import * as styles from './styles' + +export const PrintQR = () => { + const { t } = useTranslation() + + const patientNumber = '123456' + const password = 'add123' + + return ( +
+
+ +
+ + + {patientNumber} + + {password} + + {t('login.login')} +
+ +
+
+ ) +} diff --git a/src/pages/QRPrint/styles.ts b/src/pages/QRPrint/styles.ts new file mode 100644 index 0000000..a0a12c5 --- /dev/null +++ b/src/pages/QRPrint/styles.ts @@ -0,0 +1,27 @@ +import { theme } from '@/theme' +import type { CSSProperties } from '@mui/material' + +export const containerStyle: CSSProperties = { + width: '335px', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: '1rem', + padding: '2rem', +} +export const textStyle: CSSProperties = { + fontSize: '1.3em', + fontWeight: 'bold', + color: theme.palette.common.white, +} + +export const submitButtonContent: CSSProperties = { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + gap: '-1rem', + width: '100%', + fontWeight: 'bold', + fontSize: '1rem', + padding: '0.5rem', +} From 015e5ad0cb3528d4fddaa7442aeeb78dd79fb598 Mon Sep 17 00:00:00 2001 From: Rotem Date: Tue, 2 Jun 2026 13:10:36 +0300 Subject: [PATCH 4/9] Add PrintQR page and route for PrintQR --- src/main.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/main.tsx b/src/main.tsx index 6eee95b..41e87b3 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -15,12 +15,14 @@ import { Login } from './pages/login/Login.tsx' import { ProtectedRoute } from './components/ProtectedRoute/ProtectedRoute.tsx' import { Navigate } from 'react-router-dom' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' +import { PrintQR } from './pages/QRPrint/PrintQR.tsx' const queryClient = new QueryClient() const router = createBrowserRouter([ { path: '/', element: }, { path: '/login', element: }, + { path: '/printQR', element: }, { element: , children: [ From 28f4125688f6c2b3dbbd10f049b49d58a6a06031 Mon Sep 17 00:00:00 2001 From: Rotem Date: Sat, 6 Jun 2026 16:08:25 +0300 Subject: [PATCH 5/9] Revert "Fix SGLSelect tests" This reverts commit 50f9bf2f37bf7bfd83c1420482a784f399bc576b. --- src/components/UI/Select/SGLSelect.test.tsx | 43 +++++++-------------- 1 file changed, 15 insertions(+), 28 deletions(-) diff --git a/src/components/UI/Select/SGLSelect.test.tsx b/src/components/UI/Select/SGLSelect.test.tsx index 8d46c20..5b18970 100644 --- a/src/components/UI/Select/SGLSelect.test.tsx +++ b/src/components/UI/Select/SGLSelect.test.tsx @@ -1,8 +1,6 @@ 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' @@ -14,11 +12,7 @@ describe('SGLSelect', () => { const options = ['Apple', 'Banana', 'Orange'] it('should select the relevant item', () => { - render( - - - , - ) + render() const select = screen.getByRole('combobox') @@ -28,14 +22,11 @@ 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') @@ -46,26 +37,22 @@ 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 e6601534b1a5743fd3e7c370a62ba959dc2f6ebf Mon Sep 17 00:00:00 2001 From: Rotem Date: Sat, 6 Jun 2026 16:09:22 +0300 Subject: [PATCH 6/9] Revert "Create test to select" This reverts commit 5959861404d6f95e580ca6c3dfee215c82672fec. --- src/components/UI/Select/SGLSelect.test.tsx | 58 --------------------- 1 file changed, 58 deletions(-) delete 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 deleted file mode 100644 index 5b18970..0000000 --- a/src/components/UI/Select/SGLSelect.test.tsx +++ /dev/null @@ -1,58 +0,0 @@ -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 2a7c0e9989815c7389a1f5849f5a408fc2711e60 Mon Sep 17 00:00:00 2001 From: Rotem Date: Mon, 8 Jun 2026 13:36:31 +0300 Subject: [PATCH 7/9] Fix PrintQR PR comments --- src/pages/QRPrint/PrintQR.tsx | 45 ++++++++++++++--------------------- src/pages/QRPrint/styles.ts | 18 ++++++++++++++ 2 files changed, 36 insertions(+), 27 deletions(-) diff --git a/src/pages/QRPrint/PrintQR.tsx b/src/pages/QRPrint/PrintQR.tsx index e96e574..ca693f0 100644 --- a/src/pages/QRPrint/PrintQR.tsx +++ b/src/pages/QRPrint/PrintQR.tsx @@ -14,38 +14,29 @@ export const PrintQR = () => { return (
-
- -
- + +
+ - {patientNumber} + {patientNumber} - {password} + {password} - {t('login.login')} -
- -
+ {t('login.login')} +
+
) } diff --git a/src/pages/QRPrint/styles.ts b/src/pages/QRPrint/styles.ts index a0a12c5..86e26d2 100644 --- a/src/pages/QRPrint/styles.ts +++ b/src/pages/QRPrint/styles.ts @@ -25,3 +25,21 @@ export const submitButtonContent: CSSProperties = { fontSize: '1rem', padding: '0.5rem', } + +export const pageContainer: CSSProperties = { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + minHeight: '100vh', +} + +export const cardContainer: CSSProperties = { + width: '400px', +} + +export const qrImageStyle: CSSProperties = { + width: '300px', + height: '300px', + marginTop: '-40px', + marginBottom: '-40px', +} From fd1b9f08da8790bc72d15e63916080fb02473ead Mon Sep 17 00:00:00 2001 From: Rotem Date: Tue, 9 Jun 2026 15:41:20 +0300 Subject: [PATCH 8/9] Use QRGeneration component in PrintQR --- src/pages/QRPrint/PrintQR.tsx | 35 ++++++++++++----------------------- src/pages/QRPrint/styles.ts | 34 ++++++++++++++-------------------- 2 files changed, 26 insertions(+), 43 deletions(-) diff --git a/src/pages/QRPrint/PrintQR.tsx b/src/pages/QRPrint/PrintQR.tsx index ca693f0..8356c7f 100644 --- a/src/pages/QRPrint/PrintQR.tsx +++ b/src/pages/QRPrint/PrintQR.tsx @@ -1,7 +1,7 @@ import { SGLCard } from '../../components/UI/Card/SGLCard' import { SGLButton } from '../../components/UI/Button/SGLButton' import { SGLTypography } from '../../components/UI/Typography/SGLTypography' -import { SGLImage } from '../../components/UI/Image/SGLImage' +import { QRGeneration } from '../login/QRLogin/QRGeneration.tsx' import { useTranslation } from 'react-i18next' import * as styles from './styles' @@ -12,31 +12,20 @@ export const PrintQR = () => { const password = 'add123' return ( -
- -
- +
+
+ +
+ - {patientNumber} + {patientNumber} - {password} + {password} - {t('login.login')} -
- + {t('login.login')} +
+ +
) } diff --git a/src/pages/QRPrint/styles.ts b/src/pages/QRPrint/styles.ts index 86e26d2..af2c230 100644 --- a/src/pages/QRPrint/styles.ts +++ b/src/pages/QRPrint/styles.ts @@ -1,6 +1,18 @@ import { theme } from '@/theme' import type { CSSProperties } from '@mui/material' +export const pageContainer: CSSProperties = { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + minHeight: '100vh', + width: '100%', +} + +export const cardContainer: CSSProperties = { + width: '400px', +} + export const containerStyle: CSSProperties = { width: '335px', display: 'flex', @@ -9,8 +21,9 @@ export const containerStyle: CSSProperties = { gap: '1rem', padding: '2rem', } + export const textStyle: CSSProperties = { - fontSize: '1.3em', + fontSize: '1.3rem', fontWeight: 'bold', color: theme.palette.common.white, } @@ -19,27 +32,8 @@ export const submitButtonContent: CSSProperties = { display: 'flex', alignItems: 'center', justifyContent: 'center', - gap: '-1rem', width: '100%', fontWeight: 'bold', fontSize: '1rem', padding: '0.5rem', } - -export const pageContainer: CSSProperties = { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - minHeight: '100vh', -} - -export const cardContainer: CSSProperties = { - width: '400px', -} - -export const qrImageStyle: CSSProperties = { - width: '300px', - height: '300px', - marginTop: '-40px', - marginBottom: '-40px', -} From 51d34669f4678c9db6c7b1d66148f8d4d939a633 Mon Sep 17 00:00:00 2001 From: Rotem Date: Tue, 9 Jun 2026 21:15:18 +0300 Subject: [PATCH 9/9] mock variables --- src/pages/QRPrint/PrintQR.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/pages/QRPrint/PrintQR.tsx b/src/pages/QRPrint/PrintQR.tsx index 8356c7f..487dcbd 100644 --- a/src/pages/QRPrint/PrintQR.tsx +++ b/src/pages/QRPrint/PrintQR.tsx @@ -8,19 +8,20 @@ import * as styles from './styles' export const PrintQR = () => { const { t } = useTranslation() - const patientNumber = '123456' - const password = 'add123' + const MOCK_PATIENT_NUMBER = '123456' + const MOCK_PASSWORD = 'add123' + + const MOCK_TOKEN = 'mock-token' return (
- - - {patientNumber} + + {MOCK_PATIENT_NUMBER} - {password} + {MOCK_PASSWORD} {t('login.login')}