create-appraisejs 0.2.0 → 0.3.0-alpha.0

package/templates/default/src/app/(base)/template-test-cases/template-test-case-table-columns.tsx

@@ -1,76 +1,76 @@
-'use client'
-
-import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
-import { TemplateTestCase, TemplateTestCaseStep } from '@prisma/client'
-import { ColumnDef } from '@tanstack/react-table'
-
-import { Checkbox } from '@/components/ui/checkbox'
-import TableActions from '@/components/table/table-actions'
-import { deleteTemplateTestCaseAction } from '@/actions/template-test-case/template-test-case-actions'
-import { formatDateTime } from '@/lib/utils'
-
-export const templateTestCaseTableCols: ColumnDef<TemplateTestCase & { steps: TemplateTestCaseStep[] }>[] = [
-  {
-    id: 'select',
-    header: ({ table }) => (
-      <Checkbox
-        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
-        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-        className="mr-2"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={value => row.toggleSelected(!!value)}
-        aria-label="Select row"
-        className="mr-2"
-      />
-    ),
-    enableSorting: false,
-    enableHiding: false,
-  },
-  {
-    accessorKey: 'name',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
-  },
-  {
-    accessorKey: 'description',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Description" />,
-  },
-  {
-    accessorKey: 'steps',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Steps" />,
-    cell: ({ row }) => {
-      const templateTestCase = row.original
-      return <div>{templateTestCase.steps.length}</div>
-    },
-  },
-  {
-    accessorKey: 'createdAt',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
-    cell: ({ row }) => {
-      return formatDateTime(row.original.createdAt)
-    },
-  },
-  {
-    accessorKey: 'updatedAt',
-    header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
-    cell: ({ row }) => {
-      return formatDateTime(row.original.updatedAt)
-    },
-  },
-  {
-    id: 'actions',
-    cell: ({ row }) => {
-      const templateTestCase = row.original
-      return (
-        <TableActions
-          modifyLink={`/template-test-cases/modify/${templateTestCase.id}`}
-          deleteHandler={() => deleteTemplateTestCaseAction([templateTestCase.id])}
-        />
-      )
-    },
-  },
-]
+'use client'
+
+import { DataTableColumnHeader } from '@/components/ui/data-table-column-header'
+import { TemplateTestCase, TemplateTestCaseStep } from '@prisma/client'
+import { ColumnDef } from '@tanstack/react-table'
+
+import { Checkbox } from '@/components/ui/checkbox'
+import TableActions from '@/components/table/table-actions'
+import { deleteTemplateTestCaseAction } from '@/actions/template-test-case/template-test-case-actions'
+import { formatDateTime } from '@/lib/utils'
+
+export const templateTestCaseTableCols: ColumnDef<TemplateTestCase & { steps: TemplateTestCaseStep[] }>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="mr-2"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={value => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="mr-2"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  },
+  {
+    accessorKey: 'name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+  },
+  {
+    accessorKey: 'description',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Description" />,
+  },
+  {
+    accessorKey: 'steps',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Steps" />,
+    cell: ({ row }) => {
+      const templateTestCase = row.original
+      return <div>{templateTestCase.steps.length}</div>
+    },
+  },
+  {
+    accessorKey: 'createdAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Created At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.createdAt)
+    },
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Updated At" />,
+    cell: ({ row }) => {
+      return formatDateTime(row.original.updatedAt)
+    },
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const templateTestCase = row.original
+      return (
+        <TableActions
+          modifyLink={`/template-test-cases/modify/${templateTestCase.id}`}
+          deleteHandler={() => deleteTemplateTestCaseAction([templateTestCase.id])}
+        />
+      )
+    },
+  },
+]

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

