From fc08f5dbd735df2fd22b3678b81cd152120f9d6a Mon Sep 17 00:00:00 2001
From: Robert Sese <734194+rsese@users.noreply.github.com>
Date: Wed, 19 Apr 2023 12:30:53 -0500
Subject: [PATCH] add responsive lg + xl playwrights tests  (#36480)

---
 tests/browser/browser.js                      | 47 -------------------
 .../playwright-rendering.spec.ts              | 45 ++++++++++++++++++
 2 files changed, 45 insertions(+), 47 deletions(-)

diff --git a/tests/browser/browser.js b/tests/browser/browser.js
index 58693ced91..e433c97bc3 100644
--- a/tests/browser/browser.js
+++ b/tests/browser/browser.js
@@ -145,53 +145,6 @@ describe('browser search', () => {
   })
 })
 
-describe('large -> x-large viewports - 1012+', () => {
-  jest.setTimeout(60 * 1000)
-  it('version picker is visible in header', async () => {
-    await page.setViewport({ width: 1013, height: 700 })
-    await page.goto('http://localhost:4000/en/actions')
-    await page.click('[data-testid=version-picker]')
-    const versionItems = await page.$$('[data-testid=version-picker-item]')
-    expect(versionItems.length).toBeGreaterThan(0)
-  })
-
-  it('language picker is visible in header', async () => {
-    await page.goto('http://localhost:4000/en/actions')
-    const languagePickerElement = await page.$$('[data-testid=language-picker]')
-    expect(languagePickerElement.length).toBe(1)
-  })
-
-  it('sign up button is visible in header', async () => {
-    const signUpElement = await page.$('[data-testid=header-signup]')
-    const signUpValue = await signUpElement.evaluate((el) => el.textContent)
-    expect(signUpValue).toBe('Sign up')
-  })
-})
-
-describe('large viewports - 1012-1279', () => {
-  jest.setTimeout(60 * 1000)
-  it('hamburger button for sidebar overlay is visible', async () => {
-    await page.setViewport({ width: 1013, height: 700 })
-    await page.goto('http://localhost:4000/en/actions')
-    await page.click('[data-testid=sidebar-hamburger]')
-    const sidebarElement = await page.$('[data-testid=sidebar-product-dialog]')
-    const sideBarValue = await sidebarElement.evaluate((el) => el.textContent)
-    expect(sideBarValue).toBe('GitHub Actions')
-  })
-
-  it('breadcrumbs show up in the header', async () => {
-    await page.goto(
-      'http://localhost:4000/en/enterprise-cloud@latest/admin/identity-and-access-management/managing-iam-for-your-enterprise/about-authentication-for-your-enterprise'
-    )
-    const breadcrumbsElement = await page.$$('[data-testid=breadcrumbs-header] ul li')
-    const breadcrumbsMissingElement = await page.$$(
-      '[data-testid=breadcrumbs-header] ul li .d-none'
-    )
-    expect(breadcrumbsMissingElement.length).toBe(0)
-    expect(breadcrumbsElement.length).toBe(4)
-  })
-})
-
 describe('medium viewports - 768-1011', () => {
   jest.setTimeout(60 * 1000)
   it('version picker is visible', async () => {
diff --git a/tests/rendering-fixtures/playwright-rendering.spec.ts b/tests/rendering-fixtures/playwright-rendering.spec.ts
index 8fedd5fbd5..160cff872e 100644
--- a/tests/rendering-fixtures/playwright-rendering.spec.ts
+++ b/tests/rendering-fixtures/playwright-rendering.spec.ts
@@ -253,3 +253,48 @@ test('x-large viewports - 1280+', async ({ page }) => {
   await expect(page.getByTestId('breadcrumbs-in-article').getByText('Foo')).toBeVisible()
   await expect(page.getByTestId('breadcrumbs-in-article').getByText('Bar')).not.toBeVisible()
 })
+
+test('large -> x-large viewports - 1012+', async ({ page }) => {
+  page.setViewportSize({
+    width: 1013,
+    height: 700,
+  })
+  await page.goto('/get-started/foo/bar')
+
+  // version picker should be visible
+  await page
+    .getByRole('button', {
+      name: 'Select GitHub product version: current version is free-pro-team@latest',
+    })
+    .click()
+  expect((await page.getByRole('menuitemradio').all()).length).toBeGreaterThan(0)
+  await expect(page.getByRole('menuitemradio', { name: 'Enterprise Cloud' })).toBeVisible()
+
+  // language picker is visible
+  // TODO: currently no languages enabled for headless tests
+  // await page.getByRole('button', { name: 'Select language: current language is English' }).click()
+  // await expect(page.getByRole('menuitemradio', { name: 'English' })).toBeVisible()
+
+  // header sign up button is visible
+  await expect(page.getByTestId('header-signup')).toBeVisible()
+})
+
+test('large viewports - 1012-1279', async ({ page }) => {
+  page.setViewportSize({
+    width: 1013,
+    height: 700,
+  })
+  await page.goto('/get-started/foo/bar')
+
+  // breadcrumbs show up in the header, for this page we should have
+  // 3 items 'Get Started / Foo / Bar'
+  // in-article breadcrumbs don't show up
+  await expect(page.getByTestId('breadcrumbs-header')).toBeVisible()
+  expect(await page.getByTestId('breadcrumbs-header').getByRole('link').all()).toHaveLength(3)
+  await expect(page.getByTestId('breadcrumbs-in-article')).not.toBeVisible()
+
+  // hamburger button for sidebar overlay is visible
+  await expect(page.getByTestId('sidebar-hamburger')).toBeVisible()
+  await page.getByTestId('sidebar-hamburger').click()
+  await expect(page.getByTestId('sidebar-product-dialog')).toBeVisible()
+})