diff --git a/tests/browser/browser.js b/tests/browser/browser.js index 7736ab92e0..0f5320435d 100644 --- a/tests/browser/browser.js +++ b/tests/browser/browser.js @@ -336,95 +336,6 @@ describe('survey', () => { }) }) -describe('tool specific content', () => { - const pageWithSingleSwitcher = - 'http://localhost:4000/en/actions/managing-workflow-runs/manually-running-a-workflow' - const pageWithoutSwitcher = - 'http://localhost:4000/en/billing/managing-billing-for-github-sponsors/about-billing-for-github-sponsors' - const pageWithMultipleSwitcher = - 'http://localhost:4000/en/issues/trying-out-the-new-projects-experience/using-the-api-to-manage-projects' - - it('should have a tool switcher if a tool switcher is included', async () => { - await page.goto(pageWithSingleSwitcher) - const nav = await page.$$('[data-testid="tool-picker"]') - const switches = await page.$$('[data-testid="tool-picker"] div a') - const selectedSwitch = await page.$$('[data-testid="tool-picker"] div a.PRC-selected') - expect(nav).toHaveLength(1) - expect(switches.length).toBeGreaterThan(1) - expect(selectedSwitch).toHaveLength(1) - }) - - it('should NOT have a tool switcher if no tool switcher is included', async () => { - await page.goto(pageWithoutSwitcher) - const nav = await page.$$('[data-testid="tool-picker"]') - const switches = await page.$$('[data-testid="tool-picker"] div a') - const selectedSwitch = await page.$$('[data-testid="tool-picker"] div a.PRC-selected') - expect(nav).toHaveLength(0) - expect(switches).toHaveLength(0) - expect(selectedSwitch).toHaveLength(0) - }) - - it('should use cli if no defaultTool is specified and if webui is not one of the tools', async () => { - await page.goto(pageWithMultipleSwitcher) - const selectedToolElement = await page.waitForSelector( - '[data-testid="tool-picker"] div a.PRC-selected' - ) - const selectedTool = await page.evaluate((el) => el.textContent, selectedToolElement) - expect(selectedTool).toBe('GitHub CLI') - }) - - it('should use webui if no defaultTool is specified and if webui is one of the tools', async () => { - await page.goto(pageWithSingleSwitcher) - const selectedToolElement = await page.waitForSelector( - '[data-testid="tool-picker"] div a.PRC-selected' - ) - const selectedTool = await page.evaluate((el) => el.textContent, selectedToolElement) - expect(selectedTool).toBe('Web browser') - }) - - it('should use the recorded user selection', async () => { - // With no user data, the selected tool is GitHub.com - await page.goto(pageWithSingleSwitcher) - let selectedToolElement = await page.waitForSelector( - '[data-testid="tool-picker"] div a.PRC-selected' - ) - let selectedTool = await page.evaluate((el) => el.textContent, selectedToolElement) - expect(selectedTool).toBe('Web browser') - - await page.click('[data-testid="tool-picker"] [data-tool="cli"]') - - // Revisiting the page after CLI is selected results in CLI as the selected tool - await page.goto(pageWithSingleSwitcher) - selectedToolElement = await page.waitForSelector( - '[data-testid="tool-picker"] div a.PRC-selected' - ) - selectedTool = await page.evaluate((el) => el.textContent, selectedToolElement) - expect(selectedTool).toBe('GitHub CLI') - }) - - it('should show the content for the selected tool only', async () => { - await page.goto(pageWithSingleSwitcher) - - const tools = ['webui', 'cli'] - for (const tool of tools) { - await page.click(`[data-tool="${tool}"]`) - - // content for selected tool is expected to become visible - await page.waitForSelector(`.extended-markdown.${tool}`, { visible: true, timeout: 3000 }) - - // only a single tab should be selected - const selectedSwitch = await page.$$('[data-testid="tool-picker"] div a.PRC-selected') - expect(selectedSwitch).toHaveLength(1) - - // content for NOT selected tools is expected to become hidden - const otherTools = tools.filter((e) => e !== tool) - for (const other of otherTools) { - await page.waitForSelector(`.extended-markdown.${other}`, { hidden: true, timeout: 3000 }) - } - } - }) -}) - // Skipping because next/links are disabled by default for now // Docs Engineering issue: 962 describe.skip('next/link client-side navigation', () => { diff --git a/tests/fixtures/content/get-started/liquid/index.md b/tests/fixtures/content/get-started/liquid/index.md index e4b8565566..aef559efb1 100644 --- a/tests/fixtures/content/get-started/liquid/index.md +++ b/tests/fixtures/content/get-started/liquid/index.md @@ -17,4 +17,5 @@ children: - /table-row-headers - /ifversion - /links-with-liquid + - /tool-specific --- diff --git a/tests/fixtures/content/get-started/liquid/tool-specific.md b/tests/fixtures/content/get-started/liquid/tool-specific.md new file mode 100644 index 0000000000..7f04044331 --- /dev/null +++ b/tests/fixtures/content/get-started/liquid/tool-specific.md @@ -0,0 +1,35 @@ +--- +title: Tool switching Liquid tags +intro: Demonstrates the HTML that becomes of a the different tool Liquid tags like `webui`, `cli`, and `codespaces` +defaultTool: desktop +versions: + fpt: '*' + ghes: '*' + ghae: '*' + ghec: '*' +type: tutorial +--- + +## Running a workflow + +This page has a tool switcher + +{% webui %} + +1. this is webui content + +{% endwebui %} + +{% cli %} + +this is cli content + +```shell +cli content +``` + +{% endcli %} + +{% desktop %} + this is desktop content +{% enddesktop %} \ No newline at end of file diff --git a/tests/rendering-fixtures/playwright-rendering.spec.ts b/tests/rendering-fixtures/playwright-rendering.spec.ts index b58db2f9ff..b07db8a78c 100644 --- a/tests/rendering-fixtures/playwright-rendering.spec.ts +++ b/tests/rendering-fixtures/playwright-rendering.spec.ts @@ -80,6 +80,43 @@ test.describe('platform picker', () => { }) }) +test.describe('tool picker', () => { + test('switch tools', async ({ page }) => { + await page.goto('/get-started/liquid/tool-specific') + + await page.getByTestId('tool-picker').getByRole('link', { name: 'GitHub CLI' }).click() + await expect(page).toHaveURL(/\?tool=cli/) + await expect(page.getByText('this is cli content')).toBeVisible() + await expect(page.getByText('this is webui content')).not.toBeVisible() + + await page.getByTestId('tool-picker').getByRole('link', { name: 'Web browser' }).click() + await expect(page).toHaveURL(/\?tool=webui/) + await expect(page.getByText('this is cli content')).not.toBeVisible() + await expect(page.getByText('this is desktop content')).not.toBeVisible() + await expect(page.getByText('this is webui content')).toBeVisible() + }) + + test('prefer default tool', async ({ page }) => { + await page.goto('/get-started/liquid/tool-specific') + + // defaultTool is set in the fixture frontmatter + await expect(page.getByText('this is desktop content')).toBeVisible() + await expect(page.getByText('this is webui content')).not.toBeVisible() + await expect(page.getByText('this is cli content')).not.toBeVisible() + }) + + test('remember last clicked tool', async ({ page }) => { + await page.goto('/get-started/liquid/tool-specific') + await page.getByTestId('tool-picker').getByRole('link', { name: 'Web browser' }).click() + + // Return and now the cookie should start us off with Web UI content again + await page.goto('/get-started/liquid/tool-specific') + await expect(page.getByText('this is cli content')).not.toBeVisible() + await expect(page.getByText('this is desktop content')).not.toBeVisible() + await expect(page.getByText('this is webui content')).toBeVisible() + }) +}) + test('filter article cards', async ({ page }) => { await page.goto('/code-security/guides') const articleCards = page.getByTestId('article-cards')