@@ -1,32 +1,32 @@
-import { DataTable } from '@/components/ui/data-table'
-import React from 'react'
-import { templateTestCaseTableCols } from './template-test-case-table-columns'
-import {
-  getAllTemplateTestCasesAction,
-  deleteTemplateTestCaseAction,
-} from '@/actions/template-test-case/template-test-case-actions'
-import { TemplateTestCase, TemplateTestCaseStep } from '@prisma/client'
-
-type TemplateTestCaseWithSteps = TemplateTestCase & {
-  steps: TemplateTestCaseStep[]
-}
-
-const TemplateTestCaseTable = async () => {
-  const { data: templateTestCases } = await getAllTemplateTestCasesAction()
-
-  return (
-    <>
-      <DataTable
-        columns={templateTestCaseTableCols}
-        data={templateTestCases as TemplateTestCaseWithSteps[]}
-        filterColumn="name"
-        filterPlaceholder="Filter by name..."
-        createLink="/template-test-cases/create"
-        modifyLink="/template-test-cases/modify"
-        deleteAction={deleteTemplateTestCaseAction}
-      />
-    </>
-  )
-}
-
-export default TemplateTestCaseTable
+import { DataTable } from '@/components/ui/data-table'
+import React from 'react'
+import { templateTestCaseTableCols } from './template-test-case-table-columns'
+import {
+  getAllTemplateTestCasesAction,
+  deleteTemplateTestCaseAction,
+} from '@/actions/template-test-case/template-test-case-actions'
+import { TemplateTestCase, TemplateTestCaseStep } from '@prisma/client'
+
+type TemplateTestCaseWithSteps = TemplateTestCase & {
+  steps: TemplateTestCaseStep[]
+}
+
+const TemplateTestCaseTable = async () => {
+  const { data: templateTestCases } = await getAllTemplateTestCasesAction()
+
+  return (
+    <>
+      <DataTable
+        columns={templateTestCaseTableCols}
+        data={templateTestCases as TemplateTestCaseWithSteps[]}
+        filterColumn="name"
+        filterPlaceholder="Filter by name..."
+        createLink="/template-test-cases/create"
+        modifyLink="/template-test-cases/modify"
+        deleteAction={deleteTemplateTestCaseAction}
+      />
+    </>
+  )
+}
+
+export default TemplateTestCaseTable

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

