From a7e116af3e0770714738b05a04ee6b23de566412 Mon Sep 17 00:00:00 2001
From: weilirs <62249815+weilirs@users.noreply.github.com>
Date: Tue, 21 Nov 2023 06:19:40 -0600
Subject: [PATCH] test(e2e, playwright): action-row improvements(modified the
 first test and added a test for Preview Portal button) (#52387)

---
 .../Challenges/classic/action-row.tsx         |  3 +-
 e2e/action-row.spec.ts                        | 32 ++++++++++++++++---
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/client/src/templates/Challenges/classic/action-row.tsx b/client/src/templates/Challenges/classic/action-row.tsx
index b0fcbb2f848..41e4ecad727 100644
--- a/client/src/templates/Challenges/classic/action-row.tsx
+++ b/client/src/templates/Challenges/classic/action-row.tsx
@@ -78,7 +78,7 @@ const ActionRow = ({
             </button>
           )}
           <button
-            data-playwright-test-label='preview-button'
+            data-playwright-test-label='preview-pane-button'
             aria-expanded={!!showPreviewPane}
             onClick={() => togglePane('showPreviewPane')}
           >
@@ -86,6 +86,7 @@ const ActionRow = ({
             <span aria-hidden='true'>{t('learn.editor-tabs.preview')}</span>
           </button>
           <button
+            data-playwright-test-label='preview-portal-button'
             aria-expanded={!!showPreviewPortal}
             onClick={() => togglePane('showPreviewPortal')}
           >
diff --git a/e2e/action-row.spec.ts b/e2e/action-row.spec.ts
index b555c2a359e..28250b2b81c 100644
--- a/e2e/action-row.spec.ts
+++ b/e2e/action-row.spec.ts
@@ -24,7 +24,8 @@ function getTabsRowLocator(page: Page): Locator {
 }
 
 test('Action row buttons are visible', async ({ isMobile, page }) => {
-  const previewFrame = page.getByTitle('challenge preview');
+  const previewPaneButton = page.getByTestId('preview-pane-button');
+  const previewPortalButton = page.getByTestId('preview-portal-button');
   const actionRow = getActionRowLocator(page);
   const tabsRow = getTabsRowLocator(page);
 
@@ -37,7 +38,9 @@ test('Action row buttons are visible', async ({ isMobile, page }) => {
       const btn = tabsRow.getByRole('button', { name: challengeButtons[i] });
       await expect(btn).toBeVisible();
     }
-    await expect(previewFrame).toBeVisible();
+
+    await expect(previewPaneButton).toBeVisible();
+    await expect(previewPortalButton).toBeVisible();
   }
 });
 
@@ -84,8 +87,11 @@ test('Clicking Console button shows console panel', async ({
   }
 });
 
-test('Clicking Preview button hides preview', async ({ isMobile, page }) => {
-  const previewButton = page.getByTestId('preview-button');
+test('Clicking Preview Pane button hides preview', async ({
+  isMobile,
+  page
+}) => {
+  const previewButton = page.getByTestId('preview-pane-button');
   const previewFrame = page.getByTitle('challenge preview');
   const actionRow = getActionRowLocator(page);
 
@@ -96,3 +102,21 @@ test('Clicking Preview button hides preview', async ({ isMobile, page }) => {
     await expect(previewFrame).toBeHidden();
   }
 });
+
+test('Clicking Preview Portal button opens the preview in a new tab', async ({
+  page
+}) => {
+  const previewPortalButton = page.getByTestId('preview-portal-button');
+  const browserContext = page.context();
+
+  const [newPage] = await Promise.all([
+    browserContext.waitForEvent('page'),
+    previewPortalButton.click()
+  ]);
+
+  await newPage.waitForLoadState();
+
+  await expect(newPage).toHaveURL('about:blank');
+
+  await newPage.close();
+});