create-appraise 0.1.0

package/templates/default/src/lib/utils/template-step-file-manager.ts

@@ -0,0 +1,166 @@
+import prisma from '@/config/db-config'
+import { writeTemplateStepFile, deleteTemplateStepFile, generateFileContent } from './template-step-file-generator'
+import { TemplateStepGroupType } from '@prisma/client'
+
+// TemplateStepGroupType helper - will be available from @prisma/client after migration
+type TemplateStepGroupTypeLocal = 'ACTION' | 'VALIDATION'
+
+// Type helper to safely extract type from Prisma templateStepGroup records
+type TemplateStepGroupWithType = {
+  id: string
+  name: string
+  description: string | null
+  type?: TemplateStepGroupTypeLocal
+  createdAt: Date
+  updatedAt: Date
+}
+
+function getGroupType(group: unknown): TemplateStepGroupTypeLocal {
+  const groupWithType = group as TemplateStepGroupWithType
+  const type = groupWithType.type
+  if (type === 'VALIDATION' || type === 'ACTION') {
+    return type
+  }
+  return 'ACTION' // default
+}
+
+/**
+ * Regenerates the file for a specific template step group
+ * This function is called whenever template steps in a group change
+ */
+export async function regenerateTemplateStepGroupFile(groupId: string): Promise<void> {
+  try {
+    // Get the template step group with all its template steps
+    const group = await prisma.templateStepGroup.findUnique({
+      where: { id: groupId },
+      include: {
+        templateSteps: {
+          orderBy: {
+            // Order by creation time or any other field you prefer
+            createdAt: 'asc',
+          },
+        },
+      },
+    })
+
+    if (!group) {
+      throw new Error(`Template step group with ID ${groupId} not found`)
+    }
+
+    // Generate file content from template steps
+    const content = generateFileContent(group.templateSteps)
+
+    // Write the file
+    const type = getGroupType(group)
+    await writeTemplateStepFile(group.name, content, type)
+
+    console.log(`File regenerated for template step group: ${group.name}`)
+  } catch (error) {
+    console.error(`Failed to regenerate file for template step group ${groupId}:`, error)
+    throw new Error(`File regeneration failed: ${error}`)
+  }
+}
+
+/**
+ * Creates a placeholder file for a new template step group
+ * Called when a new group is created
+ * @deprecated Use createTemplateStepGroupFile from template-step-file-manager-intelligent.ts instead
+ */
+export async function createTemplateStepGroupFile(
+  groupName: string,
+  type: TemplateStepGroupType | string = 'ACTION',
+): Promise<void> {
+  try {
+    // Create empty placeholder content with required imports
+    const placeholderContent =
+      '// This file is generated automatically. Add template steps to this group to generate content.'
+
+    // Write the placeholder file
+    await writeTemplateStepFile(groupName, placeholderContent, type)
+
+    console.log(`Placeholder file created for template step group: ${groupName}`)
+  } catch (error) {
+    console.error(`Failed to create placeholder file for group "${groupName}":`, error)
+    throw new Error(`File creation failed: ${error}`)
+  }
+}
+
+/**
+ * Deletes the file for a template step group
+ * Called when a group is deleted
+ * @deprecated Use removeTemplateStepGroupFile from template-step-file-manager-intelligent.ts instead
+ */
+export async function removeTemplateStepGroupFile(
+  groupName: string,
+  type: TemplateStepGroupType | string = 'ACTION',
+): Promise<void> {
+  try {
+    await deleteTemplateStepFile(groupName, type)
+
+    console.log(`File deleted for template step group: ${groupName}`)
+  } catch (error) {
+    console.error(`Failed to delete file for group "${groupName}":`, error)
+    throw new Error(`File deletion failed: ${error}`)
+  }
+}
+
+/**
+ * Handles file regeneration when a template step is created, updated, or deleted
+ * This function determines which groups need file regeneration
+ */
+export async function handleTemplateStepChange(
+  templateStepId: string,
+  operation: 'create' | 'update' | 'delete',
+): Promise<void> {
+  try {
+    let groupId: string | null = null
+
+    if (operation === 'delete') {
+      // For delete operations, we need to get the group ID before deletion
+      const step = await prisma.templateStep.findUnique({
+        where: { id: templateStepId },
+        select: { templateStepGroupId: true },
+      })
+      groupId = step?.templateStepGroupId || null
+    } else {
+      // For create/update operations, get the current group ID
+      const step = await prisma.templateStep.findUnique({
+        where: { id: templateStepId },
+        select: { templateStepGroupId: true },
+      })
+      groupId = step?.templateStepGroupId || null
+    }
+
+    if (groupId) {
+      // Regenerate the file for the affected group
+      await regenerateTemplateStepGroupFile(groupId)
+    }
+  } catch (error) {
+    console.error(`Failed to handle template step change for step ${templateStepId}:`, error)
+    throw new Error(`File update failed: ${error}`)
+  }
+}
+
+/**
+ * Handles file regeneration when a template step is moved between groups
+ * This is a special case that requires regenerating files for both groups
+ */
+export async function handleTemplateStepGroupChange(
+  oldGroupId: string | null,
+  newGroupId: string | null,
+): Promise<void> {
+  try {
+    // Regenerate file for the old group (if it exists)
+    if (oldGroupId) {
+      await regenerateTemplateStepGroupFile(oldGroupId)
+    }
+
+    // Regenerate file for the new group (if it exists)
+    if (newGroupId) {
+      await regenerateTemplateStepGroupFile(newGroupId)
+    }
+  } catch (error) {
+    console.error(`Failed to handle template step group change:`, error)
+    throw new Error(`File update failed: ${error}`)
+  }
+}

