create-appraisejs 0.3.1-alpha.0 → 0.4.0-alpha.0

package/templates/starter/e2e/crud-configuration.spec.ts

@@ -0,0 +1,138 @@
+import { test, expect } from '@playwright/test'
+
+import {
+  disconnectPrisma,
+  findEnvironmentByName,
+  findModuleByName,
+  findTagByName,
+  resetE2eData,
+  seedCoreData,
+  seededIds,
+} from './helpers/test-data'
+import {
+  createLocator,
+  createLocatorGroup,
+  createTemplateStep,
+  createTemplateStepGroup,
+  createTemplateTestCase,
+  editEnvironment,
+  editTag,
+} from './helpers/forms'
+import { createEnvironment, createModule, createTag, expectPageHeading, saveForm } from './helpers/ui'
+import { deleteRowByName, editRowByName, expectRowHidden, filterTableByName } from './helpers/table'
+
+test.describe('Configuration CRUD @crud', () => {
+  test.beforeEach(async () => {
+    await resetE2eData()
+    await seedCoreData()
+  })
+
+  test.afterAll(async () => {
+    await disconnectPrisma()
+  })
+
+  test('environment tag and locator entities support create edit and delete', async ({ page }) => {
+    const environmentName = 'E2E Config Environment'
+    const editedEnvironmentName = 'E2E Config Environment Edited'
+    const tagName = 'E2E Config Tag'
+    const editedTagName = 'E2E Config Tag Edited'
+    const locatorGroupName = 'E2E Config Locator Group'
+    const locatorName = 'E2E Config Locator'
+
+    await createEnvironment(page, environmentName)
+    const createdEnvironment = await findEnvironmentByName(environmentName)
+    expect(createdEnvironment).not.toBeNull()
+    await editEnvironment(page, createdEnvironment!.id, editedEnvironmentName)
+    await expect(page.getByText(editedEnvironmentName, { exact: true }).first()).toBeVisible()
+
+    await createTag(page, tagName, '@e2e-config')
+    const createdTag = await findTagByName(tagName)
+    expect(createdTag).not.toBeNull()
+    await editTag(page, createdTag!.id, editedTagName, '@e2e-config-edited')
+    await expect(page.getByText(editedTagName, { exact: true }).first()).toBeVisible()
+
+    await createLocatorGroup(page, locatorGroupName, 'E2E Auth', '/config-login')
+    await createLocator(page, locatorName, 'text=Config button', locatorGroupName)
+
+    await page.goto(`/locators/modify/${seededIds.locator}`)
+    await expect(page.getByRole('button', { name: 'Update Locator' })).toBeVisible()
+    await page.getByLabel('Locator Name').fill('E2E Sign In Button Edited')
+    await page.getByRole('button', { name: 'Update Locator' }).click()
+    await expect(page).toHaveURL(/\/locators$/)
+    await expect(page.getByText('E2E Sign In Button Edited', { exact: true }).first()).toBeVisible()
+
+    await deleteRowByName(page, locatorName)
+    await page.reload()
+    await expectRowHidden(page, locatorName)
+
+    await page.goto('/locator-groups')
+    await deleteRowByName(page, locatorGroupName)
+    await page.reload()
+    await expectRowHidden(page, locatorGroupName)
+
+    await page.goto('/tags')
+    await deleteRowByName(page, editedTagName)
+    await page.reload()
+    await expectRowHidden(page, editedTagName)
+
+    await page.goto('/environments')
+    await deleteRowByName(page, editedEnvironmentName)
+    await page.reload()
+    await expectRowHidden(page, editedEnvironmentName)
+  })
+
+  test('template catalog entities support create edit and delete', async ({ page }) => {
+    const groupName = 'E2E Config Template Group'
+    const stepName = 'E2E Config Template Step'
+    const templateCaseName = 'E2E Config Template Case'
+
+    await createTemplateStepGroup(page, groupName)
+    await createTemplateStep(page, stepName, groupName)
+    await createTemplateTestCase(page, templateCaseName)
+
+    await page.goto('/template-step-groups')
+    await editRowByName(page, groupName)
+    await page.getByLabel('Name').fill(`${groupName} Edited`)
+    await saveForm(page)
+    await expect(page.getByText(`${groupName} Edited`, { exact: true }).first()).toBeVisible()
+
+    await page.goto('/template-steps')
+    await editRowByName(page, stepName)
+    await page.getByLabel('Name').fill(`${stepName} Edited`)
+    await page.getByRole('button', { name: /^Save$/ }).click()
+    await expect(page.getByText(`${stepName} Edited`, { exact: true }).first()).toBeVisible()
+
+    await page.goto('/template-test-cases')
+    await deleteRowByName(page, templateCaseName)
+    await page.reload()
+    await expectRowHidden(page, templateCaseName)
+
+    await page.goto('/template-steps')
+    await deleteRowByName(page, `${stepName} Edited`)
+    await page.reload()
+    await expectRowHidden(page, `${stepName} Edited`)
+
+    await page.goto('/template-step-groups')
+    await deleteRowByName(page, `${groupName} Edited`)
+    await page.reload()
+    await expectRowHidden(page, `${groupName} Edited`)
+  })
+
+  test('module create edit delete remains available for configuration flows', async ({ page }) => {
+    const moduleName = 'E2E Config Module'
+    const editedModuleName = 'E2E Config Module Edited'
+
+    await createModule(page, moduleName)
+    const createdModule = await findModuleByName(moduleName)
+    expect(createdModule).not.toBeNull()
+
+    await page.goto(`/modules/modify/${createdModule?.id}`)
+    await page.getByLabel('Name').fill(editedModuleName)
+    await saveForm(page)
+    await expect(page.getByText(editedModuleName, { exact: true }).first()).toBeVisible()
+
+    await deleteRowByName(page, editedModuleName)
+    await page.reload()
+    await expectRowHidden(page, editedModuleName)
+  })
+})

