diff --git a/e2e/playwright/command-bar-tests.spec.ts b/e2e/playwright/command-bar-tests.spec.ts index 75fcfa5a3..cd1ac5f8d 100644 --- a/e2e/playwright/command-bar-tests.spec.ts +++ b/e2e/playwright/command-bar-tests.spec.ts @@ -684,4 +684,33 @@ c = 3 + a` highlightedHeaderArg: 'value', }) }) + + test('Text-to-CAD command can be closed with escape while in prompt', async ({ + page, + homePage, + cmdBar, + }) => { + await homePage.expectState({ + projectCards: [], + sortBy: 'last-modified-desc', + }) + await homePage.textToCadBtn.click() + await cmdBar.expectState({ + stage: 'arguments', + commandName: 'Text-to-CAD Create', + currentArgKey: 'prompt', + currentArgValue: '', + headerArguments: { + Method: 'New project', + NewProjectName: 'untitled', + Prompt: '', + }, + highlightedHeaderArg: 'prompt', + }) + await page.keyboard.press('Escape') + await cmdBar.toBeClosed() + await cmdBar.expectState({ + stage: 'commandBarClosed', + }) + }) }) diff --git a/e2e/playwright/fixtures/cmdBarFixture.ts b/e2e/playwright/fixtures/cmdBarFixture.ts index 5876ae504..a9fc131cd 100644 --- a/e2e/playwright/fixtures/cmdBarFixture.ts +++ b/e2e/playwright/fixtures/cmdBarFixture.ts @@ -308,6 +308,11 @@ export class CmdBarFixture { await expect(this.cmdBarElement).toBeVisible({ timeout: 10_000 }) } + async toBeClosed() { + // Check that the command bar is closed + await expect(this.cmdBarElement).not.toBeVisible({ timeout: 10_000 }) + } + async expectArgValue(value: string) { // Check the placeholder project name exists const actualArgument = await this.cmdBarElement diff --git a/e2e/playwright/fixtures/homePageFixture.ts b/e2e/playwright/fixtures/homePageFixture.ts index eb8f0ddc0..53517a742 100644 --- a/e2e/playwright/fixtures/homePageFixture.ts +++ b/e2e/playwright/fixtures/homePageFixture.ts @@ -26,6 +26,7 @@ export class HomePageFixture { sortByNameBtn!: Locator appHeader!: Locator tutorialBtn!: Locator + textToCadBtn!: Locator constructor(page: Page) { this.page = page @@ -47,6 +48,7 @@ export class HomePageFixture { this.sortByNameBtn = this.page.getByTestId('home-sort-by-name') this.appHeader = this.page.getByTestId('app-header') this.tutorialBtn = this.page.getByTestId('home-tutorial-button') + this.textToCadBtn = this.page.getByTestId('home-text-to-cad') } private _serialiseSortBy = async (): Promise< diff --git a/src/components/CommandBar/CommandBarTextareaInput.tsx b/src/components/CommandBar/CommandBarTextareaInput.tsx index 0466275d7..c9a35412a 100644 --- a/src/components/CommandBar/CommandBarTextareaInput.tsx +++ b/src/components/CommandBar/CommandBarTextareaInput.tsx @@ -86,6 +86,8 @@ function CommandBarTextareaInput({ formRef.current?.dispatchEvent( new Event('submit', { bubbles: true }) ) + } else if (event.key === 'Escape') { + commandBarActor.send({ type: 'Close' }) } }} autoFocus