From b671aaf89f5a4d8dfbda52c23490940716fac2f0 Mon Sep 17 00:00:00 2001
From: Sarah Edwards <skedwards88@github.com>
Date: Tue, 20 Jul 2021 08:48:18 -0700
Subject: [PATCH] Add browser tests for tool selector (#19124)

Co-authored-by: James M. Greene <JamesMGreene@github.com>
---
 tests/browser/browser.js | 110 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 110 insertions(+)

diff --git a/tests/browser/browser.js b/tests/browser/browser.js
index 27a5b8ded2..98ec27e80a 100644
--- a/tests/browser/browser.js
+++ b/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')