command button end2end tests

wordplaydev · Dec 5, 2024 · d5a66e4 · d5a66e4
1 parent 381ccd8
commit d5a66e4
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 0 deletions.
diff --git 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
@@ -102,3 +102,4 @@
             >{command.symbol}</Emoji
         >{:else}{command.symbol}{/if}</Button
 >
+
diff --git a/tests/end2end/commandButton.spec.ts 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();
+
+});
Original file line number	Diff line number	Diff line change
Expand Up		@@ -102,3 +102,4 @@
		>{command.symbol}</Emoji
		>{:else}{command.symbol}{/if}</Button
		>