From d6cd19f567a66acc76e0ccfb4163b176ccdc22ee Mon Sep 17 00:00:00 2001
From: Rahul Suresh <22114682+rahulsuresh-git@users.noreply.github.com>
Date: Thu, 30 Nov 2023 02:39:30 -0600
Subject: [PATCH] fix(e2e, playwright): resolved mobile test failures on
 desktop-layout-component.spec.ts (#52439)

---
 e2e/desktop-layout-component.spec.ts | 82 ++++++++++++++++------------
 1 file changed, 47 insertions(+), 35 deletions(-)

diff --git a/e2e/desktop-layout-component.spec.ts b/e2e/desktop-layout-component.spec.ts
index d1dde65f957..765e0c6f653 100644
--- a/e2e/desktop-layout-component.spec.ts
+++ b/e2e/desktop-layout-component.spec.ts
@@ -4,62 +4,74 @@ test.use({ storageState: 'playwright/.auth/certified-user.json' });
 
 test.describe('Classic challenge - 3 pane desktop layout component', () => {
   test('The page has desktop layout with instructions/editor/preview pane', async ({
-    page
+    page,
+    isMobile
   }) => {
+    const desktopLayout = page.getByTestId('desktop-layout');
+    const actionRow = desktopLayout.getByTestId('action-row');
+    const tabsRow = desktopLayout.getByTestId('tabs-row');
+    const reflexContainer = desktopLayout.getByTestId('main-container');
+    const instructionPane = desktopLayout.getByTestId('instruction-pane');
+    const editorPane = desktopLayout.getByTestId('editor-pane');
+    const previewPane = desktopLayout.getByTestId('preview-pane');
+
     await page.goto(
       'learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form'
     );
 
-    const desktopLayout = page.getByTestId('desktop-layout');
-    await expect(desktopLayout).toBeVisible();
-
-    const actionRow = desktopLayout.getByTestId('action-row');
-    await expect(actionRow).toBeVisible();
-
-    const tabsRow = desktopLayout.getByTestId('tabs-row');
-    await expect(tabsRow).toBeVisible();
-
-    const reflexContainer = desktopLayout.getByTestId('main-container');
-    await expect(reflexContainer).toBeVisible();
-
-    const instructionPane = desktopLayout.getByTestId('instruction-pane');
-    await expect(instructionPane).toBeVisible();
-
-    const editorPane = desktopLayout.getByTestId('editor-pane');
-    await expect(editorPane).toBeVisible();
-
-    const previewPane = desktopLayout.getByTestId('preview-pane');
-    await expect(previewPane).toBeVisible();
+    if (isMobile) {
+      await expect(desktopLayout).toBeHidden();
+      await expect(actionRow).toBeHidden();
+      await expect(tabsRow).toBeHidden();
+      await expect(reflexContainer).toBeHidden();
+      await expect(instructionPane).toBeHidden();
+      await expect(editorPane).toBeHidden();
+      await expect(previewPane).toBeHidden();
+    } else {
+      await expect(desktopLayout).toBeVisible();
+      await expect(actionRow).toBeVisible();
+      await expect(tabsRow).toBeVisible();
+      await expect(reflexContainer).toBeVisible();
+      await expect(instructionPane).toBeVisible();
+      await expect(editorPane).toBeVisible();
+      await expect(previewPane).toBeVisible();
+    }
   });
 });
 
 test.describe('Classic challenge - 2 pane desktop layout component', () => {
   test('The page has desktop layout with instructions/editor pane', async ({
-    page
+    page,
+    isMobile
   }) => {
     await page.goto(
       'learn/javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers'
     );
 
     const desktopLayout = page.getByTestId('desktop-layout');
-    await expect(desktopLayout).toBeVisible();
-
     const actionRow = desktopLayout.getByTestId('action-row');
-    await expect(actionRow).not.toBeVisible();
-
     const tabsRow = desktopLayout.getByTestId('tabs-row');
-    await expect(tabsRow).not.toBeVisible();
-
     const reflexContainer = desktopLayout.getByTestId('main-container');
-    await expect(reflexContainer).toBeVisible();
-
     const instructionPane = desktopLayout.getByTestId('instruction-pane');
-    await expect(instructionPane).toBeVisible();
-
     const editorPane = desktopLayout.getByTestId('editor-pane');
-    await expect(editorPane).toBeVisible();
-
     const previewPane = desktopLayout.getByTestId('preview-pane');
-    await expect(previewPane).not.toBeVisible();
+
+    if (isMobile) {
+      await expect(desktopLayout).toBeHidden();
+      await expect(actionRow).toBeHidden();
+      await expect(tabsRow).toBeHidden();
+      await expect(reflexContainer).toBeHidden();
+      await expect(instructionPane).toBeHidden();
+      await expect(editorPane).toBeHidden();
+      await expect(previewPane).toBeHidden();
+    } else {
+      await expect(desktopLayout).toBeVisible();
+      await expect(actionRow).toBeHidden();
+      await expect(tabsRow).toBeHidden();
+      await expect(reflexContainer).toBeVisible();
+      await expect(instructionPane).toBeVisible();
+      await expect(editorPane).toBeVisible();
+      await expect(previewPane).toBeHidden();
+    }
   });
 });