Skip to content

Commit

Permalink
[0.27.0-prerelease] kie-issues#120: Fix DMN Dev deployments after kie…
Browse files Browse the repository at this point in the history 
…-issues#26 (#1504)
  • Loading branch information
@ljmotta
ljmotta authored Mar 3, 2023
1 parent f5e915f commit c03b1f8
Show file tree
Hide file tree
Showing 12 changed files with 184 additions and 195 deletions.
16 changes: 8 additions & 8 deletions packages/form-dmn/src/DmnFormResult.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export function extractDifferences(current: DecisionResult[], previous: Decision
});
}

export function DmnFormResult(props: DmnFormResultProps) {
export function DmnFormResult({ openExecutionTab, ...props }: DmnFormResultProps) {
const [formResultStatus, setFormResultStatus] = useState<DmnFormResultStatus>(DmnFormResultStatus.EMPTY);
const [formResultError, setFormResultError] = useState<boolean>(false);
const i18n = useMemo(() => {
Expand Down Expand Up @@ -129,11 +129,11 @@ export function DmnFormResult(props: DmnFormResultProps) {
updatedResult?.classList.remove("kogito--editor__dmn-form-result__leaf-updated");
}, []);

const openExecutionTab = useCallback(() => {
const onOpenExecutionTab = useCallback(() => {
if (props.notificationsPanel) {
props.openExecutionTab?.();
openExecutionTab?.();
}
}, [props.notificationsPanel]);
}, [props.notificationsPanel, openExecutionTab]);

const resultStatus = useCallback(
(evaluationStatus: EvaluationStatus) => {
Expand All @@ -144,7 +144,7 @@ export function DmnFormResult(props: DmnFormResultProps) {
<div className={"kie-tools__dmn-form-result__evaluation"}>
<CheckCircleIcon />
{props.notificationsPanel ? (
<a onClick={openExecutionTab} className={"kogito--editor__dmn-form-result__evaluation-link"}>
<a onClick={onOpenExecutionTab} className={"kogito--editor__dmn-form-result__evaluation-link"}>
{i18n.result.evaluation.success}
</a>
) : (
Expand All @@ -159,7 +159,7 @@ export function DmnFormResult(props: DmnFormResultProps) {
<div className={"kie-tools__dmn-form-result__evaluation"}>
<InfoCircleIcon />
{props.notificationsPanel ? (
<a onClick={openExecutionTab} className={"kogito--editor__dmn-form-result__evaluation-link"}>
<a onClick={onOpenExecutionTab} className={"kogito--editor__dmn-form-result__evaluation-link"}>
{i18n.result.evaluation.skipped}
</a>
) : (
Expand All @@ -174,7 +174,7 @@ export function DmnFormResult(props: DmnFormResultProps) {
<div className={"kie-tools__dmn-form-result__evaluation"}>
<ExclamationCircleIcon />
{props.notificationsPanel ? (
<a onClick={openExecutionTab} className={"kogito--editor__dmn-form-result__evaluation-link"}>
<a onClick={onOpenExecutionTab} className={"kogito--editor__dmn-form-result__evaluation-link"}>
{i18n.result.evaluation.failed}
</a>
) : (
Expand All @@ -189,7 +189,7 @@ export function DmnFormResult(props: DmnFormResultProps) {
i18n.result.evaluation.failed,
i18n.result.evaluation.skipped,
i18n.result.evaluation.success,
openExecutionTab,
onOpenExecutionTab,
props.notificationsPanel,
]
);
Expand Down
93 changes: 56 additions & 37 deletions packages/form-dmn/tests/DmnForm.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,76 +54,92 @@ const props: FormComponentProps<InputRow, DmnSchema> = {

describe("DmnForm tests", () => {
it("should render the DMN Form", async () => {
const newProps = { ...props, formData: { name: "Kogito", lastName: "Tooling", daysAndTimeDuration: "P1D" } };
const newProps = { ...props, formInputs: { name: "Kogito", lastName: "Tooling", daysAndTimeDuration: "P1D" } };

const { findByTestId } = render(<DmnForm {...newProps} />);

expect(await findByTestId("form-base")).toMatchSnapshot();
});

it("should submit the formData", async () => {
const formRef = React.createRef<HTMLFormElement>();
it("should submit the formInputs", async () => {
let formRef: HTMLFormElement;
const setFormRef = (node: any) => {
formRef = node;
};
const onSubmit = jest.fn();
const formData = { name: "Kogito", lastName: "Tooling", daysAndTimeDuration: "P1D" };
const formInputs = { name: "Kogito", lastName: "Tooling", daysAndTimeDuration: "P1D" };

const { findByTestId } = render(<DmnForm {...props} onSubmit={onSubmit} formRef={formRef} formInputs={formData} />);
const { findByTestId } = render(
<DmnForm {...props} onSubmit={onSubmit} setFormRef={setFormRef} formInputs={formInputs} />
);

expect(await findByTestId("form-base")).toMatchSnapshot();

await act(async () => {
formRef.current?.submit();
formRef?.submit();
});

expect(onSubmit).toHaveBeenCalledWith(formData);
expect(onSubmit).toHaveBeenCalledWith(formInputs);
});

it("shouldn't submit the formData", async () => {
const formRef = React.createRef<HTMLFormElement>();
it("shouldn't submit the formInputs", async () => {
let formRef: HTMLFormElement;
const setFormRef = (node: any) => {
formRef = node;
};
const onSubmit = jest.fn();
const formData = { daysAndTimeDuration: "p" };
const formInputs = { daysAndTimeDuration: "p" };

const { findByTestId } = render(<DmnForm {...props} onSubmit={onSubmit} formRef={formRef} formInputs={formData} />);
const { findByTestId } = render(
<DmnForm {...props} onSubmit={onSubmit} setFormRef={setFormRef} formInputs={formInputs} />
);

expect(await findByTestId("form-base")).toMatchSnapshot();

await act(async () => {
formRef.current?.submit();
formRef?.submit();
});

expect(onSubmit).toHaveBeenCalledTimes(0);
});

it("should validate the formData - success", async () => {
const formRef = React.createRef<HTMLFormElement>();
it("should validate the formInputs - success", async () => {
let formRef: HTMLFormElement;
const setFormRef = (node: any) => {
formRef = node;
};
const onValidate = jest.fn();
const formData = { name: "Kogito", lastName: "Tooling", daysAndTimeDuration: "P1D" };
const formInputs = { name: "Kogito", lastName: "Tooling", daysAndTimeDuration: "P1D" };

const { findByTestId } = render(
<DmnForm {...props} formRef={formRef} onValidate={onValidate} formInputs={formData} />
<DmnForm {...props} setFormRef={setFormRef} onValidate={onValidate} formInputs={formInputs} />
);

expect(await findByTestId("form-base")).toMatchSnapshot();

await act(async () => {
formRef.current?.submit();
formRef?.submit();
});

expect(onValidate).toHaveBeenCalledWith(formData, null);
expect(onValidate).toHaveBeenCalledWith(formInputs, null);
});

it("should validate the formData - invalid", async () => {
const formRef = React.createRef<HTMLFormElement>();
it("should validate the formInputs - invalid", async () => {
let formRef: HTMLFormElement;
const setFormRef = (node: any) => {
formRef = node;
};
const onValidate = jest.fn();
const formData = { name: "Kogito", lastName: "Tooling", daysAndTimeDuration: "p" };
const formInputs = { name: "Kogito", lastName: "Tooling", daysAndTimeDuration: "p" };

const { findByTestId } = render(
<DmnForm {...props} formRef={formRef} onValidate={onValidate} formInputs={formData} />
<DmnForm {...props} setFormRef={setFormRef} onValidate={onValidate} formInputs={formInputs} />
);

expect(await findByTestId("form-base")).toMatchSnapshot();

await act(async () => {
formRef.current?.submit();
formRef?.submit();
});

expect(onValidate).toHaveBeenCalledTimes(2);
Expand All @@ -142,12 +158,9 @@ describe("DmnForm tests", () => {
},
};

const formRef = React.createRef<HTMLFormElement>();
const formData = {};
const formInputs = {};

const { getByText } = render(
<DmnForm {...props} placeholder={true} formSchema={schema} formRef={formRef} formInputs={formData} />
);
const { getByText } = render(<DmnForm {...props} placeholder={true} formSchema={schema} formInputs={formInputs} />);

expect(getByText(dmnFormI18n.getCurrent().schema.selectPlaceholder)).toMatchSnapshot();
});
Expand All @@ -165,11 +178,14 @@ describe("DmnForm tests", () => {
},
};

const formRef = React.createRef<HTMLFormElement>();
const formData = {};
let formRef: HTMLFormElement;
const setFormRef = (node: any) => {
formRef = node;
};
const formInputs = {};

const { getByText } = render(
<DmnForm {...props} placeholder={true} formSchema={schema} formRef={formRef} formInputs={formData} />
<DmnForm {...props} placeholder={true} formSchema={schema} setFormRef={setFormRef} formInputs={formInputs} />
);

expect(getByText("name")).toMatchSnapshot();
Expand All @@ -189,8 +205,11 @@ describe("DmnForm tests", () => {
},
};

const formRef = React.createRef<HTMLFormElement>();
const formData = {};
let formRef: HTMLFormElement;
const setFormRef = (node: any) => {
formRef = node;
};
const formInputs = {};
const onSubmit = jest.fn();

const { container } = render(
Expand All @@ -199,17 +218,17 @@ describe("DmnForm tests", () => {
placeholder={true}
formSchema={schema}
onSubmit={onSubmit}
formRef={formRef}
formInputs={formData}
setFormRef={setFormRef}
formInputs={formInputs}
/>
);

expect(container).toMatchSnapshot();

await act(async () => {
formRef.current?.submit();
formRef?.submit();
});

expect(onSubmit).toHaveBeenCalledTimes(1);
expect(onSubmit).toHaveBeenCalledTimes(2);
});
});
14 changes: 7 additions & 7 deletions packages/form-dmn/tests/__snapshots__/DmnForm.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ exports[`DmnForm tests should render the DMN Form 1`] = `
name="name"
placeholder=""
type="text"
value=""
value="Kogito"
/>
</div>
Expand Down Expand Up @@ -152,7 +152,7 @@ exports[`DmnForm tests should render the DMN Form 1`] = `
name="lastName"
placeholder=""
type="text"
value=""
value="Tooling"
/>
</div>
Expand Down Expand Up @@ -190,7 +190,7 @@ exports[`DmnForm tests should render the DMN Form 1`] = `
name="daysAndTimeDuration"
placeholder=""
type="text"
value=""
value="P1D"
/>
</div>
Expand Down Expand Up @@ -238,7 +238,7 @@ exports[`DmnForm tests should render the DMN Form 1`] = `
</div>
`;

exports[`DmnForm tests should submit the formData 1`] = `
exports[`DmnForm tests should submit the formInputs 1`] = `
<div
data-testid="form-base"
>
Expand Down Expand Up @@ -405,7 +405,7 @@ exports[`DmnForm tests should submit the formData 1`] = `
</div>
`;

exports[`DmnForm tests should validate the formData - invalid 1`] = `
exports[`DmnForm tests should validate the formInputs - invalid 1`] = `
<div
data-testid="form-base"
>
Expand Down Expand Up @@ -578,7 +578,7 @@ exports[`DmnForm tests should validate the formData - invalid 1`] = `
</div>
`;

exports[`DmnForm tests should validate the formData - success 1`] = `
exports[`DmnForm tests should validate the formInputs - success 1`] = `
<div
data-testid="form-base"
>
Expand Down Expand Up @@ -745,7 +745,7 @@ exports[`DmnForm tests should validate the formData - success 1`] = `
</div>
`;

exports[`DmnForm tests shouldn't submit the formData 1`] = `
exports[`DmnForm tests shouldn't submit the formInputs 1`] = `
<div
data-testid="form-base"
>
Expand Down
6 changes: 3 additions & 3 deletions packages/form/src/FormBase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export interface FormBaseProps {
id?: string;
i18n: FormI18n;
setFormError: React.Dispatch<React.SetStateAction<boolean>>;
formRef?: React.RefObject<HTMLFormElement>;
setFormRef: React.Dispatch<React.SetStateAction<HTMLFormElement | null>>;
showInlineError?: boolean;
autoSave?: boolean;
autoSaveDelay?: number;
Expand Down Expand Up @@ -70,7 +70,7 @@ export function FormBase(props: React.PropsWithChildren<FormBaseProps>) {
<AutoForm
id={props.id}
model={props.formModel}
ref={props.formRef}
ref={(node: HTMLFormElement) => props.setFormRef(node)}
showInlineError={props.showInlineError}
autosave={props.autoSave}
autosaveDelay={props.autoSaveDelay}
Expand All @@ -80,7 +80,7 @@ export function FormBase(props: React.PropsWithChildren<FormBaseProps>) {
onValidate={props.onValidate}
errorsField={props.errorsField}
submitField={props.submitField}
validate={"onChange"}
validate={"onSubmit"}
>
{props.children}
</AutoForm>
Expand Down
9 changes: 5 additions & 4 deletions packages/form/src/FormComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export interface FormProps<Input, Schema> {
id?: string;
name?: string;
locale: string;
formRef?: React.RefObject<HTMLFormElement>;
setFormRef?: (formElement: HTMLFormElement | null) => void;
showInlineError?: boolean;
autoSave?: boolean;
autoSaveDelay?: number;
Expand All @@ -50,9 +50,8 @@ export function FormComponent(props: React.PropsWithChildren<FormComponentProps<
[props.i18n, props.locale]
);

const { onValidate, onSubmit, formModel, formStatus, jsonSchemaBridge, errorBoundaryRef } = useForm({
const { onValidate, onSubmit, formStatus, jsonSchemaBridge, errorBoundaryRef, setFormRef } = useForm({
i18n,
name: props.name,
formError: props.formError,
setFormError: props.setFormError,
formInputs: props.formInputs,
Expand All @@ -64,6 +63,7 @@ export function FormComponent(props: React.PropsWithChildren<FormComponentProps<
entryPath: props.entryPath,
propertiesEntryPath: props.propertiesEntryPath,
validator: props.validator,
setFormRef: props.setFormRef,
});

return (
Expand All @@ -74,9 +74,10 @@ export function FormComponent(props: React.PropsWithChildren<FormComponentProps<
formStatus={formStatus}
errorBoundaryRef={errorBoundaryRef}
jsonSchemaBridge={jsonSchemaBridge}
formModel={formModel}
formModel={props.formInputs}
onSubmit={onSubmit}
onValidate={onValidate}
setFormRef={setFormRef}
>
{props.children}
</FormBase>
Expand Down
Loading

0 comments on commit c03b1f8

Please sign in to comment.