package/templates/starter/e2e/crud-tests.spec.ts

@@ -0,0 +1,76 @@
+import { test, expect } from '@playwright/test'
+
+import { disconnectPrisma, findModuleByName, resetE2eData, seedCoreData, seededIds } from './helpers/test-data'
+import { createTestCaseWithSeededStep, createTestSuite } from './helpers/forms'
+import { expectPageHeading, saveForm } from './helpers/ui'
+import { deleteRowByName, editRowByName, expectRowHidden, filterTableByName } from './helpers/table'
+import { selectFilterTags, selectTestSuites } from './helpers/forms'
+
+test.describe('Test hierarchy CRUD @crud', () => {
+  test.beforeEach(async () => {
+    await resetE2eData()
+    await seedCoreData()
+  })
+
+  test.afterAll(async () => {
+    await disconnectPrisma()
+  })
+
+  test('test suite create edit and delete assign seeded cases', async ({ page }) => {
+    const suiteName = 'E2E UI Suite'
+    const editedSuiteName = 'E2E UI Suite Edited'
+
+    await createTestSuite(page, suiteName, 'E2E Auth', 'E2E seeded login works')
+
+    await editRowByName(page, suiteName)
+    await page.getByPlaceholder('Enter name for your test suite').fill(editedSuiteName)
+    await saveForm(page)
+    await expect(page.getByText(editedSuiteName, { exact: true }).first()).toBeVisible()
+
+    await deleteRowByName(page, editedSuiteName)
+    await page.reload()
+    await expectRowHidden(page, editedSuiteName)
+  })
+
+  test('test case create modify preview and delete', async ({ page }) => {
+    const caseTitle = 'E2E UI Auth Case'
+
+    await createTestCaseWithSeededStep(page, caseTitle)
+
+    await page.goto(`/test-cases/modify/${seededIds.testCase}`)
+    await expectPageHeading(page, 'Modify Test Case')
+    await page.getByRole('textbox', { name: 'Title' }).fill('E2E seeded login works updated')
+    await page.getByRole('button', { name: /Continue/ }).click()
+    await page.getByRole('button', { name: 'Show test scenario preview' }).click()
+    await expect(page.getByText('Test Scenario(Preview)')).toBeVisible()
+
+    await page.goto('/test-cases')
+    await deleteRowByName(page, caseTitle, 'Filter by title...')
+    await page.reload()
+    await expectRowHidden(page, caseTitle, 'Filter by title...')
+  })
+
+  test('create test case from template lands on modify with prefilled flow', async ({ page }) => {
+    await page.goto('/test-cases/create-from-template')
+    await expectPageHeading(page, 'Create Test Case From Template')
+    await page.getByLabel('Template Test Case').click()
+    await page.getByRole('option', { name: 'E2E Login Template' }).click()
+    await page.getByRole('button', { name: /Continue/ }).click()
+    await page.getByRole('textbox', { name: 'Title' }).fill('E2E From Template Case')
+    await selectTestSuites(page, 'E2E Auth Suite')
+    await selectFilterTags(page, 'E2E Smoke')
+    await page.getByRole('button', { name: /Continue/ }).click()
+    await expect(page.getByText('Test Case Flow', { exact: true }).first()).toBeVisible()
+    await page.getByRole('button', { name: 'Save test case' }).click()
+    await expect(page).toHaveURL(/\/test-cases$/)
+    await expect(page.getByText('E2E From Template Case', { exact: true }).first()).toBeVisible()
+  })
+
+  test('secondary module suite seed is visible for assignment coverage', async ({ page }) => {
+    await page.goto('/test-suites')
+    await expect(page.getByText('E2E Secondary Suite', { exact: true }).first()).toBeVisible()
+
+    const secondModule = await findModuleByName('E2E Secondary')
+    expect(secondModule).not.toBeNull()
+  })
+})

