From 39601d1e0be615d2f1672d4d5e313c64c5791471 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 15 Nov 2024 09:06:28 +0100
Subject: [PATCH] Composition: Add E2E tests for mobile

---
 code/e2e-tests/composition.spec.ts | 60 ++++++++++++++++++++++++++++--
 1 file changed, 56 insertions(+), 4 deletions(-)

diff --git a/code/e2e-tests/composition.spec.ts b/code/e2e-tests/composition.spec.ts
index 8e50987675b..15bc6c4c4ed 100644
--- a/code/e2e-tests/composition.spec.ts
+++ b/code/e2e-tests/composition.spec.ts
@@ -11,12 +11,10 @@ test.describe('composition', () => {
     'Slow, framework independent test, so only run it on in react-vite/default-ts'
   );
 
-  test.beforeEach(async ({ page }) => {
+  test('should filter and render composed stories', async ({ page }) => {
     await page.goto(storybookUrl);
     await new SbPage(page, expect).waitUntilLoaded();
-  });
 
-  test('should correctly filter composed stories', async ({ page }) => {
     // Expect that composed Storybooks are visible
     await expect(page.getByTitle('Storybook 8.0.0')).toBeVisible();
     await expect(page.getByTitle('Storybook 7.6.18')).toBeVisible();
@@ -35,10 +33,64 @@ test.describe('composition', () => {
     // Expect composed stories `to be available in the search
     await page.getByPlaceholder('Find components').fill('Button');
     await expect(
-      page.getByRole('option', { name: 'Button Storybook 8.0.0 / @blocks / examples' })
+      page.getByRole('option', { name: 'Button Storybook 7.6.18 / @blocks / examples' })
     ).toBeVisible();
+
+    const buttonStory = page.getByRole('option', {
+      name: 'Button Storybook 8.0.0 / @blocks / examples',
+    });
+    await expect(buttonStory).toBeVisible();
+    await buttonStory.click();
+
+    // Note: this could potentially be flaky due to it accessing a hosted Storybook
+    await expect(
+      page
+        .locator('iframe[title="storybook-ref-storybook\\@8\\.0\\.0"]')
+        .contentFrame()
+        .getByRole('heading', { name: 'Example button component' })
+    ).toBeVisible({ timeout: 15000 });
+  });
+
+  test('should filter and render composed stories on mobile', async ({ page }) => {
+    page.setViewportSize({ width: 320, height: 800 });
+    await page.goto(storybookUrl);
+    await new SbPage(page, expect).waitUntilLoaded();
+
+    await page.click('button[title="Open navigation menu"]');
+
+    // Expect that composed Storybooks are visible
+    await expect(page.getByTitle('Storybook 8.0.0')).toBeVisible();
+    await expect(page.getByTitle('Storybook 7.6.18')).toBeVisible();
+
+    // Expect composed stories to be available in the sidebar
+    await page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]').click();
+    await expect(
+      page.locator('[id="storybook\\@8\\.0\\.0_components-badge--default"]')
+    ).toBeVisible();
+
+    await page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]').click();
+    await expect(
+      page.locator('[id="storybook\\@7\\.6\\.18_components-badge--default"]')
+    ).toBeVisible();
+
+    // Expect composed stories `to be available in the search
+    await page.getByPlaceholder('Find components').fill('Button');
     await expect(
       page.getByRole('option', { name: 'Button Storybook 7.6.18 / @blocks / examples' })
     ).toBeVisible();
+
+    const buttonStory = page.getByRole('option', {
+      name: 'Button Storybook 8.0.0 / @blocks / examples',
+    });
+    await expect(buttonStory).toBeVisible();
+    await buttonStory.click();
+
+    // Note: this could potentially be flaky due to it accessing a hosted Storybook
+    await expect(
+      page
+        .locator('iframe[title="storybook-ref-storybook\\@8\\.0\\.0"]')
+        .contentFrame()
+        .getByRole('heading', { name: 'Example button component' })
+    ).toBeVisible({ timeout: 15000 });
   });
 });