add tests

starsky/starsky/clientapp/src/components/organisms/detail-view-media/shared/controls.spec.tsx

@@ -0,0 +1,111 @@
+import { act, fireEvent, render } from "@testing-library/react";
+import React from "react";
+import { Controls } from "./controls";
+import * as PlayPauseModule from "./play-pause"; // Import the entire module to spy on its methods
+
+describe("Controls component", () => {
+  let scrubberRef: React.RefObject<HTMLSpanElement>;
+  let progressRef: React.RefObject<HTMLProgressElement>;
+  let videoRef: React.RefObject<HTMLVideoElement>;
+  let timeRef: React.RefObject<HTMLSpanElement>;
+
+  beforeEach(() => {
+    // supress Error: Not implemented: HTMLMediaElement.prototype.pause
+    jest
+      .spyOn(window.HTMLMediaElement.prototype, "pause")
+      .mockImplementationOnce(() => {});
+
+    jest
+      .spyOn(window.HTMLMediaElement.prototype, "play")
+      .mockImplementationOnce(() => Promise.resolve());
+
+    scrubberRef = {
+      current: document.createElement("span")
+    } as React.RefObject<HTMLSpanElement>;
+    progressRef = {
+      current: document.createElement("progress")
+    } as React.RefObject<HTMLProgressElement>;
+    videoRef = {
+      current: document.createElement("video")
+    } as React.RefObject<HTMLVideoElement>;
+    timeRef = {
+      current: document.createElement("span")
+    } as React.RefObject<HTMLSpanElement>;
+  });
+
+  it("should call PlayPause on button click", () => {
+    // Spy on the PlayPause method from the play-pause module
+    const playPauseSpy = jest.spyOn(PlayPauseModule, "PlayPause");
+
+    const { getByText } = render(
+      <Controls
+        scrubberRef={scrubberRef}
+        progressRef={progressRef}
+        videoRef={videoRef}
+        paused={false}
+        setPaused={jest.fn()}
+        setIsError={jest.fn()}
+        setStarted={jest.fn()}
+        setIsLoading={jest.fn()}
+        timeRef={timeRef}
+      />
+    );
+
+    // Click on the Play/Pause button
+    act(() => {
+      fireEvent.click(getByText(/Pause/)); // Assuming the button text is "Pause" when not paused
+    });
+
+    // Assert that PlayPause was called with the correct arguments
+    expect(playPauseSpy).toHaveBeenCalledWith(
+      videoRef,
+      expect.any(Function),
+      expect.any(String),
+      expect.any(Function),
+      false,
+      expect.any(Function),
+      expect.any(Function)
+    );
+
+    // Restore the original method after the test
+    playPauseSpy.mockRestore();
+  });
+
+  it("should call PlayPause on Enter key press", () => {
+    // Spy on the PlayPause method from the play-pause module
+    const playPauseSpy = jest.spyOn(PlayPauseModule, "PlayPause");
+
+    const { getByText } = render(
+      <Controls
+        scrubberRef={scrubberRef}
+        progressRef={progressRef}
+        videoRef={videoRef}
+        paused={true}
+        setPaused={jest.fn()}
+        setIsError={jest.fn()}
+        setStarted={jest.fn()}
+        setIsLoading={jest.fn()}
+        timeRef={timeRef}
+      />
+    );
+
+    // Press Enter key on the Play/Pause button
+    act(() => {
+      fireEvent.keyDown(getByText(/Play/), { key: "Enter" }); // Assuming the button text is "Play" when paused
+    });
+
+    // Assert that PlayPause was called with the correct arguments
+    expect(playPauseSpy).toHaveBeenCalledWith(
+      videoRef,
+      expect.any(Function),
+      expect.any(String),
+      expect.any(Function),
+      true,
+      expect.any(Function),
+      expect.any(Function)
+    );
+
+    // Restore the original method after the test
+    playPauseSpy.mockRestore();
+  });
+});

starsky/starsky/clientapp/src/components/organisms/detail-view-media/shared/play-pause.spec.ts

