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