package/templates/default/src/lib/utils.ts

@@ -0,0 +1,31 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function calculateCompletionPercentage(total: number, completed: number) {
+  return Math.round((completed / total) * 100)
+}
+
+/**
+ * Formats a date to show only date and time (without seconds/milliseconds)
+ * @param date - Date string or Date object
+ * @returns Formatted date string in format: "MM/DD/YYYY, HH:MM AM/PM"
+ */
+export function formatDateTime(date: string | Date | null | undefined): string {
+  if (!date) return '-'
+
+  const dateObj = typeof date === 'string' ? new Date(date) : date
+
+  if (isNaN(dateObj.getTime())) return '-'
+
+  return dateObj.toLocaleString('en-US', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: true,
+  })
+}

package/templates/default/src/tests/config/environments/environments.json

@@ -0,0 +1,14 @@
+{
+  "demoqa": {
+    "baseUrl": "https://demoqa.com/",
+    "apiBaseUrl": "",
+    "email": "",
+    "password": ""
+  },
+  "demo_test_site": {
+    "baseUrl": "https://demo-test-site-beta.vercel.app/login",
+    "apiBaseUrl": "",
+    "email": "demo@example.com",
+    "password": ""
+  }
+}

package/templates/default/src/tests/config/executor/world.ts

@@ -0,0 +1,41 @@
+import { World, IWorldOptions, setWorldConstructor, setDefaultTimeout } from '@cucumber/cucumber'
+import * as chai from 'chai'
+import chaiAsPromised from 'chai-as-promised'
+import { BrowserContext, Page } from 'playwright'
+
+setDefaultTimeout(120 * 1000)
+
+export interface ScenarioData {
+  token?: string
+  vars: Record<string, unknown>
+}
+export class CustomWorld extends World {
+  context!: BrowserContext
+  page!: Page
+  data: ScenarioData = {
+    vars: {},
+  }
+  constructor(options: IWorldOptions) {
+    super(options)
+  }
+
+  setVar(key: string, value: unknown): void {
+    this.data.vars[key] = value
+  }
+
+  getVar<T = unknown>(key: string): T {
+    if (!(key in this.data.vars)) {
+      throw new Error(`Variable ${key} not found`)
+    }
+    return this.data.vars[key] as T
+  }
+
+  clearVars(): void {
+    this.data.vars = {}
+  }
+}
+
+setWorldConstructor(CustomWorld)
+
+chai.use(chaiAsPromised)
+export const expect = chai.expect

package/templates/default/src/tests/executor.ts

