2021csb1167/sof 98 youtube summaries page testing

client/__mocks__/react-fontawesome.js

@@ -8,4 +8,4 @@ const FontAwesomeIcon = ({ icon }) => {
     );
 };
 
-export { FontAwesomeIcon };
+export { FontAwesomeIcon };

client/package.json

@@ -32,6 +32,7 @@
     "react-scripts": "^5.0.1",
     "react-star-ratings": "^2.3.0",
     "react-toastify": "^10.0.4",
+    "redux-mock-store": "^1.5.4",
     "redux-persist": "^6.0.0",
     "web-vitals": "^3.5.2"
   },

client/src/__tests__/summarypage.test.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import {cleanup, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import SummaryPage from '../pages/SummaryPage.jsx';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import { store, persistor } from "../redux/store";
+import { PersistGate } from "redux-persist/integration/react";
+import { useLocation } from 'react-router-dom';
+
+afterEach(cleanup);
+
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
+    useLocation: jest.fn(), // mock the hook
+}));
+
+test('In Summary Page Transcript text is rendered', () => {
+
+    useLocation.mockReturnValue({
+        state: "https://www.youtube.com/watch?v=zJU_Bp-Yp1c&ab_channel=Avatar%3ATheLastAirbender",
+    });
+
+    render(
+        <Provider store={store}>
+            <PersistGate loading={null} persistor={persistor}>
+                <Router>
+                    <SummaryPage />
+                </Router>
+            </PersistGate>
+        </Provider>
+    );
+    const transcripts = screen.getByTestId("transcript-test");
+    expect(transcripts).toBeInTheDocument();
+});
+
+test('In Summary Page Notes text is rendered', () => {
+
+    useLocation.mockReturnValue({
+        state: "https://www.youtube.com/watch?v=zJU_Bp-Yp1c&ab_channel=Avatar%3ATheLastAirbender",
+    });
+
+    render(
+        <Provider store={store}>
+            <PersistGate loading={null} persistor={persistor}>
+                <Router>
+                    <SummaryPage />
+                </Router>
+            </PersistGate>
+        </Provider>
+    );
+    const notes = screen.getByTestId("notes-test");
+    expect(notes).toBeInTheDocument();
+});
+
+test('In Summary Page summary text is rendered', () => {
+
+    useLocation.mockReturnValue({
+        state: "https://www.youtube.com/watch?v=zJU_Bp-Yp1c&ab_channel=Avatar%3ATheLastAirbender",
+    });
+
+    render(
+        <Provider store={store}>
+            <PersistGate loading={null} persistor={persistor}>
+                <Router>
+                    <SummaryPage />
+                </Router>
+            </PersistGate>
+        </Provider>
+    );
+    const summary = screen.getByTestId("summary-test");
+    expect(summary).toBeInTheDocument();
+});

client/src/pages/SummaryPage.jsx

