diff --git a/docs/src/components/Wizard.astro b/docs/src/components/Wizard.astro index bd50b14c857..69239c078d3 100644 --- a/docs/src/components/Wizard.astro +++ b/docs/src/components/Wizard.astro @@ -7,10 +7,10 @@ const wizardModelJson = JSON.stringify(wizardDataModel);
-

AW wizard preview

-

Build an agentic workflow prompt step by step

+

Workflow prompt wizard

+

Build an agentic workflow

- This shell loads the shared wizard data model, keeps state in memory, and demonstrates the WHAT → WHEN → WHERE flow with generic step rendering, plus a free-text task description and a final self-contained prompt you can copy. + Choose what your workflow does, when it runs, and where it reports. We’ll combine your answers with any task details into a prompt you can copy.

@@ -67,7 +67,7 @@ const wizardModelJson = JSON.stringify(wizardDataModel); id: 'goal', label: 'Goal', title: 'Choose a workflow goal', - description: 'Select a reusable category from the shared data model. Future issues can replace this generic renderer with richer content without changing the shell.', + description: 'Start with the outcome you want the workflow to achieve.', getOptions() { return model.goalCategories.map((goal) => ({ id: goal.id, @@ -90,7 +90,7 @@ const wizardModelJson = JSON.stringify(wizardDataModel); id: 'trigger', label: 'When', title: 'Choose a trigger', - description: 'The trigger list is filtered by the selected goal category using goalCategory.triggerOptionIds.', + description: 'Choose the event or schedule that should start the workflow.', getOptions() { const goal = getSelectedGoal(); if (!goal) return []; @@ -149,7 +149,7 @@ const wizardModelJson = JSON.stringify(wizardDataModel); id: 'task-details', label: 'Task', title: 'Describe the task in your own words', - description: 'Add any free-text detail the AI coding assistant will need — this is appended to the generated prompt alongside your structured answers.', + description: 'Add context, constraints, or edge cases the workflow should account for.', getOptions() { return []; }, @@ -509,8 +509,8 @@ const wizardModelJson = JSON.stringify(wizardDataModel);
- diff --git a/docs/src/content/docs/wizard.mdx b/docs/src/content/docs/wizard.mdx index 8fdbdfdcf25..416f59034c0 100644 --- a/docs/src/content/docs/wizard.mdx +++ b/docs/src/content/docs/wizard.mdx @@ -1,15 +1,11 @@ --- -title: AW wizard -description: Client-side wizard shell preview for building a gh-aw prompt from the shared JSON data model. +title: Workflow prompt wizard +description: Build a GitHub Agentic Workflows prompt from guided choices. sidebar: - label: AW wizard + label: Workflow prompt wizard order: 22 --- import Wizard from '../../components/Wizard.astro'; -## AW wizard preview - -This page hosts the client-side shell for the docs wizard. It loads its options from the shared JSON data model and demonstrates the step container, progress UI, navigation, and in-memory selection flow that later issues will extend with richer step content. - diff --git a/docs/tests/wizard.spec.ts b/docs/tests/wizard.spec.ts index 7f6f99993f5..39a2a4338f2 100644 --- a/docs/tests/wizard.spec.ts +++ b/docs/tests/wizard.spec.ts @@ -1,46 +1,71 @@ -import { expect, test } from '@playwright/test'; +import { expect, test } from "@playwright/test"; -test.describe('AW wizard page', () => { - test('renders the client-side wizard shell and advances through data-driven steps', async ({ page }) => { - await page.goto('/gh-aw/wizard/'); - await page.waitForLoadState('networkidle'); +test.describe("AW wizard page", () => { + test("renders the client-side wizard shell and advances through data-driven steps", async ({ page }) => { + await page.goto("/gh-aw/wizard/"); + await page.waitForLoadState("networkidle"); - await expect(page.getByRole('heading', { name: 'Build an agentic workflow prompt step by step' })).toBeVisible(); - await expect(page.getByText('Step 1 of 3')).toBeVisible(); - await expect(page.getByRole('heading', { name: 'Choose a workflow goal' })).toBeVisible(); + await expect(page.getByRole("heading", { name: "Build an agentic workflow" })).toBeVisible(); + await expect(page.getByText("Step 1 of 5")).toBeVisible(); + await expect(page.getByRole("heading", { name: "Choose a workflow goal" })).toBeVisible(); - await page.getByLabel('Generate a recurring report').check(); - await page.getByRole('button', { name: 'Next' }).click(); + await page.getByLabel("Generate a recurring report").check(); + await page.getByRole("button", { name: "Next" }).click(); - await expect(page.getByRole('heading', { name: 'Choose a trigger' })).toBeVisible(); - await expect(page.getByLabel('Every day')).toBeVisible(); - await expect(page.getByLabel('Every week')).toBeVisible(); + await expect(page.getByRole("heading", { name: "Choose a trigger" })).toBeVisible(); + await expect(page.getByLabel("Every day")).toBeVisible(); + await expect(page.getByLabel("Every week")).toBeVisible(); - await page.getByRole('button', { name: 'Next' }).click(); + await page.getByRole("button", { name: "Next" }).click(); - await expect(page.getByRole('heading', { name: 'Review the inferred output destination' })).toBeVisible(); - await expect(page.locator('[data-wizard-summary]')).toContainText('Generate a recurring report'); - await expect(page.locator('[data-wizard-preview]')).toContainText('Destination: Post a discussion'); - await expect(page.getByRole('button', { name: 'Review selections' })).toBeVisible(); + await expect(page.getByRole("heading", { name: "Review the inferred output destination" })).toBeVisible(); + await expect(page.locator("[data-wizard-summary]")).toContainText("Generate a recurring report"); + await expect(page.locator("[data-wizard-preview]")).toContainText("Destination: Post a discussion"); + + await page.getByRole("button", { name: "Next" }).click(); + await expect(page.getByRole("heading", { name: "Describe the task in your own words" })).toBeVisible(); + await page.getByLabel("Task description").fill("Summarize open issues by priority."); + await page.getByRole("button", { name: "Next" }).click(); + + await expect(page.getByRole("heading", { name: "Copy your generated prompt" })).toBeVisible(); + await expect(page.locator(".aw-wizard__final-prompt-text")).toContainText("Summarize open issues by priority."); + await expect(page.getByRole("button", { name: "Review selections" })).toBeVisible(); }); - test('infers a comment destination for the issue automation goal', async ({ page }) => { - await page.goto('/gh-aw/wizard/'); - await page.waitForLoadState('networkidle'); + test("infers a comment destination for the issue automation goal", async ({ page }) => { + await page.goto("/gh-aw/wizard/"); + await page.waitForLoadState("networkidle"); + + await expect(page.getByText("Step 1 of 5")).toBeVisible(); + await page.getByLabel("Automate issue triage or replies").check(); + await page.getByRole("button", { name: "Next" }).click(); + + await expect(page.getByRole("heading", { name: "Choose a trigger" })).toBeVisible(); + await expect(page.getByLabel("When an issue is opened")).toBeVisible(); + await expect(page.getByLabel("When someone comments on an issue")).toBeVisible(); + + await page.getByRole("button", { name: "Next" }).click(); + + await expect(page.getByRole("heading", { name: "Review the inferred output destination" })).toBeVisible(); + await expect(page.locator("[data-wizard-summary]")).toContainText("Automate issue triage or replies"); + await expect(page.locator("[data-wizard-preview]")).toContainText("Destination: Post a comment"); + await expect(page.getByRole("button", { name: "Next" })).toBeVisible(); + }); - await expect(page.getByText('Step 1 of 3')).toBeVisible(); - await page.getByLabel('Automate issue triage or replies').check(); - await page.getByRole('button', { name: 'Next' }).click(); + test("styles client-rendered options and avoids mobile overflow", async ({ page }) => { + await page.setViewportSize({ width: 390, height: 844 }); + await page.goto("/gh-aw/wizard/"); + await page.waitForLoadState("networkidle"); - await expect(page.getByRole('heading', { name: 'Choose a trigger' })).toBeVisible(); - await expect(page.getByLabel('When an issue is opened')).toBeVisible(); - await expect(page.getByLabel('When someone comments on an issue')).toBeVisible(); + const wizard = page.locator("[data-aw-wizard]"); + const firstOption = wizard.locator(".aw-wizard__option").first(); + const optionCopy = firstOption.locator(".aw-wizard__option-copy"); - await page.getByRole('button', { name: 'Next' }).click(); + await expect(firstOption).toBeVisible(); + await expect(firstOption).toHaveCSS("display", "grid"); + await expect(optionCopy).toHaveCSS("display", "grid"); - await expect(page.getByRole('heading', { name: 'Review the inferred output destination' })).toBeVisible(); - await expect(page.locator('[data-wizard-summary]')).toContainText('Automate issue triage or replies'); - await expect(page.locator('[data-wizard-preview]')).toContainText('Destination: Post a comment'); - await expect(page.getByRole('button', { name: 'Review selections' })).toBeVisible(); + const overflow = await wizard.evaluate(element => element.scrollWidth - element.clientWidth); + expect(overflow).toBeLessThanOrEqual(1); }); });