Merge pull request #24 from oslabs-beta/testing

added unit tests for www directory

Author: wiltonlee948

package.json

@@ -5,7 +5,10 @@
     "transform": {
       "^.+\\.(js|ts|tsx)$": "ts-jest"
     },
-    "transformIgnorePatterns": ["/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"],
+    "testPathIgnorePatterns": ["www"],
+    "transformIgnorePatterns": [
+      "/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"
+    ],
     "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
     "moduleFileExtensions": [
       "ts",
@@ -98,6 +101,7 @@
     "@babel/preset-react": "^7.12.7",
     "@emotion/babel-plugin": "^11.7.2",
     "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^13.4.0",
     "@types/chai": "^4.2.14",
     "@types/chrome": "^0.0.119",
     "@types/d3": "^7.4.0",

www/__tests__/Blogs.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Blogs from '../src/pages/components/Blogs';
+import React from 'react';
+
+const posts = [
+  {
+    title: 'Our Legendary Article here',
+    href: '#',
+    category: { name: 'Greatness', href: '#' },
+    description:
+      'Reactime v17, we have come a long way from beta. Now introducing full Context API support and CustomHooks support: thereby allowing developers to better visualize the states and ... ',
+    date: 'Dec 14, 2022',
+    datetime: '2022-12-14',
+    imageUrl:
+      'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80',
+    readingTime: '6 min',
+    author: {
+      name: 'James Nghiem',
+      href: '#',
+      imageUrl:
+        'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+    },
+  },
+  {
+    title: 'Time-Traveling Through React State',
+    href: 'https://rxlina.medium.com/time-traveling-through-react-state-with-reactime-9-0-371dbdc99319',
+    category: { name: 'React', href: 'https://medium.com/tag/react' },
+    description:
+      'Reactime is a Chrome extension and time-travel debugger for React that allows developers to record, track, and visualize state changes. Reactime leverages React’s core reconciliation... ',
+    date: 'Oct 7, 2021',
+    datetime: '2020-10-07',
+    imageUrl:
+      'https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80',
+    readingTime: '4 min',
+    author: {
+      name: 'Lina Shin',
+      href: 'https://rxlina.medium.com/',
+      imageUrl:
+        'https://media-exp1.licdn.com/dms/image/C5603AQHQGFvRHt25WQ/profile-displayphoto-shrink_200_200/0/1623865299399?e=1676505600&v=beta&t=yDqgIaJOhO3oOWLROIH9rHPBHdVzDSV3VlB2axWqXr4',
+    },
+  },
+  {
+    title: 'What time is it? Reactime!',
+    href: 'https://medium.com/@robbytiptontol/inter-route-time-travel-with-reactime-d84cd55ec73b',
+    category: { name: 'React Devtools', href: 'https://medium.com/tag/react-devtools' },
+    description: 'Reactime is a debugging tool that lets developers take snapshots of an application\’s state data as well as time-travel through these snapshots. The snapshots display React...',
+    date: 'Jun 16, 2022',
+    datetime: '2022-06-16',
+    imageUrl:
+      'https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80',
+    readingTime: '9 min',
+    author: {
+      name: 'Robby Tipton',
+      href: 'https://medium.com/@robbytiptontol',
+      imageUrl:
+        'https://miro.medium.com/fit/c/96/96/1*pi-RH2LRvsZA9vLZTvY2mg.jpeg',
+    },
+  },
+]
+
+describe('Blog component test ', () => {
+  beforeEach(() => {
+    render (<Blogs />)
+  })
+
+  it ('the title appears on the page', () => {
+    expect(screen.getByText(/From the Blog/i)).toBeInTheDocument()
+    expect(screen.getByText(/See the blogs from the most recent updates and to the past years!/i)).toBeInTheDocument()
+  });
+
+  it ('displays the correct information for each blog post', () => {
+    const blogs = screen.getAllByTestId('blog')
+    blogs.forEach((blog) => {
+
+
+    })
+  });
+});

www/__tests__/FeaturesSection.test.tsx

@@ -0,0 +1,43 @@
+import {screen, render} from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import FeaturesSection from '../src/pages/components/FeaturesSection';
+
+const features = [
+  {
+    name: 'State SnapShot Display',
+    description: 'See your application state in a stylized and interactive format, for clear concise state management',
+  },
+  {
+    name: 'Time Travel Rendering',
+    description: 'Simulate any state change from your DOM history, with a simple click of a button',
+  },
+  {
+    name: 'Action Comparison & Snapshot Series',
+    description: 'Save a series of state snapshots and use it to analyze changes in component render performance between current and previous series of snapshots.',
+  },
+]
+
+describe('FeatureSection component test ', () => {
+  beforeEach(() => {
+    render(<FeaturesSection />)
+  });
+
+  it('Renders the core features section', () => {
+    expect(screen.getByText(/Core Features/i)).toBeInTheDocument();
+  });
+
+  it('Title appears on the page', () => {
+    expect(screen.getByText(/What makes Reactime so great\?/i)).toBeInTheDocument();
+  });
+
+  it('Subheading shows up on the page', () => {
+    expect(screen.getByText(/Reactime is full of features that make your life easier as a developer. From time-travel debugging to state snapshot display, check out how using Reactime will improve your developer experience./i)).toBeInTheDocument();
+  })
+
+  it('Renders all feature name and descriptions', () => {
+    features.forEach((feature) => {
+      expect(screen.getByText(feature.name)).toBeInTheDocument();
+      expect(screen.getByText(feature.description)).toBeInTheDocument();
+    });
+  })
+});

www/jest.config.js

@@ -0,0 +1,15 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  transform: {
+    // '^.+\\.[tj]sx?$' to process js/ts with `ts-jest`
+    // '^.+\\.m?[tj]sx?$' to process js/ts/mjs/mts with `ts-jest`
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        tsconfig: 'tsconfig.jest.json',
+      },
+    ],
+  },
+};

