test: OKO-108 refresh camera list on change tests

Author: piotrpdev

frontend/tests/App.test.ts

@@ -2,7 +2,6 @@ import { fireEvent, render, waitFor } from "@testing-library/svelte";
 import { describe, test, expect } from "vitest";
 import Home from "../src/routes/Home.svelte";
 import Cameras from "../src/routes/Cameras.svelte";
-import CameraAndVideos from "../src/lib/components/CameraAndVideos.svelte";
 import Login from "../src/routes/Login.svelte";
 import { get, Writable } from "svelte/store";
 import { socket } from "../src/lib/stores/socketStore";
@@ -58,14 +57,29 @@ describe("Cameras page", () => {
     user.set(testUserAndCameras);
     socket.set(new WebSocket("ws://localhost:3000/api/ws"));
 
-    const { getByAltText } = render(CameraAndVideos, {
-      cameraId: 2,
-      cameraName: "Kitchen",
+    const { queryByAltText, queryByText } = render(Cameras);
+
+    let cameraLink: HTMLElement | null = null;
+
+    await waitFor(() => {
+      cameraLink = queryByText(testCameras[1].camera_name);
+      expect(cameraLink).toBeInTheDocument();
+    });
+
+    expect((cameraLink as unknown as HTMLButtonElement)?.tagName).toBe(
+      "BUTTON",
+    );
+    await fireEvent.click(cameraLink as unknown as HTMLButtonElement);
+
+    let _liveFeedImg: HTMLElement | null = null;
+
+    await waitFor(() => {
+      _liveFeedImg = queryByAltText(liveFeedAltText);
+      expect(_liveFeedImg).toBeInTheDocument();
     });
 
-    const liveFeedImg = getByAltText(liveFeedAltText);
+    const liveFeedImg = _liveFeedImg as unknown as HTMLImageElement;
 
-    expect(liveFeedImg).toBeInTheDocument();
     expect(liveFeedImg.getAttribute("src")).toBe(null);
 
     let liveFeedImgSrc: string | null = null;

frontend/vitest-setup.ts

@@ -203,6 +203,7 @@ export const handlers = [
   }),
   api_ws.addEventListener("connection", async ({ client }) => {
     console.log("WebSocket connection established");
+    await timeoutPromise(100);
     // https://stackoverflow.com/a/16245768/19020549
     testImgContainer1.camera_id = 2;
     client.send(JSON.stringify(testImgContainer1));