Skip to content

Commit

Permalink
chore: adding tests for join UI and minor label fix (#1015)
Browse files Browse the repository at this point in the history
  • Loading branch information
@veds-g
veds-g committed Sep 6, 2023
1 parent c855e50 commit 2c6e636
Show file tree
Hide file tree
Showing 3 changed files with 176 additions and 5 deletions.
55 changes: 54 additions & 1 deletion ui/src/components/pages/Pipeline/partials/Graph/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,61 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { Position } from "reactflow";
import Graph from "./index";

global.ResizeObserver = require("resize-observer-polyfill");
class ResizeObserver {
callback: globalThis.ResizeObserverCallback;
constructor(callback: globalThis.ResizeObserverCallback) {
this.callback = callback;
}
observe(target: Element) {
this.callback([{ target } as globalThis.ResizeObserverEntry], this);
}
unobserve() {
return;
}
disconnect() {
return;
}
}

class DOMMatrixReadOnly {
m22: number;
constructor(transform: string) {
const scale = transform?.match(/scale\(([1-9.])\)/)?.[1];
this.m22 = scale !== undefined ? +scale : 1;
}
}

let init = false;

export const mockReactFlow = () => {
if (init) return;
init = true;
global.ResizeObserver = ResizeObserver;
global.DOMMatrixReadOnly = DOMMatrixReadOnly;
Object.defineProperties(global.HTMLElement.prototype, {
offsetHeight: {
get() {
return parseFloat(this.style.height) || 1;
},
},
offsetWidth: {
get() {
return parseFloat(this.style.width) || 1;
},
},
});
(global.SVGElement as any).prototype.getBBox = () => ({
x: 0,
y: 0,
width: 0,
height: 0,
});
};

describe("Graph screen test", () => {
beforeEach(() => {
mockReactFlow();
});
const data = {
edges: [
{
Expand Down Expand Up @@ -157,6 +209,7 @@ describe("Graph screen test", () => {
await waitFor(() => {
expect(screen.getByTestId("graph")).toBeVisible();
fireEvent.click(screen.getByTestId("rf__node-in"));
fireEvent.click(screen.getByTestId("rf__edge-in-cat"));
fireEvent.click(container.getElementsByClassName("react-flow__pane")[0]);
});
await waitFor(() => expect(screen.getByTestId("card")).toBeVisible());
Expand Down
122 changes: 120 additions & 2 deletions ui/src/components/pages/Pipeline/partials/Graph/partials/CustomEdge/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { ReactFlowProvider } from "reactflow";
import CustomEdge from "./index";

describe("Graph screen test", () => {
it("Straight edge not full", async () => {
it("Fwd edge not full", async () => {
render(
<ReactFlowProvider>
<CustomEdge
Expand All @@ -20,6 +20,8 @@ describe("Graph screen test", () => {
edgeWatermark: {
isWaterMarkEnabled: true,
},
fwdEdge: true,
fromNodeOutDegree: 1,
}}
source={"first"}
target={"second"}
Expand All @@ -30,7 +32,7 @@ describe("Graph screen test", () => {
expect(screen.getByTestId(`first-second`)).toBeInTheDocument()
);
});
it("Straight edge but full with delay in mo", async () => {
it("Fwd edge but full with delay in mo", async () => {
render(
<ReactFlowProvider>
<CustomEdge
Expand All @@ -48,6 +50,7 @@ describe("Graph screen test", () => {
isWaterMarkEnabled: true,
watermarks: [Date.now() - 2678400000],
},
fwdEdge: true,
}}
source={"first"}
target={"second"}
Expand Down Expand Up @@ -76,6 +79,7 @@ describe("Graph screen test", () => {
isWaterMarkEnabled: true,
watermarks: [Date.now() - 1],
},
fwdEdge: true,
}}
source={"first"}
target={"second"}
Expand All @@ -95,6 +99,7 @@ describe("Graph screen test", () => {
isWaterMarkEnabled: true,
watermarks: [Date.now() - 1000],
},
fwdEdge: true,
}}
source={"first"}
target={"third"}
Expand All @@ -114,6 +119,7 @@ describe("Graph screen test", () => {
isWaterMarkEnabled: true,
watermarks: [Date.now() - 60000],
},
fwdEdge: true,
}}
source={"first"}
target={"fourth"}
Expand All @@ -133,6 +139,7 @@ describe("Graph screen test", () => {
isWaterMarkEnabled: true,
watermarks: [Date.now() - 3600000],
},
fwdEdge: true,
}}
source={"first"}
target={"fifth"}
Expand All @@ -152,6 +159,7 @@ describe("Graph screen test", () => {
isWaterMarkEnabled: true,
watermarks: [Date.now() - 86400000],
},
fwdEdge: true,
}}
source={"first"}
target={"sixth"}
Expand All @@ -174,4 +182,114 @@ describe("Graph screen test", () => {
expect(screen.getByTestId(`first-sixth`)).toBeInTheDocument()
);
});
it("Forward edges with out-degree > 1", async () => {
render(
<ReactFlowProvider>
<CustomEdge
id={"first-second"}
sourceX={240}
sourceY={36}
targetX={334}
targetY={40}
sourcePosition={Position.Right}
targetPosition={Position.Left}
data={{
isFull: "true",
backpressureLabel: "0",
edgeWatermark: {
isWaterMarkEnabled: true,
watermarks: [Date.now() - 2678400000],
},
fwdEdge: true,
fromNodeOutDegree: 2,
}}
source={"first"}
target={"second"}
/>
<CustomEdge
id={"first-third"}
sourceX={240}
sourceY={36}
targetX={334}
targetY={32}
sourcePosition={Position.Right}
targetPosition={Position.Left}
data={{
isFull: "true",
backpressureLabel: "0",
edgeWatermark: {
isWaterMarkEnabled: true,
watermarks: [Date.now() - 2678400000],
},
fwdEdge: true,
fromNodeOutDegree: 2,
}}
source={"first"}
target={"third"}
/>
</ReactFlowProvider>
);
await waitFor(() => {
expect(screen.getByTestId(`first-second`)).toBeInTheDocument();
expect(screen.getByTestId(`first-third`)).toBeInTheDocument();
});
});
it("Back edges", async () => {
render(
<ReactFlowProvider>
<CustomEdge
id={"first-second"}
sourceX={334}
sourceY={36}
targetX={240}
targetY={36}
sourcePosition={Position.Right}
targetPosition={Position.Left}
data={{
isFull: "true",
backpressureLabel: "0",
edgeWatermark: {
isWaterMarkEnabled: true,
watermarks: [Date.now() - 2678400000],
},
backEdge: true,
}}
source={"first"}
target={"second"}
/>
</ReactFlowProvider>
);
await waitFor(() =>
expect(screen.getByTestId(`first-second`)).toBeInTheDocument()
);
});
it("Self edges", async () => {
render(
<ReactFlowProvider>
<CustomEdge
id={"first-first"}
sourceX={334}
sourceY={36}
targetX={300}
targetY={36}
sourcePosition={Position.Top}
targetPosition={Position.Top}
data={{
isFull: "true",
backpressureLabel: "0",
edgeWatermark: {
isWaterMarkEnabled: true,
watermarks: [Date.now() - 2678400000],
},
selfEdge: true,
}}
source={"first"}
target={"second"}
/>
</ReactFlowProvider>
);
await waitFor(() =>
expect(screen.getByTestId(`first-first`)).toBeInTheDocument()
);
});
});
4 changes: 2 additions & 2 deletions ui/src/components/pages/Pipeline/partials/Graph/partials/CustomEdge/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ const CustomEdge: FC<EdgeProps> = ({
}
} else {
if (sourceY < targetY) {
labelY = targetY - 47;
labelY = sourceY + 1;
} else {
labelY = targetY + 36;
labelY = sourceY - 13;
}
}
}
Expand Down

0 comments on commit 2c6e636

Please sign in to comment.