package/templates/starter/e2e/helpers/forms.ts

@@ -0,0 +1,186 @@
+import { expect, type Locator, type Page } from '@playwright/test'
+
+import { saveForm, expectPageHeading } from './ui'
+
+function labeledMultiSelectCombobox(page: Page, label: string): Locator {
+  return page.getByText(label, { exact: true }).locator('..').getByRole('combobox', { name: 'Select options' })
+}
+
+export async function selectFilterTags(page: Page, ...tagNames: string[]): Promise<void> {
+  const combobox = labeledMultiSelectCombobox(page, 'Filter Tags')
+
+  for (const tagName of tagNames) {
+    await combobox.click()
+    await page.getByRole('option', { name: tagName }).click()
+  }
+}
+
+export async function selectTestSuites(page: Page, ...suiteNames: string[]): Promise<void> {
+  const combobox = labeledMultiSelectCombobox(page, 'Test Suites')
+
+  for (const suiteName of suiteNames) {
+    await combobox.click()
+    await page.getByRole('option', { name: suiteName }).click()
+  }
+}
+
+export async function addTemplateStepToFlow(page: Page, stepName = 'Open seeded page'): Promise<void> {
+  const emptyStateAdd = page.getByRole('button', { name: 'Add node', exact: true })
+  const toolbarAdd = page.getByRole('button', { name: 'Add Node' })
+
+  if (await emptyStateAdd.isVisible()) {
+    await emptyStateAdd.click()
+  } else {
+    await toolbarAdd.click()
+  }
+
+  await expect(page.getByRole('dialog', { name: 'Add Node' })).toBeVisible()
+  const addNodeDialog = page.getByRole('dialog', { name: 'Add Node' })
+  await addNodeDialog.getByRole('textbox', { name: 'Label' }).fill(stepName)
+  await addNodeDialog.getByRole('combobox', { name: 'Template Step' }).click()
+  await page.getByPlaceholder('Search template steps…').fill(stepName)
+  await page.getByRole('option', { name: stepName }).click()
+  const urlParameter = addNodeDialog.getByRole('textbox', { name: /^url/i })
+  if (await urlParameter.isVisible()) {
+    await urlParameter.fill('/')
+  }
+  await addNodeDialog.getByRole('button', { name: /^Save$/ }).click()
+  await expect(addNodeDialog).toBeHidden()
+  await expect(page.getByText(stepName, { exact: true }).first()).toBeVisible()
+}
+
+export async function editRecordName(page: Page, name: string, nextName: string): Promise<void> {
+  await page.getByLabel('Name').fill(nextName)
+  await saveForm(page)
+  await expect(page.getByText(nextName, { exact: true }).first()).toBeVisible()
+  await expect(page.getByText(name, { exact: true }).first()).toBeHidden()
+}
+
+export async function createLocatorGroup(
+  page: Page,
+  name: string,
+  moduleName: string,
+  route = '/login',
+): Promise<void> {
+  await page.goto('/locator-groups/create')
+  await expectPageHeading(page, 'Create Locator Group')
+  await page.getByLabel('Name').fill(name)
+  await page.getByRole('combobox').click()
+  await page.getByRole('option', { name: moduleName }).click()
+  await page.getByLabel('Route').fill(route)
+  await saveForm(page)
+  await expect(page).toHaveURL(/\/locator-groups$/)
+  await expect(page.getByText(name, { exact: true }).first()).toBeVisible()
+}
+
+export async function createLocator(page: Page, name: string, selector: string, groupName: string): Promise<void> {
+  await page.goto('/locators/create')
+  await expectPageHeading(page, 'Create Locator')
+  await page.getByLabel('Locator Name').fill(name)
+  await page.getByLabel('Selector').fill(selector)
+  await page.getByRole('radio', { name: /Use existing group/i }).click()
+  await page.getByRole('combobox', { name: 'Locator Group' }).click()
+  await page.getByRole('option', { name: groupName }).click()
+  await page.getByRole('button', { name: 'Save Locator' }).click()
+  await expect(page).toHaveURL(/\/locators$/)
+  await expect(page.getByText(name, { exact: true }).first()).toBeVisible()
+}
+
+export async function createTemplateStepGroup(page: Page, name: string): Promise<void> {
+  await page.goto('/template-step-groups/create')
+  await expectPageHeading(page, 'Create Template Step Group')
+  await page.getByLabel('Name').fill(name)
+  await saveForm(page)
+  await expect(page).toHaveURL(/\/template-step-groups$/)
+  await expect(page.getByText(name, { exact: true }).first()).toBeVisible()
+}
+
+export async function createTemplateStep(page: Page, name: string, groupName: string): Promise<void> {
+  await page.goto('/template-steps/create')
+  await expectPageHeading(page, 'Create Template Step')
+  await page.getByLabel('Name').fill(name)
+  await page.getByText('Template Step Group').locator('..').getByRole('combobox').click()
+  await page.getByRole('option', { name: groupName }).click()
+  await page.getByLabel('Signature').fill(`Given I ${name.toLowerCase()}`)
+  await page.getByRole('button', { name: /^Save$/ }).click()
+  await expect(page).toHaveURL(/\/template-steps$/)
+  await expect(page.getByText(name, { exact: true }).first()).toBeVisible()
+}
+
+export async function createTemplateTestCase(page: Page, name: string): Promise<void> {
+  await page.goto('/template-test-cases/create')
+  await expectPageHeading(page, 'Create Template Test Case')
+  await page.getByLabel('Title').fill(name)
+  await addTemplateStepToFlow(page)
+  await page.getByRole('button', { name: /^Save$/ }).click()
+  await expect(page).toHaveURL(/\/template-test-cases$/)
+  await expect(page.getByText(name, { exact: true }).first()).toBeVisible()
+}
+
+export async function createTestSuite(
+  page: Page,
+  name: string,
+  moduleName: string,
+  testCaseTitle?: string,
+): Promise<void> {
+  await page.goto('/test-suites/create')
+  await expectPageHeading(page, 'Create Test Suite')
+  await page.getByPlaceholder('Enter name for your test suite').fill(name)
+  await page.getByLabel('Module').click()
+  await page.getByRole('option', { name: moduleName }).click()
+  if (testCaseTitle) {
+    await page.getByRole('button', { name: 'Select test case(s)' }).click()
+    await page.getByPlaceholder('Search by title, description, or tag...').fill(testCaseTitle)
+    await page
+      .getByRole('row', { name: new RegExp(testCaseTitle) })
+      .getByRole('checkbox')
+      .click()
+    await page.getByRole('button', { name: /^Save$/ }).click()
+  }
+  await page.getByRole('button', { name: /^Save$/ }).click()
+  await expect(page).toHaveURL(/\/test-suites$/)
+  await expect(page.getByText(name, { exact: true }).first()).toBeVisible()
+}
+
+export async function fillTestCaseDetails(
+  page: Page,
+  title: string,
+  tagName = 'E2E Smoke',
+  suiteName = 'E2E Auth Suite',
+): Promise<void> {
+  await page.getByRole('textbox', { name: 'Title' }).fill(title)
+  await selectTestSuites(page, suiteName)
+  await selectFilterTags(page, tagName)
+  await page.getByRole('button', { name: /Continue/ }).click()
+}
+
+export async function saveTestCase(page: Page): Promise<void> {
+  await page.getByRole('button', { name: 'Save test case' }).click()
+  await expect(page).toHaveURL(/\/test-cases$/)
+}
+
+export async function createTestCaseWithSeededStep(page: Page, title: string): Promise<void> {
+  await page.goto('/test-cases/create')
+  await expectPageHeading(page, 'Create New Test Case')
+  await fillTestCaseDetails(page, title)
+  await expect(page.getByText('Test Case Flow', { exact: true }).first()).toBeVisible()
+  await addTemplateStepToFlow(page)
+  await saveTestCase(page)
+  await expect(page.getByText(title, { exact: true }).first()).toBeVisible()
+}
+
+export async function editEnvironment(page: Page, id: string, nextName: string): Promise<void> {
+  await page.goto(`/environments/modify/${id}`)
+  await expectPageHeading(page, 'Modify Environment')
+  await page.getByRole('textbox', { name: 'Name', exact: true }).fill(nextName)
+  await saveForm(page)
+  await expect(page).toHaveURL(/\/environments$/)
+}
+
+export async function editTag(page: Page, id: string, nextName: string, expression: string): Promise<void> {
+  await page.goto(`/tags/modify/${id}`)
+  await page.getByRole('textbox', { name: 'Name', exact: true }).fill(nextName)
+  await page.getByRole('textbox', { name: 'Tag Expression', exact: true }).fill(expression)
+  await saveForm(page)
+  await expect(page).toHaveURL(/\/tags$/)
+}