@@ -0,0 +1,80 @@
+import { BrowserName } from '@/types/executor/browser.type'
+import { CliOptions, startCli } from '@/tests/utils/cli.util.js'
+import { spawnTask, waitForTask } from '@/tests/utils/spawner.util.js'
+import { config } from 'dotenv'
+
+function setEnvironmentVariables(environment: string, headless: boolean, browser: BrowserName) {
+  process.env.ENVIRONMENT = environment
+  process.env.HEADLESS = headless.toString()
+  process.env.BROWSER = browser
+}
+
+/**
+ * Main entry point for the CLI application
+ * Handles CLI parsing, error handling, and application lifecycle
+ */
+async function bootstrap(): Promise<void> {
+  // Load environment variables
+  config()
+
+  try {
+    // Parse CLI arguments and get options
+    const { environment, tags, parallel, browser, headless }: CliOptions = startCli()
+
+    // Log parsed options with better formatting
+    console.log(
+      `Running tests in the following configuration\nEnvironment: ${environment}\nTags: ${tags}\nParallel: ${parallel}\nBrowser: ${browser}\nHeadless: ${headless}`,
+    )
+
+    setEnvironmentVariables(environment, headless as unknown as boolean, browser as unknown as BrowserName)
+
+    // Build the cucumber command with appropriate flags
+    const cucumberArgs: string[] = []
+
+    if (tags) {
+      cucumberArgs.push('-t', tags)
+    }
+
+    if (parallel > 1) {
+      cucumberArgs.push('--parallel', parallel.toString())
+    }
+
+    // Spawn the cucumber test process
+    console.log('🚀 Starting cucumber test process...')
+    await spawnTask('npm', ['run', 'test', ...cucumberArgs], {
+      streamLogs: true,
+      prefixLogs: true,
+      logPrefix: 'cucumber-test',
+      captureOutput: true,
+    })
+
+    // Wait for the test process to complete
+    const exitCode = await waitForTask('cucumber-test')
+
+    if (exitCode === 0) {
+      console.log('✅ Tests completed successfully')
+    } else {
+      console.log(`❌ Tests failed with exit code: ${exitCode}`)
+    }
+
+    process.exit(exitCode || 0)
+  } catch (error) {
+    console.error('❌ Application failed with error:')
+    console.error(error instanceof Error ? error.message : 'Unknown error occurred')
+    process.exit(1)
+  }
+}
+
+// Handle uncaught exceptions and unhandled rejections
+process.on('uncaughtException', error => {
+  console.error('❌ Uncaught Exception:', error.message)
+  process.exit(1)
+})
+
+process.on('unhandledRejection', reason => {
+  console.error('❌ Unhandled Rejection:', reason)
+  process.exit(1)
+})
+
+// Start the application
+bootstrap()

package/templates/default/src/tests/hooks/hooks.ts

@@ -0,0 +1,99 @@
+import { After, AfterAll, AfterStep, Before, BeforeAll, setDefaultTimeout } from '@cucumber/cucumber'
+import { CustomWorld } from '../config/executor/world.js'
+import { BrowserName } from '@/types/executor/browser.type'
+import { config } from 'dotenv'
+import { chromium, ChromiumBrowser, firefox, FirefoxBrowser, webkit, WebKitBrowser } from 'playwright'
+
+// Load environment variables
+config()
+
+// Initialize browser
+let browser: ChromiumBrowser | FirefoxBrowser | WebKitBrowser
+
+// Track scenario status
+let currentScenarioStatus: string = 'unknown'
+
+BeforeAll(async function () {
+  setDefaultTimeout(60000)
+  const browserName = (process.env.BROWSER as BrowserName) || 'chromium'
+  switch (browserName) {
+    case 'chromium':
+      browser = await chromium.launch({
+        headless: process.env.HEADLESS === 'true',
+      })
+      break
+    case 'firefox':
+      browser = await firefox.launch({
+        headless: process.env.HEADLESS === 'true',
+      })
+      break
+    case 'webkit':
+      browser = await webkit.launch({
+        headless: process.env.HEADLESS === 'true',
+      })
+      break
+    default:
+      throw new Error(`Invalid browser name: ${browserName}`)
+  }
+})
+
+Before(async function (this: CustomWorld) {
+  this.clearVars()
+  this.context = await browser.newContext()
+  await this.context.tracing.start({
+    screenshots: true,
+    snapshots: true,
+    sources: true,
+  })
+  this.page = await this.context.newPage()
+})
+
+AfterStep(async function (this: CustomWorld, result) {
+  // Track the worst status encountered (failed > skipped > passed)
+  const status = result.result?.status
+  if (status === 'FAILED') {
+    currentScenarioStatus = 'failed'
+  } else if (status === 'SKIPPED' && currentScenarioStatus !== 'failed') {
+    currentScenarioStatus = 'skipped'
+  } else if (status === 'PASSED' && currentScenarioStatus === 'unknown') {
+    currentScenarioStatus = 'passed'
+  }
+})
+
+After(async function (this: CustomWorld, scenario) {
+  // Emit scenario end event as JSON to stdout
+  // ProcessManager will parse this and re-emit it as an event
+  let tracePath: string | undefined
+  if (scenario.result?.status === 'FAILED') {
+    tracePath = `${process.cwd()}/src/tests/reports/traces/${crypto.randomUUID()}.zip`
+    await this.context.tracing.stop({
+      path: tracePath,
+    })
+  }
+
+  const eventData = {
+    event: 'scenario::end',
+    data: {
+      scenarioName: scenario.pickle.name,
+      status: currentScenarioStatus,
+      tracePath: tracePath,
+    },
+  }
+
+  // Write to stdout in a parseable JSON format
+  // Use process.stdout.write to ensure it's captured by TaskSpawner
+  const eventJson = JSON.stringify(eventData)
+  console.log(eventJson)
+  // Also write directly to stdout to ensure it's captured
+  process.stdout.write(eventJson + '\n')
+
+  // Reset status for next scenario
+  currentScenarioStatus = 'unknown'
+
+  await this.page.close()
+  await this.context.close()
+})
+
+AfterAll(async function () {
+  await browser.close()
+})