@@ -0,0 +1,123 @@
+import { act } from "@testing-library/react";
+import React from "react";
+import { PlayPause } from "./play-pause";
+
+describe("YourComponent", () => {
+  let videoRef: React.RefObject<HTMLVideoElement>;
+  let setIsErrorMock: jest.Mock;
+  let setStartedMock: jest.Mock;
+  let setPausedMock: jest.Mock;
+  let setIsLoadingMock: jest.Mock;
+  let videoElement: HTMLVideoElement;
+
+  beforeEach(() => {
+    videoElement = document.createElement("video");
+    videoRef = {
+      current: videoElement
+    } as React.RefObject<HTMLVideoElement>;
+    setIsErrorMock = jest.fn();
+    setStartedMock = jest.fn();
+    setPausedMock = jest.fn();
+    setIsLoadingMock = jest.fn();
+
+    // supress Error: Not implemented: HTMLMediaElement.prototype.pause
+    jest
+      .spyOn(window.HTMLMediaElement.prototype, "pause")
+      .mockImplementationOnce(() => {});
+
+    jest
+      .spyOn(window.HTMLMediaElement.prototype, "play")
+      .mockImplementationOnce(() => Promise.resolve());
+  });
+
+  it("should handle the case when videoRef.current is falsy", () => {
+    videoRef = { current: null };
+
+    act(() => {
+      PlayPause(
+        videoRef,
+        setIsErrorMock,
+        "Error Message",
+        setStartedMock,
+        false,
+        setPausedMock,
+        setIsLoadingMock
+      );
+    });
+
+    // Assert that no functions were called since videoRef.current is falsy
+    expect(setIsErrorMock).not.toHaveBeenCalled();
+    expect(setStartedMock).not.toHaveBeenCalled();
+    expect(setPausedMock).not.toHaveBeenCalled();
+    expect(setIsLoadingMock).not.toHaveBeenCalled();
+  });
+
+  it("should handle the case when videoRef.current.play is undefined", () => {
+    const videoRef2 = {
+      current: { ...videoElement, play: undefined }
+    };
+
+    act(() => {
+      PlayPause(
+        videoRef2 as any,
+        setIsErrorMock,
+        "Error Message",
+        setStartedMock,
+        false,
+        setPausedMock,
+        setIsLoadingMock
+      );
+    });
+
+    // Assert that setIsError was called with the correct arguments
+    expect(setIsErrorMock).toHaveBeenCalledWith("Error Message");
+
+    // Assert that setStarted was called
+    expect(setStartedMock).toHaveBeenCalledTimes(0);
+
+    // Assert that no other functions were called
+    expect(setPausedMock).not.toHaveBeenCalled();
+    expect(setIsLoadingMock).not.toHaveBeenCalled();
+  });
+
+  it("should handle the case when paused is false", () => {
+    act(() => {
+      PlayPause(
+        videoRef,
+        setIsErrorMock,
+        "Error Message",
+        setStartedMock,
+        false,
+        setPausedMock,
+        setIsLoadingMock
+      );
+    });
+
+    // Assert that setStarted and play were called
+    expect(setStartedMock).toHaveBeenCalled();
+
+    // Assert that setPaused, setIsLoading, and setIsError were not called
+    expect(setPausedMock).toHaveBeenCalled();
+    expect(setIsLoadingMock).not.toHaveBeenCalled();
+    expect(setIsErrorMock).not.toHaveBeenCalled();
+  });
+
+  it("should handle the case when paused is true", () => {
+    act(() => {
+      PlayPause(
+        videoRef,
+        setIsErrorMock,
+        "Error Message",
+        setStartedMock,
+        false,
+        setPausedMock,
+        setIsLoadingMock
+      );
+    });
+
+    // Assert that setPaused, videoRef.current.pause, setIsLoading, and setIsError were called
+    expect(setPausedMock).toHaveBeenCalled();
+    expect(setIsLoadingMock).toHaveBeenCalledTimes(0);
+    expect(setIsErrorMock).not.toHaveBeenCalled(); // Since play resolves, this should not be called
+  });
+});

starsky/starsky/clientapp/src/components/organisms/detail-view-media/shared/play-pause.ts

