Merge pull request #24963 from github/repo-sync

repo sync

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', () => {

tests/fixtures/content/get-started/liquid/index.md

@@ -17,4 +17,5 @@ children:
   - /table-row-headers
   - /ifversion
   - /links-with-liquid
+  - /tool-specific
 ---

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 %}

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')