Adding Testing with Vite

projects/2023TemplateWithVite/client/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "bootstrap": "^5.2.3",
@@ -18,9 +19,12 @@
     "react-router-dom": "^6.9.0"
   },
   "devDependencies": {
+    "@testing-library/react": "^14.0.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@vitejs/plugin-react": "^3.1.0",
-    "vite": "^4.2.0"
+    "jsdom": "^21.1.1",
+    "vite": "^4.2.0",
+    "vitest": "^0.29.8"
   }
 }

projects/2023TemplateWithVite/client/src/App.css

@@ -71,3 +71,7 @@ button.btn.btn-primary {
   margin-left: 2em;
   margin-right: 2em;
 }
+
+#contact{
+  padding: 5em;
+}

projects/2023TemplateWithVite/client/src/App.jsx

@@ -1,16 +1,23 @@
 import './App.css'
 import 'bootstrap/dist/css/bootstrap.min.css';
-import MyNavBar from './components/Navbar'
+import MyNavBar from './routes/Navbar'
 import ListStudents from './components/ListStudents'
-
+import React, { useState } from 'react'
+import { Outlet } from 'react-router-dom';
 
 function App() {
 
+  const [isClicked, setIsClicked] = useState(false);
+
+  const handleMe = () =>{
+    setIsClicked(true);
+  }
+
+
   return (
     <div className="App">
-      <MyNavBar />
-      <ListStudents />
-
+      <MyNavBar handleMe={handleMe} />
+      {isClicked ? <Outlet /> : <ListStudents /> }
     </div>
   )
 }

projects/2023TemplateWithVite/client/src/components/Form.jsx

@@ -80,7 +80,7 @@ const MyForm = ({ onSaveStudent, editingStudent, onUpdateStudent }) => {
     };
 
     return (
-        <Form className='form-students' onSubmit={handleSubmit}>
+        <Form data-testid="eventForm" className='form-students' onSubmit={handleSubmit}>
             <Form.Group>
                 <Form.Label>First Name</Form.Label>
                 <input

projects/2023TemplateWithVite/client/src/components/ListStudents.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react'
-import * as ioicons from 'react-icons/io5'
 import MyForm from './Form';
 import Student from './Student';
+import { Outlet} from "react-router-dom";
 
 const ListStudents = () => {
 
@@ -68,7 +68,7 @@ const ListStudents = () => {
                     return <li key={student.id}> <Student student={student} toDelete={onDelete} toUpdate={onUpdate} /></li>
                 })}
             </ul>
-        </div>
+      </div>
         <MyForm key={editingStudent ? editingStudent.id : null} onSaveStudent={onSaveStudent} editingStudent={editingStudent} onUpdateStudent={updateStudent} />
         </div>
     );

projects/2023TemplateWithVite/client/src/components/contact.jsx

@@ -0,0 +1,49 @@
+
+
+export default function Contact() {
+  const contact = {
+    first: "Cristina",
+    last: "Rodriguez",
+    avatar: "https://placekitten.com/g/200/200",
+    twitter: "yosola",
+    notes: "Some notes",
+    favorite: true,
+  };
+
+  return (
+    <div id="contact">
+      <div>
+        <img
+          key={contact.avatar}
+          src={contact.avatar || null}
+        />
+      </div>
+
+      <div>
+        <h1>
+          {contact.first || contact.last ? (
+            <>
+              {contact.first} {contact.last}
+            </>
+          ) : (
+            <i>No Name</i>
+          )}{" "}
+        </h1>
+
+        {contact.twitter && (
+          <p>
+            <a
+              target="_blank"
+              href={`https://twitter.com/${contact.twitter}`}
+            >
+              {contact.twitter}
+            </a>
+          </p>
+        )}
+
+        {contact.notes && <p>{contact.notes}</p>}
+
+        </div>
+        </div>
+        )
+    }

projects/2023TemplateWithVite/client/src/components/error-page.jsx

