Added test Resource component - More info Link

src/components/Resources/Resources.js

@@ -15,14 +15,15 @@ return (
         {
             ResourcesList.map(resource => 
               <article key={resource.id}> 
-                <h1>{resource.name}</h1>
-                <p className="text">{resource.body}
+                <h1 data-testid="name">{resource.name}</h1>
+                <p data-testid="body" className="text">{resource.body}
                </p>
-               <Link className="resourceLink" to={`/resources/${resource.id}`}><span>More info</span></Link>
+               <Link data-testid="link" className="resourceLink" to={`/resources/${resource.id}`}><span>More info</span></Link>
 
-              </article>)}
-      </div> 
+              </article>)
+        }
+        </div> 
       <Disclaimer />
-   </div> 
+    </div> 
   );
 }

src/components/Resources/Resources.test.js

@@ -0,0 +1,56 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import Resources from "../Resources/Resources";
+import Toggle from "../Toggle";
+import { BrowserRouter, Router, Link } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import data from '../data/data.json';
+
+describe("Resources", () => {
+
+    test("renders Resources Component", () => {
+        const {getByText} = render(<BrowserRouter><Resources/></BrowserRouter>);
+        expect(screen.getByText("Open Source Programs")).toBeInTheDocument;
+    })
+   test('rendered toggle', () => {
+        const { getByTestId } = render(<Toggle />);
+        const toggle = getByTestId("toggle");
+        expect(toggle).toBeTruthy();
+    })
+    test("resource name", () => {
+        render(<div data-testid="name" />);
+        const resourceName = screen.getByTestId("name");
+        expect(resourceName).toBeInTheDocument();
+    })
+    test("resource body", () => {
+        render(<div data-testid="body" />);
+        const resourceBody = screen.getByTestId("body");
+        expect(resourceBody).toBeInTheDocument();
+    })
+    test(" More info Link validation", async () => {
+        //check the `More info` link 12 times rendered on /resouces page 
+        //check when click moreinfo link routes to corresponding page /resources/resource.id 
+        //check each page has resource.name using getByText on the screen
+
+        let history = createMemoryHistory({ initialEntries: ["/resources"] });
+
+        render(<BrowserRouter><Resources ResourcesList={data} /></BrowserRouter>);
+        let moreinfoButtons = screen.getAllByText("More info");
+        for (let resource of data) 
+        {
+
+            <Router history={history}>
+                <Link to={{ pathname: `/resources/${resource.id}` }}>More info</Link>
+            </Router>
+
+            expect(moreinfoButtons).toHaveLength(12)
+
+            fireEvent.click(moreinfoButtons[`${resource.id-1}`]);
+
+            expect(location.pathname).toEqual(`/resources/${resource.id}`);
+
+            await expect(screen.getByText(`${resource.name}`)).toBeInTheDocument();
+
+        }   
+    })
+    screen.debug();
+})

src/components/Toggle.js

@@ -8,7 +8,7 @@ import './Toggle.css';
 export default function Toggle(){
     const history = useHistory();
     return (
-        <div className="flex">
+        <div className="flex" data-testid="toggle">
              <h1>Open Source Programs</h1>
             <div className="flex-container">
                     <button  onClick={() => history.push('/TableView')}><img alt ="table" src={table}></img></button>