From 0acc1968c1c2cd99b97e78e7be1e59764de8c726 Mon Sep 17 00:00:00 2001 From: Ayo Ayco Date: Sat, 8 Oct 2022 22:29:08 +0200 Subject: [PATCH] feat: support single form group (#71) --- demo/src/pages/index.astro | 33 ++++++++++--------- packages/astro-reactive-form/Form.astro | 14 +++++--- .../test/Form.astro.test.js | 24 ++++++++++++++ 3 files changed, 50 insertions(+), 21 deletions(-) diff --git a/demo/src/pages/index.astro b/demo/src/pages/index.astro index 4824091..6af9401 100644 --- a/demo/src/pages/index.astro +++ b/demo/src/pages/index.astro @@ -33,7 +33,6 @@ const userNameControl = form.get("username"); // set values dynamically userNameControl?.setValue("RAMOOOON"); form.get("is-awesome")?.setValue("checked"); - --- @@ -51,21 +50,23 @@ form.get("is-awesome")?.setValue("checked"); type: "submit", name: "what", }} - formGroups={[form]} + formGroups={form} /> + - - \ No newline at end of file diff --git a/packages/astro-reactive-form/Form.astro b/packages/astro-reactive-form/Form.astro index ef2f87e..2fdfb60 100644 --- a/packages/astro-reactive-form/Form.astro +++ b/packages/astro-reactive-form/Form.astro @@ -4,18 +4,22 @@ import Field from './components/Field.astro'; import FieldSet from './components/FieldSet.astro'; export interface Props { + formGroups: FormGroup | FormGroup[]; submitControl?: Submit; - formGroups: FormGroup[]; - theme?: "light" | "dark"; + theme?: 'light' | 'dark'; } -const { submitControl, formGroups, theme } = Astro.props; +const { submitControl, formGroups: form, theme } = Astro.props; -const formTheme = theme ?? "light"; +const formTheme = theme ?? 'light'; ---
- {formGroups?.map((group) =>
)} + { + Array.isArray(form) + ? form?.map((group) =>
) + : form?.controls.map((control) => ) + } {submitControl && } diff --git a/packages/astro-reactive-form/test/Form.astro.test.js b/packages/astro-reactive-form/test/Form.astro.test.js index 631a2a9..6e390c6 100644 --- a/packages/astro-reactive-form/test/Form.astro.test.js +++ b/packages/astro-reactive-form/test/Form.astro.test.js @@ -63,6 +63,30 @@ describe('Form.astro test', () => { // assert expect(matches.length).to.equal(expectedCount); }); + + it('Should not render a fieldset for a single form group', async () => { + // arrange + const expectedCount = 0; + const element = /
/g; + const fakeFormGroup = { + controls: [ + { + type: 'checkbox', + name: 'fake-checkbox', + label: 'FAKE CHECKBOX', + }, + ], + }; + const props = { formGroups: fakeFormGroup }; + component = await getComponentOutput('./Form.astro', props); + + // act + const actualResult = cleanString(component.html); + const matches = actualResult.match(element) || []; + + // assert + expect(matches.length).to.equal(expectedCount); + }); }); });