Merge pull request #26 from oslabs-beta/testing

added unit tests to website components

src/backend/linkFiber.ts

@@ -185,20 +185,6 @@ function createTree(
     _debugHookTypes,
   } = currentFiber;
 
-//   if (currentFiber.tag === 10) {
-//     const queue = [currentFiber];
-//     while (queue.length > 0) {
-//       const tempFiber = queue.shift();
-//       if (tempFiber.tag === 0) console.log(tempFiber);
-//       if (tempFiber.sibling) {
-//         queue.push(tempFiber.sibling);
-//       }
-//       if (tempFiber.child) {
-//         queue.push(tempFiber.child);
-//       }
-//   }
-// }
-
 // check to see if we can get the information we were looking for
 // need to figure out what tag is
   if (tag === 5) {

www/__tests__/Blogs.test.tsx

@@ -5,21 +5,21 @@ import React from 'react';
 
 const posts = [
   {
-    title: 'Our Legendary Article here',
-    href: '#',
-    category: { name: 'Greatness', href: '#' },
+    title: 'Traveling through time with Reactime',
+    href: 'https://medium.com/@reactime/reactime-v17-0-0-now-with-support-for-the-context-api-and-a-modern-ui-f0edf9e54dae',
+    category: { name: 'React Debugging', href: 'https://medium.com/tag/react-devtools' },
     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',
+      'Reactime v17, we have come a long way from beta. Now introducing full Context API support: thereby allowing developers to better visualize the states and ... ',
+    date: 'Jan 3, 2023',
+    datetime: '2023-1-03',
     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: '#',
+      href: 'https://medium.com/@reactime',
       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',
+        'https://github.com/jemzir.png',
     },
   },
   {
@@ -70,10 +70,19 @@ describe('Blog component test ', () => {
   });
 
   it ('displays the correct information for each blog post', () => {
-    const blogs = screen.getAllByTestId('blog')
-    blogs.forEach((blog) => {
-
+    posts.forEach(post => {
+      expect(screen.getByText(post.title)).toBeInTheDocument();
+      expect(screen.getByText(post.description.trim())).toBeInTheDocument();
+      expect(screen.getByText(post.date)).toBeInTheDocument();
+      expect(screen.getByText(post.category.name)).toBeInTheDocument();
+      expect(screen.getAllByText(post.author.name)[0]).toBeInTheDocument();
+    })
+  });
 
+  it ('clicking a post link navigates to the correct URL', () => {
+    posts.forEach((post, index) => {
+      const postLink = post.href
+      expect(screen.getAllByTestId('link')[index]).toHaveAttribute('href', postLink);
     })
   });
 });

www/__tests__/LandingPage.test.tsx

@@ -0,0 +1,39 @@
+import {screen, render, fireEvent} from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import LandingPage from '../src/pages/components/LandingPage';
+import Blogs from '../src/pages/components/Blogs';
+import People from '../src/pages/components/TeamSection';
+import FeaturesSection from '../src/pages/components/FeaturesSection';
+import {trpc} from '../src/utils/trpc';
+// Work in progress. Trying to mock the trpc object
+
+
+jest.mock("../src/utils/trpc", () => {
+  const mockCreateUser = jest.fn();
+  const mockFindAll = jest.fn();
+
+  const mockUserRouter = {
+    createUser: mockCreateUser,
+    findAll: mockFindAll
+  };
+
+  const mockAppRouter = {
+    user: mockUserRouter
+  };
+  return {
+    appRouter: mockAppRouter
+  };
+});
+
+describe('Navbar Component Test ', () => {
+  beforeEach(() => {
+    render(<LandingPage />)
+  });
+
+  it ('check that the button is rendered on the page', () => {
+    const button = screen.getByRole('button');
+    console.debug(button)
+    expect(button).toHaveLength(1);
+    expect(screen.getByText("A time travel debugger for modern react apps")).toBeInTheDocument();
+  });
+});

www/__tests__/NavBar.test.tsx

@@ -0,0 +1,19 @@
+import {screen, render, fireEvent} from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import NavBar from '../src/pages/components/NavBar';
+
+describe('Navbar Component Test ', () => {
+  beforeEach(() => {
+    render(<NavBar />)
+  });
+
+  it ('navbar should have two buttons(anchor tags)', () => {
+    const buttons = screen.getAllByRole('link');
+    expect(buttons).toHaveLength(2)
+  });
+
+  it ('clicking a post link navigates to the correct URL', () => {
+    expect(screen.getAllByRole('link')[0]).toHaveAttribute('href', 'http://github.com/open-source-labs/reactime');
+    expect(screen.getAllByRole('link')[1]).toHaveAttribute('href', 'https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga?hl=en-US');
+  })
+})

www/__tests__/TeamSection.test.tsx

@@ -0,0 +1,18 @@
+import {screen, render} from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import People, { Profile } from '../src/pages/components/TeamSection';
+
+// http://localhost/_next/image?url=https%3A%2F%2Fgithub.com%2Fwiltonlee948.png&w=256&q=75
+
+it('test to see if all the contributor images show up', async () => {
+  render(<People />);
+  const image = screen.getAllByTestId('image');
+  expect(image.length).toBe(72);
+});
+
+
+test('the value from the profile attribute should be in the src', async () => {
+  render(<Profile key='' profile='react' name='' />);
+  const src = await screen.getByTestId('image').getAttribute('src');
+  expect(src).toContain('react');
+});

www/src/pages/components/Blogs.tsx

@@ -1,20 +1,20 @@
 const posts = [
   {
-    title: 'Our Legendary Article here',
-    href: '#',
-    category: { name: 'Greatness', href: '#' },
+    title: 'Traveling through time with Reactime',
+    href: 'https://medium.com/@reactime/reactime-v17-0-0-now-with-support-for-the-context-api-and-a-modern-ui-f0edf9e54dae',
+    category: { name: 'React Debugging', href: 'https://medium.com/tag/react-devtools' },
     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',
+      'Reactime v17, we have come a long way from beta. Now introducing full Context API support: thereby allowing developers to better visualize the states and ... ',
+    date: 'Jan 3, 2023',
+    datetime: '2023-1-03',
     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: '#',
+      href: 'https://medium.com/@reactime',
       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',
+        'https://github.com/jemzir.png',
     },
   },
   {
@@ -80,7 +80,7 @@ export default function Blogs() {
                       {post.category.name}
                     </a>
                   </p>
-                  <a href={post.href} className="mt-2 block">
+                  <a href={post.href} data-testid='link' className="mt-2 block">
                     <p className="text-xl font-semibold text-gray-900">{post.title}</p>
                     <p className="mt-3 text-base text-gray-500">{post.description}</p>
                   </a>

www/src/pages/components/LandingPage.tsx

@@ -38,7 +38,7 @@ export default function LandingPage() {
               </div>
               <div className="mt-20">
                 <div>
-                  <a href="#" className="inline-flex space-x-4">
+                  <a target="_blank" href="https://medium.com/@reactime/reactime-v17-0-0-now-with-support-for-the-context-api-and-a-modern-ui-f0edf9e54dae" className="inline-flex space-x-4">
                     <span className="rounded bg-rose-50 px-2.5 py-1 text-sm font-semibold text-rose-500">
                       What's new
                     </span>

www/src/pages/components/TeamSection.tsx

@@ -77,7 +77,6 @@ const people: string[][] = [
 ]
 
 function replace(e: React.SyntheticEvent<HTMLImageElement>): void{
-    console.log('test');
     e.currentTarget.onerror = null;
     e.currentTarget.src = "/profileFallback.png"
 }
@@ -112,7 +111,7 @@ function replace(e: React.SyntheticEvent<HTMLImageElement>): void{
     profile: string | undefined,
     name: string | undefined,
   }
-  function Profile({profile, name}: profileType) {
+  export function Profile({profile, name}: profileType) {
     const [imageError, setImageError] = useState(false);
     return (
       <div className="space-y-4">
@@ -123,6 +122,7 @@ function replace(e: React.SyntheticEvent<HTMLImageElement>): void{
               className="mx-auto h-20 w-20 rounded-full lg:h-24 lg:w-24"
               onError={(e) => setImageError(true)}
               alt="missing-profile-image"
+              data-testid="image"
           />
         <div className="space-y-2">
           <div className="text-xs font-medium lg:text-sm">