create-appraisejs 0.3.0 → 0.3.1-alpha.1

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'

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

@@ -0,0 +1,71 @@
+import { templateSelectionSchema } from '@/constants/form-opts/template-selection-form-opts'
+import type { ActionResponseData } from '@/types/form/actionHandler'
+
+import type { TemplateSelectionRow, TemplateTestCaseWithSteps } from './create-from-template-types'
+
+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)
+}
+
+export function isNamedRow(value: unknown): value is TemplateSelectionRow {
+  return typeof value === 'object' && value !== null && 'id' in value && 'name' in value
+}
+
+function isTemplateTestCaseStepParameter(value: unknown): boolean {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'name' in value &&
+    'defaultValue' in value &&
+    'type' in value &&
+    'order' in value
+  )
+}
+
+function isTemplateTestCaseStepRow(value: unknown) {
+  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)
+  )
+}
+
+export function getTemplateSelectionRows(data: ActionResponseData | undefined): TemplateSelectionRow[] {
+  return Array.isArray(data) ? data.filter(isNamedRow) : []
+}
+
+export function getTemplateTestCasesWithSteps(data: ActionResponseData | undefined): TemplateTestCaseWithSteps[] {
+  return Array.isArray(data) ? data.filter(isTemplateTestCaseWithSteps) : []
+}
+
+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
+}

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

@@ -0,0 +1,24 @@
+import type {
+  TemplateTestCase,
+  TemplateTestCaseFlowBlock,
+  TemplateTestCaseFlowBlockNode,
+  TemplateTestCaseStep,
+  TemplateTestCaseStepParameter,
+} from '@prisma/client'
+
+export type TemplateSelectionOption = {
+  label: string
+  value: string
+}
+
+export type TemplateSelectionRow = {
+  id: string
+  name: string
+}
+
+export type TemplateTestCaseWithSteps = TemplateTestCase & {
+  steps: (TemplateTestCaseStep & {
+    parameters: TemplateTestCaseStepParameter[]
+  })[]
+  flowBlocks?: (TemplateTestCaseFlowBlock & { nodes: TemplateTestCaseFlowBlockNode[] })[]
+}

package/templates/starter/src/app/(base)/test-cases/create-from-template/generate/[id]/page.test.tsx

@@ -0,0 +1,19 @@
+import { describe, expect, it, vi } from 'vitest'
+
+const { redirect } = vi.hoisted(() => ({
+  redirect: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  redirect,
+}))
+
+describe('Generate Test Case From Template page', () => {
+  it('redirects legacy generate routes into the merged template wizard', async () => {
+    const { default: GenerateTestCaseFromTemplate } = await import('./page')
+
+    await GenerateTestCaseFromTemplate({ params: Promise.resolve({ id: 'template-1' }) })
+
+    expect(redirect).toHaveBeenCalledWith('/test-cases/create-from-template?templateTestCaseId=template-1')
+  })
+})

package/templates/starter/src/app/(base)/test-cases/create-from-template/generate/[id]/page.tsx

@@ -1,29 +1,5 @@
-import { getTemplateTestCaseByIdAction } from '@/actions/template-test-case/template-test-case-actions'
-import React from 'react'
-import TestCaseForm from '../../../test-case-form'
-import { createTestCaseAction } from '@/actions/test-case/test-case-actions'
-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 HeaderSubtitle from '@/components/typography/page-header-subtitle'
-import PageHeader from '@/components/typography/page-header'
-import { getAllLocatorGroupsAction } from '@/actions/locator-groups/locator-group-actions'
-import { getAllTagsAction } from '@/actions/tags/tag-actions'
 import { Metadata } from 'next'
