From d5a66e446827265094169ce37b27acbbd6baa24a Mon Sep 17 00:00:00 2001 From: Joshua Taylor Date: Wed, 4 Dec 2024 20:35:42 -0800 Subject: [PATCH] command button end2end tests --- src/components/editor/util/Commands.ts | 25 +++++++++++ src/components/widgets/CommandButton.svelte | 1 + tests/end2end/commandButton.spec.ts | 47 +++++++++++++++++++++ 3 files changed, 73 insertions(+) create mode 100644 tests/end2end/commandButton.spec.ts diff --git a/src/components/editor/util/Commands.ts b/src/components/editor/util/Commands.ts index 463d6d734..4518a0395 100644 --- a/src/components/editor/util/Commands.ts +++ b/src/components/editor/util/Commands.ts @@ -190,6 +190,7 @@ function handleInsert(context: CommandContext, symbol: string) { } export const ShowKeyboardHelp: Command = { + uiid:'1', symbol: '⌨️', description: (l) => l.ui.project.help, visible: Visibility.Invisible, @@ -208,6 +209,7 @@ export const ShowKeyboardHelp: Command = { }; export const IncrementLiteral: Command = { + uiid:'2', symbol: '+', description: (l) => l.ui.source.cursor.incrementLiteral, visible: Visibility.Touch, @@ -220,9 +222,12 @@ export const IncrementLiteral: Command = { active: ({ caret }) => caret ? caret.getAdjustableLiteral() !== undefined : false, execute: ({ caret }) => caret?.adjustLiteral(undefined, 1) ?? false, + + }; export const DecrementLiteral: Command = { + uiid:'3', symbol: '–', description: (l) => l.ui.source.cursor.decrementLiteral, visible: Visibility.Touch, @@ -238,6 +243,7 @@ export const DecrementLiteral: Command = { }; export const StepBack: Command = { + uiid:'4', symbol: '←', description: (l) => l.ui.timeline.button.backStep, visible: Visibility.Visible, @@ -255,6 +261,7 @@ export const StepBack: Command = { }; export const StepForward: Command = { + uiid:'5', symbol: '→', description: (l) => l.ui.timeline.button.forwardStep, visible: Visibility.Visible, @@ -272,6 +279,7 @@ export const StepForward: Command = { }; export const StepBackInput: Command = { + uiid:'6', symbol: '⇠', description: (l) => l.ui.timeline.button.backInput, visible: Visibility.Visible, @@ -286,6 +294,7 @@ export const StepBackInput: Command = { }; export const StepForwardInput: Command = { + uiid:'7', symbol: '⇢', description: (l) => l.ui.timeline.button.forwardInput, visible: Visibility.Visible, @@ -300,6 +309,7 @@ export const StepForwardInput: Command = { }; export const StepBackNode: Command = { + uiid:'8', symbol: '•←', description: (l) => l.ui.timeline.button.backNode, visible: Visibility.Visible, @@ -321,6 +331,7 @@ export const StepBackNode: Command = { }; export const StepForwardNode: Command = { + uiid:'9', symbol: '⇢•', description: (l) => l.ui.timeline.button.forwardNode, visible: Visibility.Visible, @@ -360,6 +371,7 @@ export const Restart: Command = { }; export const StepToStart: Command = { + uiid:'11', symbol: '⇤', description: (l) => l.ui.timeline.button.start, visible: Visibility.Visible, @@ -376,6 +388,7 @@ export const StepToStart: Command = { }; export const StepToPresent: Command = { + uiid:'11', symbol: '⇥', description: (l) => l.ui.timeline.button.present, visible: Visibility.Visible, @@ -392,6 +405,7 @@ export const StepToPresent: Command = { }; export const StepOut: Command = { + uiid:'12', symbol: '↑', description: (l) => l.ui.timeline.button.out, visible: Visibility.Visible, @@ -412,6 +426,7 @@ export const StepOut: Command = { }; export const Play: Command = { + uiid:'13', symbol: '▶', description: (l) => l.ui.timeline.button.play, visible: Visibility.Visible, @@ -428,6 +443,7 @@ export const Play: Command = { }; export const Pause: Command = { + uiid:'14', symbol: '⏸', description: (l) => l.ui.timeline.button.pause, visible: Visibility.Visible, @@ -444,6 +460,7 @@ export const Pause: Command = { }; export const ShowMenu: Command = { + uiid:'15', symbol: '▾', description: (l) => l.ui.source.menu.show, visible: Visibility.Visible, @@ -462,6 +479,7 @@ export const ShowMenu: Command = { }; export const EnterFullscreen: Command = { + uiid:'16', symbol: '▶️', description: (l) => l.ui.tile.toggle.fullscreen.off, visible: Visibility.Invisible, @@ -479,6 +497,7 @@ export const EnterFullscreen: Command = { }; export const ExitFullscreen: Command = { + uiid:'17', symbol: EDIT_SYMBOL, description: (l) => l.ui.tile.toggle.fullscreen.on, visible: Visibility.Invisible, @@ -497,6 +516,7 @@ export const ExitFullscreen: Command = { }; export const FocusOutput: Command = { + uiid:'18', symbol: STAGE_SYMBOL, description: (l) => l.ui.project.button.focusOutput, visible: Visibility.Invisible, @@ -514,6 +534,7 @@ export const FocusOutput: Command = { }; export const FocusSource: Command = { + uiid:'19', symbol: SOURCE_SYMBOL, description: (l) => l.ui.project.button.focusSource, visible: Visibility.Invisible, @@ -532,6 +553,7 @@ export const FocusSource: Command = { }; export const FocusDocs: Command = { + uiid: '20', symbol: DOCUMENTATION_SYMBOL, description: (l) => l.ui.project.button.focusDocs, visible: Visibility.Invisible, @@ -550,6 +572,7 @@ export const FocusDocs: Command = { }; export const FocusPalette: Command = { + uiid: '21', // Added uuid symbol: PALETTE_SYMBOL, description: (l) => l.ui.project.button.focusPalette, visible: Visibility.Invisible, @@ -604,6 +627,8 @@ export const ToggleBlocks: Command = { }; /** The command to rule them all... inserts things during text editing mode. */ + + export const InsertSymbol: Command = { symbol: 'a', description: (l) => l.ui.source.cursor.type, diff --git a/src/components/widgets/CommandButton.svelte b/src/components/widgets/CommandButton.svelte index 93036c10d..e995ba62c 100644 --- a/src/components/widgets/CommandButton.svelte +++ b/src/components/widgets/CommandButton.svelte @@ -102,3 +102,4 @@ >{command.symbol}{:else}{command.symbol}{/if} + diff --git a/tests/end2end/commandButton.spec.ts b/tests/end2end/commandButton.spec.ts new file mode 100644 index 000000000..800a5c8a1 --- /dev/null +++ b/tests/end2end/commandButton.spec.ts @@ -0,0 +1,47 @@ +import { test, expect, type Page } from '@playwright/test'; + + +test('create project and check for command buttons and their functionalities ', async ({ page }) => { + await page.goto('/projects'); + + // Create a new blank project + await page.getByTestId('addproject').click(); + + // Click the first preview link + await page.getByTestId('preview').nth(0).click(); + + // Wait for the URL redirect to the project. + await page.waitForURL(/\/project\/.+/); + + + + const StepBackButton = await page.locator('[data-uiid="4"]'); + await expect(StepBackButton).toBeVisible(); + + const StepForwardButton = await page.locator('[data-uiid="5"]'); + await expect(StepForwardButton).toBeVisible(); + + const StepOut = await page.locator('[data-uiid="12"]'); + await expect(StepOut).toBeVisible(); + + + const BackOneInput = await page.locator('[data-uiid="6"]'); + await expect(BackOneInput).toBeVisible(); + + + const StepBackOne = await page.locator('[data-uiid="8"]'); + await expect(StepBackOne).toBeVisible(); + + const ToEnd = await page.locator('[data-uiid="12"]'); + await expect(ToEnd).toBeVisible(); + + + const TimeLineSlider = await page.locator('[data-uiid="timeline"]'); + await expect(TimeLineSlider).toBeVisible(); + + + + const PlayButton = await page.locator('[data-uiid="playToggle"]'); + await expect(PlayButton).toBeVisible(); + +});