test: add test buttop loop

src/__tests__/ButtonLoop.test.tsx

@@ -1,11 +1,15 @@
+/* eslint-disable testing-library/no-node-access */
 import { render } from "@testing-library/react";
 import ButtonLoop from "../ButtonLoop";
+import useEnableLoopVideo from "../hooks/useEnableLoopVideo";
 import useMessageToggle from "../hooks/useMessageToggle";
+import userEvent from "@testing-library/user-event";
 
 jest.mock("../hooks/useEnableLoopVideo", () => jest.fn());
 jest.mock("../hooks/useMessageToggle", () => jest.fn());
 
 describe("<ButtonLoop/>", () => {
+  const handleToggleLoopAttributeVideo = jest.fn();
   const renderComponent = () => {
     return render(<ButtonLoop />);
   };
@@ -15,10 +19,42 @@ describe("<ButtonLoop/>", () => {
       isEnableAlwaysLoop: false,
       isEnableButtonLoop: true,
     });
+
+    (useEnableLoopVideo as jest.Mock).mockReturnValue({
+      handleToggleLoopAttributeVideo,
+      isLooped: true,
+    });
   });
 
   it("should match snapshot", () => {
     const { container } = renderComponent();
     expect(container).toMatchSnapshot();
+    expect(document.querySelector(".ytp-button")).toBeInTheDocument();
+  });
+
+  it("should be call handleToggleLoopAttributeVideo when clicking button loop", () => {
+    renderComponent();
+    const button = document.querySelector(".ytp-button") as HTMLElement;
+    userEvent.click(button);
+    expect(handleToggleLoopAttributeVideo).toBeCalledTimes(1);
+  });
+
+  it("should have style opacity is 0.6 when isLooped is false", () => {
+    (useEnableLoopVideo as jest.Mock).mockReturnValue({
+      handleToggleLoopAttributeVideo,
+      isLooped: false,
+    });
+    renderComponent();
+    const svg = document.querySelector(".ytp-button")?.querySelector("svg");
+    expect(svg).toHaveStyle("opacity:0.6");
+  });
+
+  it("should hide the button loop when isEnableButtonLoop is false", () => {
+    (useMessageToggle as jest.Mock).mockReturnValue({
+      isEnableAlwaysLoop: false,
+      isEnableButtonLoop: false,
+    });
+    renderComponent();
+    expect(document.querySelector(".ytp-button")).not.toBeInTheDocument();
   });
 });

src/__tests__/__snapshots__/ButtonLoop.test.tsx.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ButtonLoop/> should match snapshot 1`] = `
+<div>
+  <div
+    class="ytp-button"
+  >
+    <div
+      style="height: 100%; display: flex; justify-content: center; align-items: center;"
+    >
+      <svg
+        fill="currentColor"
+        height="26"
+        stroke="currentColor"
+        stroke-width="0"
+        style="opacity: 1;"
+        viewBox="0 0 24 24"
+        width="26"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M21 6h-5v2h4v9H4V8h5v3l5-4-5-4v3H3a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z"
+        />
+      </svg>
+    </div>
+  </div>
+</div>
+`;

src/hooks/__tests__/useEnableLoopVideo.test.tsx

@@ -0,0 +1,128 @@
+/* eslint-disable testing-library/no-node-access */
+import {
+  renderHook,
+  act,
+  createEvent,
+  fireEvent,
+} from "@testing-library/react";
+import useEnableLoopVideo from "../useEnableLoopVideo";
+
+describe("useEnableLoopVideo hook", () => {
+  const TestComponent = ({ children }: React.PropsWithChildren) => {
+    return (
+      <div>
+        <video />
+        {children}
+      </div>
+    );
+  };
+
+  it("should return data correctly", () => {
+    const { result } = renderHook(() => useEnableLoopVideo(), {
+      wrapper: TestComponent,
+    });
+
+    expect(result.current.isLooped).toBe(false);
+    expect(typeof result.current.setIsLooped).toBe("function");
+    expect(typeof result.current.handleToggleLoopAttributeVideo).toBe(
+      "function"
+    );
+  });
+
+  it("should change value of isLooped after calling function handleToggleLoopAttributeVideo", () => {
+    const { result } = renderHook(() => useEnableLoopVideo(), {
+      wrapper: TestComponent,
+    });
+
+    act(() => {
+      result.current.handleToggleLoopAttributeVideo();
+    });
+    expect(result.current.isLooped).toBe(true);
+
+    act(() => {
+      result.current.handleToggleLoopAttributeVideo();
+    });
+
+    expect(result.current.isLooped).toBe(false);
+  });
+
+  it("should call setAttribute when calling handleToggleLoopAttributeVideo and isEnableAlwaysLoop is false", () => {
+    const { result } = renderHook(() => useEnableLoopVideo(), {
+      wrapper: TestComponent,
+    });
+
+    const removeAttribute = jest.fn();
+    const setAttribute = jest.fn();
+    const video = document.querySelector("video") as HTMLVideoElement;
+    video.removeAttribute = removeAttribute;
+    video.setAttribute = setAttribute;
+
+    act(() => {
+      result.current.handleToggleLoopAttributeVideo();
+    });
+    expect(setAttribute).toBeCalled();
+  });
+
+  it("should call removeAttribute when calling handleToggleLoopAttributeVideo and isEnableAlwaysLoop is false", () => {
+    const { result } = renderHook(() => useEnableLoopVideo(), {
+      wrapper: TestComponent,
+    });
+
+    const removeAttribute = jest.fn();
+    const video = document.querySelector("video") as HTMLVideoElement;
+    video.removeAttribute = removeAttribute;
+
+    act(() => {
+      result.current.handleToggleLoopAttributeVideo();
+    });
+
+    expect(result.current.isLooped).toBe(true);
+
+    act(() => {
+      result.current.handleToggleLoopAttributeVideo();
+    });
+    expect(removeAttribute).toBeCalled();
+  });
+
+  it("should not call removeAttribute and setAttribute when calling handleToggleLoopAttributeVideo and isEnableAlwaysLoop is true", () => {
+    const { result } = renderHook(() => useEnableLoopVideo(true), {
+      wrapper: TestComponent,
+    });
+
+    const removeAttribute = jest.fn();
+    const setAttribute = jest.fn();
+    const video = document.querySelector("video") as HTMLVideoElement;
+    video.removeAttribute = removeAttribute;
+    video.setAttribute = setAttribute;
+
+    act(() => {
+      result.current.handleToggleLoopAttributeVideo();
+    });
+
+    expect(removeAttribute).not.toBeCalled();
+    expect(setAttribute).not.toBeCalled();
+  });
+
+  it("should  isLooped is false video after loaded meta data and isEnableAlwaysLoop is false", () => {
+    const { result } = renderHook(() => useEnableLoopVideo(), {
+      wrapper: TestComponent,
+    });
+
+    const elementVideo = document.querySelector("video") as HTMLVideoElement;
+    const loadedMetadataEvent = createEvent.loadedMetadata(elementVideo);
+    fireEvent(elementVideo, loadedMetadataEvent);
+
+    expect(result.current.isLooped).toBe(false);
+  });
+  it("should  isLooped is true video after loaded meta data and isEnableAlwaysLoop is true", () => {
+    const { result } = renderHook(() => useEnableLoopVideo(true), {
+      wrapper: TestComponent,
+    });
+
+    const elementVideo = document.querySelector("video") as HTMLVideoElement;
+    const loadedMetadataEvent = createEvent.loadedMetadata(elementVideo);
+    fireEvent(elementVideo, loadedMetadataEvent);
+
+    expect(result.current.isLooped).toBe(true);
+  });
+});