create-appraisejs 0.2.0 → 0.3.0-alpha.0

package/templates/default/src/app/(base)/test-cases/modify/[id]/page.tsx

@@ -1,106 +1,106 @@
-import { getTestCaseByIdAction, updateTestCaseAction } from '@/actions/test-case/test-case-actions'
-import {
-  Locator,
-  LocatorGroup,
-  TemplateStep,
-  TemplateStepParameter,
-  TestCase,
-  TestCaseStep,
-  TestCaseStepParameter,
-  TestSuite,
-  Tag,
-} from '@prisma/client'
-import React from 'react'
-import TestCaseForm from '../../test-case-form'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import PageHeader from '@/components/typography/page-header'
-import {
-  getAllTemplateStepParamsAction,
-  getAllTemplateStepsAction,
-} from '@/actions/template-step/template-step-actions'
-import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
-import { getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
-import { NodeOrderMap } from '@/types/diagram/diagram'
-import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
-import { getAllTagsAction } from '@/actions/tags/tag-actions'
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
-  title: 'Appraise | Modify Test Case',
-  description: 'Modify a test case',
-}
-
-const ModifyTestCase = async ({ params }: { params: Promise<{ id: string }> }) => {
-  const { id } = await params
-  const { data, error } = await getTestCaseByIdAction(id)
-
-  if (error) {
-    return <div>Error: {error}</div>
-  }
-  const testCase = data as TestCase & {
-    steps: (TestCaseStep & { parameters: TestCaseStepParameter[] })[]
-    testSuiteIds: string[]
-    tagIds: string[]
-  }
-  const { data: templateStepParams, error: templateStepParamsError } = await getAllTemplateStepParamsAction()
-  const { data: templateSteps, error: templateStepsError } = await getAllTemplateStepsAction()
-  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
-  const { data: testSuites, error: testSuitesError } = await getAllTestSuitesAction()
-  const { data: locatorGroups, error: locatorGroupsError } = await getAllLocatorGroupsAction()
-  const { data: tags, error: tagsError } = await getAllTagsAction()
-  if (
-    templateStepParamsError ||
-    templateStepsError ||
-    locatorsError ||
-    testSuitesError ||
-    locatorGroupsError ||
-    tagsError
-  ) {
-    return (
-      <div>
-        Error:{' '}
-        {templateStepParamsError || templateStepsError || locatorsError || testSuitesError || locatorGroupsError || tagsError}
-      </div>
-    )
-  }
-  return (
-    <>
-      <div className="mb-8">
-        <PageHeader>Modify Test Case</PageHeader>
-        <HeaderSubtitle>Modify a test case</HeaderSubtitle>
-      </div>
-      <TestCaseForm
-        onSubmitAction={updateTestCaseAction}
-        id={id}
-        defaultTitle={testCase.title}
-        defaultDescription={testCase.description}
-        defaultTestSuiteIds={testCase.testSuiteIds}
-        defaultTagIds={testCase.tagIds || []}
-        templateStepParams={templateStepParams as TemplateStepParameter[]}
-        templateSteps={templateSteps as TemplateStep[]}
-        locators={locators as Locator[]}
-        locatorGroups={locatorGroups as LocatorGroup[]}
-        testSuites={testSuites as TestSuite[]}
-        tags={tags as Tag[]}
-        defaultNodesOrder={testCase.steps.reduce((acc, step) => {
-          acc[step.id] = {
-            order: step.order,
-            label: step.label,
-            gherkinStep: step.gherkinStep,
-            icon: step.icon,
-            parameters: ((step.parameters || []) as TestCaseStepParameter[]).map((param: TestCaseStepParameter) => ({
-              name: param.name,
-              value: param.value,
-              type: param.type,
-              order: param.order,
-            })),
-            templateStepId: step.templateStepId,
-          }
-          return acc
-        }, {} as NodeOrderMap)}
-      />
-    </>
-  )
-}
-
-export default ModifyTestCase
+import { getTestCaseByIdAction, updateTestCaseAction } from '@/actions/test-case/test-case-actions'
+import React from 'react'
+import TestCaseForm from '../../test-case-form'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import PageHeader from '@/components/typography/page-header'
+import {
+  getAllTemplateStepParamsAction,
+  getAllTemplateStepsAction,
+} from '@/actions/template-step/template-step-actions'
+import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
+import { getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { getAllTagsAction } from '@/actions/tags/tag-actions'
+import { Metadata } from 'next'
+
+import {
+  buildNodeOrderFromTestCaseSteps,
+  getEditableTestCase,
+  getLocatorGroupRows,
+  getLocatorRows,
+  getTagRows,
+  getTemplateStepParamRows,
+  getTemplateStepRows,
+  getTestSuiteRows,
+} from '../../test-case-route-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Modify Test Case',
+  description: 'Modify a test case',
+}
+
+const ModifyTestCase = async ({ params }: { params: Promise<{ id: string }> }) => {
+  const { id } = await params
+  const [
+    testCaseResponse,
+    templateStepParamsResponse,
+    templateStepsResponse,
+    locatorsResponse,
+    testSuitesResponse,
+    locatorGroupsResponse,
+    tagsResponse,
+  ] = await Promise.all([
+    getTestCaseByIdAction(id),
+    getAllTemplateStepParamsAction(),
+    getAllTemplateStepsAction(),
+    getAllLocatorsAction(),
+    getAllTestSuitesAction(),
+    getAllLocatorGroupsAction(),
+    getAllTagsAction(),
+  ])
+
+  const loadError =
+    testCaseResponse.error ||
+    templateStepParamsResponse.error ||
+    templateStepsResponse.error ||
+    locatorsResponse.error ||
+    testSuitesResponse.error ||
+    locatorGroupsResponse.error ||
+    tagsResponse.error
+
+  if (loadError) {
+    return (
+      <div>
+        Error: {loadError}
+      </div>
+    )
+  }
+
+  const testCase = getEditableTestCase(testCaseResponse.data)
+  if (!testCase) {
+    return <div>Error: Invalid test case</div>
+  }
+
+  const templateStepParams = getTemplateStepParamRows(templateStepParamsResponse.data)
+  const templateSteps = getTemplateStepRows(templateStepsResponse.data)
+  const locators = getLocatorRows(locatorsResponse.data)
+  const testSuites = getTestSuiteRows(testSuitesResponse.data)
+  const locatorGroups = getLocatorGroupRows(locatorGroupsResponse.data)
+  const tags = getTagRows(tagsResponse.data)
+
+  return (
+    <>
+      <div className="mb-8">
+        <PageHeader>Modify Test Case</PageHeader>
+        <HeaderSubtitle>Modify a test case</HeaderSubtitle>
+      </div>
+      <TestCaseForm
+        onSubmitAction={updateTestCaseAction}
+        id={id}
+        defaultTitle={testCase.title}
+        defaultDescription={testCase.description}
+        defaultTestSuiteIds={testCase.testSuiteIds}
+        defaultTagIds={testCase.tagIds || []}
+        templateStepParams={templateStepParams}
+        templateSteps={templateSteps}
+        locators={locators}
+        locatorGroups={locatorGroups}
+        testSuites={testSuites}
+        tags={tags}
+        defaultNodesOrder={buildNodeOrderFromTestCaseSteps(testCase.steps)}
+      />
+    </>
+  )
+}
+
+export default ModifyTestCase