@@ -1,76 +1,90 @@
-import PageHeader from '@/components/typography/page-header'
-import HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import React from 'react'
-import TestCaseForm from '../test-case-form'
-import {
-  getAllTemplateStepParamsAction,
-  getAllTemplateStepsAction,
-} from '@/actions/template-step/template-step-actions'
-import { Locator, LocatorGroup, TemplateStep, TemplateStepParameter, TestSuite, Tag } from '@prisma/client'
-import { getAllLocatorsAction } from '@/actions/locator/locator-actions'
-import { getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
-import { createTestCaseAction } from '@/actions/test-case/test-case-actions'
-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 | Create Test Case',
-  description: 'Create a new test from scratch to execute against your application',
-}
-
-const CreateTestCase = async () => {
-  const { data: templateStepParams, error: templateStepParamsError } = await getAllTemplateStepParamsAction()
-
-  const { data: templateSteps, error: templateStepsError } = await getAllTemplateStepsAction()
-
-  const { data: testSuites, error: testSuitesError } = await getAllTestSuitesAction()
-
-  const { data: locators, error: locatorsError } = await getAllLocatorsAction()
-
-  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>
-      <div className="mb-8">
-        <PageHeader>Create New Test Case</PageHeader>
-        <HeaderSubtitle>Create a new test from scratch to execute against your application</HeaderSubtitle>
-      </div>
-      <TestCaseForm
-        defaultNodesOrder={{}}
-        templateStepParams={templateStepParams as TemplateStepParameter[]}
-        templateSteps={templateSteps as TemplateStep[]}
-        locators={locators as Locator[]}
-        locatorGroups={locatorGroups as LocatorGroup[]}
-        testSuites={testSuites as TestSuite[]}
-        tags={tags as Tag[]}
-        onSubmitAction={createTestCaseAction}
-      />
-    </div>
-  )
-}
-
-export default CreateTestCase
+import PageHeader from '@/components/typography/page-header'
+import HeaderSubtitle from '@/components/typography/page-header-subtitle'
+import React from 'react'
+import TestCaseForm from '../test-case-form'
+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 { createTestCaseAction } from '@/actions/test-case/test-case-actions'
+import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
+import { getAllTagsAction } from '@/actions/tags/tag-actions'
+import { Metadata } from 'next'
+
+import {
+  getLocatorGroupRows,
+  getLocatorRows,
+  getTagRows,
+  getTemplateStepParamRows,
+  getTemplateStepRows,
+  getTestSuiteRows,
+} from '../test-case-route-helpers'
+
+export const metadata: Metadata = {
+  title: 'Appraise | Create Test Case',
+  description: 'Create a new test from scratch to execute against your application',
+}
+
+const CreateTestCase = async () => {
+  const [
+    templateStepParamsResponse,
+    templateStepsResponse,
+    testSuitesResponse,
+    locatorsResponse,
+    locatorGroupsResponse,
+    tagsResponse,
+  ] = await Promise.all([
+    getAllTemplateStepParamsAction(),
+    getAllTemplateStepsAction(),
+    getAllTestSuitesAction(),
+    getAllLocatorsAction(),
+    getAllLocatorGroupsAction(),
+    getAllTagsAction(),
+  ])
+
+  const loadError =
+    templateStepParamsResponse.error ||
+    templateStepsResponse.error ||
+    locatorsResponse.error ||
+    testSuitesResponse.error ||
+    locatorGroupsResponse.error ||
+    tagsResponse.error
+
+  if (loadError) {
+    return (
+      <div>
+        Error: {loadError}
+      </div>
+    )
+  }
+
+  const templateStepParams = getTemplateStepParamRows(templateStepParamsResponse.data)
+  const templateSteps = getTemplateStepRows(templateStepsResponse.data)
+  const testSuites = getTestSuiteRows(testSuitesResponse.data)
+  const locators = getLocatorRows(locatorsResponse.data)
+  const locatorGroups = getLocatorGroupRows(locatorGroupsResponse.data)
+  const tags = getTagRows(tagsResponse.data)
+
+  return (
+    <div>
+      <div className="mb-8">
+        <PageHeader>Create New Test Case</PageHeader>
+        <HeaderSubtitle>Create a new test from scratch to execute against your application</HeaderSubtitle>
+      </div>
+      <TestCaseForm
+        defaultNodesOrder={{}}
+        templateStepParams={templateStepParams}
+        templateSteps={templateSteps}
+        locators={locators}
+        locatorGroups={locatorGroups}
+        testSuites={testSuites}
+        tags={tags}
+        onSubmitAction={createTestCaseAction}
+      />
+    </div>
+  )
+}
+
+export default CreateTestCase

package/templates/default/src/app/(base)/test-cases/create-from-template/create-from-template-helpers.test.ts

