From d415b924d275104cc12051fa233d1964ead1dc53 Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Sat, 20 Jan 2024 12:38:02 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor(App):=20use=20rea?=
=?UTF-8?q?ct=20router?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
this adds `MainPage`
---
src/App.test.tsx | 62 -------------------
src/App.tsx | 41 +++---------
.../pages/MainPage/MainPage.css} | 0
.../pages/MainPage/MainPage.test.tsx | 60 ++++++++++++++++++
src/components/pages/MainPage/MainPage.tsx | 31 ++++++++++
src/components/pages/MainPage/index.ts | 1 +
src/components/pages/index.ts | 1 +
7 files changed, 103 insertions(+), 93 deletions(-)
delete mode 100644 src/App.test.tsx
rename src/{App.css => components/pages/MainPage/MainPage.css} (100%)
create mode 100644 src/components/pages/MainPage/MainPage.test.tsx
create mode 100644 src/components/pages/MainPage/MainPage.tsx
create mode 100644 src/components/pages/MainPage/index.ts
create mode 100644 src/components/pages/index.ts
diff --git a/src/App.test.tsx b/src/App.test.tsx
deleted file mode 100644
index b0790f1..0000000
--- a/src/App.test.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-// Imports
-import { describe, it, expect, afterEach } from 'vitest';
-import { render, screen, cleanup } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-// To Test
-import App from './App';
-
-// Tests
-describe('Renders main page correctly', async () => {
- /**
- * Resets all renders after each test
- */
- afterEach(() => {
- cleanup();
- });
-
- /**
- * Passes - shows title correctly
- */
- it('Should render the page correctly', async () => {
- // Setup
- await render();
- const h1 = await screen.queryByText('Vite + React');
-
- // Post Expectations
- expect(h1).toBeInTheDocument();
- });
-
- /**
- * Passes - shows the button count correctly present
- */
- it('Should show the button count set to 0', async () => {
- // Setup
- await render();
- const button = await screen.queryByText('count is 0');
-
- // Expectations
- expect(button).toBeInTheDocument();
- });
-
- /**
- * Passes - clicks the button 3 times and shows the correct count
- */
- it('Should show the button count set to 3', async () => {
- // Setup
- const user = userEvent.setup();
- await render();
- const button = await screen.queryByText('count is 0');
-
- // Pre Expectations
- expect(button).toBeInTheDocument();
-
- // Actions
- await user.click(button as HTMLElement);
- await user.click(button as HTMLElement);
- await user.click(button as HTMLElement);
-
- // Post Expectations
- expect(button?.innerHTML).toBe('count is 3');
- });
-});
diff --git a/src/App.tsx b/src/App.tsx
index afe48ac..cd79907 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,35 +1,14 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
-function App() {
- const [count, setCount] = useState(0)
+import { MainPage } from 'components/pages'
- return (
- <>
-
- Vite + React
-
-
-
- Edit src/App.tsx and save to test HMR
-
-
- Click on the Vite and React logos to learn more
-
-
- )
-}
+const router = createBrowserRouter([
+ {
+ path: '/',
+ element: ,
+ },
+])
+
+const App = () =>
export default App
diff --git a/src/App.css b/src/components/pages/MainPage/MainPage.css
similarity index 100%
rename from src/App.css
rename to src/components/pages/MainPage/MainPage.css
diff --git a/src/components/pages/MainPage/MainPage.test.tsx b/src/components/pages/MainPage/MainPage.test.tsx
new file mode 100644
index 0000000..4568b87
--- /dev/null
+++ b/src/components/pages/MainPage/MainPage.test.tsx
@@ -0,0 +1,60 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { render, screen, cleanup } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import MainPage from './MainPage'
+
+// Tests
+describe('Renders main page correctly', async () => {
+ /**
+ * Resets all renders after each test
+ */
+ afterEach(() => {
+ cleanup()
+ })
+
+ /**
+ * Passes - shows title correctly
+ */
+ it('Should render the page correctly', async () => {
+ // Setup
+ await render()
+ const h1 = await screen.queryByText('Vite + React')
+
+ // Post Expectations
+ expect(h1).toBeInTheDocument()
+ })
+
+ /**
+ * Passes - shows the button count correctly present
+ */
+ it('Should show the button count set to 0', async () => {
+ // Setup
+ await render()
+ const button = await screen.queryByText('count is 0')
+
+ // Expectations
+ expect(button).toBeInTheDocument()
+ })
+
+ /**
+ * Passes - clicks the button 3 times and shows the correct count
+ */
+ it('Should show the button count set to 3', async () => {
+ // Setup
+ const user = userEvent.setup()
+ await render()
+ const button = await screen.queryByText('count is 0')
+
+ // Pre Expectations
+ expect(button).toBeInTheDocument()
+
+ // Actions
+ await user.click(button as HTMLElement)
+ await user.click(button as HTMLElement)
+ await user.click(button as HTMLElement)
+
+ // Post Expectations
+ expect(button?.innerHTML).toBe('count is 3')
+ })
+})
diff --git a/src/components/pages/MainPage/MainPage.tsx b/src/components/pages/MainPage/MainPage.tsx
new file mode 100644
index 0000000..60a371b
--- /dev/null
+++ b/src/components/pages/MainPage/MainPage.tsx
@@ -0,0 +1,31 @@
+import { useState } from 'react'
+import reactLogo from 'assets/react.svg'
+import viteLogo from '/vite.svg'
+import './MainPage.css'
+
+function MainPage() {
+ const [count, setCount] = useState(0)
+
+ return (
+ <>
+
+ Vite + React
+
+
+
+ Edit src/App.tsx and save to test HMR
+
+
Click on the Vite and React logos to learn more
+
+ )
+}
+
+export default MainPage
diff --git a/src/components/pages/MainPage/index.ts b/src/components/pages/MainPage/index.ts
new file mode 100644
index 0000000..812f47e
--- /dev/null
+++ b/src/components/pages/MainPage/index.ts
@@ -0,0 +1 @@
+export { default } from './MainPage'
diff --git a/src/components/pages/index.ts b/src/components/pages/index.ts
new file mode 100644
index 0000000..13c908d
--- /dev/null
+++ b/src/components/pages/index.ts
@@ -0,0 +1 @@
+export { default as MainPage } from './MainPage'