test(e2e,playwright): action-row (#51844)

Co-authored-by: Ahmad <57593864+Ahmadkashif@users.noreply.github.com>

client/src/templates/Challenges/classic/action-row.tsx

@@ -50,17 +50,18 @@ const ActionRow = ({
   }
 
   return (
-    <div className='action-row'>
-      <div className='tabs-row'>
+    <div className='action-row' data-playwright-test-label='action-row'>
+      <div className='tabs-row' data-playwright-test-label='tabs-row'>
         {!isProjectBasedChallenge && (
           <button
+            data-playwright-test-label='instructions-button'
             aria-expanded={!!showInstructions}
             onClick={() => togglePane('showInstructions')}
           >
             {t('learn.editor-tabs.instructions')}
           </button>
         )}
-        <EditorTabs />
+        <EditorTabs data-playwright-test-label='editor-tabs' />
         <div className='panel-display-tabs'>
           <button
             aria-expanded={!!showConsole}
@@ -77,6 +78,7 @@ const ActionRow = ({
             </button>
           )}
           <button
+            data-playwright-test-label='preview-button'
             aria-expanded={!!showPreviewPane}
             onClick={() => togglePane('showPreviewPane')}
           >

e2e/action-row.spec.ts

@@ -0,0 +1,101 @@
+import { test, expect, type Page, type Locator } from '@playwright/test';
+
+const challengeButtons = [
+  'Instructions',
+  'index.html',
+  'styles.css',
+  'Console'
+];
+
+const editorButtons = ['index.html', 'styles.css'];
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(
+    '/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form'
+  );
+});
+test.afterEach(async ({ page }) => {
+  await page.close();
+});
+
+function getActionRowLocator(page: Page): Locator {
+  return page.getByTestId('action-row');
+}
+
+function getTabsRowLocator(page: Page): Locator {
+  return page.getByTestId('action-row');
+}
+
+test('Action row buttons are visible', async ({ isMobile, page }) => {
+  const previewFrame = page.getByTitle('challenge preview');
+  const actionRow = getActionRowLocator(page);
+  const tabsRow = getTabsRowLocator(page);
+
+  // if it's mobile action row component does not render
+  if (isMobile) {
+    await expect(actionRow).toBeHidden();
+  } else {
+    const n = challengeButtons.length;
+    for (let i = 0; i < n; i++) {
+      const btn = tabsRow.getByRole('button', { name: challengeButtons[i] });
+      await expect(btn).toBeVisible();
+    }
+    await expect(previewFrame).toBeVisible();
+  }
+});
+
+test('Clicking instructions button hides editor buttons', async ({
+  isMobile,
+  page
+}) => {
+  const instructionsButton = page.getByTestId('instructions-button');
+  const tabsRow = getTabsRowLocator(page);
+
+  if (isMobile) {
+    await expect(tabsRow).toBeHidden();
+  } else {
+    // Click instructions button to hide instructions panel and editor buttons
+    await instructionsButton.click();
+
+    for (let i = 0; i < editorButtons.length; i++) {
+      const btn = tabsRow.getByRole('button', { name: editorButtons[i] });
+      await expect(btn).toBeHidden();
+    }
+
+    const instructionsPanelTitle = page.getByRole('heading', {
+      name: 'Build a Survey Form'
+    });
+    await expect(instructionsPanelTitle).toBeHidden();
+  }
+});
+
+test('Clicking Console button shows console panel', async ({
+  isMobile,
+  page
+}) => {
+  const actionRow = getActionRowLocator(page);
+  const tabsRow = getTabsRowLocator(page);
+  const consoleBtn = tabsRow.getByRole('button', { name: 'Console' });
+
+  if (isMobile) {
+    await expect(actionRow).toBeHidden();
+  } else {
+    // Click the console button to show the console panel
+    await consoleBtn.click();
+    const consolePanel = page.getByLabel('Console');
+    await expect(consolePanel).toBeVisible();
+  }
+});
+
+test('Clicking Preview button hides preview', async ({ isMobile, page }) => {
+  const previewButton = page.getByTestId('preview-button');
+  const previewFrame = page.getByTitle('challenge preview');
+  const actionRow = getActionRowLocator(page);
+
+  if (isMobile) {
+    await expect(actionRow).toBeHidden();
+  } else {
+    await previewButton.click();
+    await expect(previewFrame).toBeHidden();
+  }
+});