create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/starter/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/starter/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/starter/src/app/(base)/test-cases/create/page.test.tsx

@@ -0,0 +1,121 @@
+// @vitest-environment jsdom
+
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+const {
+  createTestCaseAction,
+  createTestSuiteAction,
+  createTagAction,
+  getAllTemplateStepParamsAction,
+  getAllTemplateStepsAction,
+  getAllLocatorsAction,
+  getAllTestSuitesAction,
+  getAllLocatorGroupsAction,
+  getAllTagsAction,
+  getAllTestCasesAction,
+  getAllModulesAction,
+  getAllEnvironmentsAction,
+  testCaseFormSpy,
+} = vi.hoisted(() => ({
+  createTestCaseAction: vi.fn(),
+  createTestSuiteAction: vi.fn(),
+  createTagAction: vi.fn(),
+  getAllTemplateStepParamsAction: vi.fn(),
+  getAllTemplateStepsAction: vi.fn(),
+  getAllLocatorsAction: vi.fn(),
+  getAllTestSuitesAction: vi.fn(),
+  getAllLocatorGroupsAction: vi.fn(),
+  getAllTagsAction: vi.fn(),
+  getAllTestCasesAction: vi.fn(),
+  getAllModulesAction: vi.fn(),
+  getAllEnvironmentsAction: vi.fn(),
+  testCaseFormSpy: vi.fn(() => <div>Mock Test Case Form</div>),
+}))
+
+vi.mock('@/actions/template-step/template-step-actions', () => ({
+  getAllTemplateStepParamsAction,
+  getAllTemplateStepsAction,
+}))
+
+vi.mock('@/actions/locator/locator-actions', () => ({
+  getAllLocatorsAction,
+}))
+
+vi.mock('@/actions/test-suite/test-suite-actions', () => ({
+  getAllTestSuitesAction,
+  createTestSuiteAction,
+}))
+
+vi.mock('@/actions/test-case/test-case-actions', () => ({
+  createTestCaseAction,
+  getAllTestCasesAction,
+}))
+
+vi.mock('@/actions/locator-groups/locator-group-actions', () => ({
+  getAllLocatorGroupsAction,
+}))
+
+vi.mock('@/actions/tags/tag-actions', () => ({
+  createTagAction,
+  getAllTagsAction,
+}))
+
+vi.mock('@/actions/modules/module-actions', () => ({
+  getAllModulesAction,
+}))
+
+vi.mock('@/actions/environments/environment-actions', () => ({
+  getAllEnvironmentsAction,
+}))
+
+vi.mock('../test-case-form', () => ({
+  __esModule: true,
+  default: testCaseFormSpy,
+}))
+
+vi.mock('../test-case-resource-rows', () => ({
+  getTemplateStepParamRows: vi.fn(() => [{ id: 'param-1' }]),
+  getTemplateStepRows: vi.fn(() => [{ id: 'template-step-1', name: 'Click' }]),
+  getTestSuiteRows: vi.fn(() => [{ id: 'suite-1', name: 'Smoke' }]),
+  getLocatorRows: vi.fn(() => [{ id: 'locator-1', name: 'Submit button' }]),
+  getLocatorGroupRows: vi.fn(() => [{ id: 'group-1', name: 'Checkout' }]),
+  getTagRows: vi.fn(() => [{ id: 'tag-1', name: 'Regression' }]),
+  getModuleRows: vi.fn(() => [{ id: 'module-1', name: 'Payments' }]),
+  getEnvironmentRows: vi.fn(() => [{ id: 'env-1', name: 'Staging' }]),
+}))
+
+vi.mock('../test-case-row-helpers', () => ({
+  getTestCaseRows: vi.fn(() => [{ id: 'case-1', title: 'Checkout case', steps: [], tags: [] }]),
+}))
+
+describe('Create Test Case page', () => {
+  it('passes test cases and modules into the shared test case form', async () => {
+    getAllTemplateStepParamsAction.mockResolvedValue({ data: [] })
+    getAllTemplateStepsAction.mockResolvedValue({ data: [] })
+    getAllTestSuitesAction.mockResolvedValue({ data: [] })
+    getAllLocatorsAction.mockResolvedValue({ data: [] })
+    getAllLocatorGroupsAction.mockResolvedValue({ data: [] })
+    getAllTagsAction.mockResolvedValue({ data: [] })
+    getAllTestCasesAction.mockResolvedValue({ data: [] })
+    getAllModulesAction.mockResolvedValue({ data: [] })
+    getAllEnvironmentsAction.mockResolvedValue({ data: [] })
+
+    const { default: CreateTestCase } = await import('./page')
+
+    render(await CreateTestCase())
+
+    expect(screen.getByText('Mock Test Case Form')).toBeInTheDocument()
+    expect(testCaseFormSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        testCases: [{ id: 'case-1', title: 'Checkout case', steps: [], tags: [] }],
+        moduleList: [{ id: 'module-1', name: 'Payments' }],
+        environments: [{ id: 'env-1', name: 'Staging' }],
+        onSubmitAction: createTestCaseAction,
+        onCreateTestSuiteAction: createTestSuiteAction,
+        onCreateTagAction: createTagAction,
+      }),
+      undefined,
+    )
+  })
+})

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

