From fbb436c03554df0dc84aa7b68c50cdc5f017af36 Mon Sep 17 00:00:00 2001 From: Ingerid Gjeitnes Hellen Date: Tue, 27 Jun 2023 14:24:25 +0200 Subject: [PATCH] refactor: make idReference to Form mandatory --- .../dm-core-plugins/src/form/Form.test.tsx | 22 ++++--- .../src/form/RegistryContext.tsx | 2 +- .../src/form/fields/ArrayField.test.tsx | 38 +++++++---- .../src/form/fields/AttributeField.test.tsx | 2 +- .../src/form/fields/BooleanField.test.tsx | 23 +++++-- .../src/form/fields/NumberField.test.tsx | 35 ++++++++--- .../src/form/fields/ObjectField.test.tsx | 23 ++++--- .../src/form/fields/ObjectField.tsx | 2 +- .../src/form/fields/StringField.test.tsx | 63 ++++++++++++++----- packages/dm-core-plugins/src/form/types.tsx | 2 +- 10 files changed, 154 insertions(+), 58 deletions(-) diff --git a/packages/dm-core-plugins/src/form/Form.test.tsx b/packages/dm-core-plugins/src/form/Form.test.tsx index 2987a132e..d3946d909 100644 --- a/packages/dm-core-plugins/src/form/Form.test.tsx +++ b/packages/dm-core-plugins/src/form/Form.test.tsx @@ -29,7 +29,9 @@ describe('Form', () => { }, ]) - const { container } = render(
, { wrapper }) + const { container } = render(, { + wrapper, + }) await waitFor(() => { expect(container.querySelector(`input[id="foo"]`)).toBeTruthy() expect(container.querySelector(`input[id="bar"]`)).toBeTruthy() @@ -77,9 +79,12 @@ describe('Form', () => { bar: '', }, } - const { container } = render(, { - wrapper, - }) + const { container } = render( + , + { + wrapper, + } + ) await waitFor(() => { expect(container.querySelector(`input[id="foo"]`)).toBeTruthy() expect(container.querySelector(`input[id="child.bar"]`)).toBeTruthy() @@ -116,9 +121,12 @@ describe('Form', () => { order: [], } - const { container } = render(, { - wrapper, - }) + const { container } = render( + , + { + wrapper, + } + ) await waitFor(() => { expect(container.querySelector(`input[id="foo"]`)).toBeTruthy() // Should only call get blueprint once diff --git a/packages/dm-core-plugins/src/form/RegistryContext.tsx b/packages/dm-core-plugins/src/form/RegistryContext.tsx index fbf72299e..9dae6c0d6 100644 --- a/packages/dm-core-plugins/src/form/RegistryContext.tsx +++ b/packages/dm-core-plugins/src/form/RegistryContext.tsx @@ -2,7 +2,7 @@ import { TViewConfig } from '@development-framework/dm-core' import React, { createContext, useContext } from 'react' type Props = { - idReference?: string + idReference: string onOpen?: (key: string, view: TViewConfig) => void } diff --git a/packages/dm-core-plugins/src/form/fields/ArrayField.test.tsx b/packages/dm-core-plugins/src/form/fields/ArrayField.test.tsx index 587342e99..ffe4ea76d 100644 --- a/packages/dm-core-plugins/src/form/fields/ArrayField.test.tsx +++ b/packages/dm-core-plugins/src/form/fields/ArrayField.test.tsx @@ -31,7 +31,12 @@ describe('ArrayField', () => { }, ], } - render(, { wrapper }) + render( + , + { + wrapper, + } + ) await waitFor(() => { expect(screen.getByText('Could not find the blueprint')).toBeDefined() }) @@ -54,7 +59,10 @@ describe('ArrayField', () => { it('should contain no field in the list by default', async () => { mockBlueprintGet([blueprint]) - const { container } = render(, { wrapper }) + const { container } = render( + , + { wrapper } + ) await waitFor(() => { expect(container.querySelectorAll(` input[type=text]`).length).toBe(0) }) @@ -62,7 +70,7 @@ describe('ArrayField', () => { it('should have an add button', async () => { mockBlueprintGet([blueprint]) - render(, { wrapper }) + render(, { wrapper }) await waitFor(() => { expect(screen.getByText('Add')).toBeDefined() }) @@ -70,7 +78,10 @@ describe('ArrayField', () => { it('should add a new field when clicking the add button', async () => { mockBlueprintGet([blueprint]) - const { container } = render(, { wrapper }) + const { container } = render( + , + { wrapper } + ) await waitFor(() => { fireEvent.click(screen.getByText('Add')) expect(container.querySelectorAll(` input[type=text]`).length).toBe(1) @@ -83,7 +94,7 @@ describe('ArrayField', () => { array: ['foo', 'bar'], } const { container } = render( - , + , { wrapper } ) await waitFor(() => { @@ -100,7 +111,7 @@ describe('ArrayField', () => { array: ['foo', 'bar'], } const { container } = render( - , + , { wrapper } ) await waitFor(() => { @@ -145,7 +156,7 @@ describe('ArrayField', () => { ], } const { container } = render( - , + , { wrapper } ) await waitFor(() => { @@ -191,9 +202,12 @@ describe('ArrayField', () => { }, ], } - const { container } = render(, { - wrapper, - }) + const { container } = render( + , + { + wrapper, + } + ) await waitFor(() => { const inputs = container.querySelectorAll(` input[type=text]`) expect(inputs.length).toBe(3) @@ -205,7 +219,9 @@ describe('ArrayField', () => { it.skip('should add an inner when clicking the add button', async () => { mockBlueprintGet([outer, inner]) - const { container } = render(, { wrapper }) + const { container } = render(, { + wrapper, + }) await waitFor(() => { fireEvent.click(screen.getByTestId('add-array')) expect(container.querySelectorAll(` input[type=text]`).length).toBe(1) diff --git a/packages/dm-core-plugins/src/form/fields/AttributeField.test.tsx b/packages/dm-core-plugins/src/form/fields/AttributeField.test.tsx index 87e47fab6..6ccb25df8 100644 --- a/packages/dm-core-plugins/src/form/fields/AttributeField.test.tsx +++ b/packages/dm-core-plugins/src/form/fields/AttributeField.test.tsx @@ -19,7 +19,7 @@ describe('AttributeField', () => { ], }, ]) - render(, { wrapper }) + render(, { wrapper }) await waitFor(() => { expect( screen.getByText('Could not find the blueprint', { exact: false }) diff --git a/packages/dm-core-plugins/src/form/fields/BooleanField.test.tsx b/packages/dm-core-plugins/src/form/fields/BooleanField.test.tsx index 258eb056f..3f1ca325d 100644 --- a/packages/dm-core-plugins/src/form/fields/BooleanField.test.tsx +++ b/packages/dm-core-plugins/src/form/fields/BooleanField.test.tsx @@ -24,7 +24,10 @@ describe('BooleanField', () => { ], }, ]) - const { container } = render(, { wrapper }) + const { container } = render( + , + { wrapper } + ) await waitFor(() => { expect(container.querySelectorAll(` input[type=checkbox]`).length).toBe( 1 @@ -48,7 +51,9 @@ describe('BooleanField', () => { ], }, ]) - render(, { wrapper }) + render(, { + wrapper, + }) await waitFor(() => { expect(screen.getByText('Foo')).toBeDefined() }) @@ -69,7 +74,10 @@ describe('BooleanField', () => { ], }, ]) - const { container } = render(, { wrapper }) + const { container } = render( + , + { wrapper } + ) await waitFor(() => { const inputNode: Element | null = container.querySelector(` input[name="foo"]`) @@ -98,7 +106,7 @@ describe('BooleanField', () => { foo: 'beep', } const { container } = render( - , + , { wrapper } ) await waitFor(() => { @@ -127,7 +135,7 @@ describe('BooleanField', () => { ]) const onSubmit = jest.fn() const { container } = render( - , + , { wrapper } ) await waitFor(() => { @@ -159,7 +167,10 @@ describe('BooleanField', () => { ], }, ]) - const { container } = render(, { wrapper }) + const { container } = render( + , + { wrapper } + ) await waitFor(() => { const inputNode: Element | null = container.querySelector(` input[id="foo"]`) diff --git a/packages/dm-core-plugins/src/form/fields/NumberField.test.tsx b/packages/dm-core-plugins/src/form/fields/NumberField.test.tsx index 9d9b74dc3..b99713cd9 100644 --- a/packages/dm-core-plugins/src/form/fields/NumberField.test.tsx +++ b/packages/dm-core-plugins/src/form/fields/NumberField.test.tsx @@ -20,7 +20,10 @@ describe('NumberField', () => { ], }, ]) - const { container } = render(, { wrapper }) + const { container } = render( + , + { wrapper } + ) await waitFor(() => { expect(container.querySelectorAll(` input[type=text]`).length).toBe(1) // TODO type should be number not text expect(screen.getByText('foo')).toBeDefined() @@ -44,7 +47,7 @@ describe('NumberField', () => { ]) const onSubmit = jest.fn() const { container } = render( - , + , { wrapper } ) await waitFor(() => { @@ -80,7 +83,7 @@ describe('NumberField', () => { foo: 2, } const { container } = render( - , + , { wrapper } ) await waitFor(() => { @@ -106,7 +109,10 @@ describe('NumberField', () => { ], }, ]) - const { container } = render(, { wrapper }) + const { container } = render( + , + { wrapper } + ) await waitFor(() => { const inputNode: Element | null = @@ -137,7 +143,12 @@ describe('NumberField', () => { }, ]) const onSubmit = jest.fn() - render(, { wrapper }) + render( + , + { + wrapper, + } + ) await waitFor(() => { fireEvent.submit(screen.getByTestId('form-submit')) }) @@ -162,7 +173,12 @@ describe('NumberField', () => { }, ]) const onSubmit = jest.fn() - render(, { wrapper }) + render( + , + { + wrapper, + } + ) fireEvent.submit(screen.getByTestId('form-submit')) await waitFor(() => { expect(onSubmit).not.toHaveBeenCalled() @@ -192,7 +208,12 @@ describe('NumberField', () => { foo: value, } - render(, { wrapper }) + render( + , + { + wrapper, + } + ) await waitFor(() => { expect(screen.getByTestId('form-textfield').getAttribute('value')).toBe( String(value) diff --git a/packages/dm-core-plugins/src/form/fields/ObjectField.test.tsx b/packages/dm-core-plugins/src/form/fields/ObjectField.test.tsx index befa8d886..9628bd805 100644 --- a/packages/dm-core-plugins/src/form/fields/ObjectField.test.tsx +++ b/packages/dm-core-plugins/src/form/fields/ObjectField.test.tsx @@ -42,24 +42,24 @@ const setupSimple = async (props: TFormProps) => { } test('should render two inputs', async () => { - const utils = await setupSimple({ type: 'MyBlueprint' }) + const utils = await setupSimple({ idReference: 'ds/$1', type: 'MyBlueprint' }) expect(utils.inputs.length).toBe(2) }) test('should render a text input with label foo', async () => { - const utils = await setupSimple({ type: 'MyBlueprint' }) + const utils = await setupSimple({ idReference: 'ds/$1', type: 'MyBlueprint' }) expect(utils.fooInput).toBeDefined() expect(utils.fooInput.type).toBe('text') }) test('should render a checkbox input with label bar', async () => { - const utils = await setupSimple({ type: 'MyBlueprint' }) + const utils = await setupSimple({ idReference: 'ds/$1', type: 'MyBlueprint' }) expect(utils.barInput).toBeDefined() expect(utils.barInput.type).toBe('checkbox') }) test('should show foo before bar by default', async () => { - const utils = await setupSimple({ type: 'MyBlueprint' }) + const utils = await setupSimple({ idReference: 'ds/$1', type: 'MyBlueprint' }) expect(utils.fooInput.compareDocumentPosition(utils.barInput)).toBe( Node.DOCUMENT_POSITION_FOLLOWING ) @@ -67,6 +67,7 @@ test('should show foo before bar by default', async () => { test('should show foo after bar if order states it', async () => { const utils = await setupSimple({ + idReference: 'ds/$1', type: 'MyBlueprint', config: { attributes: [], order: ['bar', 'foo'] }, }) @@ -76,25 +77,29 @@ test('should show foo after bar if order states it', async () => { }) test('should handle a default object value', async () => { - const utils = await setupSimple({ type: 'MyBlueprint' }) + const utils = await setupSimple({ idReference: 'ds/$1', type: 'MyBlueprint' }) expect(utils.fooInput.getAttribute('value')).toBe('beep') expect(utils.barInput.getAttribute('value')).toBe('false') }) test('should handle object fields change events', async () => { - const utils = await setupSimple({ type: 'MyBlueprint' }) + const utils = await setupSimple({ idReference: 'ds/$1', type: 'MyBlueprint' }) fireEvent.change(utils.fooInput, { target: { value: 'changed' } }) expect(utils.fooInput.getAttribute('value')).toBe('changed') }) test('should render the widget with the expected id', async () => { - const utils = await setupSimple({ type: 'MyBlueprint' }) + const utils = await setupSimple({ idReference: 'ds/$1', type: 'MyBlueprint' }) expect(utils.fooInput.getAttribute('id')).toBe('foo') }) test('should handle submit', async () => { const onSubmit = jest.fn() - const utils = await setupSimple({ type: 'MyBlueprint', onSubmit: onSubmit }) + const utils = await setupSimple({ + idReference: 'ds/$1', + type: 'MyBlueprint', + onSubmit: onSubmit, + }) await waitFor(() => { fireEvent.submit(utils.submit) expect(onSubmit).toHaveBeenCalled() @@ -128,7 +133,7 @@ test('should handle optional', async () => { ], }, ]) - render(, { wrapper }) + render(, { wrapper }) await waitFor(() => { screen.debug() // Show optional in label diff --git a/packages/dm-core-plugins/src/form/fields/ObjectField.tsx b/packages/dm-core-plugins/src/form/fields/ObjectField.tsx index 482a9d9f6..73e72359e 100644 --- a/packages/dm-core-plugins/src/form/fields/ObjectField.tsx +++ b/packages/dm-core-plugins/src/form/fields/ObjectField.tsx @@ -227,7 +227,7 @@ export const ContainedAttribute = (props: any): JSX.Element => { const isRoot = namePath == '' const shouldOpen = hasOpen && !isRoot - const attributePath = idReference?.split('.', 2).slice(1) + const attributePath = idReference.split('.', 2).slice(1) return (
diff --git a/packages/dm-core-plugins/src/form/fields/StringField.test.tsx b/packages/dm-core-plugins/src/form/fields/StringField.test.tsx index e40e8e221..5f7962327 100644 --- a/packages/dm-core-plugins/src/form/fields/StringField.test.tsx +++ b/packages/dm-core-plugins/src/form/fields/StringField.test.tsx @@ -34,7 +34,10 @@ describe('StringField', () => { ], }, ]) - const { container } = render(, { wrapper }) + const { container } = render( + , + { wrapper } + ) await waitFor(() => { expect(container.querySelectorAll(` input[type=text]`).length).toBe(1) expect(screen.getByText('foo')).toBeDefined() @@ -54,7 +57,10 @@ describe('StringField', () => { ], }, ]) - const { container } = render(, { wrapper }) + const { container } = render( + , + { wrapper } + ) await waitFor(() => { expect(container.querySelectorAll(` input[type=text]`).length).toBe(1) expect(screen.getByText('foo')).toBeDefined() @@ -76,9 +82,12 @@ describe('StringField', () => { ], }, ]) - const { container } = render(, { - wrapper, - }) + const { container } = render( + , + { + wrapper, + } + ) await waitFor(() => { expect(container.querySelectorAll(` input[type=text]`).length).toBe(1) expect(screen.getByText('Foo')).toBeDefined() @@ -104,7 +113,7 @@ describe('StringField', () => { foo: 'beep', } const { container } = render( - , + , { wrapper } ) await waitFor(() => { @@ -133,7 +142,7 @@ describe('StringField', () => { ]) const onSubmit = jest.fn() const { container } = render( - , + , { wrapper } ) await waitFor(() => { @@ -165,7 +174,10 @@ describe('StringField', () => { ], }, ]) - const { container } = render(, { wrapper }) + const { container } = render( + , + { wrapper } + ) await waitFor(() => { const inputNode: Element | null = @@ -194,7 +206,10 @@ describe('StringField', () => { ], }, ]) - const { container } = render(, { wrapper }) + const { container } = render( + , + { wrapper } + ) await waitFor(() => { const inputNode: Element | null = container.querySelector(` input[id="foo"]`) @@ -219,7 +234,7 @@ describe('StringField', () => { ], }, ]) - render(, { wrapper }) + render(, { wrapper }) waitFor(async () => { userEvent.type(screen.getByTestId('form-textfield'), 'foobar') @@ -250,7 +265,12 @@ describe('StringField', () => { foo: value, } - render(, { wrapper }) + render( + , + { + wrapper, + } + ) await waitFor(() => { expect(screen.getByTestId('form-textfield').getAttribute('value')).toBe( value @@ -297,7 +317,12 @@ describe('StringField', () => { const onSubmit = jest.fn() const formData = {} render( - , + , { wrapper } ) await waitFor(() => { @@ -325,7 +350,12 @@ describe('StringField', () => { const onSubmit = jest.fn() const formData = {} render( - , + , { wrapper } ) fireEvent.submit(screen.getByTestId('form-submit')) @@ -353,7 +383,12 @@ describe('StringField', () => { }, ]) const onSubmit = jest.fn() - render(, { wrapper }) + render( + , + { + wrapper, + } + ) fireEvent.submit(screen.getByRole('button')) await waitFor(() => { expect(onSubmit).not.toHaveBeenCalled() diff --git a/packages/dm-core-plugins/src/form/types.tsx b/packages/dm-core-plugins/src/form/types.tsx index d536e8b9b..c5f85bce2 100644 --- a/packages/dm-core-plugins/src/form/types.tsx +++ b/packages/dm-core-plugins/src/form/types.tsx @@ -1,7 +1,7 @@ import { TViewConfig } from '@development-framework/dm-core' export type TFormProps = { - idReference?: string + idReference: string type?: string formData?: any config?: TConfig