@@ -54,10 +54,6 @@ const SummaryPage = () => {
     const res = await axios.post("http://localhost:5000/transcript/", {
       url,
     });
-    // console.log(res.data);
-    // const transcripts = await JSON5.parse(
-    //   "[{'start': 0.0, 'end': 3.94, 'text': 'In a single minute your body produces 120 to 180 million red blood cells,'}, {'start': 3.94, 'end': 5.8, 'text': 'people ask Google 2.4 million questions,'}, {'start': 5.8, 'end': 7.88, 'text': 'and 25 million Coca-Cola products are consumed.'}, {'start': 7.88, 'end': 9.44, 'text': 'Many of those bottles will end up in a landfill,'}, {'start': 9.44, 'end': 12.2, 'text': 'where the World Bank estimates we produce 5 million pounds of garbage.'}, {'start': 12.2, 'end': 16.02, 'text': '108 human lives will be lost in this minute and an adult male will lose 96 million cells.'}, {'start': 16.02, 'end': 18.7, 'text': 'Fortunately, 96 million cells divide, replacing those lost.'}, {'start': 18.76, 'end': 23.660000000000004, 'text': 'Speaking of divisions, in the USA, 1.5 people will get divorced, while world-wide, 116 people will get married,'}, {'start': 23.66, 'end': 27.16, 'text': '83,300 people have sex, but only 258 babies will be born'}, {'start': 27.16, 'end': 30.5, 'text': 'and a fetus is developing neurons at a rate of 250,000 per minute,'}, {'start': 30.5, 'end': 34.48, 'text': \"so it's no wonder that a computer simulation takes 60 quadrillion bytes to simulate a minute.\"}, {'start': 34.48, 'end': 39.3, 'text': 'An average of 1.38 micrometers of rain fall around the world, which is 4.7 billion bathtubs of water every minute'}, {'start': 39.3, 'end': 43.12, 'text': 'and with the storms comes approximately 6,000 bolts of cloud-to-ground lightning hitting the Earth.'}, {'start': 43.12, 'end': 46.72, 'text': 'A 150 pound person expends 1.1 calories of energy per minute while sleeping,'}, {'start': 46.72, 'end': 49.78, 'text': 'while the sun provides us with 83.33 terrawatts of energy.'}, {'start': 49.78, 'end': 54.660000000000004, 'text': 'The earth will 1800 kilometers of its 940 million around the sun, moving 1,034 times faster than a cheetah,'}, {'start': 54.66, 'end': 57.279999999999994, 'text': '70,000 hours of Netfilx are watched, 300 hours are uploaded to YouTube,'}, {'start': 57.28, 'end': 59.76, 'text': 'and you can watch this video and subscribe.'}]\r\n"
-    // );
     const transcripts = await JSON5.parse(res.data.transcript);
     console.log(transcripts);
     setTranscripts(transcripts);
@@ -162,6 +158,7 @@ const SummaryPage = () => {
                   value={note}
                   onChange={(e) => setNote(e.target.value)}
                   placeholder=""
+                  data-testid="notes-test"
                   className="bg-none w-full h-[480px] outline-none overflow-auto"
                   // style={{ paddingTop: '20px' }}
                 />
@@ -175,7 +172,7 @@ const SummaryPage = () => {
                 <div className="flex justify-between items-center mb-4">
                   <h2 className={styles.transcriptHeader}>TRANSCRIPT</h2>
                 </div>
-                <div className="w-full flex flex-col gap-5 pb-5">
+                <div data-testid = 'transcript-test' className="w-full flex flex-col gap-5 pb-5">
                   {transcripts.map((transcript) => (
                     <div className="flex">
                       <div className="text-[rgb(116,173,252)] w-10 mr-2">{transcript.start}</div>
@@ -199,7 +196,7 @@ const SummaryPage = () => {
                     </button>
                   </div>
                 </div>
-                <div>{summaryText}</div>
+                <div data-testid="summary-test">{summaryText}</div>
               </div>
             </div>
           </div>

server/controllers/transcript.js

@@ -4,7 +4,7 @@ const { spawnSync } = require("child_process");
 const getTranscript = async (req, res) => {
     try {
         const { url } = req.body;
-
+        // console.log(url + 'transcript');
         if (!url) {
             return res.status(400).json({ message: "URL is required" });
         }

server/jest-config.js

@@ -1,5 +1,5 @@
 // jest.config.js
 module.exports = {
     verbose: true,
-    testTimeout: 30000,
+    testTimeout: 10000,
 };

server/server_tests/Login-testing.test.js

@@ -7,11 +7,11 @@ require("dotenv").config();
 
 beforeEach(async () => {
     await mongoose.connect(process.env.MONGO_URL);
-});
+},10000);
 
 afterEach(async () => {
     await mongoose.connection.close();
-});
+},10000);
 
 const server = app.listen(() => {
     console.log(`Server is running on ${port} `);

server/server_tests/Register-testing.test.js

@@ -7,11 +7,11 @@ require("dotenv").config();
 
 beforeEach(async () => {
     await mongoose.connect(process.env.MONGO_URL);
-});
+},10000);
 
 afterEach(async () => {
     await mongoose.connection.close();
-});
+},10000);
 
 const server = app.listen(() => {
     console.log(`Server is running on ${port} `);

server/server_tests/Summary-testing.test.js

@@ -7,11 +7,11 @@ require("dotenv").config();
 
 beforeEach(async () => {
     await mongoose.connect(process.env.MONGO_URL);
-});
+},10000);
 
 afterEach(async () => {
     await mongoose.connection.close();
-});
+},10000);
 
 const server = app.listen(() => {
     console.log(`Server is running on ${port} `);