@@ -0,0 +1,94 @@
+import { StepParameterType, TemplateStepIcon } from '@prisma/client'
+import { describe, expect, it } from 'vitest'
+
+import {
+  getConvertedTemplateTestCaseData,
+  getFieldErrorMessage,
+  getTemplateSelectionOptions,
+  getTemplateTestCaseWithSteps,
+} from './create-from-template-helpers'
+
+describe('create-from-template helpers', () => {
+  it('formats field errors and selection options for the route form', () => {
+    expect(getFieldErrorMessage('Template test case is required')).toBe('Template test case is required')
+    expect(getFieldErrorMessage({ message: 'Missing selection' })).toBe('Missing selection')
+
+    expect(
+      getTemplateSelectionOptions([
+        { id: 'template-1', name: 'Login flow' },
+        { id: 'template-2', name: 'Checkout flow' },
+      ]),
+    ).toEqual([
+      { label: 'Login flow', value: 'template-1' },
+      { label: 'Checkout flow', value: 'template-2' },
+    ])
+  })
+
+  it('narrows template test cases with steps and converts valid template data', () => {
+    const templateTestCase = getTemplateTestCaseWithSteps({
+      id: 'template-1',
+      name: 'Login flow',
+      description: 'Reusable login flow',
+      steps: [
+        {
+          id: 'step-row-1',
+          order: 1,
+          label: 'Fill email',
+          gherkinStep: 'fill email',
+          icon: TemplateStepIcon.INPUT,
+          templateStepId: 'template-step-1',
+          parameters: [
+            {
+              id: 'param-1',
+              name: 'email',
+              defaultValue: 'qa@appraise.dev',
+              type: StepParameterType.STRING,
+              order: 1,
+              templateStepId: 'template-step-1',
+            },
+          ],
+        },
+      ],
+    })
+
+    expect(templateTestCase).not.toBeNull()
+
+    const conversion = getConvertedTemplateTestCaseData(templateTestCase!)
+    expect(conversion.error).toBeNull()
+    expect(conversion.convertedData).toEqual({
+      title: 'Login flow',
+      description: 'Reusable login flow',
+      testSuiteIds: [],
+      nodesOrder: {
+        'node-0': {
+          order: 1,
+          label: 'Fill email',
+          gherkinStep: 'fill email',
+          icon: TemplateStepIcon.INPUT,
+          parameters: [
+            {
+              name: 'email',
+              value: 'qa@appraise.dev',
+              type: StepParameterType.STRING,
+              order: 1,
+            },
+          ],
+          templateStepId: 'template-step-1',
+        },
+      },
+    })
+  })
+
+  it('rejects invalid converted template data', () => {
+    const invalidTemplateTestCase = getTemplateTestCaseWithSteps({
+      id: 'template-1',
+      name: 'No steps',
+      description: null,
+      steps: [],
+    })
+
+    const conversion = getConvertedTemplateTestCaseData(invalidTemplateTestCase!)
+    expect(conversion.convertedData).toBeNull()
+    expect(conversion.error).toBe('At least one step is required')
+  })
+})

package/templates/default/src/app/(base)/test-cases/create-from-template/create-from-template-helpers.ts

