create-appraisejs 0.2.0 → 0.3.0-alpha.0

package/templates/default/src/components/diagram/flow-host-helpers.test.ts

@@ -0,0 +1,74 @@
+import { StepParameterType } from '@prisma/client'
+import { describe, expect, it } from 'vitest'
+
+import { toNodeOrderMap, toTemplateTestCaseNodeOrderMap } from './flow-host-helpers'
+
+describe('flow host helpers', () => {
+  it('converts template-test-case node parameters into runtime values', () => {
+    expect(
+      toNodeOrderMap({
+        'node-1': {
+          order: 1,
+          label: 'Click button',
+          parameters: [
+            {
+              name: 'target',
+              defaultValue: 'Submit',
+              type: StepParameterType.STRING,
+              order: 1,
+            },
+          ],
+          templateStepId: 'step-1',
+        },
+      }),
+    ).toEqual({
+      'node-1': {
+        order: 1,
+        label: 'Click button',
+        parameters: [
+          {
+            name: 'target',
+            value: 'Submit',
+            type: StepParameterType.STRING,
+            order: 1,
+          },
+        ],
+        templateStepId: 'step-1',
+      },
+    })
+  })
+
+  it('converts runtime node parameters into template default values', () => {
+    expect(
+      toTemplateTestCaseNodeOrderMap({
+        'node-1': {
+          order: 1,
+          label: 'Fill field',
+          parameters: [
+            {
+              name: 'value',
+              value: 'email@example.com',
+              type: StepParameterType.STRING,
+              order: 1,
+            },
+          ],
+          templateStepId: 'step-2',
+        },
+      }),
+    ).toEqual({
+      'node-1': {
+        order: 1,
+        label: 'Fill field',
+        parameters: [
+          {
+            name: 'value',
+            defaultValue: 'email@example.com',
+            type: StepParameterType.STRING,
+            order: 1,
+          },
+        ],
+        templateStepId: 'step-2',
+      },
+    })
+  })
+})

package/templates/default/src/components/diagram/flow-host-helpers.ts

