📝 CodeRabbit Chat: Update tests: ESM Plyr mock, constructor/options and lifecycle

Author: coderabbitai[bot]

tests/Plyr.lifecycle.test.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { render } from "@testing-library/react";
+import { Plyr, PlyrInstance } from "../src/index";
+
+// Localized mock for this suite
+const destroy = jest.fn();
+const ctor = jest.fn().mockImplementation(() => ({ destroy, playing: false }));
+jest.mock("plyr", () => ({ __esModule: true, default: ctor }));
+
+describe("<Plyr /> lifecycle", () => {
+  it("calls destroy on unmount", () => {
+    const ref = React.createRef<{ plyr: PlyrInstance }>();
+    const { unmount } = render(<Plyr ref={ref} source={null} />);
+    expect(ref.current?.plyr).toBeDefined();
+    unmount();
+    expect(destroy).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not create a new instance on rerender with same props", () => {
+    const ref = React.createRef<{ plyr: PlyrInstance }>();
+    const { rerender } = render(<Plyr ref={ref} source={null} />);
+    expect(ctor).toHaveBeenCalledTimes(1);
+    const inst = ref.current?.plyr;
+    rerender(<Plyr ref={ref} source={null} />);
+    expect(ref.current?.plyr).toBe(inst);
+    expect(ctor).toHaveBeenCalledTimes(1);
+  });
+});

tests/Plyr.test.tsx

@@ -66,3 +66,94 @@ describe("<Plyr />", () => {
     expect((ref.current?.plyr as PlyrInstance).playing).toBe(false);
   });
 });
+
+describe("<Plyr /> – constructor and options behavior", () => {
+  const destroySpy = jest.fn();
+  const setSourceSpy = jest.fn();
+
+  const mockCtor = jest.fn().mockImplementation(() => ({
+    destroy: destroySpy,
+    playing: false,
+    set source(val) {
+      setSourceSpy(val);
+      (this as any)._source = val;
+    },
+    get source() {
+      return (this as any)._source;
+    },
+  }));
+
+  beforeAll(() => {
+    jest.resetModules();
+    jest.doMock("plyr", () => ({ __esModule: true, default: mockCtor }));
+  });
+
+  afterAll(() => {
+    jest.dontMock("plyr");
+    jest.clearAllMocks();
+  });
+
+  beforeEach(() => {
+    destroySpy.mockClear();
+    setSourceSpy.mockClear();
+    mockCtor.mockClear();
+  });
+
+  it("constructs Plyr with '.plyr-react' selector and empty options by default", () => {
+    const React = require("react");
+    const { render } = require("@testing-library/react");
+    const { Plyr } = require("../src/index");
+
+    render(<Plyr source={null} />);
+    expect(mockCtor).toHaveBeenCalledTimes(1);
+    expect(mockCtor).toHaveBeenLastCalledWith(".plyr-react", {});
+  });
+
+  it("applies initial source on mount when provided", () => {
+    const React = require("react");
+    const { render } = require("@testing-library/react");
+    const { Plyr } = require("../src/index");
+
+    const initialSource = { type: "video", sources: [{ src: "init.mp4", type: "video/mp4" }] };
+    render(<Plyr source={initialSource} />);
+    expect(setSourceSpy).toHaveBeenCalledWith(initialSource);
+  });
+
+  it("passes provided options to Plyr constructor", () => {
+    const React = require("react");
+    const { render } = require("@testing-library/react");
+    const { Plyr } = require("../src/index");
+
+    const opts = { controls: ["play", "progress"], autoplay: true };
+    render(<Plyr source={null} options={opts} />);
+    expect(mockCtor).toHaveBeenCalledTimes(1);
+    expect(mockCtor).toHaveBeenLastCalledWith(".plyr-react", opts);
+  });
+
+  it("re-instantiates when options change and destroys previous instance", () => {
+    const React = require("react");
+    const { render } = require("@testing-library/react");
+    const { Plyr } = require("../src/index");
+
+    const { rerender } = render(<Plyr source={null} options={{ clickToPlay: true }} />);
+    expect(mockCtor).toHaveBeenCalledTimes(1);
+
+    rerender(<Plyr source={null} options={{ clickToPlay: false }} />);
+    expect(mockCtor).toHaveBeenCalledTimes(2);
+    expect(destroySpy).toHaveBeenCalled();
+  });
+
+  it("renders default classes when className prop is absent", () => {
+    const React = require("react");
+    const { render } = require("@testing-library/react");
+    const { Plyr } = require("../src/index");
+
+    const { container } = render(<Plyr source={null} />);
+    const video = container.querySelector("video") as HTMLElement | null;
+    expect(video).toBeTruthy();
+    if (video) {
+      const classes = Array.from(video.classList);
+      expect(classes).toEqual(expect.arrayContaining(["plyr-react", "plyr"]));
+    }
+  });
+});