package/templates/starter/e2e/helpers/navigation.ts

@@ -0,0 +1,27 @@
+import { expect, type Page } from '@playwright/test'
+
+import { expectPageHeading } from './ui'
+
+export type RouteExpectation = {
+  path: string
+  heading: string | RegExp
+}
+
+export async function gotoAndExpectHeading(page: Page, path: string, heading: string | RegExp): Promise<void> {
+  await page.goto(path)
+  await expectPageHeading(page, heading)
+}
+
+export async function visitRoutes(page: Page, routes: RouteExpectation[]): Promise<void> {
+  for (const route of routes) {
+    await gotoAndExpectHeading(page, route.path, route.heading)
+  }
+}
+
+export function buildModifyPath(basePath: string, id: string): string {
+  return `${basePath}/modify/${id}`
+}
+
+export async function expectUrl(page: Page, urlPattern: string | RegExp): Promise<void> {
+  await expect(page).toHaveURL(urlPattern)
+}

package/templates/starter/e2e/helpers/table.ts

@@ -0,0 +1,45 @@
+import { expect, type Page } from '@playwright/test'
+
+export async function filterTableByName(page: Page, value: string, placeholder = 'Filter by name...'): Promise<void> {
+  await page.getByPlaceholder(placeholder).first().fill(value)
+}
+
+export async function openRowMenu(page: Page, rowIndex = 0): Promise<void> {
+  await page.getByRole('button', { name: 'Open menu' }).nth(rowIndex).click()
+}
+
+export async function editRowByName(page: Page, name: string): Promise<void> {
+  await filterTableByName(page, name)
+  await openRowMenu(page)
+  await page.getByRole('menuitem', { name: /Edit/ }).getByRole('link').click()
+  await expect(page).toHaveURL(/\/modify\//)
+}
+
+export async function confirmDeleteDialog(page: Page): Promise<void> {
+  await page.getByRole('menuitem', { name: /Delete/ }).click()
+  await page.getByRole('button', { name: /^Delete$/ }).click()
+  await expect(page.getByText('Item(s) deleted successfully', { exact: true })).toBeVisible()
+}
+
+export async function deleteRowByName(
+  page: Page,
+  name: string,
+  filterPlaceholder = 'Filter by name...',
+): Promise<void> {
+  await filterTableByName(page, name, filterPlaceholder)
+  await openRowMenu(page)
+  await confirmDeleteDialog(page)
+}
+
+export async function expectRowHidden(
+  page: Page,
+  name: string,
+  filterPlaceholder = 'Filter by name...',
+): Promise<void> {
+  await filterTableByName(page, name, filterPlaceholder)
+  await expect(page.getByRole('row', { name: new RegExp(name) })).toHaveCount(0)
+}
+
+export async function expectRowVisible(page: Page, name: string): Promise<void> {
+  await expect(page.getByText(name, { exact: true }).first()).toBeVisible()
+}