package/templates/default/src/tests/mapping/locator-map.json

@@ -0,0 +1 @@
+[]

package/templates/default/src/tests/steps/actions/click.step.ts

@@ -0,0 +1,62 @@
+/**
+ * @name click
+ * @description Template step for handling element click
+ * @type ACTION
+ */
+import { When } from '@cucumber/cucumber'
+import { CustomWorld } from '../../config/executor/world.js'
+import { SelectorName } from '@/types/locator/locator.type'
+import { resolveLocator } from '../../utils/locator.util.js'
+
+// This file is generated automatically. Add template steps to this group to generate content.
+
+/**
+ * @name click
+ * @description Template step for clicking on an element
+ * @icon MOUSE
+ */
+When('the user clicks on the {string} element', async function (this: CustomWorld, elementName: SelectorName) {
+  const selector = await resolveLocator(this.page, elementName)
+  if (!selector) {
+    throw new Error(`Selector ${elementName} not found. Current url: ${this.page.url()}`)
+  }
+  try {
+    await this.page.locator(selector).click()
+  } catch (error) {
+    throw new Error(`Failed to click on the ${elementName} element: ${error}`)
+  }
+})
+
+/**
+ * @name double click
+ * @description Template step for double clicking on an element
+ * @icon MOUSE
+ */
+When('the user double clicks on the {string} element', async function (this: CustomWorld, elementName: SelectorName) {
+  const selector = await resolveLocator(this.page, elementName)
+  if (!selector) {
+    throw new Error(`Selector ${elementName} not found. Current url: ${this.page.url()}`)
+  }
+  try {
+    await this.page.locator(selector).dblclick()
+  } catch (error) {
+    throw new Error(`Failed to double click on the ${elementName} element: ${error}`)
+  }
+})
+
+/**
+ * @name right click
+ * @description Template step for right clicking on an element
+ * @icon MOUSE
+ */
+When('the user right clicks on the {string} element', async function (this: CustomWorld, elementName: SelectorName) {
+  const selector = await resolveLocator(this.page, elementName)
+  if (!selector) {
+    throw new Error(`Selector ${elementName} not found. Current url: ${this.page.url()}`)
+  }
+  try {
+    await this.page.locator(selector).click({ button: 'right' })
+  } catch (error) {
+    throw new Error(`Failed to right click on the ${elementName} element: ${error}`)
+  }
+})

package/templates/default/src/tests/steps/actions/hover.step.ts

@@ -0,0 +1,31 @@
+/**
+ * @name hover
+ * @description Template steps that handles hover actions
+ * @type ACTION
+ */
+import { When } from '@cucumber/cucumber';
+import { CustomWorld } from '../../config/executor/world.js';
+import { SelectorName } from '../../../types/locator/locator.type';
+import { resolveLocator } from '../../utils/locator.util.js';
+
+// This file is generated automatically. Add template steps to this group to generate content.
+
+/**
+ * @name hover
+ * @description Template step for hovering over an element
+ * @icon MOUSE
+ */
+When(
+  'the user hovers the cursor over the {string} element',
+  async function (this: CustomWorld, elementName: SelectorName) {
+    try {
+      const selector = await resolveLocator(this.page, elementName);
+      if (!selector) {
+        throw new Error(`Selector ${elementName} not found`);
+      }
+      await this.page.locator(selector).hover();
+    } catch (error) {
+      throw new Error(`Failed to hover over the ${elementName} element: ${error}`);
+    }
+  }
+);

