Testing Resource Component

package.json

@@ -6,7 +6,11 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+<<<<<<< HEAD
+    "axios": "^0.24.0",
+=======
     "d3": "^7.1.1",
+>>>>>>> 181ae805f4b2c4c9bf7121743c7973150befd1dd
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",

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,62 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MemoryRouter, Link } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import SingleResource from '../SingleResource/SingleResource';
+import Resources from "./Resources";
+import Toggle from "../Toggle";
+import axios from "axios";
+
+// test.afterEach(cleanup)
+
+describe("Resources Component", () => {
+    it('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();
+});
+// screen.debug();
+
+test("resource body", () => {
+    render(<div data-testid="body" />);
+    const resourceBody = screen.getByTestId("body");
+    expect(resourceBody).toBeInTheDocument();
+});
+// test("link working", () => {
+//     const history = createMemoryHistory();
+//     history.push = jest.fn();
+
+
+jest.mock('axios');
+
+it('returns the first resource', async () => {
+  axios.get.mockResolvedValue({
+    data: [
+      {
+        userId: 1,
+        id: 1,
+        title: 'My First Album'
+      }
+    ]
+  });
+
+  const resource = await SingleResource();
+  expect(resource).toHaveBeenCalledTimes('/resources/1');
+});
+
+
+    // const { getByText } = render(
+    //     <MemoryRouter history={history}>
+    //       <Link to={`/resources/1`}>More info</Link>
+    //     </MemoryRouter>
+    //   );
+
+    //   fireEvent.click(getByText('More info'));
+    //   expect(history.push).toHaveBeenCalledWith(`resources/1`);
+// });

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>