@@ -7,8 +7,6 @@ export function PlayPause(
   setPaused: React.Dispatch<React.SetStateAction<boolean>>,
   setIsLoading: (value: React.SetStateAction<boolean>) => void
 ) {
-  console.log(videoRef?.current?.play);
-
   if (!videoRef.current) return;
   if (videoRef.current.play === undefined) {
     setIsError(MessageVideoPlayBackError);

starsky/starsky/clientapp/src/components/organisms/detail-view-media/shared/time-update.spec.ts

@@ -0,0 +1,87 @@
+import { act } from "@testing-library/react";
+import * as DateModule from "../../../../shared/date";
+import { TimeUpdate } from "./time-update";
+
+describe("TimeUpdate function", () => {
+  let videoRef: React.RefObject<HTMLVideoElement>;
+  let setIsLoadingMock: jest.Mock;
+  let progressRef: React.RefObject<HTMLProgressElement>;
+  let scrubberRef: React.RefObject<HTMLSpanElement>;
+  let timeRef: React.RefObject<HTMLSpanElement>;
+  let secondsToHoursSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    // Create fake elements
+    const videoElement = document.createElement("video");
+    const progressElement = document.createElement("progress");
+    const scrubberElement = document.createElement("span");
+    const timeElement = document.createElement("span");
+
+    videoRef = { current: videoElement } as React.RefObject<HTMLVideoElement>;
+    setIsLoadingMock = jest.fn();
+    progressRef = {
+      current: progressElement
+    } as React.RefObject<HTMLProgressElement>;
+    scrubberRef = {
+      current: scrubberElement
+    } as React.RefObject<HTMLSpanElement>;
+    timeRef = { current: timeElement } as React.RefObject<HTMLSpanElement>;
+
+    // Mock the SecondsToHours function from the shared/date module
+    secondsToHoursSpy = jest.spyOn(DateModule, "SecondsToHours");
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("should not update values if required refs are falsy", () => {
+    // Set required refs to falsy values
+    videoRef = { current: null };
+    progressRef = { current: null };
+    scrubberRef = { current: null };
+    timeRef = { current: null };
+
+    act(() => {
+      TimeUpdate(videoRef, setIsLoadingMock, progressRef, scrubberRef, timeRef);
+    });
+
+    // Assert that no functions or properties were called/modified
+    expect(progressRef.current).toBeNull();
+    expect(scrubberRef.current).toBeNull();
+    expect(timeRef.current).toBeNull();
+    expect(setIsLoadingMock).not.toHaveBeenCalled();
+    expect(secondsToHoursSpy).not.toHaveBeenCalled();
+  });
+
+  it("should update values and setIsLoading when refs are valid", () => {
+    // Set up valid values for refs
+    videoRef = { current: { currentTime: 10, duration: 100 } as any };
+
+    act(() => {
+      TimeUpdate(videoRef, setIsLoadingMock, progressRef, scrubberRef, timeRef);
+    });
+
+    // Assert that values were updated and setIsLoading was called
+    expect(progressRef.current?.value).toBe(videoRef.current?.currentTime);
+    expect(scrubberRef.current?.style.left).toBe("10%"); // Assuming scrubber left style is set in percentage
+    expect(timeRef.current?.innerHTML).toBe("0:10 / 1:40"); // Assuming SecondsToHours returns formatted time
+    expect(setIsLoadingMock).toHaveBeenCalledWith(false);
+    expect(secondsToHoursSpy).toHaveBeenCalledTimes(2); // Once for current time, once for duration
+  });
+
+  // it("should set max attribute for progress element if not set", () => {
+  //   // Set up valid values for refs
+  //   videoRef.current.duration = 100;
+
+  //   // Remove the max attribute from the progress element
+  //   progressRef.current.removeAttribute("max");
+
+  //   act(() => {
+  //     TimeUpdate(videoRef, setIsLoadingMock, progressRef, scrubberRef, timeRef);
+  //   });
+
+  //   // Assert that max attribute was set
+  //   expect(progressRef.current.getAttribute("max")).toBe("100");
+  // });
+});