www/package.json

@@ -7,7 +7,8 @@
     "dev": "next dev",
     "postinstall": "prisma generate",
     "lint": "next lint",
-    "start": "next start"
+    "start": "next start",
+    "test": "jest"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.5",
@@ -28,21 +29,28 @@
     "zod": "^3.18.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.2.5",
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
+    "@types/testing-library__react": "^10.2.0",
     "@types/tiny-slider-react": "^0.3.4",
     "@typescript-eslint/eslint-plugin": "^5.33.0",
     "@typescript-eslint/parser": "^5.33.0",
     "autoprefixer": "^10.4.7",
     "eslint": "^8.26.0",
     "eslint-config-next": "13.0.2",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "postcss": "^8.4.14",
     "prettier": "^2.7.1",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "prisma": "^4.5.0",
     "tailwindcss": "^3.2.0",
-    "typescript": "^4.8.4"
+    "ts-jest": "^29.0.3",
+    "typescript": "^4.9.4"
   },
   "ct3aMetadata": {
     "initVersion": "6.11.3"

www/prisma/schema.prisma

@@ -6,12 +6,13 @@ generator client {
 }
 
 datasource db {
-  provider = "sqlite"
+  provider = "mysql"
   url      = env("DATABASE_URL")
+  relationMode = "prisma"
 }
 
 model User {
-  id        String   @id @default(cuid()) 
+  id        String   @id @default(cuid())
   name      String
   email     String
   admin     Boolean  @default(false)

www/src/pages/components/Blogs.tsx

@@ -69,7 +69,7 @@ export default function Blogs() {
         </div>
         <div className="mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3">
           {posts.map((post) => (
-            <div key={post.title} className="flex flex-col overflow-hidden rounded-lg shadow-lg">
+            <div key={post.title} data-testid='blog' className="flex flex-col overflow-hidden rounded-lg shadow-lg">
               <div className="flex-shrink-0">
                 <img className="h-48 w-full object-cover" src={post.imageUrl} alt="" />
               </div>

www/src/pages/components/FeaturesSection.jsx renamed to www/src/pages/components/FeaturesSection.tsx

@@ -11,12 +11,14 @@ export default function LandingPage() {
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const { mutate } = trpc.user.createUser.useMutation();
-  
+
   const handleSubmit = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.preventDefault();
     // grab the information of name and email
     // bundle those together to be an object to be sent to backend
     mutate({name, email});
+    setName('');
+    setEmail('');
   }
 
   return (

www/src/pages/components/LandingPage.tsx

@@ -23,6 +23,8 @@ const secret: NextPage = () => {
     }
   };
 
+  const { data:users } = trpc.user.findAll.useQuery();
+
   return (
     <>
       {!isAdmin && <div className = 'flex h-screen items-center justify-center'>
@@ -36,7 +38,7 @@ const secret: NextPage = () => {
         </input>
         <button onClick={clickHandler} className="blockrounded-md border rounded border-transparent bg-rose-500 px-5 py-3 text-base font-medium text-white shadow hover:bg-rose-600 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 sm:px-10">Submit</button>
       </div>}
-        {isAdmin && <div>You logged in!</div>}
+        {isAdmin && <div>{users?.map(user => <span key={user.id}>{user.email}, </span>)}</div>}
 
     </>
   );

www/src/pages/secret.tsx

@@ -4,10 +4,10 @@ import { router, publicProcedure } from "../trpc";
 
 export const userRouter = router({
   createUser: publicProcedure
-    .input(z.object({ 
-      name: z.string(), 
+    .input(z.object({
+      name: z.string(),
       email: z.string().email()}),
-      
+
     ) // name and email
     .mutation(async ({ input, ctx }) => {
       // we want to add to our database with the name, email, admin defaulted to false as column values
@@ -17,6 +17,10 @@ export const userRouter = router({
           email: input.email,
         }
       })
+    }),
+  findAll: publicProcedure
+    .query(async ({ctx}) => {
+      return await ctx.prisma.user.findMany();
     })
 });
 

www/src/server/trpc/router/user.ts

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
+}