@@ -0,0 +1,16 @@
+import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+  const error = useRouteError();
+  console.error(error);
+
+  return (
+    <div id="error-page">
+      <h1>Oops Techtonica template apologizes!!</h1>
+      <p>Sorry,  an unexpected error has occurred.</p>
+      <p>
+        <i>{error.statusText || error.message}</i>
+      </p>
+    </div>
+  );
+}

projects/2023TemplateWithVite/client/src/example.test.jsx

@@ -0,0 +1,40 @@
+
+import React from 'react';
+import {describe, expect, test} from 'vitest';
+import { render, screen } from '@testing-library/react';
+import Student from './components/Student';
+import MyForm from './components/Form';
+
+test("Show full name of a student", () =>{
+  const testName = {firstname: "Michelle", lastname: "Glausser"};
+  const studentElement = render(<Student student={testName} />)
+  const studentFullName = studentElement.getByText("Michelle Glausser");
+  expect(studentFullName).toBeDefined();
+})
+
+test("Show the form is rendering", () =>{
+  const formElement = render(<MyForm />);
+  const signUpForm = formElement.getByTestId('eventForm');
+  expect(signUpForm).toBeDefined();
+})
+
+/* 
+describe('event signup form', () => {
+  it('renders a form', () => {
+    render(<EventSignUpForm />);
+
+    const signUpForm = screen.getByTestId('event-form');
+    expect(signUpForm).toBeInTheDocument();
+  });
+});
+
+
+test('test that MyNavBar renders', () => {
+//     const navbarElement = render(<MyNavBar/>);
+//     const navbarId = navbarElement.getByTestId('navbar');
+//     expect(navbarId).toBeDefined();
+//   });
+
+
+
+*/

projects/2023TemplateWithVite/client/src/main.jsx

@@ -1,10 +1,33 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
+import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider,} from "react-router-dom";
 import './index.css'
+import ErrorPage from "./components/error-page";
+import Contact from "./components/contact";
+
+
+// /*
+// const router = createBrowserRouter(
+//   createRoutesFromElements(
+//     <Route path="/" element={<App />}>
+//       <Route path="login" element={<Contact />} />
+//       </Route>
+//       )
+//     );
+
+// */
+
+const router = createBrowserRouter(
+    createRoutesFromElements(
+      <Route path="/" element={<App />}>
+        <Route path="login" element={<Contact />} />
+        </Route>
+        )
+      );
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>,
 )

projects/2023TemplateWithVite/client/src/components/Navbar.jsx → projects/2023TemplateWithVite/client/src/routes/Navbar.jsx

@@ -2,13 +2,17 @@ import Container from 'react-bootstrap/Container';
 import Navbar from 'react-bootstrap/Navbar';
 import Nav from 'react-bootstrap/Nav';
 import Logo from '../assets/BlueTechtonicaWord.png'
-
+import { Link } from "react-router-dom";
 
 function MyNavBar(props) {
 
+  const handleClick = () =>{
+    props.handleMe();
+  }
+
   return (
     <>
-    <Navbar bg="dark" variant="dark" sticky="top">
+    <Navbar data-testid="navbar" bg="dark" variant="dark" sticky="top">
       <Container>
         <Navbar.Brand href="/">
         <img
@@ -22,7 +26,7 @@ function MyNavBar(props) {
         <Navbar.Toggle />
         <Navbar.Collapse className="justify-content-end">
           <Navbar.Text>
-            Signed in as: <a href="#login">Cristina Rodriguez</a>
+            Signed in as: <Link onClick={handleClick} to={`/login`}>Cristina Rodriguez</Link>
           </Navbar.Text>
         </Navbar.Collapse>
       </Container>

projects/2023TemplateWithVite/client/vite.config.js

@@ -4,4 +4,9 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  test: {
+    framework: 'vitest',
+    globals: true,
+    environment: 'jsdom',
+  }
 })

projects/2023TemplateWithVite/client/vitest.config.js

@@ -0,0 +1,13 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    framework: 'vitest',
+    globals: true,
+    environment: 'jsdom',
+  }
+})