package/templates/default/src/app/(base)/test-cases/page.tsx

@@ -6,9 +6,10 @@ import TestCaseTable from './test-case-table'
 import DataTableSkeleton from '@/components/loading-skeleton/data-table/data-table-skeleton'
 import { getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
 import EmptyState from '@/components/data-state/empty-state'
-import { TestCasePickerRow } from '@/types/test-case-picker'
 import { Metadata } from 'next'
 
+import { getTestCaseRows } from './test-case-route-helpers'
+
 export const metadata: Metadata = {
   title: 'Appraise | Test Cases',
   description: 'Manage test cases and their configurations',
@@ -21,7 +22,7 @@ const TestCases = async () => {
     return <div>Error: {testCasesError}</div>
   }
 
-  const testCasesData = testCases as TestCasePickerRow[]
+  const testCasesData = getTestCaseRows(testCases)
 
   if (!testCasesData || testCasesData.length === 0) {
     return (

package/templates/default/src/app/(base)/test-cases/test-case-flow.test.tsx

@@ -0,0 +1,108 @@
+// @vitest-environment jsdom
+
+import { fireEvent, render, screen } from '@testing-library/react'
+import { StepParameterType } from '@prisma/client'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { NodeOrderMap, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
+
+import TestCaseFlow from './test-case-flow'
+
+type MockFlowDiagramProps = {
+  nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap
+  onNodeOrderChange: (nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap) => void
+  defaultValueInput?: boolean
+}
+
+const { flowDiagramRenderSpy } = vi.hoisted(() => ({
+  flowDiagramRenderSpy: vi.fn<(props: MockFlowDiagramProps) => void>(),
+}))
+
+vi.mock('@/components/diagram/flow-diagram', () => ({
+  __esModule: true,
+  default: (props: MockFlowDiagramProps) => {
+    flowDiagramRenderSpy(props)
+
+    return (
+      <div>
+        <div data-testid="node-order">{JSON.stringify(props.nodeOrder)}</div>
+        <div data-testid="default-value-input">{String(props.defaultValueInput)}</div>
+        <button
+          type="button"
+          onClick={() =>
+            props.onNodeOrderChange({
+              'node-1': {
+                order: 1,
+                label: 'Click submit',
+                parameters: [
+                  {
+                    name: 'target',
+                    defaultValue: 'Submit',
+                    type: StepParameterType.STRING,
+                    order: 1,
+                  },
+                ],
+                templateStepId: 'step-1',
+              },
+            })
+          }
+        >
+          Emit Template Nodes
+        </button>
+      </div>
+    )
+  },
+}))
+
+describe('TestCaseFlow', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+    flowDiagramRenderSpy.mockClear()
+  })
+
+  it('normalizes template node updates and persists them after the debounce window', async () => {
+    const onNodeOrderChange = vi.fn()
+
+    render(
+      <TestCaseFlow
+        initialNodesOrder={{
+          'node-1': {
+            order: 1,
+            label: 'Initial step',
+            parameters: [],
+            templateStepId: 'step-1',
+          },
+        }}
+        templateStepParams={[]}
+        templateSteps={[]}
+        locators={[]}
+        locatorGroups={[]}
+        onNodeOrderChange={onNodeOrderChange}
+      />,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: 'Emit Template Nodes' }))
+
+    expect(onNodeOrderChange).not.toHaveBeenCalled()
+
+    await vi.advanceTimersByTimeAsync(200)
+
+    expect(onNodeOrderChange).toHaveBeenCalledWith({
+      'node-1': {
+        order: 1,
+        label: 'Click submit',
+        parameters: [
+          {
+            name: 'target',
+            value: 'Submit',
+            type: StepParameterType.STRING,
+            order: 1,
+          },
+        ],
+        templateStepId: 'step-1',
+      },
+    })
+    expect(screen.getByTestId('default-value-input')).toHaveTextContent('false')
+  })
+
+})

