Skip to content

Commit

Permalink
Merge pull request #1561 from Avaiga/test/Dialog
Browse files Browse the repository at this point in the history 
Unit test for Dialog
  • Loading branch information
@namnguyen20999
namnguyen20999 authored Jul 23, 2024
2 parents 2669942 + 672b466 commit 1f273cb
Showing 1 changed file with 40 additions and 14 deletions.
54 changes: 40 additions & 14 deletions frontend/taipy-gui/src/components/Taipy/Dialog.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
*/

import React from "react";
import { render } from "@testing-library/react";
import { fireEvent, render } from "@testing-library/react";
import "@testing-library/jest-dom";
import userEvent from "@testing-library/user-event";

Expand Down Expand Up @@ -44,7 +44,7 @@ describe("Dialog Component", () => {
const { getByText } = render(
<HelmetProvider>
<Dialog title="Dialog-Test-Title" page="page" open={true} />
</HelmetProvider>
</HelmetProvider>,
);
const elt = getByText("Dialog-Test-Title");
expect(elt.tagName).toBe("H2");
Expand All @@ -54,7 +54,7 @@ describe("Dialog Component", () => {
const { queryAllByText } = render(
<HelmetProvider>
<Dialog title="Dialog-Test-Title" page="page" open={false} />
</HelmetProvider>
</HelmetProvider>,
);
expect(queryAllByText("Dialog-Test-Title")).toHaveLength(0);
const divs = document.getElementsByTagName("div");
Expand All @@ -65,7 +65,7 @@ describe("Dialog Component", () => {
const wrapper = render(
<HelmetProvider>
<Dialog title="Dialog-Test-Title" page="page" open={true} className="taipy-dialog" />
</HelmetProvider>
</HelmetProvider>,
);
const elt = document.querySelector(".MuiDialog-root");
expect(elt).toHaveClass("taipy-dialog");
Expand All @@ -79,7 +79,7 @@ describe("Dialog Component", () => {
defaultOpen="true"
open={undefined as unknown as boolean}
/>
</HelmetProvider>
</HelmetProvider>,
);
getByText("Dialog-Test-Title");
});
Expand All @@ -92,7 +92,7 @@ describe("Dialog Component", () => {
defaultOpen="true"
open={undefined as unknown as boolean}
/>
</HelmetProvider>
</HelmetProvider>,
);
expect(getAllByRole("button")).toHaveLength(1);
});
Expand All @@ -106,7 +106,7 @@ describe("Dialog Component", () => {
open={undefined as unknown as boolean}
labels={JSON.stringify(["toto"])}
/>
</HelmetProvider>
</HelmetProvider>,
);
expect(getAllByRole("button")).toHaveLength(2);
});
Expand All @@ -120,7 +120,7 @@ describe("Dialog Component", () => {
open={undefined as unknown as boolean}
labels={JSON.stringify(["toto", "titi", "toto"])}
/>
</HelmetProvider>
</HelmetProvider>,
);
expect(getAllByRole("button")).toHaveLength(4);
});
Expand All @@ -134,7 +134,7 @@ describe("Dialog Component", () => {
active={false}
labels={JSON.stringify(["testValidate", "testCancel"])}
/>
</HelmetProvider>
</HelmetProvider>,
);
expect(getByText("testValidate")).toBeDisabled();
expect(getByText("testCancel")).toBeDisabled();
Expand All @@ -148,7 +148,7 @@ describe("Dialog Component", () => {
open={true}
labels={JSON.stringify(["testValidate", "testCancel"])}
/>
</HelmetProvider>
</HelmetProvider>,
);
expect(getByText("testValidate")).not.toBeDisabled();
expect(getByText("testCancel")).not.toBeDisabled();
Expand All @@ -163,7 +163,7 @@ describe("Dialog Component", () => {
active={true}
labels={JSON.stringify(["testValidate", "testCancel"])}
/>
</HelmetProvider>
</HelmetProvider>,
);
expect(getByText("testValidate")).not.toBeDisabled();
expect(getByText("testCancel")).not.toBeDisabled();
Expand All @@ -183,7 +183,7 @@ describe("Dialog Component", () => {
onAction="testValidateAction"
/>
</HelmetProvider>
</TaipyContext.Provider>
</TaipyContext.Provider>,
);
await userEvent.click(getByTitle("Close"));
expect(dispatch).toHaveBeenLastCalledWith({
Expand All @@ -208,7 +208,7 @@ describe("Dialog Component", () => {
onAction="testValidateAction"
/>
</HelmetProvider>
</TaipyContext.Provider>
</TaipyContext.Provider>,
);
await userEvent.click(getByText("testValidate"));
expect(dispatch).toHaveBeenLastCalledWith({
Expand All @@ -233,7 +233,7 @@ describe("Dialog Component", () => {
onAction="testValidateAction"
/>
</HelmetProvider>
</TaipyContext.Provider>
</TaipyContext.Provider>,
);
await userEvent.click(getByText("Another One"));
expect(dispatch).toHaveBeenLastCalledWith({
Expand All @@ -242,4 +242,30 @@ describe("Dialog Component", () => {
type: "SEND_ACTION_ACTION",
});
});
it("should log an error when labels prop is not a valid JSON string", () => {
const consoleSpy = jest.spyOn(console, "info");
render(<Dialog title={"Dialog-Test-Title"} labels={"not a valid JSON string"} />);
expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining("Error parsing dialog.labels"));
});
it("should apply width and height styles when they are provided", async () => {
const { findByRole } = render(<Dialog title="Dialog-Test-Title" width="500px" height="300px" open={true} />);
const dialogElement = await findByRole("dialog");
expect(dialogElement).toHaveStyle({ width: "500px", height: "300px" });
});
it("should not apply width and height styles when they are not provided", async () => {
const { findByRole } = render(<Dialog title="Dialog-Test-Title" open={true} />);
const dialogElement = await findByRole("dialog");
const computedStyles = window.getComputedStyle(dialogElement);
expect(computedStyles.width).not.toBe("500px");
expect(computedStyles.height).not.toBe("300px");
});
it("calls localAction prop when handleAction is triggered", () => {
const localActionMock = jest.fn();
const { getByLabelText } = render(
<Dialog id="test-dialog" title="Test Dialog" localAction={localActionMock} open={true} />,
);
const closeButton = getByLabelText("close");
fireEvent.click(closeButton);
expect(localActionMock).toHaveBeenCalledWith(-1);
});
});

0 comments on commit 1f273cb

Please sign in to comment.