forked from freeCodeCamp/freeCodeCamp
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test: simplify action-row spec (freeCodeCamp#54501)
- Loading branch information
1 parent
55f8dcc
commit fcf577e
Showing
1 changed file
with
90 additions
and
115 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,137 +1,112 @@ | ||
| import { test, expect, type Page, type Locator } from '@playwright/test'; | ||
| import { test, expect } from '@playwright/test'; | ||
| import translations from '../client/i18n/locales/english/translations.json'; | ||
|
|
||
| const challengeButtons = [ | ||
| 'Instructions', | ||
| 'index.html', | ||
| 'styles.css', | ||
| 'Console' | ||
| ]; | ||
| const buttonNames = ['Instructions', 'index.html', 'styles.css', 'Console']; | ||
|
|
||
| const editorButtons = ['index.html', 'styles.css']; | ||
| test.describe('Desktop view', () => { | ||
| test.skip(({ isMobile }) => isMobile, 'Only test on desktop'); | ||
|
|
||
| test.beforeEach(async ({ page }) => { | ||
| await page.goto( | ||
| '/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form' | ||
| ); | ||
| }); | ||
| test.describe('Pages with previews', () => { | ||
| test.beforeEach(async ({ page }) => { | ||
| await page.goto( | ||
| '/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form' | ||
| ); | ||
| }); | ||
|
|
||
| function getActionRowLocator(page: Page): Locator { | ||
| return page.getByTestId('action-row'); | ||
| } | ||
| test('Action row buttons are visible', async ({ page }) => { | ||
| const previewPaneButton = page.getByTestId('preview-pane-button'); | ||
| const previewPortalButton = page.getByRole('button', { | ||
| name: translations.aria['move-preview-to-new-window'] | ||
| }); | ||
| const actionRow = page.getByTestId('action-row'); | ||
|
|
||
| function getTabsRowLocator(page: Page): Locator { | ||
| return page.getByTestId('action-row'); | ||
| } | ||
| for (const name of buttonNames) { | ||
| await expect(actionRow.getByRole('button', { name })).toBeVisible(); | ||
| } | ||
|
|
||
| test('Action row buttons are visible', async ({ isMobile, page }) => { | ||
| const previewPaneButton = page.getByTestId('preview-pane-button'); | ||
| const previewPortalButton = page.getByRole('button', { | ||
| name: translations.aria['move-preview-to-new-window'] | ||
| }); | ||
| const actionRow = getActionRowLocator(page); | ||
| const tabsRow = getTabsRowLocator(page); | ||
| await expect(previewPaneButton).toBeVisible(); | ||
| await expect(previewPortalButton).toBeVisible(); | ||
| }); | ||
|
|
||
| // 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(previewPaneButton).toBeVisible(); | ||
| await expect(previewPortalButton).toBeVisible(); | ||
| } | ||
| }); | ||
| test('Clicking instructions button hides instructions panel, but not any buttons', async ({ | ||
| page | ||
| }) => { | ||
| const instructionsButton = page.getByTestId('instructions-button'); | ||
| const actionRow = page.getByTestId('action-row'); | ||
|
|
||
| test('Clicking instructions button hides instructions panel, but not 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).toBeVisible(); | ||
| } | ||
|
|
||
| const instructionsPanelTitle = page.getByRole('heading', { | ||
| name: 'Build a Survey Form' | ||
| // Click instructions button to hide instructions panel | ||
| await instructionsButton.click(); | ||
|
|
||
| for (const name of buttonNames) { | ||
| await expect(actionRow.getByRole('button', { name })).toBeVisible(); | ||
| } | ||
|
|
||
| const instructionsPanelTitle = page.getByRole('heading', { | ||
| name: 'Build a Survey Form' | ||
| }); | ||
| await expect(instructionsPanelTitle).toBeHidden(); | ||
| }); | ||
| 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' }); | ||
| test('Clicking Console button shows console panel', async ({ page }) => { | ||
| const actionRow = page.getByTestId('action-row'); | ||
| const consoleBtn = actionRow.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(); | ||
| } | ||
| }); | ||
| // Click the console button to show the console panel | ||
| await consoleBtn.click(); | ||
| const consolePanel = page.getByLabel('Console'); | ||
| await expect(consolePanel).toBeVisible(); | ||
| }); | ||
|
|
||
| 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); | ||
| test('Clicking Preview Pane button hides preview', async ({ page }) => { | ||
| const previewButton = page.getByTestId('preview-pane-button'); | ||
| const previewFrame = page.getByTitle('challenge preview'); | ||
|
|
||
| if (isMobile) { | ||
| await expect(actionRow).toBeHidden(); | ||
| } else { | ||
| await previewButton.click(); | ||
| await expect(previewFrame).toBeHidden(); | ||
| } | ||
| }); | ||
| await previewButton.click(); | ||
| await expect(previewFrame).toBeHidden(); | ||
| }); | ||
|
|
||
| test('Clicking Preview Portal button opens the preview in a new tab', async ({ | ||
| page | ||
| }) => { | ||
| const previewPortalButton = page.getByRole('button', { | ||
| name: translations.aria['move-preview-to-new-window'] | ||
| }); | ||
| const browserContext = page.context(); | ||
| test('Clicking Preview Portal button opens the preview in a new tab', async ({ | ||
| page | ||
| }) => { | ||
| const previewPortalButton = page.getByRole('button', { | ||
| name: translations.aria['move-preview-to-new-window'] | ||
| }); | ||
| const browserContext = page.context(); | ||
|
|
||
| const [newPage] = await Promise.all([ | ||
| browserContext.waitForEvent('page'), | ||
| previewPortalButton.click() | ||
| ]); | ||
|
|
||
| const [newPage] = await Promise.all([ | ||
| browserContext.waitForEvent('page'), | ||
| previewPortalButton.click() | ||
| ]); | ||
| await newPage.waitForLoadState(); | ||
|
|
||
| await newPage.waitForLoadState(); | ||
| await expect(newPage).toHaveURL('about:blank'); | ||
|
|
||
| await expect(newPage).toHaveURL('about:blank'); | ||
| await newPage.close(); | ||
| }); | ||
| }); | ||
|
|
||
| await newPage.close(); | ||
| test.describe('Pages without previews', () => { | ||
| test('Preview Buttons should not appear when preview is disabled', async ({ | ||
| page | ||
| }) => { | ||
| await page.goto( | ||
| '/learn/javascript-algorithms-and-data-structures-v8/learn-introductory-javascript-by-building-a-pyramid-generator/step-1' | ||
| ); | ||
| const previewButton = page.getByTestId('preview-pane-button'); | ||
| await expect(previewButton).toHaveCount(0); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| test('Preview Buttons should not appear when preview is disabled', async ({ | ||
| page | ||
| }) => { | ||
| await page.goto( | ||
| '/learn/javascript-algorithms-and-data-structures-v8/learn-introductory-javascript-by-building-a-pyramid-generator/step-1' | ||
| ); | ||
| const previewButton = page.getByTestId('preview-pane-button'); | ||
| await expect(previewButton).toHaveCount(0); | ||
| test.describe('Mobile view', () => { | ||
| test.skip(({ isMobile }) => !isMobile, 'Only test on mobile'); | ||
|
|
||
| test('Action row is hidden', async ({ page }) => { | ||
| await page.goto( | ||
| '/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form' | ||
| ); | ||
| const actionRow = page.getByTestId('action-row'); | ||
| await expect(actionRow).toBeHidden(); | ||
| }); | ||
| }); |