@@ -0,0 +1,171 @@
+import type {
+  Locator,
+  LocatorGroup,
+  Tag,
+  TemplateTestCase,
+  TemplateTestCaseStep,
+  TemplateTestCaseStepParameter,
+  TemplateStep,
+  TemplateStepParameter,
+  TestSuite,
+} from '@prisma/client'
+
+import { templateSelectionSchema } from '@/constants/form-opts/template-selection-form-opts'
+import {
+  templateTestCaseToTestCaseConverter,
+  validateConvertedTestCaseData,
+  type ConvertedTestCaseData,
+} from '@/lib/transformers/template-test-case-converter'
+import type { ActionResponseData } from '@/types/form/actionHandler'
+
+export type TemplateSelectionOption = {
+  label: string
+  value: string
+}
+
+export type TemplateSelectionRow = {
+  id: string
+  name: string
+}
+
+export type TemplateTestCaseWithSteps = TemplateTestCase & {
+  steps: (TemplateTestCaseStep & {
+    parameters: TemplateTestCaseStepParameter[]
+  })[]
+}
+
+export const templateSelectionFieldValidator = templateSelectionSchema.shape.templateTestCaseId
+
+export function getFieldErrorMessage(error: unknown) {
+  if (typeof error === 'string') {
+    return error
+  }
+
+  if (error && typeof error === 'object' && 'message' in error && typeof error.message === 'string') {
+    return error.message
+  }
+
+  return String(error)
+}
+
+function isNamedRow(value: unknown): value is TemplateSelectionRow {
+  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
+}
+
+function isTemplateTestCaseStepParameter(value: unknown): value is TemplateTestCaseStepParameter {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'name' in value &&
+    'defaultValue' in value &&
+    'type' in value &&
+    'order' in value
+  )
+}
+
+function isTemplateTestCaseStepRow(value: unknown): value is TemplateTestCaseStep & {
+  parameters: TemplateTestCaseStepParameter[]
+} {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'id' in value &&
+    'label' in value &&
+    'templateStepId' in value &&
+    'parameters' in value &&
+    Array.isArray(value.parameters) &&
+    value.parameters.every(isTemplateTestCaseStepParameter)
+  )
+}
+
+function isTemplateTestCaseWithSteps(value: unknown): value is TemplateTestCaseWithSteps {
+  return (
+    isNamedRow(value) &&
+    'steps' in value &&
+    Array.isArray(value.steps) &&
+    value.steps.every(isTemplateTestCaseStepRow)
+  )
+}
+
+function isTemplateStepParameterRow(value: unknown): value is TemplateStepParameter {
+  return typeof value === 'object' && value !== null && 'id' in value && 'templateStepId' in value
+}
+
+function isTemplateStepRow(value: unknown): value is TemplateStep {
+  return isNamedRow(value)
+}
+
+function isLocatorRow(value: unknown): value is Locator {
+  return isNamedRow(value)
+}
+
+function isTestSuiteRow(value: unknown): value is TestSuite {
+  return isNamedRow(value)
+}
+
+function isLocatorGroupRow(value: unknown): value is LocatorGroup {
+  return isNamedRow(value)
+}
+
+function isTagRow(value: unknown): value is Tag {
+  return isNamedRow(value)
+}
+
+export function getTemplateSelectionRows(data: ActionResponseData | undefined): TemplateSelectionRow[] {
+  return Array.isArray(data) ? data.filter(isNamedRow) : []
+}
+
+export function getTemplateSelectionOptions(templateTestCases: TemplateSelectionRow[]) {
+  return templateTestCases.map(templateTestCase => ({
+    label: templateTestCase.name,
+    value: templateTestCase.id,
+  }))
+}
+
+export function getTemplateTestCaseWithSteps(data: ActionResponseData | undefined) {
+  return isTemplateTestCaseWithSteps(data) ? data : null
+}
+
+export function getTemplateStepParamRows(data: ActionResponseData | undefined): TemplateStepParameter[] {
+  return Array.isArray(data) ? data.filter(isTemplateStepParameterRow) : []
+}
+
+export function getTemplateStepRows(data: ActionResponseData | undefined): TemplateStep[] {
+  return Array.isArray(data) ? data.filter(isTemplateStepRow) : []
+}
+
+export function getLocatorRows(data: ActionResponseData | undefined): Locator[] {
+  return Array.isArray(data) ? data.filter(isLocatorRow) : []
+}
+
+export function getTestSuiteRows(data: ActionResponseData | undefined): TestSuite[] {
+  return Array.isArray(data) ? data.filter(isTestSuiteRow) : []
+}
+
+export function getLocatorGroupRows(data: ActionResponseData | undefined): LocatorGroup[] {
+  return Array.isArray(data) ? data.filter(isLocatorGroupRow) : []
+}
+
+export function getTagRows(data: ActionResponseData | undefined): Tag[] {
+  return Array.isArray(data) ? data.filter(isTagRow) : []
+}
+
+export function getConvertedTemplateTestCaseData(templateTestCase: TemplateTestCaseWithSteps): {
+  convertedData: ConvertedTestCaseData | null
+  error: string | null
+} {
+  const convertedData = templateTestCaseToTestCaseConverter(templateTestCase)
+  const validation = validateConvertedTestCaseData(convertedData)
+
+  if (!validation.isValid) {
+    return {
+      convertedData: null,
+      error: validation.errors[0] || 'Invalid test case',
+    }
+  }
+
+  return {
+    convertedData,
+    error: null,
+  }
+}