From 3e6637379cdd0cfa48c038f373258582c61c67ff Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Wed, 17 Apr 2024 13:57:49 +0200
Subject: [PATCH] e2e tests for save-from-controls

---
 code/e2e-tests/save-from-controls.spec.ts | 69 +++++++++++++++++++++++
 scripts/tasks/e2e-tests-build.ts          |  4 +-
 scripts/tasks/e2e-tests-dev.ts            |  1 +
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 code/e2e-tests/save-from-controls.spec.ts

diff --git a/code/e2e-tests/save-from-controls.spec.ts b/code/e2e-tests/save-from-controls.spec.ts
new file mode 100644
index 00000000000..ce50fe8e6c4
--- /dev/null
+++ b/code/e2e-tests/save-from-controls.spec.ts
@@ -0,0 +1,69 @@
+import { test } from '@playwright/test';
+import process from 'process';
+import { SbPage } from './util';
+
+const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
+const type = process.env.STORYBOOK_TYPE || 'dev';
+
+test.describe('save-from-controls', () => {
+  test.skip(type === 'build', `Skipping save-from-controls tests for production Storybooks`);
+
+  test('Should be able to update a story', async ({ page }) => {
+    await page.goto(storybookUrl);
+    const sbPage = new SbPage(page);
+    await sbPage.waitUntilLoaded();
+
+    await sbPage.navigateToStory('example/button', 'primary');
+    await sbPage.viewAddonPanel('Controls');
+
+    // Update an arg
+    const label = sbPage.panelContent().locator('textarea[name=label]');
+    const value = await label.inputValue();
+    await label.fill(value + ' Updated');
+
+    // Assert the footer is shown
+    await sbPage.panelContent().locator('[data-short-label="Unsaved changes"]').isVisible();
+
+    // update the story
+    await sbPage.panelContent().locator('button').getByText('Update story').click();
+
+    // Assert the file is saved
+    const notification = await sbPage.page.waitForSelector('[title="Story saved"]');
+    await notification.isVisible();
+
+    // dismiss
+    await notification.click();
+    await notification.isHidden();
+
+    // cleanup
+    await label.fill(value);
+    await sbPage.panelContent().locator('button').getByText('Update story').click();
+    await sbPage.page.waitForSelector('[title="Story saved"]');
+  });
+
+  test('Should be able to clone a story', async ({ page }) => {
+    await page.goto(storybookUrl);
+    const sbPage = new SbPage(page);
+    await sbPage.waitUntilLoaded();
+
+    await sbPage.navigateToStory('example/button', 'primary');
+    await sbPage.viewAddonPanel('Controls');
+
+    // Update an arg
+    const label = sbPage.panelContent().locator('textarea[name=label]');
+    await label.fill((await label.inputValue()) + ' Copied');
+
+    // Assert the footer is shown
+    await sbPage.panelContent().locator('[data-short-label="Unsaved changes"]').isVisible();
+
+    // clone the story
+    await sbPage.panelContent().locator('button').getByText('Create new story').click();
+
+    (await sbPage.page.waitForSelector('[placeholder="Story export name"]')).fill('ClonedStory');
+    (await sbPage.page.waitForSelector('[type="submit"]')).click();
+
+    // Assert the file is saved
+    const notification = await sbPage.page.waitForSelector('[title="Story saved"]');
+    await notification.isVisible();
+  });
+});
diff --git a/scripts/tasks/e2e-tests-build.ts b/scripts/tasks/e2e-tests-build.ts
index a90670fa725..8e419ddf15c 100644
--- a/scripts/tasks/e2e-tests-build.ts
+++ b/scripts/tasks/e2e-tests-build.ts
@@ -3,11 +3,12 @@ import type { Task } from '../task';
 import { exec } from '../utils/exec';
 import { PORT } from './serve';
 
-export const e2eTestsBuild: Task & { port: number } = {
+export const e2eTestsBuild: Task & { port: number; type: 'build' | 'dev' } = {
   description: 'Run e2e tests against a sandbox in prod mode',
   dependsOn: ['serve'],
   junit: true,
   port: PORT,
+  type: 'build',
   async ready() {
     return false;
   },
@@ -29,6 +30,7 @@ export const e2eTestsBuild: Task & { port: number } = {
       {
         env: {
           STORYBOOK_URL: `http://localhost:${this.port}`,
+          STORYBOOK_TYPE: this.type,
           STORYBOOK_TEMPLATE_NAME: key,
           ...(junitFilename && {
             PLAYWRIGHT_JUNIT_OUTPUT_NAME: junitFilename,
diff --git a/scripts/tasks/e2e-tests-dev.ts b/scripts/tasks/e2e-tests-dev.ts
index 50dce2123a1..42c6f4c72b7 100644
--- a/scripts/tasks/e2e-tests-dev.ts
+++ b/scripts/tasks/e2e-tests-dev.ts
@@ -6,4 +6,5 @@ export const e2eTestsDev: typeof e2eTestsBuild = {
   description: 'Run e2e tests against a sandbox in dev mode',
   dependsOn: ['dev'],
   port: PORT,
+  type: 'dev',
 };