From 2ed207a0482650faf99b2dca47ea70d2a7cdc353 Mon Sep 17 00:00:00 2001 From: sami Date: Mon, 26 May 2025 14:07:49 +0400 Subject: [PATCH 1/5] add router --- eslint.config.js | 4 ++ package-lock.json | 71 +++++++++++++++++++- package.json | 4 +- src/app.tsx | 8 ++- src/lib/layouts/main/index.tsx | 14 ++++ src/lib/layouts/main/main.test.tsx | 47 +++++++++++++ src/pages/home/home.css | 0 src/{app.test.ts => pages/home/home.test.ts} | 7 +- src/pages/home/index.tsx | 5 ++ src/router/index.tsx | 17 +++++ tsconfig.app.json | 2 +- vite.config.ts | 1 + vitest.setup.js => vitest.setup.ts | 0 13 files changed, 172 insertions(+), 8 deletions(-) create mode 100644 src/lib/layouts/main/index.tsx create mode 100644 src/lib/layouts/main/main.test.tsx create mode 100644 src/pages/home/home.css rename src/{app.test.ts => pages/home/home.test.ts} (53%) create mode 100644 src/pages/home/index.tsx create mode 100644 src/router/index.tsx rename vitest.setup.js => vitest.setup.ts (100%) diff --git a/eslint.config.js b/eslint.config.js index f57fe1a..53326fa 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -42,8 +42,12 @@ export default tseslint.config( allowList: { props: true, prop: true, + Props: true, + Prop: true, ref: true, refs: true, + Ref: true, + Refs: true, }, }, ], diff --git a/package-lock.json b/package-lock.json index a5c4d14..e11d5d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,12 +9,14 @@ "version": "0.0.0", "dependencies": { "react": "^19.1.0", - "react-dom": "^19.1.0" + "react-dom": "^19.1.0", + "react-router-dom": "^7.6.1" }, "devDependencies": { "@eslint/js": "^9.25.0", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.3.0", + "@testing-library/user-event": "^14.6.1", "@types/react": "^19.1.2", "@types/react-dom": "^19.1.2", "@vitejs/plugin-react": "^4.4.1", @@ -1626,6 +1628,20 @@ } } }, + "node_modules/@testing-library/user-event": { + "version": "14.6.1", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.6.1.tgz", + "integrity": "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12", + "npm": ">=6" + }, + "peerDependencies": { + "@testing-library/dom": ">=7.21.4" + } + }, "node_modules/@types/aria-query": { "version": "5.0.4", "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", @@ -2499,6 +2515,15 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/core-js-compat": { "version": "3.42.0", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.42.0.tgz", @@ -4817,6 +4842,44 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.6.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.1.tgz", + "integrity": "sha512-hPJXXxHJZEsPFNVbtATH7+MMX43UDeOauz+EAU4cgqTn7ojdI9qQORqS8Z0qmDlL1TclO/6jLRYUEtbWidtdHQ==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.6.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.1.tgz", + "integrity": "sha512-vxU7ei//UfPYQ3iZvHuO1D/5fX3/JOqhNTbRR+WjSBWxf9bIvpWK+ftjmdfJHzPOuMQKe2fiEdG+dZX6E8uUpA==", + "license": "MIT", + "dependencies": { + "react-router": "7.6.1" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/redent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", @@ -5041,6 +5104,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/package.json b/package.json index a4a2df5..3f1040e 100644 --- a/package.json +++ b/package.json @@ -16,12 +16,14 @@ }, "dependencies": { "react": "^19.1.0", - "react-dom": "^19.1.0" + "react-dom": "^19.1.0", + "react-router-dom": "^7.6.1" }, "devDependencies": { "@eslint/js": "^9.25.0", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.3.0", + "@testing-library/user-event": "^14.6.1", "@types/react": "^19.1.2", "@types/react-dom": "^19.1.2", "@vitejs/plugin-react": "^4.4.1", diff --git a/src/app.tsx b/src/app.tsx index 3c65265..d06bd32 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,7 +1,13 @@ +import { BrowserRouter } from 'react-router-dom'; import './app.css'; +import { Router } from './router'; function App() { - return <>Hello World; + return ( + + + + ); } export default App; diff --git a/src/lib/layouts/main/index.tsx b/src/lib/layouts/main/index.tsx new file mode 100644 index 0000000..160dcce --- /dev/null +++ b/src/lib/layouts/main/index.tsx @@ -0,0 +1,14 @@ +import { Link, Outlet } from 'react-router-dom'; + +export const MainLayout: React.FC = () => { + return ( + <> +
+ Home | About +
+
+ +
+ + ); +}; diff --git a/src/lib/layouts/main/main.test.tsx b/src/lib/layouts/main/main.test.tsx new file mode 100644 index 0000000..fc795a1 --- /dev/null +++ b/src/lib/layouts/main/main.test.tsx @@ -0,0 +1,47 @@ +import { act, render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { + createBrowserRouter, + RouterProvider, + type RouteObject, +} from 'react-router-dom'; +import { beforeEach, describe, expect, test } from 'vitest'; +import { HomePage } from '../../../pages/home/index.tsx'; +import { MainLayout } from './index.tsx'; + +const mockRoutes: RouteObject[] = [ + { + element: , + children: [ + { path: '/', element: }, + { + path: '/about', + element:
About Page
, + }, + ], + }, +]; +let user: ReturnType; + +describe('MainLayout with Router', () => { + beforeEach(() => { + user = userEvent.setup(); + }); + + test('renders layout with Home route', async () => { + const router = createBrowserRouter(mockRoutes); + render(); + + expect(screen.getByText('Home')).toBeInTheDocument(); + expect(screen.getByText('About')).toBeInTheDocument(); + expect(screen.getByText('Home Page')).toBeInTheDocument(); + + // Navigate to About page + const aboutLink = screen.getByRole('link', { name: 'About' }); + await act(async () => { + await user.click(aboutLink); + }); + expect(screen.getByText('About Page')).toBeInTheDocument(); + expect(screen.queryByText('Home Page')).not.toBeInTheDocument(); + }); +}); diff --git a/src/pages/home/home.css b/src/pages/home/home.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app.test.ts b/src/pages/home/home.test.ts similarity index 53% rename from src/app.test.ts rename to src/pages/home/home.test.ts index dfe3445..5a88673 100644 --- a/src/app.test.ts +++ b/src/pages/home/home.test.ts @@ -1,11 +1,10 @@ -import '@testing-library/jest-dom/vitest'; import { render, screen } from '@testing-library/react'; import { describe, expect, test } from 'vitest'; -import App from './app.tsx'; +import { HomePage } from './index.tsx'; describe('Badge', () => { test('renders successfully', () => { - render(App()); - expect(screen.getByText('Hello World')).toBeInTheDocument(); + render(HomePage()); + expect(screen.getByText('Home Page')).toBeInTheDocument(); }); }); diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx new file mode 100644 index 0000000..e16fa60 --- /dev/null +++ b/src/pages/home/index.tsx @@ -0,0 +1,5 @@ +import './home.css'; + +export function HomePage() { + return <>Home Page; +} diff --git a/src/router/index.tsx b/src/router/index.tsx new file mode 100644 index 0000000..502fd17 --- /dev/null +++ b/src/router/index.tsx @@ -0,0 +1,17 @@ +import { Route, Routes } from 'react-router-dom'; +import { MainLayout } from '../lib/layouts/main'; +import { HomePage } from '../pages/home'; + +export function Router() { + return ( + <> + + }> + } /> + About Page} /> + + Auth} /> + + + ); +} diff --git a/tsconfig.app.json b/tsconfig.app.json index b35501e..5c6545a 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -24,5 +24,5 @@ "noFallthroughCasesInSwitch": true, "noUncheckedSideEffectImports": true }, - "include": ["src"] + "include": ["src", "vitest.setup.ts"] } diff --git a/vite.config.ts b/vite.config.ts index 45e8553..f298c6e 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -8,5 +8,6 @@ export default defineConfig({ test: { globals: true, environment: 'jsdom', + setupFiles: ['./vitest.setup.ts'], }, }); diff --git a/vitest.setup.js b/vitest.setup.ts similarity index 100% rename from vitest.setup.js rename to vitest.setup.ts From e9fcbb8a1cf1a19809dff9431e1581cf05f97656 Mon Sep 17 00:00:00 2001 From: sami Date: Tue, 27 May 2025 11:32:33 +0400 Subject: [PATCH 2/5] enhace code quality --- package-lock.json | 2 +- package.json | 2 +- src/lib/layouts/main/index.tsx | 14 +++++++++----- src/pages/home/home.test.ts | 2 +- src/router/index.tsx | 16 +++++++--------- 5 files changed, 19 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index e11d5d4..ee855a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "react": "^19.1.0", "react-dom": "^19.1.0", - "react-router-dom": "^7.6.1" + "react-router-dom": "^7.5.3" }, "devDependencies": { "@eslint/js": "^9.25.0", diff --git a/package.json b/package.json index 3f1040e..a254c75 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "dependencies": { "react": "^19.1.0", "react-dom": "^19.1.0", - "react-router-dom": "^7.6.1" + "react-router-dom": "^7.5.3" }, "devDependencies": { "@eslint/js": "^9.25.0", diff --git a/src/lib/layouts/main/index.tsx b/src/lib/layouts/main/index.tsx index 160dcce..3447ab7 100644 --- a/src/lib/layouts/main/index.tsx +++ b/src/lib/layouts/main/index.tsx @@ -1,14 +1,18 @@ -import { Link, Outlet } from 'react-router-dom'; +import { Link, Outlet } from 'react-router'; export const MainLayout: React.FC = () => { return ( - <> +
- Home | About +
-
+
- +
); }; diff --git a/src/pages/home/home.test.ts b/src/pages/home/home.test.ts index 5a88673..9e4c3c3 100644 --- a/src/pages/home/home.test.ts +++ b/src/pages/home/home.test.ts @@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'; import { describe, expect, test } from 'vitest'; import { HomePage } from './index.tsx'; -describe('Badge', () => { +describe('HomePage', () => { test('renders successfully', () => { render(HomePage()); expect(screen.getByText('Home Page')).toBeInTheDocument(); diff --git a/src/router/index.tsx b/src/router/index.tsx index 502fd17..7d8b140 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -4,14 +4,12 @@ import { HomePage } from '../pages/home'; export function Router() { return ( - <> - - }> - } /> - About Page} /> - - Auth} /> - - + + }> + } /> + About Page} /> + + Auth} /> + ); } From 72f05bcf5542f05df9efcc1fcb053d250c161f08 Mon Sep 17 00:00:00 2001 From: sami Date: Tue, 27 May 2025 12:17:54 +0400 Subject: [PATCH 3/5] enhace code quality --- src/lib/layouts/main/index.tsx | 2 +- src/lib/layouts/main/main.test.tsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/lib/layouts/main/index.tsx b/src/lib/layouts/main/index.tsx index 3447ab7..5adf5ab 100644 --- a/src/lib/layouts/main/index.tsx +++ b/src/lib/layouts/main/index.tsx @@ -1,4 +1,4 @@ -import { Link, Outlet } from 'react-router'; +import { Link, Outlet } from 'react-router-dom'; export const MainLayout: React.FC = () => { return ( diff --git a/src/lib/layouts/main/main.test.tsx b/src/lib/layouts/main/main.test.tsx index fc795a1..41b2c59 100644 --- a/src/lib/layouts/main/main.test.tsx +++ b/src/lib/layouts/main/main.test.tsx @@ -11,11 +11,12 @@ import { MainLayout } from './index.tsx'; const mockRoutes: RouteObject[] = [ { + path: '/', element: , children: [ - { path: '/', element: }, + { index: true, element: }, { - path: '/about', + path: 'about', element:
About Page
, }, ], From 899b89d856b84e91970c718cdf9c00a9923d83b7 Mon Sep 17 00:00:00 2001 From: sami Date: Tue, 27 May 2025 12:20:55 +0400 Subject: [PATCH 4/5] enhace code quality --- src/pages/home/{home.test.ts => home.test.tsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename src/pages/home/{home.test.ts => home.test.tsx} (91%) diff --git a/src/pages/home/home.test.ts b/src/pages/home/home.test.tsx similarity index 91% rename from src/pages/home/home.test.ts rename to src/pages/home/home.test.tsx index 9e4c3c3..1d9c7d0 100644 --- a/src/pages/home/home.test.ts +++ b/src/pages/home/home.test.tsx @@ -4,7 +4,7 @@ import { HomePage } from './index.tsx'; describe('HomePage', () => { test('renders successfully', () => { - render(HomePage()); + render(); expect(screen.getByText('Home Page')).toBeInTheDocument(); }); }); From 2868f9d25a74191d6b1a0ea56f5b7a4b69b90990 Mon Sep 17 00:00:00 2001 From: sami Date: Tue, 27 May 2025 12:27:54 +0400 Subject: [PATCH 5/5] enhace code quality --- src/lib/layouts/main/index.tsx | 2 +- src/pages/errors/not-found.tsx | 3 +++ src/router/index.tsx | 6 +++++- 3 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 src/pages/errors/not-found.tsx diff --git a/src/lib/layouts/main/index.tsx b/src/lib/layouts/main/index.tsx index 5adf5ab..97be987 100644 --- a/src/lib/layouts/main/index.tsx +++ b/src/lib/layouts/main/index.tsx @@ -7,7 +7,7 @@ export const MainLayout: React.FC = () => {
diff --git a/src/pages/errors/not-found.tsx b/src/pages/errors/not-found.tsx new file mode 100644 index 0000000..c9b03ad --- /dev/null +++ b/src/pages/errors/not-found.tsx @@ -0,0 +1,3 @@ +export function NotFound() { + return
not-found
; +} diff --git a/src/router/index.tsx b/src/router/index.tsx index 7d8b140..c69a40a 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -1,5 +1,6 @@ import { Route, Routes } from 'react-router-dom'; import { MainLayout } from '../lib/layouts/main'; +import { NotFound } from '../pages/errors/not-found'; import { HomePage } from '../pages/home'; export function Router() { @@ -9,7 +10,10 @@ export function Router() { } /> About Page} /> - Auth} /> + + Auth Page} /> + + } /> ); }