From 89faf7c9b5c9d75f40d4dd05c416787c54588bf8 Mon Sep 17 00:00:00 2001
From: Paul Cowan <paul.cowan@cutting.scot>
Date: Fri, 23 Dec 2022 12:11:07 +0000
Subject: [PATCH] test nested form data in multiple steps

Signed-off-by: Paul Cowan <paul.cowan@cutting.scot>
---
 .../Stepper/Stepper.test.tsx                  | 91 +++++++++++++++++++
 1 file changed, 91 insertions(+)

diff --git a/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.test.tsx b/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.test.tsx
index af86abf1c6..f40e467a14 100644
--- a/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.test.tsx
+++ b/plugins/scaffolder/src/next/TemplateWizardPage/Stepper/Stepper.test.tsx
@@ -20,6 +20,7 @@ import { renderInTestApp } from '@backstage/test-utils';
 import { act, fireEvent } from '@testing-library/react';
 import type { RJSFValidationError } from '@rjsf/utils';
 import { JsonValue } from '@backstage/types';
+import { NextFieldExtensionComponentProps } from '../../../extensions/types';
 
 describe('Stepper', () => {
   it('should render the step titles for each step of the manifest', async () => {
@@ -110,6 +111,96 @@ describe('Stepper', () => {
     );
   });
 
+  it('should merge nested formData correctly in multiple steps', async () => {
+    const Repo = ({
+      onChange,
+    }: NextFieldExtensionComponentProps<{ repository: string }, any>) => (
+      <input
+        aria-label="repo"
+        type="text"
+        onChange={e => onChange({ repository: e.target.value })}
+        defaultValue=""
+      />
+    );
+
+    const Owner = ({
+      onChange,
+    }: NextFieldExtensionComponentProps<{ owner: string }, any>) => (
+      <input
+        aria-label="owner"
+        type="text"
+        onChange={e => onChange({ owner: e.target.value })}
+        defaultValue=""
+      />
+    );
+
+    const manifest: TemplateParameterSchema = {
+      steps: [
+        {
+          title: 'Step 1',
+          schema: {
+            properties: {
+              first: {
+                type: 'object',
+                'ui:field': 'Repo',
+              },
+            },
+          },
+        },
+        {
+          title: 'Step 2',
+          schema: {
+            properties: {
+              second: {
+                type: 'object',
+                'ui:field': 'Owner',
+              },
+            },
+          },
+        },
+      ],
+      title: 'React JSON Schema Form Test',
+    };
+
+    const onComplete = jest.fn(async (values: Record<string, JsonValue>) => {
+      expect(values).toEqual({
+        first: { repository: 'Repo' },
+        second: { owner: 'Owner' },
+      });
+    });
+
+    const { getByRole } = await renderInTestApp(
+      <Stepper
+        manifest={manifest}
+        onComplete={onComplete}
+        extensions={[
+          { name: 'Repo', component: Repo },
+          { name: 'Owner', component: Owner },
+        ]}
+      />,
+    );
+
+    await fireEvent.change(getByRole('textbox', { name: 'repo' }), {
+      target: { value: 'Repo' },
+    });
+
+    await act(async () => {
+      await fireEvent.click(getByRole('button', { name: 'Next' }));
+    });
+
+    await fireEvent.change(getByRole('textbox', { name: 'owner' }), {
+      target: { value: 'Owner' },
+    });
+
+    await act(async () => {
+      await fireEvent.click(getByRole('button', { name: 'Review' }));
+    });
+
+    await act(async () => {
+      await fireEvent.click(getByRole('button', { name: 'Create' }));
+    });
+  });
+
   it('should render custom field extensions properly', async () => {
     const MockComponent = () => {
       return <h1>im a custom field extension</h1>;