diff --git a/e2e/desktop-layout-component.spec.ts b/e2e/desktop-layout.spec.ts similarity index 53% rename from e2e/desktop-layout-component.spec.ts rename to e2e/desktop-layout.spec.ts index 765e0c6f653..b0d0f0798e7 100644 --- a/e2e/desktop-layout-component.spec.ts +++ b/e2e/desktop-layout.spec.ts @@ -3,10 +3,18 @@ import { test, expect } from '@playwright/test'; test.use({ storageState: 'playwright/.auth/certified-user.json' }); test.describe('Classic challenge - 3 pane desktop layout component', () => { + test.skip( + ({ isMobile }) => isMobile === true, + 'Skip testing on mobile as this component is only used for desktop' + ); + test('The page has desktop layout with instructions/editor/preview pane', async ({ - page, - isMobile + page }) => { + await page.goto( + 'learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form' + ); + const desktopLayout = page.getByTestId('desktop-layout'); const actionRow = desktopLayout.getByTestId('action-row'); const tabsRow = desktopLayout.getByTestId('tabs-row'); @@ -15,34 +23,24 @@ test.describe('Classic challenge - 3 pane desktop layout component', () => { 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' - ); - - 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(); - } + 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.skip( + ({ isMobile }) => isMobile === true, + 'Skip testing on mobile as this component is only used for desktop' + ); + test('The page has desktop layout with instructions/editor pane', async ({ - page, - isMobile + page }) => { await page.goto( 'learn/javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers' @@ -56,22 +54,12 @@ test.describe('Classic challenge - 2 pane desktop layout component', () => { const editorPane = desktopLayout.getByTestId('editor-pane'); const previewPane = desktopLayout.getByTestId('preview-pane'); - 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(); - } + 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(); }); });