@@ -7,20 +7,25 @@ import {
   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 { createTestCaseAction, getAllTestCasesAction } from '@/actions/test-case/test-case-actions'
 import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
-import { getAllTagsAction } from '@/actions/tags/tag-actions'
+import { getAllEnvironmentsAction } from '@/actions/environments/environment-actions'
+import { createTagAction, getAllTagsAction } from '@/actions/tags/tag-actions'
+import { getAllModulesAction } from '@/actions/modules/module-actions'
+import { createTestSuiteAction, getAllTestSuitesAction } from '@/actions/test-suite/test-suite-actions'
 import { Metadata } from 'next'
 
 import {
   getLocatorGroupRows,
+  getEnvironmentRows,
   getLocatorRows,
+  getModuleRows,
   getTagRows,
   getTemplateStepParamRows,
   getTemplateStepRows,
   getTestSuiteRows,
-} from '../test-case-route-helpers'
+} from '../test-case-resource-rows'
+import { getTestCaseRows } from '../test-case-row-helpers'
 
 export const metadata: Metadata = {
   title: 'Appraise | Create Test Case',
@@ -35,6 +40,9 @@ const CreateTestCase = async () => {
     locatorsResponse,
     locatorGroupsResponse,
     tagsResponse,
+    testCasesResponse,
+    moduleListResponse,
+    environmentsResponse,
   ] = await Promise.all([
     getAllTemplateStepParamsAction(),
     getAllTemplateStepsAction(),
@@ -42,6 +50,9 @@ const CreateTestCase = async () => {
     getAllLocatorsAction(),
     getAllLocatorGroupsAction(),
     getAllTagsAction(),
+    getAllTestCasesAction(),
+    getAllModulesAction(),
+    getAllEnvironmentsAction(),
   ])
 
   const loadError =
@@ -50,7 +61,10 @@ const CreateTestCase = async () => {
     locatorsResponse.error ||
     testSuitesResponse.error ||
     locatorGroupsResponse.error ||
-    tagsResponse.error
+    tagsResponse.error ||
+    testCasesResponse.error ||
+    moduleListResponse.error ||
+    environmentsResponse.error
 
   if (loadError) {
     return (
@@ -66,6 +80,9 @@ const CreateTestCase = async () => {
   const locators = getLocatorRows(locatorsResponse.data)
   const locatorGroups = getLocatorGroupRows(locatorGroupsResponse.data)
   const tags = getTagRows(tagsResponse.data)
+  const testCases = getTestCaseRows(testCasesResponse.data)
+  const moduleList = getModuleRows(moduleListResponse.data)
+  const environments = getEnvironmentRows(environmentsResponse.data)
 
   return (
     <div>
@@ -79,9 +96,14 @@ const CreateTestCase = async () => {
         templateSteps={templateSteps}
         locators={locators}
         locatorGroups={locatorGroups}
+        environments={environments}
         testSuites={testSuites}
+        testCases={testCases}
+        moduleList={moduleList}
         tags={tags}
         onSubmitAction={createTestCaseAction}
+        onCreateTestSuiteAction={createTestSuiteAction}
+        onCreateTagAction={createTagAction}
       />
     </div>
   )

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

@@ -0,0 +1,27 @@
+import {
+  templateTestCaseToTestCaseConverter,
+  validateConvertedTestCaseData,
+  type ConvertedTestCaseData,
+} from '@/lib/transformers/template-test-case-converter'
+
+import type { TemplateTestCaseWithSteps } from './create-from-template-types'
+
+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,
+  }
+}

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

@@ -59,8 +59,10 @@ describe('create-from-template helpers', () => {
       title: 'Login flow',
       description: 'Reusable login flow',
       testSuiteIds: [],
+      flowBlocks: [],
       nodesOrder: {
         'node-0': {
+          nodeId: 'node-0',
           order: 1,
           label: 'Fill email',
           gherkinStep: 'fill email',

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

@@ -1,171 +1,14 @@
-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,
-  }
-}
+export {
+  getFieldErrorMessage,
+  getTemplateSelectionOptions,
+  getTemplateSelectionRows,
+  getTemplateTestCaseWithSteps,
+  getTemplateTestCasesWithSteps,
+  templateSelectionFieldValidator,
+} from './create-from-template-selection-helpers'
+export { getConvertedTemplateTestCaseData } from './create-from-template-conversion-helpers'
+export type {
+  TemplateSelectionOption,
+  TemplateSelectionRow,
+  TemplateTestCaseWithSteps,
+} from './create-from-template-types'