Convert PreviewPane to TS (#40961)

frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane.jsx → frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane/PreviewPane.tsx

@@ -4,19 +4,22 @@ import CS from "metabase/css/core/index.css";
 
 import { PreviewPaneContainer } from "./PreviewPane.styled";
 
-/**
- *
- * @param {object} props
- * @param {string=} props.className
- * @param {string} props.previewUrl
- * @param {boolean} props.isTransparent
- * @param {boolean} props.hidden
- * @returns
- */
-// eslint-disable-next-line react/prop-types
-export function PreviewPane({ className, previewUrl, isTransparent, hidden }) {
+type PreviewPaneProps = {
+  className?: string;
+  previewUrl: string;
+  isTransparent: boolean;
+  hidden: boolean;
+};
+
+export function PreviewPane({
+  className,
+  previewUrl,
+  isTransparent,
+  hidden,
+}: PreviewPaneProps) {
   return (
     <PreviewPaneContainer
+      data-testid="preview-pane-container"
       hidden={hidden}
       isTransparent={isTransparent}
       className={cx(className, CS.flex, CS.relative)}

frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane/PreviewPane.unit.spec.tsx

+import { render, screen } from "__support__/ui";
+
+import { PreviewPane } from "./PreviewPane";
+
+const MOCK_PREVIEW_URL = "https://www.example.com/";
+
+type MockPreviewPaneProps = {
+  isTransparent?: boolean;
+  hidden?: boolean;
+};
+
+const setup = ({
+  isTransparent = false,
+  hidden = false,
+}: MockPreviewPaneProps = {}) => {
+  render(
+    <PreviewPane
+      previewUrl={MOCK_PREVIEW_URL}
+      isTransparent={isTransparent}
+      hidden={hidden}
+    />,
+  );
+};
+
+describe("PreviewPane", () => {
+  it("should render the iframe with the provided previewUrl", () => {
+    setup();
+    const iframe = screen.getByTestId("embed-preview-iframe");
+    expect(iframe).toBeInTheDocument();
+    expect(iframe).toHaveAttribute("src", MOCK_PREVIEW_URL);
+  });
+
+  it("should set the iframe attributes correctly", () => {
+    setup();
+    const iframe = screen.getByTestId("embed-preview-iframe");
+    expect(iframe).toHaveAttribute("frameBorder", "0");
+  });
+
+  it("should not render the container if hidden is true", () => {
+    setup({ hidden: true });
+    expect(screen.getByTestId("preview-pane-container")).not.toBeVisible();
+  });
+});

frontend/src/metabase/public/components/EmbedModal/StaticEmbedSetupPane/PreviewPane/index.ts

+export * from "./PreviewPane";