forked from ray-project/ray
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Advanced Progress Bar (ray-project#31750)
This progress bar automatically shows progress by groupings. Things that belong to the same parent are all put in a group. If a group has multiple children with the same name, those are merged together into a virtual group. These virtual groups have different visual treatment because a virtual group should not add an additional level of nesting.
- Loading branch information
Showing
17 changed files
with
1,276 additions
and
188 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
145 changes: 145 additions & 0 deletions
145
dashboard/client/src/pages/job/AdvancedProgressBar/AdvancedProgressBar.component.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,145 @@ | ||
| import { Table, TableBody } from "@material-ui/core"; | ||
| import { ThemeProvider } from "@material-ui/styles"; | ||
| import { render, screen } from "@testing-library/react"; | ||
| import userEvent from "@testing-library/user-event"; | ||
| import React, { PropsWithChildren } from "react"; | ||
| import { lightTheme } from "../../../theme"; | ||
| import { TypeTaskType } from "../../../type/task"; | ||
| import { AdvancedProgressBarSegment } from "./AdvancedProgressBar"; | ||
|
|
||
| const Wrapper = ({ children }: PropsWithChildren<{}>) => { | ||
| return ( | ||
| <ThemeProvider theme={lightTheme}> | ||
| <Table> | ||
| <TableBody>{children}</TableBody> | ||
| </Table> | ||
| </ThemeProvider> | ||
| ); | ||
| }; | ||
|
|
||
| describe("AdvancedProgressBarSegment", () => { | ||
| it("renders without children", async () => { | ||
| expect.assertions(2); | ||
| render( | ||
| <AdvancedProgressBarSegment | ||
| jobProgressGroup={{ | ||
| name: "group 1", | ||
| key: "group1", | ||
| progress: { | ||
| numFinished: 1, | ||
| numRunning: 9, | ||
| }, | ||
| children: [], | ||
| type: TypeTaskType.ACTOR_CREATION_TASK, | ||
| }} | ||
| />, | ||
| { wrapper: Wrapper }, | ||
| ); | ||
| await screen.findByText(/group 1/); | ||
| expect(screen.getByText(/1 \/ 10/)).toBeVisible(); | ||
| expect(screen.getByTitle("Expand").parentElement).not.toBeVisible(); | ||
| }); | ||
|
|
||
| it("renders with children", async () => { | ||
| expect.assertions(7); | ||
| const user = userEvent.setup(); | ||
|
|
||
| render( | ||
| <AdvancedProgressBarSegment | ||
| jobProgressGroup={{ | ||
| name: "group 1", | ||
| key: "group1", | ||
| progress: { | ||
| numFinished: 1, | ||
| numRunning: 9, | ||
| }, | ||
| children: [ | ||
| { | ||
| name: "child", | ||
| key: "child", | ||
| progress: { | ||
| numFinished: 1, | ||
| }, | ||
| children: [], | ||
| type: TypeTaskType.NORMAL_TASK, | ||
| }, | ||
| ], | ||
| type: TypeTaskType.ACTOR_CREATION_TASK, | ||
| }} | ||
| />, | ||
| { wrapper: Wrapper }, | ||
| ); | ||
| await screen.findByText(/group 1/); | ||
| expect(screen.getByTitle("Expand").parentElement).toBeVisible(); | ||
| expect(screen.getByText(/^1 \/ 10$/)).toBeVisible(); | ||
| await user.click(screen.getByTitle("Expand")); | ||
| await screen.findByText(/child/); | ||
| screen.getByText(/child/); | ||
| expect(screen.getByTitle("Collapse").parentElement).toBeVisible(); | ||
| expect(screen.getAllByTitle("Expand")).toHaveLength(1); // There should only be one for the child segment | ||
| expect(screen.getByText(/^1 \/ 1$/)).toBeVisible(); | ||
| await user.click(screen.getByTitle("Collapse")); | ||
| expect(screen.queryByText(/child/)).toBeNull(); | ||
| expect(screen.queryByText(/^1 \/ 1$/)).toBeNull(); | ||
| }); | ||
|
|
||
| it("renders with GROUP and children", async () => { | ||
| expect.assertions(12); | ||
| const user = userEvent.setup(); | ||
|
|
||
| render( | ||
| <AdvancedProgressBarSegment | ||
| jobProgressGroup={{ | ||
| name: "group 1", | ||
| key: "group1", | ||
| progress: { | ||
| numFinished: 3, | ||
| numRunning: 7, | ||
| }, | ||
| type: "GROUP", | ||
| children: [ | ||
| { | ||
| name: "child", | ||
| key: "child", | ||
| progress: { | ||
| numFinished: 3, | ||
| }, | ||
| type: TypeTaskType.NORMAL_TASK, | ||
| children: [ | ||
| { | ||
| name: "grandchild", | ||
| key: "grandchild", | ||
| progress: { | ||
| numFinished: 1, | ||
| }, | ||
| type: TypeTaskType.NORMAL_TASK, | ||
| children: [], | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }} | ||
| />, | ||
| { wrapper: Wrapper }, | ||
| ); | ||
| await screen.findByText(/group 1/); | ||
| expect(screen.getByTitle("Expand").parentElement).toBeVisible(); | ||
| expect(screen.getByText(/^3 \/ 10$/)).toBeVisible(); | ||
| await user.click(screen.getByTitle("Expand")); | ||
| await screen.findByText(/child/); | ||
| screen.getByText(/child/); | ||
| expect(screen.getByTitle("Collapse group").parentElement).toBeVisible(); | ||
| expect(screen.getAllByTitle("Expand")).toHaveLength(1); // There should only be one for the child segment | ||
| expect(screen.getByText(/^3 \/ 3$/)).toBeVisible(); | ||
| await user.click(screen.getByTitle("Expand")); | ||
| await screen.findByText(/grandchild/); | ||
| expect(screen.getByTitle("Collapse group").parentElement).toBeVisible(); | ||
| expect(screen.getByTitle("Collapse").parentElement).toBeVisible(); // Collapse on the child segment | ||
| expect(screen.getAllByTitle("Expand")).toHaveLength(1); // There should only be one for the grand child segment | ||
| expect(screen.getByText(/^1 \/ 1$/)).toBeVisible(); | ||
| await user.click(screen.getByTitle("Collapse group")); | ||
| expect(screen.getByText(/^3 \/ 10$/)).toBeVisible(); | ||
| expect(screen.queryByText(/^3 \/ 3$/)).toBeNull(); | ||
| expect(screen.queryByText(/^1 \/ 1$/)).toBeNull(); | ||
| }); | ||
| }); |
Oops, something went wrong.