package/templates/default/src/app/(base)/test-cases/test-case-flow.tsx

@@ -1,82 +1,43 @@
-import FlowDiagram from '@/components/diagram/flow-diagram'
-import { NodeOrderMap, TemplateTestCaseNodeOrderMap } from '@/types/diagram/diagram'
-import { Locator, TemplateStep, TemplateStepParameter, StepParameterType, LocatorGroup } from '@prisma/client'
-import React, { useCallback, useEffect, useState, useRef } from 'react'
-
-function useDebouncedCallback<T extends unknown[]>(callback: (...args: T) => void, delay: number) {
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-  return (...args: T) => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current)
-    timeoutRef.current = setTimeout(() => {
-      callback(...args)
-    }, delay)
-  }
-}
-
-const TestCaseFlow = ({
-  initialNodesOrder,
-  templateStepParams,
-  templateSteps,
-  locators,
-  locatorGroups,
-  onNodeOrderChange,
-}: {
-  initialNodesOrder: NodeOrderMap
-  templateStepParams: TemplateStepParameter[]
-  templateSteps: TemplateStep[]
-  locators: Locator[]
-  locatorGroups: LocatorGroup[]
-  onNodeOrderChange: (nodesOrder: NodeOrderMap) => void
-}) => {
-  const [nodesOrder, setNodesOrder] = useState<NodeOrderMap>(initialNodesOrder)
-
-  const handleNodeOrderChange = useCallback(
-    (nodeOrder: NodeOrderMap | TemplateTestCaseNodeOrderMap) => {
-      // Convert TemplateTestCaseNodeOrderMap to NodeOrderMap if needed
-      const convertedNodeOrder: NodeOrderMap = {}
-      Object.entries(nodeOrder).forEach(([key, nodeData]) => {
-        convertedNodeOrder[key] = {
-          ...nodeData,
-          parameters: nodeData.parameters.map(
-            (param: {
-              name: string
-              value?: string
-              defaultValue?: string
-              type: StepParameterType
-              order: number
-            }) => ({
-              ...param,
-              value: 'defaultValue' in param ? param.defaultValue : param.value,
-            }),
-          ),
-        }
-      })
-      setNodesOrder(convertedNodeOrder)
-    },
-    [setNodesOrder],
-  )
-
-  const debouncedSaveNodesOrder = useDebouncedCallback(onNodeOrderChange, 200)
-
-  useEffect(() => {
-    debouncedSaveNodesOrder(nodesOrder)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [nodesOrder])
-
-  return (
-    <>
-      <FlowDiagram
-        nodeOrder={nodesOrder}
-        templateStepParams={templateStepParams}
-        defaultValueInput={false}
-        onNodeOrderChange={handleNodeOrderChange}
-        templateSteps={templateSteps}
-        locators={locators}
-        locatorGroups={locatorGroups}
-      />
-    </>
-  )
-}
-
-export default TestCaseFlow
+import FlowDiagram from '@/components/diagram/flow-diagram'
+import { toNodeOrderMap } from '@/components/diagram/flow-host-helpers'
+import { useFlowNodeOrder } from '@/components/diagram/use-flow-node-order'
+import type { NodeOrderMap } from '@/types/diagram/diagram'
+import type { Locator, LocatorGroup, TemplateStep, TemplateStepParameter } from '@prisma/client'
+
+type TestCaseFlowProps = {
+  initialNodesOrder: NodeOrderMap
+  templateStepParams: TemplateStepParameter[]
+  templateSteps: TemplateStep[]
+  locators: Locator[]
+  locatorGroups: LocatorGroup[]
+  onNodeOrderChange: (nodesOrder: NodeOrderMap) => void
+}
+
+const TestCaseFlow = ({
+  initialNodesOrder,
+  templateStepParams,
+  templateSteps,
+  locators,
+  locatorGroups,
+  onNodeOrderChange,
+}: TestCaseFlowProps) => {
+  const { nodesOrder, handleNodeOrderChange } = useFlowNodeOrder({
+    initialNodesOrder,
+    onNodeOrderChange,
+    normalizeNodeOrder: toNodeOrderMap,
+  })
+
+  return (
+    <FlowDiagram
+      nodeOrder={nodesOrder}
+      templateStepParams={templateStepParams}
+      defaultValueInput={false}
+      onNodeOrderChange={handleNodeOrderChange}
+      templateSteps={templateSteps}
+      locators={locators}
+      locatorGroups={locatorGroups}
+    />
+  )
+}
+
+export default TestCaseFlow

package/templates/default/src/app/(base)/test-cases/test-case-form.test.tsx

@@ -0,0 +1,202 @@
+// @vitest-environment jsdom
+
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { StepParameterType } from '@prisma/client'
+import { describe, expect, it, vi } from 'vitest'
+
+import TestCaseForm from './test-case-form'
+
+const { push, toast } = vi.hoisted(() => ({
+  push: vi.fn(),
+  toast: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push,
+  }),
+}))
+
+vi.mock('@/hooks/use-toast', () => ({
+  toast,
+}))
+
+vi.mock('./test-case-flow', () => ({
+  __esModule: true,
+  default: () => <div>Mock test case flow</div>,
+}))
+
+vi.mock('@/components/ui/multi-select', () => ({
+  MultiSelect: ({
+    options,
+    selected,
+    onChange,
+  }: {
+    options: Array<{ label: string; value: string }>
+    selected: string[]
+    onChange: (selected: string[]) => void
+  }) => (
+    <div>
+      {options.map(option => (
+        <button
+          key={option.value}
+          type="button"
+          onClick={() =>
+            onChange(
+              selected.includes(option.value)
+                ? selected.filter(value => value !== option.value)
+                : [...selected, option.value],
+            )
+          }
+        >
+          {option.label}
+        </button>
+      ))}
+    </div>
+  ),
+}))
+
+vi.mock('@uiw/react-codemirror', () => ({
+  __esModule: true,
+  default: ({ value }: { value: string }) => <div>{value}</div>,
+  EditorView: { lineWrapping: {} },
+}))
+
+vi.mock('@uiw/codemirror-extensions-langs', () => ({
+  langs: {
+    feature: () => ({}),
+  },
+}))
+
+vi.mock('@uiw/codemirror-theme-github', () => ({
+  githubDark: {},
+}))
+
+describe('TestCaseForm', () => {
+  it('submits valid values and navigates back to the test cases list', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn().mockResolvedValue({
+      status: 200,
+    })
+
+    render(
+      <TestCaseForm
+        defaultNodesOrder={{
+          'node-1': {
+            order: 1,
+            label: 'Click submit',
+            gherkinStep: 'click submit',
+            icon: 'MOUSE',
+            parameters: [
+              {
+                name: 'target',
+                value: 'Submit',
+                type: StepParameterType.STRING,
+                order: 1,
+              },
+            ],
+            templateStepId: 'step-1',
+          },
+        }}
+        templateStepParams={[]}
+        templateSteps={[]}
+        locators={[]}
+        locatorGroups={[]}
+        testSuites={[{ id: 'suite-1', name: 'Smoke' } as never]}
+        tags={[{ id: 'tag-1', name: 'Regression' } as never]}
+        onSubmitAction={onSubmitAction}
+      />,
+    )
+
+    await user.type(screen.getByLabelText('Title'), 'Checkout flow')
+    await user.type(screen.getByLabelText('Description'), 'Ensures checkout succeeds')
+    await user.click(screen.getByRole('button', { name: 'Smoke' }))
+    await user.click(screen.getByRole('button', { name: 'Regression' }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    await waitFor(() => {
+      expect(onSubmitAction).toHaveBeenCalledWith(
+        {
+          title: 'Checkout flow',
+          description: 'Ensures checkout succeeds',
+          testSuiteIds: ['suite-1'],
+          tagIds: ['tag-1'],
+          steps: [
+            {
+              gherkinStep: 'click submit',
+              label: 'Click submit',
+              icon: 'MOUSE',
+              parameters: [
+                {
+                  name: 'target',
+                  value: 'Submit',
+                  type: StepParameterType.STRING,
+                  order: 1,
+                },
+              ],
+              order: 1,
+              templateStepId: 'step-1',
+            },
+          ],
+        },
+        undefined,
+      )
+    })
+
+    expect(toast).toHaveBeenCalledWith({
+      title: 'Success',
+      description: 'Test case saved successfully',
+      variant: 'default',
+    })
+    expect(push).toHaveBeenCalledWith('/test-cases')
+  })
+
+  it('shows a destructive toast and skips submit when a required node parameter is missing', async () => {
+    const user = userEvent.setup()
+    const onSubmitAction = vi.fn()
+
+    render(
+      <TestCaseForm
+        defaultNodesOrder={{
+          'node-1': {
+            order: 1,
+            label: 'Click submit',
+            gherkinStep: 'click submit',
+            icon: 'MOUSE',
+            parameters: [],
+            templateStepId: 'step-1',
+          },
+        }}
+        templateStepParams={[
+          {
+            id: 'param-1',
+            name: 'target',
+            type: StepParameterType.STRING,
+            order: 1,
+            isMandatory: true,
+            templateStepId: 'step-1',
+          } as never,
+        ]}
+        templateSteps={[]}
+        locators={[]}
+        locatorGroups={[]}
+        testSuites={[{ id: 'suite-1', name: 'Smoke' } as never]}
+        tags={[]}
+        onSubmitAction={onSubmitAction}
+      />,
+    )
+
+    await user.type(screen.getByLabelText('Title'), 'Checkout flow')
+    await user.click(screen.getByRole('button', { name: 'Smoke' }))
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(onSubmitAction).not.toHaveBeenCalled()
+    expect(toast).toHaveBeenCalledWith({
+      title: 'Validation Error',
+      description:
+        'The following nodes have missing mandatory parameters: Click submit. Please fill in all required parameters before saving.',
+      variant: 'destructive',
+    })
+  })
+})