Add browser tests for tool selector (#19124)

Co-authored-by: James M. Greene <JamesMGreene@github.com>

tests/browser/browser.js

@@ -248,6 +248,116 @@ describe('platform specific content', () => {
   })
 })
 
+describe('tool specific content', () => {
+  const pageWithSingleSwitcher = 'http://localhost:4001/en/actions/managing-workflow-runs/manually-running-a-workflow'
+  const pageWithoutSwitcher = 'http://localhost:4001/en/billing/managing-billing-for-github-sponsors/about-billing-for-github-sponsors'
+  const pageWithMultipleSwitcher = 'http://localhost:4001/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.$$('nav#tool-switcher')
+    const switches = await page.$$('a.tool-switcher')
+    const selectedSwitch = await page.$$('a.tool-switcher.selected')
+    expect(nav).toHaveLength(1)
+    expect(switches.length).toBeGreaterThan(1)
+    expect(selectedSwitch).toHaveLength(1)
+  })
+
+  it('should have multiple tool switchers if multiple tools switchers are included', async () => {
+    await page.goto(pageWithMultipleSwitcher)
+    const toolSelector = await page.$$('nav#tool-switcher')
+    const switches = await page.$$('a.tool-switcher')
+    const selectedSwitch = await page.$$('a.tool-switcher.selected')
+    console.log(switches.length)
+    expect(toolSelector.length).toBeGreaterThan(1)
+    expect(switches.length).toBeGreaterThan(1)
+    expect(selectedSwitch.length).toEqual(toolSelector.length)
+  })
+
+  it('should NOT have a tool switcher if no tool switcher is included', async () => {
+    await page.goto(pageWithoutSwitcher)
+    const toolSelector = await page.$$('nav#tool-switcher')
+    const switches = await page.$$('a.tool-switcher')
+    const selectedSwitch = await page.$$('a.tool-switcher.selected')
+    expect(toolSelector).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('a.tool-switcher.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('a.tool-switcher.selected')
+    const selectedTool = await page.evaluate(el => el.textContent, selectedToolElement)
+    expect(selectedTool).toBe('GitHub.com')
+  })
+
+  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('a.tool-switcher.selected')
+    let selectedTool = await page.evaluate(el => el.textContent, selectedToolElement)
+    expect(selectedTool).toBe('GitHub.com')
+
+    await page.click(`.tool-switcher[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('a.tool-switcher.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(`.tool-switcher[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.$$('a.tool-switcher.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 })
+      }
+    }
+  })
+
+  it('selecting a tool in one switcher will control all tool switchers on the page', async () => {
+    await page.goto(pageWithMultipleSwitcher)
+
+    const tools = { cli: 'GitHub CLI', curl: 'cURL' }
+    for (const [tool, toolName] of Object.entries(tools)) {
+      await page.click(`.tool-switcher[data-tool="${tool}"]`)
+
+      // content for selected tool is expected to become visible
+      await page.waitForSelector(`.extended-markdown.${tool}`, { visible: true, timeout: 3000 })
+
+      // all tabs should be selected
+      const toolSelector = await page.$$('nav#tool-switcher')
+      const selectedSwitch = await page.$$('a.tool-switcher.selected')
+      expect(selectedSwitch).toHaveLength(toolSelector.length)
+
+      const selectedToolElement = await page.waitForSelector('a.tool-switcher.selected')
+      const selectedTool = await page.evaluate(el => el.textContent, selectedToolElement)
+      expect(selectedTool).toBe(toolName)
+    }
+  })
+})
+
 describe('code examples', () => {
   it('loads correctly', async () => {
     await page.goto('http://localhost:4001/en/actions')