@@ -0,0 +1,51 @@
+import type { NodeOrderMap, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+
+type DiagramNodeOrder = NodeOrderMap | TemplateTestCaseNodeOrderMap
+type DiagramNodeParameter =
+  | NodeOrderMap[string]['parameters'][number]
+  | TemplateTestCaseNodeOrderMap[string]['parameters'][number]
+
+export function toNodeOrderMap(nodeOrder: DiagramNodeOrder): NodeOrderMap {
+  const convertedNodeOrder: NodeOrderMap = {}
+
+  Object.entries(nodeOrder).forEach(([key, nodeData]) => {
+    convertedNodeOrder[key] = {
+      order: nodeData.order,
+      label: nodeData.label,
+      gherkinStep: nodeData.gherkinStep,
+      icon: nodeData.icon,
+      isFirstNode: 'isFirstNode' in nodeData ? nodeData.isFirstNode : undefined,
+      parameters: nodeData.parameters.map((parameter: DiagramNodeParameter) => ({
+        name: parameter.name,
+        value: 'defaultValue' in parameter ? parameter.defaultValue : parameter.value,
+        type: parameter.type,
+        order: parameter.order,
+      })),
+      templateStepId: nodeData.templateStepId,
+    }
+  })
+
+  return convertedNodeOrder
+}
+
+export function toTemplateTestCaseNodeOrderMap(nodeOrder: DiagramNodeOrder): TemplateTestCaseNodeOrderMap {
+  const convertedNodeOrder: TemplateTestCaseNodeOrderMap = {}
+
+  Object.entries(nodeOrder).forEach(([key, nodeData]) => {
+    convertedNodeOrder[key] = {
+      order: nodeData.order,
+      label: nodeData.label,
+      gherkinStep: nodeData.gherkinStep,
+      icon: nodeData.icon,
+      parameters: nodeData.parameters.map((parameter: DiagramNodeParameter) => ({
+        name: parameter.name,
+        defaultValue: 'value' in parameter ? parameter.value : parameter.defaultValue,
+        type: parameter.type,
+        order: parameter.order,
+      })),
+      templateStepId: nodeData.templateStepId,
+    }
+  })
+
+  return convertedNodeOrder
+}

package/templates/default/src/components/diagram/node-form-helpers.test.ts

@@ -0,0 +1,92 @@
+import { StepParameterType, TemplateStepIcon, TemplateStepType } from '@prisma/client'
+import { describe, expect, it } from 'vitest'
+
+import {
+  buildNodeFormSubmitValue,
+  createInitialParametersForTemplateStep,
+  getGherkinPreview,
+  getSelectedTemplateIcon,
+  getSelectedTemplateStep,
+  getSelectedTemplateStepParams,
+  validateNodeFormValues,
+} from './node-form-helpers'
+
+describe('node-form helpers', () => {
+  const templateSteps = [
+    {
+      id: 'step-1',
+      name: 'Click',
+      icon: TemplateStepIcon.MOUSE,
+      signature: 'click {string}',
+      type: TemplateStepType.ACTION,
+    },
+    {
+      id: 'step-2',
+      name: 'Check',
+      icon: TemplateStepIcon.VALIDATION,
+      signature: 'see {string}',
+      type: TemplateStepType.ASSERTION,
+    },
+  ] as never
+
+  const templateStepParams = [
+    {
+      id: 'param-1',
+      name: 'target',
+      type: StepParameterType.STRING,
+      order: 1,
+      templateStepId: 'step-1',
+    },
+    {
+      id: 'param-2',
+      name: 'expected',
+      type: StepParameterType.STRING,
+      order: 1,
+      templateStepId: 'step-2',
+    },
+  ] as never
+
+  it('selects template steps and related params', () => {
+    expect(getSelectedTemplateStep(templateSteps, 'step-1')?.name).toBe('Click')
+    expect(getSelectedTemplateStepParams(templateStepParams, 'step-2')).toEqual([
+      expect.objectContaining({ name: 'expected' }),
+    ])
+  })
+
+  it('creates initial parameters and gherkin previews', () => {
+    const parameters = createInitialParametersForTemplateStep(getSelectedTemplateStepParams(templateStepParams, 'step-1'))
+
+    expect(parameters).toEqual([
+      {
+        name: 'target',
+        value: '',
+        type: StepParameterType.STRING,
+        order: 1,
+      },
+    ])
+    expect(
+      getGherkinPreview(templateSteps[0], [
+        { name: 'target', value: 'Submit', type: StepParameterType.STRING, order: 1 },
+      ]),
+    ).toBe('When click "Submit"')
+  })
+
+  it('validates and shapes submit payloads', () => {
+    expect(validateNodeFormValues('', '')).toMatchObject({ success: false })
+    expect(getSelectedTemplateIcon(templateSteps[0])).toBe(TemplateStepIcon.MOUSE)
+
+    expect(
+      buildNodeFormSubmitValue(
+        { label: 'Submit click' },
+        [{ name: 'target', value: 'Submit', type: StepParameterType.STRING, order: 1 }],
+        'When click "Submit"',
+        'step-1',
+      ),
+    ).toEqual({
+      label: 'Submit click',
+      parameters: [{ name: 'target', value: 'Submit', type: StepParameterType.STRING, order: 1 }],
+      gherkinStep: 'When click "Submit"',
+      templateStepId: 'step-1',
+    })
+  })
+})

package/templates/default/src/components/diagram/node-form-helpers.ts

@@ -0,0 +1,100 @@
+import { format } from 'date-fns'
+import {
+  StepParameterType,
+  TemplateStepIcon,
+  type Locator,
+  type LocatorGroup,
+  type TemplateStep,
+  type TemplateStepParameter,
+} from '@prisma/client'
+import { z } from 'zod'
+
+import type { NodeData } from '@/constants/form-opts/diagram/node-form'
+import { generateGherkinStep } from '@/lib/transformers/gherkin-converter'
+
+export const nodeFormErrorSchema = z.object({
+  label: z.string().min(3, { message: 'Label must be at least 3 characters' }),
+  templateStepId: z.string().min(1, { message: 'Template step is required' }),
+})
+
+export type NodeFormErrors = z.inferFlattenedErrors<typeof nodeFormErrorSchema>['fieldErrors']
+
+export type NodeFormProps = {
+  onSubmitAction: (values: NodeData) => void
+  initialValues: NodeData
+  templateSteps: TemplateStep[]
+  templateStepParams: TemplateStepParameter[]
+  showAddNodeDialog: boolean
+  locators: Array<Pick<Locator, 'id' | 'name' | 'locatorGroupId'>>
+  locatorGroups: Array<Pick<LocatorGroup, 'id' | 'name'>>
+  setShowAddNodeDialog: (show: boolean) => void
+  defaultValueInput?: boolean
+}
+
+export function getSelectedTemplateStep(templateSteps: TemplateStep[], templateStepId: string) {
+  return templateSteps.find(step => step.id === templateStepId) ?? null
+}
+
+export function getSelectedTemplateStepParams(templateStepParams: TemplateStepParameter[], templateStepId: string) {
+  return templateStepParams.filter(parameter => parameter.templateStepId === templateStepId)
+}
+
+function getDefaultParameterValue(type: StepParameterType) {
+  switch (type) {
+    case StepParameterType.NUMBER:
+      return '0'
+    case StepParameterType.STRING:
+    case StepParameterType.LOCATOR:
+      return ''
+    case StepParameterType.BOOLEAN:
+      return 'false'
+    case StepParameterType.DATE:
+      return format(new Date(), 'PPP')
+  }
+}
+
+export function createInitialParametersForTemplateStep(templateStepParams: TemplateStepParameter[]) {
+  return templateStepParams.map(parameter => ({
+    name: parameter.name,
+    value: getDefaultParameterValue(parameter.type),
+    type: parameter.type,
+    order: parameter.order,
+  }))
+}
+
+export function getGherkinPreview(
+  templateStep: TemplateStep | null,
+  parameters: NodeData['parameters'],
+) {
+  if (!templateStep?.signature) {
+    return ''
+  }
+
+  return generateGherkinStep(templateStep.type, templateStep.signature, parameters)
+}
+
+export function validateNodeFormValues(label: FormDataEntryValue | undefined, templateStepId: string) {
+  return nodeFormErrorSchema.safeParse({
+    label,
+    templateStepId,
+  })
+}
+
+export function buildNodeFormSubmitValue(
+  formValues: Record<string, FormDataEntryValue>,
+  parameters: NodeData['parameters'],
+  gherkinStep: string,
+  templateStepId: string,
+) {
+  return {
+    ...formValues,
+    parameters,
+    label: String(formValues.label ?? ''),
+    gherkinStep,
+    templateStepId,
+  } satisfies NodeData
+}
+
+export function getSelectedTemplateIcon(templateStep: TemplateStep | null) {
+  return templateStep?.icon ?? TemplateStepIcon.MOUSE
+}

package/templates/default/src/components/diagram/node-form.test.tsx

@@ -0,0 +1,168 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { StepParameterType, TemplateStepIcon, TemplateStepType } from '@prisma/client'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import NodeForm from './node-form'
+
+const validateMock = vi.fn(() => true)
+
+vi.mock('./dynamic-parameters', async () => {
+  const React = await import('react')
+
+  const MockDynamicFormFields = React.forwardRef<
+    { validate: () => boolean },
+    {
+      onChange?: (values: Array<{ name: string; value: string; type: StepParameterType; order: number }>) => void
+    }
+  >(({ onChange }, ref) => {
+    React.useImperativeHandle(ref, () => ({
+      validate: validateMock,
+    }))
+    return (
+      <button
+        type="button"
+        onClick={() =>
+          onChange?.([
+            {
+              name: 'target',
+              value: 'Submit',
+              type: StepParameterType.STRING,
+              order: 1,
+            },
+          ])
+        }
+      >
+        Apply Parameters
+      </button>
+    )
+  })
+
+  MockDynamicFormFields.displayName = 'MockDynamicFormFields'
+
+  return {
+    __esModule: true,
+    default: MockDynamicFormFields,
+  }
+})
+
+vi.mock('./template-step-combobox', () => ({
+  __esModule: true,
+  default: ({
+    value,
+    onValueChange,
+    templateSteps,
+    id,
+  }: {
+    value: string
+    onValueChange: (value: string) => void
+    templateSteps: Array<{ id: string; name: string }>
+    id?: string
+  }) => (
+    <select aria-label="Template Step" id={id} value={value} onChange={event => onValueChange(event.target.value)}>
+      <option value="">Select a template step</option>
+      {templateSteps.map(step => (
+        <option key={step.id} value={step.id}>
+          {step.name}
+        </option>
+      ))}
+    </select>
+  ),
+}))
+
+describe('NodeForm', () => {
+  beforeEach(() => {
+    validateMock.mockReturnValue(true)
+  })
+
+  it('submits the shaped node payload', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn()
+
+    render(
+      <NodeForm
+        onSubmitAction={onSubmitAction}
+        initialValues={{
+          label: '',
+          gherkinStep: '',
+          templateStepId: '',
+          parameters: [],
+        }}
+        templateSteps={[
+          {
+            id: 'step-1',
+            name: 'Click',
+            icon: TemplateStepIcon.MOUSE,
+            signature: 'click {string}',
+            type: TemplateStepType.ACTION,
+          } as never,
+        ]}
+        templateStepParams={[
+          {
+            id: 'param-1',
+            name: 'target',
+            type: StepParameterType.STRING,
+            order: 1,
+            templateStepId: 'step-1',
+          } as never,
+        ]}
+        showAddNodeDialog
+        locators={[]}
+        locatorGroups={[]}
+        setShowAddNodeDialog={vi.fn()}
+      />,
+    )
+
+    await user.type(screen.getByLabelText('Label'), 'Click submit')
+    await user.selectOptions(screen.getByLabelText('Template Step'), 'step-1')
+    await user.click(screen.getByRole('button', { name: 'Apply Parameters' }))
+
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => {
+      expect(onSubmitAction).toHaveBeenCalledWith({
+        icon: TemplateStepIcon.MOUSE,
+        label: 'Click submit',
+        parameters: [
+          {
+            name: 'target',
+            value: 'Submit',
+            type: StepParameterType.STRING,
+            order: 1,
+          },
+        ],
+        gherkinStep: 'When click "Submit"',
+        templateStepId: 'step-1',
+      })
+    })
+  })
+
+  it('shows validation feedback when required fields are missing', async () => {
+    const user = userEvent.setup()
+
+    render(
+      <NodeForm
+        onSubmitAction={vi.fn()}
+        initialValues={{
+          label: '',
+          gherkinStep: '',
+          templateStepId: '',
+          parameters: [],
+        }}
+        templateSteps={[]}
+        templateStepParams={[]}
+        showAddNodeDialog
+        locators={[]}
+        locatorGroups={[]}
+        setShowAddNodeDialog={vi.fn()}
+      />,
+    )
+
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(screen.getByText('Label must be at least 3 characters')).toBeInTheDocument()
+    expect(screen.getByText('Template step is required')).toBeInTheDocument()
+  })
+})