Skip to content

Commit 6ff6af3

Browse files
jadewalejadewale
authored
Merge pull request #746 from gadget-inc/feature/shadcn-autojsoninputs-assertion
2 parents 8b82dda + a24d0aa commit 6ff6af3

File tree

4 files changed

+100
-44
lines changed

4 files changed

+100
-44
lines changed

‎packages/react/cypress/component/auto/form/PolarisAutoJSONInput.cy.tsx renamed to ‎packages/react/cypress/component/auto/form/AutoFormJSONInput.cy.tsx

Lines changed: 94 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,76 @@
11
/* eslint-disable jest/valid-expect */
22
import React from "react";
3-
import { PolarisAutoForm } from "../../../../src/auto/polaris/PolarisAutoForm.js";
4-
import { PolarisAutoInput } from "../../../../src/auto/polaris/inputs/PolarisAutoInput.js";
3+
import { elements } from "../../../../spec/auto/shadcn-defaults/index.js";
54
import { PolarisAutoJSONInput } from "../../../../src/auto/polaris/inputs/PolarisAutoJSONInput.js";
65
import { PolarisAutoSubmit } from "../../../../src/auto/polaris/submit/PolarisAutoSubmit.js";
7-
import { PolarisSubmitResultBanner } from "../../../../src/auto/polaris/submit/PolarisSubmitResultBanner.js";
86
import { api } from "../../../support/api.js";
9-
import { PolarisWrapper } from "../../../support/auto.js";
7+
import { describeForEachAutoAdapter } from "../../../support/auto.js";
8+
import { SUITE_NAMES } from "../../../support/constants.js";
9+
10+
import { PolarisAutoInput } from "../../../../src/auto/polaris/inputs/PolarisAutoInput.js";
11+
import { PolarisSubmitResultBanner } from "../../../../src/auto/polaris/submit/PolarisSubmitResultBanner.js";
12+
import { makeShadcnAutoInput } from "../../../../src/auto/shadcn/inputs/ShadcnAutoInput.js";
13+
import { makeShadcnAutoJSONInput } from "../../../../src/auto/shadcn/inputs/ShadcnAutoJSONInput.js";
14+
import { makeShadcnAutoSubmit } from "../../../../src/auto/shadcn/submit/ShadcnAutoSubmit.js";
15+
import { makeSubmitResultBanner } from "../../../../src/auto/shadcn/submit/ShadcnSubmitResultBanner.js";
16+
17+
const ShadcnAutoJSONInput = makeShadcnAutoJSONInput(elements);
18+
const ShadcnAutoSubmit = makeShadcnAutoSubmit(elements);
19+
const ShadcnAutoInput = makeShadcnAutoInput(elements);
20+
const { ShadcnSubmitResultBanner } = makeSubmitResultBanner(elements);
21+
22+
describeForEachAutoAdapter("AutoFormJSONInput", ({ name, adapter: { AutoForm }, wrapper }) => {
23+
const AutoJSONInputWithSubmit = (props: { field: string }) => {
24+
if (name === SUITE_NAMES.POLARIS) {
25+
return (
26+
<>
27+
<PolarisAutoJSONInput {...props} />
28+
<PolarisAutoSubmit id="auto" />
29+
</>
30+
);
31+
}
32+
33+
if (name === SUITE_NAMES.SHADCN) {
34+
return (
35+
<>
36+
<ShadcnAutoJSONInput {...props} />
37+
<ShadcnAutoSubmit id="auto" />
38+
</>
39+
);
40+
}
41+
42+
throw new Error("Invalid suite name");
43+
};
44+
45+
const AutoInputWithSubmit = () => {
46+
if (name === SUITE_NAMES.POLARIS) {
47+
return (
48+
<>
49+
<PolarisSubmitResultBanner />
50+
<PolarisAutoJSONInput field="metafields" />
51+
<PolarisAutoInput field="name" />
52+
<PolarisAutoInput field="inventoryCount" />
53+
<PolarisAutoSubmit id="auto" />
54+
<PolarisAutoSubmit id="auto" />
55+
</>
56+
);
57+
}
58+
59+
if (name === SUITE_NAMES.SHADCN) {
60+
return (
61+
<>
62+
<ShadcnSubmitResultBanner />
63+
<ShadcnAutoJSONInput field="metafields" />
64+
<ShadcnAutoInput field="name" />
65+
<ShadcnAutoInput field="inventoryCount" />
66+
<ShadcnAutoSubmit id="auto" />
67+
</>
68+
);
69+
}
70+
71+
throw new Error("Invalid suite name");
72+
};
1073

11-
describe("PolarisJSONInput", () => {
1274
beforeEach(() => {
1375
cy.viewport("macbook-13");
1476
});
@@ -39,14 +101,10 @@ describe("PolarisJSONInput", () => {
39101
);
40102

41103
cy.mountWithWrapper(
42-
<PolarisAutoForm action={api.widget.create}>
43-
<PolarisSubmitResultBanner />
44-
<PolarisAutoJSONInput field="metafields" />
45-
<PolarisAutoInput field="name" />
46-
<PolarisAutoInput field="inventoryCount" />
47-
<PolarisAutoSubmit />
48-
</PolarisAutoForm>,
49-
PolarisWrapper
104+
<AutoForm action={api.widget.create}>
105+
<AutoInputWithSubmit />
106+
</AutoForm>,
107+
wrapper
50108
);
51109

52110
cy.get(`textarea[name="widget.metafields"]`).type("not a valid JSON");
@@ -56,13 +114,13 @@ describe("PolarisJSONInput", () => {
56114
cy.get(`input[name="widget.name"]`).type("foobar");
57115

58116
// try to submit form, but it shouldn't submit as the json field is invalid
59-
cy.get(`button.Polaris-Button[type="submit"]`).click();
117+
cy.get(`#auto`).click();
60118

61119
cy.contains(`Invalid JSON: Unexpected token 'o', "not a valid JSON" is not valid JSON`);
62120

63121
cy.get(`textarea[name="widget.metafields"]`).clear().type(`{"foo": "bar"}`, { parseSpecialCharSequences: false });
64122

65-
cy.get(`button.Polaris-Button[type="submit"]`).click();
123+
cy.get(`#auto`).click();
66124

67125
cy.contains(`Saved Widget successfully`);
68126
});
@@ -93,11 +151,10 @@ describe("PolarisJSONInput", () => {
93151
).as("widget");
94152

95153
cy.mountWithWrapper(
96-
<PolarisAutoForm action={api.widget.update} findBy="1">
97-
<PolarisAutoJSONInput field="metafields" />
98-
<PolarisAutoSubmit />
99-
</PolarisAutoForm>,
100-
PolarisWrapper
154+
<AutoForm action={api.widget.update} findBy="1">
155+
<AutoJSONInputWithSubmit field="metafields" />
156+
</AutoForm>,
157+
wrapper
101158
);
102159

103160
cy.wait("@widget");
@@ -133,11 +190,10 @@ describe("PolarisJSONInput", () => {
133190
).as("widget");
134191

135192
cy.mountWithWrapper(
136-
<PolarisAutoForm action={api.widget.update} findBy="2">
137-
<PolarisAutoJSONInput field="metafields" />
138-
<PolarisAutoSubmit />
139-
</PolarisAutoForm>,
140-
PolarisWrapper
193+
<AutoForm action={api.widget.update} findBy="2">
194+
<AutoJSONInputWithSubmit field="metafields" />
195+
</AutoForm>,
196+
wrapper
141197
);
142198
cy.wait("@widget");
143199

@@ -171,11 +227,10 @@ describe("PolarisJSONInput", () => {
171227
).as("widget");
172228

173229
cy.mountWithWrapper(
174-
<PolarisAutoForm action={api.widget.update} findBy="3">
175-
<PolarisAutoJSONInput field="metafields" />
176-
<PolarisAutoSubmit />
177-
</PolarisAutoForm>,
178-
PolarisWrapper
230+
<AutoForm action={api.widget.update} findBy="3">
231+
<AutoJSONInputWithSubmit field="metafields" />
232+
</AutoForm>,
233+
wrapper
179234
);
180235
cy.wait("@widget");
181236

@@ -207,11 +262,10 @@ describe("PolarisJSONInput", () => {
207262
);
208263

209264
cy.mountWithWrapper(
210-
<PolarisAutoForm action={api.widget.update} findBy="3">
211-
<PolarisAutoJSONInput field="metafields" />
212-
<PolarisAutoSubmit />
213-
</PolarisAutoForm>,
214-
PolarisWrapper
265+
<AutoForm action={api.widget.update} findBy="3">
266+
<AutoJSONInputWithSubmit field="metafields" />
267+
</AutoForm>,
268+
wrapper
215269
);
216270

217271
cy.get(`textarea[name="widget.metafields"]`).should("have.value", ``);
@@ -244,11 +298,10 @@ describe("PolarisJSONInput", () => {
244298
).as("widget");
245299

246300
cy.mountWithWrapper(
247-
<PolarisAutoForm action={api.widget.update} findBy="1">
248-
<PolarisAutoJSONInput field="metafields" />
249-
<PolarisAutoSubmit />
250-
</PolarisAutoForm>,
251-
PolarisWrapper
301+
<AutoForm action={api.widget.update} findBy="1">
302+
<AutoJSONInputWithSubmit field="metafields" />
303+
</AutoForm>,
304+
wrapper
252305
);
253306

254307
cy.wait("@widget");
@@ -283,7 +336,7 @@ describe("PolarisJSONInput", () => {
283336
}
284337
).as("updateWidget");
285338

286-
cy.get(`button.Polaris-Button[type="submit"]`).click();
339+
cy.get(`#auto`).click();
287340
cy.wait("@updateWidget");
288341
});
289342
});

‎packages/react/cypress/support/auto.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const ONLY_RUN_SUITES = {
3333
"AutoForm - ID field",
3434
"AutoForm - Upsert Action",
3535
"AutoFormDateTimePicker",
36+
"AutoFormJSONInput",
3637
"AutoPasswordInput",
3738
"AutoRoleInput",
3839
],

‎packages/react/src/auto/shadcn/inputs/ShadcnAutoJSONInput.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const makeShadcnAutoJSONInput = ({ Label, Textarea }: Pick<ShadcnElements
3535
}}
3636
id={id}
3737
/>
38-
{!isFocused && errorMessage && <p className="text-sm text-red-500">{errorMessage}</p>}
38+
{!isFocused && errorMessage && <p className="text-sm text-red-500">{`Invalid JSON: ${errorMessage}`}</p>}
3939
</div>
4040
);
4141
}

‎packages/react/src/auto/shadcn/submit/ShadcnAutoSubmit.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import type { ReactNode } from "react";
1+
import type { ButtonHTMLAttributes, ReactNode } from "react";
22
import React from "react";
33
import { useAutoFormMetadata } from "../../AutoFormContext.js";
44
import type { ShadcnElements } from "../elements.js";
55

66
export const makeShadcnAutoSubmit = ({ Button }: Pick<ShadcnElements, "Button">) => {
7-
function ShadcnAutoSubmit(props: { children?: ReactNode; isSubmitting?: boolean; className?: string }) {
7+
function ShadcnAutoSubmit(
8+
props: { children?: ReactNode; isSubmitting?: boolean; className?: string } & Partial<ButtonHTMLAttributes<HTMLButtonElement>>
9+
) {
810
const { submitResult } = useAutoFormMetadata();
911
const isSubmitting = props.isSubmitting ?? submitResult.isSubmitting;
1012

0 commit comments

Comments
 (0)