Add tests that had a conflict

dnbexperience · Oct 5, 2024 · 53599a4 · 53599a4
1 parent 1f015be
commit 53599a4
Show file tree

Hide file tree

Showing 2 changed files with 198 additions and 0 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Iterate/Array/__tests__/Array.test.tsx
@@ -640,6 +640,61 @@ describe('Iterate.Array', () => {
         )
       })
 
+      it('should handle "defaultValue" (with null) in React.StrictMode', () => {
+        const onSubmit = jest.fn()
+
+        render(
+          <React.StrictMode>
+            <Form.Handler onSubmit={onSubmit}>
+              <Iterate.Array path="/myList" defaultValue={[null]}>
+                <Field.String itemPath="/" defaultValue="foo" />
+              </Iterate.Array>
+            </Form.Handler>
+          </React.StrictMode>
+        )
+
+        const form = document.querySelector('form')
+        const input = document.querySelector('input')
+
+        expect(input).toHaveValue('foo')
+
+        fireEvent.submit(form)
+
+        expect(onSubmit).toHaveBeenCalledTimes(1)
+        expect(onSubmit).toHaveBeenLastCalledWith(
+          { myList: ['foo'] },
+          expect.anything()
+        )
+      })
+
+      it('should not set defaultValue when item gets removed', () => {
+        const onSubmit = jest.fn()
+
+        render(
+          <React.StrictMode>
+            <Form.Handler onSubmit={onSubmit}>
+              <Iterate.Array path="/myList" defaultValue={[null]}>
+                <Field.String itemPath="/" defaultValue="foo" />
+                <Iterate.RemoveButton />
+              </Iterate.Array>
+            </Form.Handler>
+          </React.StrictMode>
+        )
+
+        const form = document.querySelector('form')
+        const input = document.querySelector('input')
+
+        expect(input).toHaveValue('foo')
+
+        fireEvent.submit(form)
+
+        expect(onSubmit).toHaveBeenCalledTimes(1)
+        expect(onSubmit).toHaveBeenLastCalledWith(
+          { myList: ['foo'] },
+          expect.anything()
+        )
+      })
+
       it('should set empty array in the data context', () => {
         const onSubmit = jest.fn()
 
@@ -1320,6 +1375,92 @@ describe('Iterate.Array', () => {
     })
   })
 
+  describe('value and defaultValue', () => {
+    it('should support "value" on fields inside iterate', () => {
+      const onSubmit = jest.fn()
+
+      render(
+        <Form.Handler
+          onSubmit={onSubmit}
+          data={{
+            myList: ['', undefined, null, 'something'],
+          }}
+        >
+          <Iterate.Array path="/myList">
+            {(value, index) => {
+              return (
+                <Field.String itemPath="/" value={`value ${index + 1}`} />
+              )
+            }}
+          </Iterate.Array>
+        </Form.Handler>
+      )
+
+      const form = document.querySelector('form')
+      const [first, second, third, forth] = Array.from(
+        document.querySelectorAll('input')
+      )
+
+      expect(first).toHaveValue('value 1')
+      expect(second).toHaveValue('value 2')
+      expect(third).toHaveValue('value 3')
+      expect(forth).toHaveValue('value 4')
+
+      fireEvent.submit(form)
+
+      expect(onSubmit).toHaveBeenCalledTimes(1)
+      expect(onSubmit).toHaveBeenLastCalledWith(
+        {
+          myList: ['value 1', 'value 2', 'value 3', 'value 4'],
+        },
+        expect.anything()
+      )
+    })
+
+    it('should support "defaultValue" on fields inside iterate', () => {
+      const onSubmit = jest.fn()
+
+      render(
+        <Form.Handler
+          onSubmit={onSubmit}
+          data={{
+            myList: [undefined, null, 'something'],
+          }}
+        >
+          <Iterate.Array path="/myList">
+            {(value, index) => {
+              return (
+                <Field.String
+                  itemPath="/"
+                  defaultValue={`default value ${index + 1}`}
+                />
+              )
+            }}
+          </Iterate.Array>
+        </Form.Handler>
+      )
+
+      const form = document.querySelector('form')
+      const [first, second, third] = Array.from(
+        document.querySelectorAll('input')
+      )
+
+      expect(first).toHaveValue('default value 1')
+      expect(second).toHaveValue('default value 2')
+      expect(third).toHaveValue('something')
+
+      fireEvent.submit(form)
+
+      expect(onSubmit).toHaveBeenCalledTimes(1)
+      expect(onSubmit).toHaveBeenLastCalledWith(
+        {
+          myList: ['default value 1', 'default value 2', 'something'],
+        },
+        expect.anything()
+      )
+    })
+  })
+
   it('should contain tabindex of -1', () => {
     render(<Iterate.Array value={['one']}>content</Iterate.Array>)
 

diff --git a/...ages/dnb-eufemia/src/extensions/forms/Wizard/Container/__tests__/WizardContainer.test.tsx b/...ages/dnb-eufemia/src/extensions/forms/Wizard/Container/__tests__/WizardContainer.test.tsx
@@ -2061,5 +2061,62 @@ describe('Wizard.Container', () => {
       )
       expect(document.querySelector('input')).toHaveValue('1234')
     })
+
+    it('should set defaultValue of Iterate.Array only once between step changes', async () => {
+      const onChange = jest.fn()
+      const onStepChange = jest.fn()
+
+      render(
+        <Form.Handler onChange={onChange}>
+          <Wizard.Container onStepChange={onStepChange}>
+            <Wizard.Step>
+              <Iterate.Array path="/items" defaultValue={[null]}>
+                <Field.String itemPath="/" defaultValue="123" />
+              </Iterate.Array>
+
+              <Iterate.PushButton pushValue={null} path="/items" />
+
+              <Wizard.Buttons />
+            </Wizard.Step>
+
+            <Wizard.Step>
+              <Wizard.Buttons />
+            </Wizard.Step>
+          </Wizard.Container>
+        </Form.Handler>
+      )
+
+      expect(document.querySelectorAll('input')).toHaveLength(1)
+      expect(document.querySelector('input')).toHaveValue('123')
+
+      await userEvent.type(document.querySelector('input'), '4')
+
+      expect(document.querySelector('input')).toHaveValue('1234')
+
+      const pushButton = document.querySelector(
+        '.dnb-forms-iterate-push-button'
+      )
+      await userEvent.click(pushButton)
+
+      expect(document.querySelectorAll('input')).toHaveLength(2)
+
+      await userEvent.click(nextButton())
+
+      expect(onStepChange).toHaveBeenLastCalledWith(
+        1,
+        'next',
+        expect.anything()
+      )
+
+      await userEvent.click(previousButton())
+
+      expect(document.querySelectorAll('input')).toHaveLength(2)
+      expect(onStepChange).toHaveBeenLastCalledWith(
+        0,
+        'previous',
+        expect.anything()
+      )
+      expect(document.querySelector('input')).toHaveValue('1234')
+    })
   })
 })