Repository: Avaiga/taipy
File: frontend/taipy-gui/src/components/Taipy/Progress.spec.tsx (TypeScript)

Code before:
        expect(elt).toHaveClass("taipy-progress");
    });

    it("renders circular progress with value (determinate)", () => {
        const { getByRole, getByText } = render(<Progress showValue value={50} />);
        const elt = getByRole("progressbar");
        const valueText = getByText("50%");
        expect(elt).toHaveClass("MuiCircularProgress-root");
        expect(valueText).toBeInTheDocument();
    });

    it("renders linear progress without value (indeterminate)", () => {
        const { getByRole } = render(<Progress linear />);
        const elt = getByRole("progressbar");
        expect(elt).toHaveClass("MuiLinearProgress-root");
    });

    it("renders linear progress with value (determinate)", () => {
        const { getByRole, getByText } = render(<Progress linear showValue value={50} />);
        const elt = getByRole("progressbar");
        const valueText = getByText("50%");
        expect(elt).toHaveClass("MuiLinearProgress-root");
        expect(valueText).toBeInTheDocument();
    });

    it("should return null when render is false", async () => {
        const { container } = render(<Progress render={false} />);
        expect(container.firstChild).toBeNull();
    });

    it("should render the title when title is defined", () => {
        const { getByText } = render(<Progress title="Title" />);
        const title = getByText("Title");
        expect(title).toBeInTheDocument();
    });

    it("renders Typography with correct sx and variant", () => {
        const { getByText } = render(<Progress title="Title" />);
        const typographyElement = getByText("Title");
        expect(typographyElement).toBeInTheDocument();
        expect(typographyElement).toHaveStyle("margin: 8px");
        expect(typographyElement.tagName).toBe("SPAN");
    });

    it("renders determinate progress correctly", () => {
        const { getByRole } = render(<Progress value={50} />);
        const progressBar = getByRole("progressbar");
        expect(progressBar).toBeInTheDocument();
        expect(progressBar).toHaveAttribute("aria-valuenow", "50");
    });


Review comment (suggestion):
The test label is not really relevant here.
The point would be "Should not render when...".
This 'return null' really is a technical aspect of the implementation.

Code after:
        expect(elt).toHaveClass("taipy-progress");
    });

    it("renders circular progress with value (determinate)", () => {
        const { getByRole, getByText } = render(<Progress showValue value={50} />);
        const elt = getByRole("progressbar");
        const valueText = getByText("50%");
        expect(elt).toHaveClass("MuiCircularProgress-root");
        expect(valueText).toBeInTheDocument();
    });

    it("renders linear progress without value (indeterminate)", () => {
        const { getByRole } = render(<Progress linear />);
        const elt = getByRole("progressbar");
        expect(elt).toHaveClass("MuiLinearProgress-root");
    });

    it("renders linear progress with value (determinate)", () => {
        const { getByRole, getByText } = render(<Progress linear showValue value={50} />);
        const elt = getByRole("progressbar");
        const valueText = getByText("50%");
        expect(elt).toHaveClass("MuiLinearProgress-root");
        expect(valueText).toBeInTheDocument();
    });

    it("does not render when render prop is false", async () => {
        const { container } = render(<Progress render={false} />);
        expect(container.firstChild).toBeNull();
    });

    it("should render the title when title is defined", () => {
        const { getByText } = render(<Progress title="Title" />);
        const title = getByText("Title");
        expect(title).toBeInTheDocument();
    });

    it("renders Typography with correct sx and variant", () => {
        const { getByText } = render(<Progress title="Title" />);
        const typographyElement = getByText("Title");
        expect(typographyElement).toBeInTheDocument();
        expect(typographyElement).toHaveStyle("margin: 8px");
        expect(typographyElement.tagName).toBe("SPAN");
    });

    it("renders determinate progress correctly", () => {
        const { getByRole } = render(<Progress value={50} />);
        const progressBar = getByRole("progressbar");
        expect(progressBar).toBeInTheDocument();
        expect(progressBar).toHaveAttribute("aria-valuenow", "50");
    });