adding javascript linting and condensing tests

.github/workflows/main.yml

@@ -40,7 +40,6 @@ jobs:
           cd ${{github.workspace}}/frontend
           npm install
           npm test
-          # npm run lint
 
       - name: Run backend tests
         run: |
@@ -70,5 +69,10 @@ jobs:
 
       - name: Lint Python Files
         run: |
-          cd backend
-          pylint *.py || true
+          cd ${{github.workspace}}/backend
+          pylint *.py || true
+      
+      - name: Lint JavaScript files
+        run: |
+          cd ${{github.workspace}}/frontend
+          npm run lint

frontend/src/App.js

@@ -17,15 +17,15 @@ function App() {
   };
 
   let websocket = useRef(null);
-  let websocketConnected = false;
+  // let websocketConnected = false;
 
   useEffect(() => {
     websocket.current = new WebSocket("ws://localhost:8000/ws");
 
     websocket.current.onopen = () => {
       console.log("WebSocket Connected to React");
       websocket.current.send("Websocket Connected to React")
-      websocketConnected = true;
+      // websocketConnected = true;
     };
 
     websocket.current.onmessage = function(event) {
@@ -34,7 +34,7 @@ function App() {
 
     websocket.current.onclose = (event) => {
       console.log("WebSocket connection closed: ", event);
-      websocketConnected = false;
+      // websocketConnected = false;
     };
 
     return () => {

frontend/src/__tests__/App.test.js

@@ -1,111 +1,125 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import App from '../App';
-import useStepTime from '../useStepTime';
-import { act } from 'react';
-import WS from 'jest-websocket-mock';
+import { render, screen, fireEvent } from "@testing-library/react";
+import App from "../App";
+import useStepTime from "../useStepTime";
+import WS from "jest-websocket-mock";
 
-jest.mock('../useStepTime');
+jest.mock("../useStepTime");
 
-test('Step Time Component is rendered on screen', () => {
+test("Step Time Component is rendered on screen", () => {
   useStepTime.mockReturnValue({
     left: 0,
     right: 0,
     targetZones: {
       left: { min: 25, max: 30 },
-      right: { min: 50, max: 45 }
-    }
+      right: { min: 50, max: 45 },
+    },
   });
-  
+
   render(<App />);
-  expect(screen.getByTestId('step-time-digits-view')).toBeInTheDocument();
+  expect(screen.getByTestId("step-time-digits-view")).toBeInTheDocument();
 });
 
-describe('Navbar Component', () => {
+describe("Navbar Component", () => {
   beforeEach(() => {
     useStepTime.mockReturnValue({
       left: 0,
       right: 0,
       targetZones: {
         left: { min: 25, max: 30 },
-        right: { min: 50, max: 45 }
-      } 
+        right: { min: 50, max: 45 },
+      },
     });
   });
 
-  test('Navbar is rendered on screen', () => {
+  test("Navbar is rendered on screen", () => {
     render(<App />);
-    expect(screen.getByRole('navigation')).toBeInTheDocument();
+    expect(screen.getByRole("navigation")).toBeInTheDocument();
   });
 
-  describe('View Swapping', () => {
-    test('Navbar swap renders StepTimeChart view', () => {
+  describe("View Swapping", () => {
+    test("Navbar swap renders StepTimeChart view", () => {
       render(<App />);
-      fireEvent.click(screen.getByTestId('step-time-chart-nav'));
-      expect(screen.getByTestId('step-time-chart-view')).toBeInTheDocument();
+      fireEvent.click(screen.getByTestId("step-time-chart-nav"));
+      expect(screen.getByTestId("step-time-chart-view")).toBeInTheDocument();
     });
-  
-    test('Navbar swap renders StepTimeGraph view', () => {
+
+    test("Navbar swap renders StepTimeGraph view", () => {
       render(<App />);
-      fireEvent.click(screen.getByTestId('step-time-graph-nav'));
-      expect(screen.getByTestId('step-time-graph-view')).toBeInTheDocument();
+      fireEvent.click(screen.getByTestId("step-time-graph-nav"));
+      expect(screen.getByTestId("step-time-graph-view")).toBeInTheDocument();
     });
-  
-    test('Navbar swap renders StepTimeDigits view', () => {
+
+    test("Navbar swap renders StepTimeDigits view", () => {
       render(<App />);
-      fireEvent.click(screen.getByTestId('step-time-graph-nav'));
-      fireEvent.click(screen.getByTestId('step-time-digits-nav'));
-      expect(screen.getByTestId('step-time-digits-view')).toBeInTheDocument();
+      fireEvent.click(screen.getByTestId("step-time-graph-nav"));
+      fireEvent.click(screen.getByTestId("step-time-digits-nav"));
+      expect(screen.getByTestId("step-time-digits-view")).toBeInTheDocument();
     });
   });
 });
 
-describe('WebSocket in App Component', () => {
+describe("WebSocket in App Component", () => {
   let server;
 
   beforeEach(() => {
     server = new WS("ws://localhost:8000/ws");
-    
+
     useStepTime.mockReturnValue({
       left: 0,
       right: 0,
       targetZones: {
         left: { min: 25, max: 30 },
-        right: { min: 50, max: 45 }
-      } 
+        right: { min: 50, max: 45 },
+      },
     });
   });
 
   afterEach(() => {
     WS.clean();
   });
 
-  test('WebSocket connection messages', async () => {
-    const consoleLogSpy = jest.spyOn(console, 'log');
+  test("WebSocket connection messages", async () => {
+    const consoleLogSpy = jest.spyOn(console, "log");
 
-    await act(async () => {
-      render(<App />);
-    });
+    render(<App />); // Removed act wrapper
 
     await server.connected;
 
     server.send("Message from backend");
 
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 100));
-    });
+    // Await for the effects of the message
+    await new Promise((resolve) => setTimeout(resolve, 100));
 
-    expect(consoleLogSpy).toHaveBeenCalledWith("Data received from backend: ", "Message from backend");
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      "Data received from backend: ",
+      "Message from backend"
+    );
 
     consoleLogSpy.mockRestore();
   });
 
-  test('Message on WebSocket connection open', async () => {
-    await act(async () => {
-      render(<App />);
-    });
+  test("Message on WebSocket connection open", async () => {
+    render(<App />); // Removed act wrapper
 
     await server.connected;
 
     expect(server).toReceiveMessage("Websocket Connected to React");
   });
-});
+
+  test("User is notified on WS Close", async () => {
+    const consoleLogSpy = jest.spyOn(console, "log");
+
+    render(<App />); // Removed act wrapper
+
+    await server.connected;
+
+    server.close(); // Removed act wrapper
+
+    expect(consoleLogSpy).toHaveBeenCalledWith(
+      "WebSocket connection closed: ",
+      expect.any(Object)
+    );
+
+    consoleLogSpy.mockRestore();
+  });
+});