package/templates/default/src/tests/steps/actions/input.step.ts

@@ -0,0 +1,149 @@
+/**
+ * @name input
+ * @description Template steps that deal with inputs
+ * @type ACTION
+ */
+import { When } from '@cucumber/cucumber';
+import { CustomWorld } from '../../config/executor/world.js';
+import { SelectorName } from '@/types/locator/locator.type';
+import { resolveLocator } from '../../utils/locator.util.js';
+
+// This file is generated automatically. Add template steps to this group to generate content.
+
+/**
+ * @name fill
+ * @description Template step for filling up an input field with a provided value
+ * @icon INPUT
+ */
+When(
+  'the user fills in the {string} input field with value {string}',
+  async function (this: CustomWorld, elementName: SelectorName, value: string) {
+    const selector = await resolveLocator(this.page, elementName);
+    if (!selector) {
+      throw new Error(`Selector ${elementName} not found`);
+    }
+    try {
+      await this.page.locator(selector).fill(value);
+    } catch (error) {
+      throw new Error(
+        `Failed to fill in the ${elementName} input field with value ${value}: ${error}`
+      );
+    }
+  }
+);
+
+/**
+ * @name clear
+ * @description Template step for clearing an input field
+ * @icon INPUT
+ */
+When(
+  'the user clears the {string} field',
+  async function (this: CustomWorld, elementName: SelectorName) {
+    const selector = await resolveLocator(this.page, elementName);
+    if (!selector) {
+      throw new Error(`Selector ${elementName} not found`);
+    }
+    try {
+      await this.page.locator(selector).clear();
+    } catch (error) {
+      throw new Error(`Failed to clear the ${elementName} field: ${error}`);
+    }
+  }
+);
+
+/**
+ * @name select dropdown option
+ * @description Template step for selecting a particular option inside a dropdown element
+ * @icon INPUT
+ */
+When(
+  'the user selects the {string} option of the {string} dropdown',
+  async function (
+    this: CustomWorld,
+    optionName: string,
+    elementName: SelectorName
+  ) {
+    const selector = await resolveLocator(this.page, elementName);
+    if (!selector) {
+      throw new Error(`Selector ${elementName} not found`);
+    }
+    try {
+      await this.page.locator(selector).selectOption(optionName);
+    } catch (error) {
+      throw new Error(
+        `Failed to select the ${optionName} option of the ${elementName} dropdown: ${error}`
+      );
+    }
+  }
+);
+
+/**
+ * @name check
+ * @description Template step for checking a checkbox
+ * @icon INPUT
+ */
+When(
+  'the user checks the {string} checkbox',
+  async function (this: CustomWorld, elementName: SelectorName) {
+    const selector = await resolveLocator(this.page, elementName);
+    if (!selector) {
+      throw new Error(`Selector ${elementName} not found`);
+    }
+    try {
+      await this.page.locator(selector).check();
+    } catch (error) {
+      throw new Error(`Failed to check the ${elementName} checkbox: ${error}`);
+    }
+  }
+);
+
+/**
+ * @name uncheck
+ * @description Template step for unchecking a checkbox
+ * @icon INPUT
+ */
+When(
+  'the user unchecks the {string} checkbox',
+  async function (this: CustomWorld, elementName: SelectorName) {
+    const selector = await resolveLocator(this.page, elementName);
+    if (!selector) {
+      throw new Error(`Selector ${elementName} not found`);
+    }
+    try {
+      await this.page.locator(selector).uncheck();
+    } catch (error) {
+      throw new Error(
+        `Failed to uncheck the ${elementName} checkbox: ${error}`
+      );
+    }
+  }
+);
+
+/**
+ * @name fill input with stored value
+ * @description Template step for filling an input field with data from a stored variable
+ * @icon INPUT
+ */
+When(
+  'the user fills in the {string} input with data from the stored variable {string}',
+  async function (
+    this: CustomWorld,
+    fieldName: SelectorName,
+    variableName: string
+  ) {
+    const value = this.getVar<string>(variableName);
+    if (!value) {
+      throw new Error(`Variable ${variableName} not found`);
+    }
+    const selector = await resolveLocator(this.page, fieldName);
+    if (!selector) {
+      throw new Error(`Selector ${fieldName} not found`);
+    }
+    try {
+      await this.page.locator(selector).fill(value);
+    } catch (error) {
+      throw new Error(`Failed to fill in the ${fieldName} input field with data from the stored variable ${variableName}: ${error}`);
+    }
+  }
+);