-
-import {
-  getConvertedTemplateTestCaseData,
-  getLocatorGroupRows,
-  getLocatorRows,
-  getTagRows,
-  getTemplateStepParamRows,
-  getTemplateStepRows,
-  getTemplateTestCaseWithSteps,
-  getTestSuiteRows,
-} from '../../create-from-template-helpers'
+import { redirect } from 'next/navigation'
 
 export const metadata: Metadata = {
   title: 'Appraise | Create Test Case From Template',
@@ -32,74 +8,7 @@ export const metadata: Metadata = {
 
 const GenerateTestCaseFromTemplate = async ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = await params
-  const [
-    templateTestCaseResponse,
-    templateStepParamsResponse,
-    templateStepsResponse,
-    locatorsResponse,
-    testSuitesResponse,
-    locatorGroupsResponse,
-    tagsResponse,
-  ] = await Promise.all([
-    getTemplateTestCaseByIdAction(id),
-    getAllTemplateStepParamsAction(),
-    getAllTemplateStepsAction(),
-    getAllLocatorsAction(),
-    getAllTestSuitesAction(),
-    getAllLocatorGroupsAction(),
-    getAllTagsAction(),
-  ])
-
-  const loadError =
-    templateTestCaseResponse.error ||
-    templateStepParamsResponse.error ||
-    templateStepsResponse.error ||
-    locatorsResponse.error ||
-    testSuitesResponse.error ||
-    locatorGroupsResponse.error ||
-    tagsResponse.error
-
-  if (loadError) {
-    return <div>Error: {loadError}</div>
-  }
-
-  const templateTestCaseData = getTemplateTestCaseWithSteps(templateTestCaseResponse.data)
-  if (!templateTestCaseData) {
-    return <div>Error: Invalid template test case</div>
-  }
-
-  const { convertedData, error } = getConvertedTemplateTestCaseData(templateTestCaseData)
-  if (!convertedData || error) {
-    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>
-      <PageHeader>Create New Test Case</PageHeader>
-      <HeaderSubtitle>Create a new test from a template to execute against your application</HeaderSubtitle>
-
-      <TestCaseForm
-        onSubmitAction={createTestCaseAction}
-        defaultNodesOrder={convertedData.nodesOrder}
-        templateStepParams={templateStepParams}
-        templateSteps={templateSteps}
-        locators={locators}
-        testSuites={testSuites}
-        tags={tags}
-        defaultTitle={templateTestCaseData.name || ''}
-        defaultDescription={templateTestCaseData.description || ''}
-        defaultTestSuiteIds={convertedData.testSuiteIds}
-        locatorGroups={locatorGroups}
-      />
-    </div>
-  )
+  redirect(`/test-cases/create-from-template?templateTestCaseId=${encodeURIComponent(id)}`)
 }
 
 export default GenerateTestCaseFromTemplate

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

@@ -0,0 +1,157 @@
+// @vitest-environment jsdom
+
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+const {
+  getAllTemplateTestCasesAction,
+  getAllTemplateStepParamsAction,
+  getAllTemplateStepsAction,
+  getAllTestSuitesAction,
+  getAllLocatorsAction,
+  getAllLocatorGroupsAction,
+  getAllTagsAction,
+  getAllTestCasesAction,
+  getAllModulesAction,
+  getAllEnvironmentsAction,
+  createTestCaseAction,
+  createTestSuiteAction,
+  createTagAction,
+  testCaseFormSpy,
+} = vi.hoisted(() => ({
+  getAllTemplateTestCasesAction: vi.fn(),
+  getAllTemplateStepParamsAction: vi.fn(),
+  getAllTemplateStepsAction: vi.fn(),
+  getAllTestSuitesAction: vi.fn(),
+  getAllLocatorsAction: vi.fn(),
+  getAllLocatorGroupsAction: vi.fn(),
+  getAllTagsAction: vi.fn(),
+  getAllTestCasesAction: vi.fn(),
+  getAllModulesAction: vi.fn(),
+  getAllEnvironmentsAction: vi.fn(),
+  createTestCaseAction: vi.fn(),
+  createTestSuiteAction: vi.fn(),
+  createTagAction: vi.fn(),
+  testCaseFormSpy: vi.fn(() => <div>Mock Test Case Form</div>),
+}))
+
+vi.mock('@/actions/template-test-case/template-test-case-actions', () => ({
+  getAllTemplateTestCasesAction,
+}))
+
+vi.mock('@/actions/template-step/template-step-actions', () => ({
+  getAllTemplateStepParamsAction,
+  getAllTemplateStepsAction,
+}))
+
+vi.mock('@/actions/locator/locator-actions', () => ({
+  getAllLocatorsAction,
+}))
+
+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('@/actions/test-suite/test-suite-actions', () => ({
+  createTestSuiteAction,
+  getAllTestSuitesAction,
+}))
+
+vi.mock('../test-case-form', () => ({
+  __esModule: true,
+  default: testCaseFormSpy,
+}))
+
+import CreateTestCaseFromTemplate from './page'
+
+describe('Create Test Case From Template page', () => {
+  it('passes template options and the selected template defaults into the shared test case form', async () => {
+    getAllTemplateTestCasesAction.mockResolvedValue({
+      data: [
+        {
+          id: 'template-1',
+          name: 'Login template',
+          description: 'Reusable login flow',
+          steps: [
+            {
+              id: 'step-row-1',
+              order: 1,
+              label: 'Fill email',
+              gherkinStep: 'fill email',
+              icon: 'INPUT',
+              templateStepId: 'step-1',
+              parameters: [
+                {
+                  id: 'param-1',
+                  name: 'email',
+                  defaultValue: 'qa@appraise.dev',
+                  type: 'STRING',
+                  order: 1,
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    })
+    getAllTemplateStepParamsAction.mockResolvedValue({ data: [{ id: 'template-param-1', templateStepId: 'step-1' }] })
+    getAllTemplateStepsAction.mockResolvedValue({ data: [{ id: 'step-1', name: 'Input' }] })
+    getAllTestSuitesAction.mockResolvedValue({ data: [{ id: 'suite-1', name: 'Smoke' }] })
+    getAllLocatorsAction.mockResolvedValue({ data: [{ id: 'locator-1', name: 'Email field' }] })
+    getAllLocatorGroupsAction.mockResolvedValue({ data: [{ id: 'group-1', name: 'Auth' }] })
+    getAllTagsAction.mockResolvedValue({ data: [{ id: 'tag-1', name: 'Regression' }] })
+    getAllTestCasesAction.mockResolvedValue({ data: [{ id: 'case-1', title: 'Checkout case', steps: [], tags: [] }] })
+    getAllModulesAction.mockResolvedValue({ data: [{ id: 'module-1', name: 'Auth' }] })
+    getAllEnvironmentsAction.mockResolvedValue({ data: [{ id: 'env-1', name: 'Staging' }] })
+
+    render(
+      await CreateTestCaseFromTemplate({
+        searchParams: Promise.resolve({ templateTestCaseId: 'template-1' }),
+      }),
+    )
+
+    expect(screen.getByText('Mock Test Case Form')).toBeInTheDocument()
+    expect(testCaseFormSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        templateTestCases: [
+          expect.objectContaining({
+            id: 'template-1',
+            name: 'Login template',
+          }),
+        ],
+        defaultTemplateTestCaseId: 'template-1',
+        defaultTitle: 'Login template',
+        defaultDescription: 'Reusable login flow',
+        environments: [{ id: 'env-1', name: 'Staging' }],
+        defaultNodesOrder: {
+          'node-0': expect.objectContaining({
+            label: 'Fill email',
+            templateStepId: 'step-1',
+          }),
+        },
+        onSubmitAction: createTestCaseAction,
+        onCreateTestSuiteAction: createTestSuiteAction,
+        onCreateTagAction: createTagAction,
+      }),
+      undefined,
+    )
+  })
+})