Port breadcrumbs rendering tests to fixture content (github#35143)

tests/fixtures/content/early-access/index.md

@@ -0,0 +1,13 @@
+---
+title: Early Access documentation
+hidden: true
+versions: '*'
+children:
+  - /secrets
+---
+
+👋 Hello, local test developer! This page is not visible on production.
+
+These are the Early Access pages for {{ allVersions[currentVersion].versionTitle }}:
+
+{{ earlyAccessPageLinks }}

tests/fixtures/content/early-access/secrets/deeper/index.md

@@ -0,0 +1,7 @@
+---
+title: Deeper secrets
+versions: '*'
+hidden: true
+children:
+  - /mariana-trench
+---

tests/fixtures/content/early-access/secrets/deeper/mariana-trench.md

@@ -0,0 +1,9 @@
+---
+title: Mariana Trench
+versions: '*'
+hidden: true
+---
+
+## This is a deep early-access article
+
+Exists to test stuff like breadcrumbs.

tests/fixtures/content/early-access/secrets/early-days.md

@@ -0,0 +1,8 @@
+---
+title: Early days
+hidden: true
+versions:
+  fpt: '*'
+---
+
+This page is only available in **free, pro, & team**.

tests/fixtures/content/early-access/secrets/index.md

@@ -0,0 +1,8 @@
+---
+title: GitHub Secrets
+versions: '*'
+hidden: true
+children:
+  - /early-days
+  - /deeper
+---

tests/fixtures/content/get-started/quickstart/dynamic-title.md

@@ -0,0 +1,14 @@
+---
+title: '{% ifversion fpt %}Hello{% else %}Greetings{% endif %} {% data variables.product.product_name %}'
+versions:
+  fpt: '*'
+  ghes: '*'
+  ghae: '*'
+  ghec: '*'
+type: quick_start
+---
+
+## Introduction
+
+This page has a single `title` and it uses Liquid that depends on
+`ifversion` and `data variables...`.

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

@@ -9,4 +9,5 @@ versions:
 children:
   - /hello-world
   - /link-rewriting
+  - /dynamic-title
 ---

tests/fixtures/content/index.md

@@ -17,6 +17,7 @@ children:
   # as if the URL had been `/en/free-pro-team@latest/get-started/anything`.
   - search
   - get-started
+  - early-access
   # - account-and-profile
   # - authentication
   # - repositories
@@ -42,7 +43,6 @@ children:
   # - pages
   # - education
   # - desktop
-  # - early-access
   # - support
 childGroups:
   - name: Get started

tests/rendering-fixtures/breadcrumbs.js

@@ -0,0 +1,83 @@
+import { getDOM } from '../helpers/e2etest.js'
+
+describe('breadcrumbs', () => {
+  test('top-level product pages have breadcrumbs and breadcrumbs should exist regardless of header or in-article', async () => {
+    const $ = await getDOM('/get-started')
+    const links = $('[data-testid=breadcrumbs-in-article] a')
+    expect(links.attr('class').includes('d-none')).toBe(false)
+  })
+
+  test('links always prefixed with language', async () => {
+    const $ = await getDOM('/get-started/quickstart/hello-world')
+    const links = $('[data-testid=breadcrumbs-in-article] a')
+    links.each((i, element) => {
+      expect($(element).attr('href').startsWith('/en/')).toBe(true)
+    })
+    expect.assertions(3)
+  })
+
+  test('top-level hidden /search page has no breadcrumbs', async () => {
+    const $ = await getDOM('/search')
+    const links = $('[data-testid=breadcrumbs-in-article] a')
+    expect(links.length).toBe(0)
+    const headers = $('[data-testid=breadcrumbs-header]')
+    expect(headers.length).toBe(0)
+  })
+
+  test('short titles are preferred', async () => {
+    const $ = await getDOM('/get-started/foo/bar')
+    const links = $('[data-testid=breadcrumbs-in-article] a:last-child')
+    expect(links.text()).toBe('Bar')
+  })
+
+  test('article pages have breadcrumbs in article with product, category, maptopic, and article and last breadcrumb is not viewable', async () => {
+    const $ = await getDOM('/get-started/quickstart/hello-world')
+    const links = $('[data-testid=breadcrumbs-in-article] a')
+    expect(links.length).toBe(3)
+    expect($(links[0]).text()).toBe('Get started')
+    expect($(links[0]).attr('class').includes('d-none')).toBe(false)
+    expect($(links[1]).text()).toBe('Quickstart')
+    expect($(links[1]).attr('class').includes('d-none')).toBe(false)
+    expect($(links[2]).text()).toBe('Hello World')
+    expect($(links[2]).attr('class').includes('d-none')).toBe(true)
+  })
+
+  test('works for enterprise-server articles too', async () => {
+    const $ = await getDOM('/enterprise-server@latest/get-started/quickstart/hello-world')
+    const links = $('[data-testid=breadcrumbs-in-article] a')
+    expect(links.length).toBe(3)
+    expect($(links[0]).text()).toBe('Get started')
+    expect($(links[1]).text()).toBe('Quickstart')
+    expect($(links[2]).text()).toBe('Hello World')
+  })
+
+  test('works for titles that depend on Liquid', async () => {
+    const $fpt = await getDOM('/get-started/quickstart/dynamic-title')
+    const fptLinks = $fpt('[data-testid=breadcrumbs-in-article] a')
+    expect($fpt(fptLinks[2]).text()).toBe('Hello GitHub')
+
+    const $ghec = await getDOM('/enterprise-cloud@latest/get-started/quickstart/dynamic-title')
+    const ghecLinks = $ghec('[data-testid=breadcrumbs-in-article] a')
+    expect($ghec(ghecLinks[2]).text()).toBe('Greetings GitHub Enterprise Cloud')
+  })
+
+  // Note, early access always work for fixture content
+  test('top-level product pages have breadcrumbs', async () => {
+    const $ = await getDOM('/early-access/secrets/deeper/mariana-trench')
+    expect($('[data-testid=breadcrumbs-in-article]').length).toBe(1)
+    expect($('[data-testid=breadcrumbs-header]').length).toBe(1)
+  })
+
+  test('early access article pages have breadcrumbs with product, category, and article', async () => {
+    const $ = await getDOM('/early-access/secrets/deeper/mariana-trench')
+    const $breadcrumbTitles = $(
+      '[data-testid=breadcrumbs-in-article] [data-testid=breadcrumb-title]'
+    )
+    const $breadcrumbLinks = $('[data-testid=breadcrumbs-in-article] a')
+
+    expect($breadcrumbTitles.length).toBe(0)
+    expect($breadcrumbLinks.length).toBe(2)
+    expect($breadcrumbLinks[0].attribs.title).toBe('Deeper secrets')
+    expect($breadcrumbLinks[1].attribs.title).toBe('Mariana Trench')
+  })
+})