Skip to content

Commit

Permalink
Status, Status Link Controls update
Browse files Browse the repository at this point in the history
  • Loading branch information
@pravintargaryen
pravintargaryen committed Jul 24, 2024
1 parent b8b9e12 commit fc82585
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 40 deletions.
54 changes: 37 additions & 17 deletions frontend/taipy-gui/src/components/Taipy/Status.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,38 +12,58 @@
*/

import React from "react";
import {render} from "@testing-library/react";
import { render } from "@testing-library/react";
import "@testing-library/jest-dom";
import userEvent from "@testing-library/user-event";
import { getStatusIcon } from "./Status";

import { PlusOneOutlined } from "@mui/icons-material";
import Status, { StatusType } from "./Status";

import Status, { StatusType } from './Status';

const status: StatusType = {status: "status", message: "message"};
const status: StatusType = { status: "status", message: "message" };

describe("Status Component", () => {
it("renders", async () => {
const {getByText} = render(<Status value={status} />);
const { getByText } = render(<Status value={status} />);
const elt = getByText("message");
const av = getByText("S");
expect(elt.tagName).toBe("SPAN");
expect(av.tagName).toBe("DIV");
})
});
it("uses the class", async () => {
const {getByText} = render(<Status value={status} className="taipy-status" />);
const { getByText } = render(<Status value={status} className="taipy-status" />);
const elt = getByText("message");
expect(elt.parentElement).toHaveClass("taipy-status");
})
});
it("can be closed", async () => {
const myClose = jest.fn();
const {getByTestId} = render(<Status value={status} onClose={myClose} />);
const { getByTestId } = render(<Status value={status} onClose={myClose} />);
const elt = getByTestId("CancelIcon");
await userEvent.click(elt);
expect(myClose).toHaveBeenCalled();
})
it("displays the icon", async () => {
const {getByTestId} = render(<Status value={status} icon={<PlusOneOutlined/>} onClose={jest.fn()} />);
getByTestId("PlusOneOutlinedIcon");
})
});
});

describe("StatusAvatar Icon Rendering", () => {
it("renders the correct icon for 'S' status", () => {
const { getByTestId } = render(getStatusIcon("S"));
getByTestId("CheckCircleIcon");
});

it("renders the correct icon for 'E' status", () => {
const { getByTestId } = render(getStatusIcon("E"));
getByTestId("ErrorIcon");
});

it("renders the correct icon for 'W' status", () => {
const { getByTestId } = render(getStatusIcon("W"));
getByTestId("WarningIcon");
});

it("renders the correct icon for 'I' status", () => {
const { getByTestId } = render(getStatusIcon("I"));
getByTestId("InfoIcon");
});

it("renders the default emoji for unknown status", () => {
const { getByText } = render(getStatusIcon("unknown"));
getByText("❓");
});
});
21 changes: 20 additions & 1 deletion frontend/taipy-gui/src/components/Taipy/Status.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@
import React, { MouseEvent, ReactNode, useMemo } from "react";
import Chip from "@mui/material/Chip";
import Avatar from "@mui/material/Avatar";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import ErrorIcon from "@mui/icons-material/Error";
import WarningIcon from "@mui/icons-material/Warning";
import InfoIcon from "@mui/icons-material/Info";

import { getInitials } from "../../utils";
import { TaipyBaseProps } from "./utils";
Expand All @@ -30,6 +34,21 @@ interface StatusProps extends TaipyBaseProps {
icon?: ReactNode;
}

export const getStatusIcon = (status: string) => {
switch (status) {
case "S":
return <CheckCircleIcon data-testid="CheckCircleIcon" />;
case "E":
return <ErrorIcon data-testid="ErrorIcon" />;
case "W":
return <WarningIcon data-testid="WarningIcon" />;
case "I":
return <InfoIcon data-testid="InfoIcon" />;
default:
return "❓";
}
};

const status2Color = (status: string): "error" | "info" | "success" | "warning" => {
status = (status || "").toLowerCase();
status = status.length == 0 ? " " : status.charAt(0);
Expand All @@ -54,7 +73,7 @@ const Status = (props: StatusProps) => {
const chipProps = useMemo(() => {
const cp: Record<string, unknown> = {};
cp.color = status2Color(value.status);
cp.avatar = <Avatar sx={{ bgcolor: `${cp.color}.main` }}>{getInitials(value.status)}</Avatar>;
cp.avatar = <Avatar sx={{ bgcolor: `${cp.color}.main` }}>{getStatusIcon(getInitials(value.status))}</Avatar>;
if (props.onClose) {
cp.onDelete = props.onClose;
}
Expand Down
41 changes: 19 additions & 22 deletions frontend/taipy-gui/src/components/Taipy/StatusList.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,60 +12,57 @@
*/

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

import { StatusType } from "./Status";
import StatusList from './StatusList';
import StatusList from "./StatusList";

const statuses = [
{status: "info", message: "info"},
{ status: "info", message: "info" },
["error", "error"],
{status: "warning", message: "warning"},
{status: "success", message: "success"},
{ status: "warning", message: "warning" },
{ status: "success", message: "success" },
] as Array<[string, string] | StatusType>;

describe("StatusList Component", () => {
it("renders", async () => {
const {getByText} = render(<StatusList value={statuses} />);
const { getByText } = render(<StatusList value={statuses} />);
const elt = getByText("4 statuses");
const av = getByText("E");
expect(elt.tagName).toBe("SPAN");
expect(av.tagName).toBe("DIV");
})
});
it("uses the class", async () => {
const {getByText} = render(<StatusList value={statuses} className="taipy-status" />);
const { getByText } = render(<StatusList value={statuses} className="taipy-status" />);
const elt = getByText("4 statuses");
expect(elt.parentElement).toHaveClass("taipy-status");
})
});
it("can be opened when more than 1 status", async () => {
const {getByTestId} = render(<StatusList value={statuses} />);
const { getByTestId } = render(<StatusList value={statuses} />);
const elt = getByTestId("ArrowDownwardIcon");
})
});
it("cannot be opened when 1 status", async () => {
const {queryAllByRole} = render(<StatusList value={statuses[0]} />);
const { queryAllByRole } = render(<StatusList value={statuses[0]} />);
expect(queryAllByRole("button")).toHaveLength(0);
})
});
it("displays a default status", async () => {
const {getByText} = render(<StatusList value={[]} />);
const { getByText } = render(<StatusList value={[]} />);
getByText("No Status");
getByText("I");
})
});
it("opens on click", async () => {
const {getByTestId, getByText} = render(<StatusList value={statuses} />);
const { getByTestId, getByText } = render(<StatusList value={statuses} />);
const elt = getByTestId("ArrowDownwardIcon");
await userEvent.click(elt);
const selt = getByText("info");
expect(selt.parentElement?.parentElement?.childElementCount).toBe(4);
})
});
it("hide closed statuses", async () => {
const {getByTestId, queryAllByTestId} = render(<StatusList value={statuses} />);
const { getByTestId, queryAllByTestId } = render(<StatusList value={statuses} />);
const elt = getByTestId("ArrowDownwardIcon");
await userEvent.click(elt);
const icons = queryAllByTestId("CancelIcon");
expect(icons).toHaveLength(4);
await userEvent.click(icons[0]);
expect(queryAllByTestId("CancelIcon")).toHaveLength(3);
})
});
});

0 comments on commit fc82585

Please sign in to comment.