Skip to content

Commit

Permalink
chore: added unit tests for components (#1337)
Browse files Browse the repository at this point in the history 
Signed-off-by: Darshan Simha <darshan_simha@intuit.com>
Co-authored-by: Darshan Simha <darshan_simha@intuit.com>
(cherry picked from commit 8c69acd)
  • Loading branch information
@darshansimha @whynowy
darshansimha authored and whynowy committed Nov 3, 2023
1 parent e94b563 commit a8d44d1
Show file tree
Hide file tree
Showing 2 changed files with 327 additions and 3 deletions.
313 changes: 313 additions & 0 deletions ui/src/components/common/SpecEditor/index.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,313 @@
import React from "react";
import { act, render, screen, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom";

import { SpecEditor } from "./index";

const onValidate = jest.fn();
const onSubmit = jest.fn();
const onResetApplied = jest.fn();
const onMutatedChange = jest.fn();

const mockYaml = {
kind: "Pipeline",
apiVersion: "numaflow.numaproj.io/v1alpha1",
metadata: {
name: "simple-pipeline",
namespace: "numaflow-system",
uid: "c0513165-3bf3-44a6-b0a0-7b9cf9ae4de5",
resourceVersion: "492810",
generation: 2,
creationTimestamp: "2023-11-02T14:43:32Z",
annotations: {
"kubectl.kubernetes.io/last-applied-configuration":
'{"apiVersion":"numaflow.numaproj.io/v1alpha1","kind":"Pipeline","metadata":{"annotations":{},"name":"simple-pipeline","namespace":"numaflow-system"},"spec":{"edges":[{"from":"in","to":"cat"},{"from":"cat","to":"out"}],"vertices":[{"name":"in","source":{"generator":{"duration":"1s","rpu":5}}},{"name":"cat","udf":{"builtin":{"name":"cat"}}},{"name":"out","sink":{"log":{}}}]}}\n',
},
finalizers: ["pipeline-controller"],
managedFields: [
{
manager: "kubectl-client-side-apply",
operation: "Update",
apiVersion: "numaflow.numaproj.io/v1alpha1",
time: "2023-11-02T14:43:32Z",
fieldsType: "FieldsV1",
fieldsV1: {
"f:metadata": {
"f:annotations": {
".": {},
"f:kubectl.kubernetes.io/last-applied-configuration": {},
},
},
"f:spec": {
".": {},
"f:edges": {},
"f:lifecycle": {
".": {},
"f:deleteGracePeriodSeconds": {},
"f:desiredPhase": {},
"f:pauseGracePeriodSeconds": {},
},
"f:limits": {
".": {},
"f:bufferMaxLength": {},
"f:bufferUsageLimit": {},
"f:readBatchSize": {},
"f:readTimeout": {},
},
"f:watermark": {
".": {},
"f:disabled": {},
"f:maxDelay": {},
},
},
},
},
{
manager: "numaflow",
operation: "Update",
apiVersion: "numaflow.numaproj.io/v1alpha1",
time: "2023-11-02T14:43:32Z",
fieldsType: "FieldsV1",
fieldsV1: {
"f:metadata": {
"f:finalizers": {
".": {},
'v:"pipeline-controller"': {},
},
},
"f:spec": {
"f:vertices": {},
},
},
},
{
manager: "numaflow",
operation: "Update",
apiVersion: "numaflow.numaproj.io/v1alpha1",
time: "2023-11-02T14:43:32Z",
fieldsType: "FieldsV1",
fieldsV1: {
"f:status": {
".": {},
"f:conditions": {},
"f:lastUpdated": {},
"f:phase": {},
"f:sinkCount": {},
"f:sourceCount": {},
"f:udfCount": {},
"f:vertexCount": {},
},
},
subresource: "status",
},
],
},
spec: {
vertices: [
{
name: "in",
source: {
generator: {
rpu: 5,
duration: "1s",
msgSize: 8,
},
},
scale: {},
},
{
name: "cat",
udf: {
container: null,
builtin: {
name: "cat",
},
groupBy: null,
},
scale: {},
},
{
name: "out",
sink: {
log: {},
},
scale: {},
},
],
edges: [
{
from: "in",
to: "cat",
conditions: null,
},
{
from: "cat",
to: "out",
conditions: null,
},
],
lifecycle: {
deleteGracePeriodSeconds: 30,
desiredPhase: "Running",
pauseGracePeriodSeconds: 30,
},
limits: {
readBatchSize: 500,
bufferMaxLength: 30000,
bufferUsageLimit: 80,
readTimeout: "1s",
},
watermark: {
maxDelay: "0s",
},
},
status: {
conditions: [
{
type: "Configured",
status: "True",
lastTransitionTime: "2023-11-02T14:43:32Z",
reason: "Successful",
message: "Successful",
},
{
type: "Deployed",
status: "True",
lastTransitionTime: "2023-11-02T14:43:32Z",
reason: "Successful",
message: "Successful",
},
],
phase: "Running",
lastUpdated: "2023-11-02T14:43:32Z",
vertexCount: 3,
sourceCount: 1,
sinkCount: 1,
udfCount: 1,
},
};

describe("SpecEditor", () => {
it("renders", async () => {
render(<SpecEditor />);
await waitFor(() => {
expect(screen.getByTestId("spec-editor")).toBeInTheDocument();
});
});

it("renders with yaml", async () => {
render(
<SpecEditor
initialYaml={mockYaml}
onValidate={onValidate}
onSubmit={onSubmit}
onResetApplied={onResetApplied}
onMutatedChange={onMutatedChange}
loading={false}
viewType={2}
allowNonMutatedSubmit={false}
/>
);
await waitFor(() => {
expect(screen.getByTestId("spec-editor")).toBeInTheDocument();
});
});

it("Clicks on validate button", async () => {
render(
<SpecEditor
initialYaml={mockYaml}
onValidate={onValidate}
onSubmit={onSubmit}
onResetApplied={onResetApplied}
onMutatedChange={onMutatedChange}
loading={false}
viewType={2}
allowNonMutatedSubmit={false}
/>
);
await waitFor(() => {
expect(
screen.getByTestId("spec-editor-validate-button")
).toBeInTheDocument();
});
const validateButton = screen.getByTestId("spec-editor-validate-button");
validateButton.click();
});

it("Tests handleEditToggle", async () => {
render(
<SpecEditor
initialYaml={mockYaml}
onValidate={onValidate}
onSubmit={onSubmit}
onResetApplied={onResetApplied}
onMutatedChange={onMutatedChange}
loading={false}
viewType={1}
allowNonMutatedSubmit={false}
/>
);
await waitFor(() => {
expect(screen.getByTestId("spec-editor-edit-btn")).toBeInTheDocument();
});
await act(async () => {
screen.getByTestId("spec-editor-edit-btn").click();
});
});

it("Tests handleValidate", async () => {
render(
<SpecEditor
initialYaml={mockYaml}
onValidate={onValidate}
onSubmit={onSubmit}
onResetApplied={onResetApplied}
onMutatedChange={onMutatedChange}
loading={false}
viewType={1}
allowNonMutatedSubmit={false}
/>
);
await waitFor(() => {
expect(
screen.getByTestId("spec-editor-validate-button")
).toBeInTheDocument();
});
await act(async () => {
screen.getByTestId("spec-editor-validate-button").click();
});
});

it("Renders without initialYaml", () => {
render(
<SpecEditor
initialYaml={null}
onValidate={onValidate}
onSubmit={onSubmit}
onResetApplied={onResetApplied}
onMutatedChange={onMutatedChange}
loading={false}
viewType={1}
allowNonMutatedSubmit={false}
/>
);
expect(screen.getByTestId("spec-editor")).toBeInTheDocument();
});

it("Renders when initialYaml is a string", () => {
render(
<SpecEditor
initialYaml={"test"}
onValidate={onValidate}
onSubmit={onSubmit}
onResetApplied={onResetApplied}
onMutatedChange={onMutatedChange}
loading={false}
viewType={1}
allowNonMutatedSubmit={false}
/>
);
expect(screen.getByTestId("spec-editor")).toBeInTheDocument();
});
});
17 changes: 14 additions & 3 deletions ui/src/components/common/SpecEditor/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export interface SpecEditorProps {
initialYaml?: any; // Value initally loaded into view. Object instance of spec or string.
loading?: boolean; // Show spinner
viewType?: ViewType; // Allow editing
allowNonMutatedSubmit?: boolean // Allow submit without content being changed
allowNonMutatedSubmit?: boolean; // Allow submit without content being changed
onValidate?: (value: string) => void;
onSubmit?: (value: string) => void;
onResetApplied?: () => void;
Expand Down Expand Up @@ -261,6 +261,7 @@ export function SpecEditor({
variant="contained"
disabled={loading || statusShowing}
sx={btnStyle}
data-testid="spec-editor-edit-btn"
>
{editable ? "View" : "Edit"}
</Button>
Expand All @@ -274,10 +275,16 @@ export function SpecEditor({
Reset
</Button>
<Button
disabled={(!mutated && !allowNonMutatedSubmit) || loading || !editable || statusShowing}
disabled={
(!mutated && !allowNonMutatedSubmit) ||
loading ||
!editable ||
statusShowing
}
onClick={handleValidate}
variant="contained"
sx={{ marginLeft: "0.5rem", ...btnStyle }}
data-testid="spec-editor-validate-button"
>
Validate
</Button>
Expand Down Expand Up @@ -333,7 +340,10 @@ export function SpecEditor({
/>
);
const loadingIcon = (
<CircularProgress size={27} sx={{ marginRight: "1rem", marginLeft: "0.1875rem" }} />
<CircularProgress
size={27}
sx={{ marginRight: "1rem", marginLeft: "0.1875rem" }}
/>
);
const containerStyle = {
display: "flex",
Expand Down Expand Up @@ -431,6 +441,7 @@ export function SpecEditor({
flexDirection: "column",
height: "100%",
}}
data-testid="spec-editor"
>
<Paper
elevation={0}
Expand Down

0 comments on commit a8d44d1

Please sign in to comment.