src/graphql/tests/server-rendering.ts

import { describe, expect, test } from 'vitest'

import { getDOM } from '@/tests/helpers/e2etest'
import { loadPages } from '@/frame/lib/page-data'
import type { Permalink } from '@/types'

const pageList = await loadPages(undefined, ['en'])

describe('server rendering certain GraphQL pages', () => {
  test('minitoc hrefs on breaking-changes match', async () => {
    const $ = await getDOM('/graphql/overview/breaking-changes')
    const links = $('[data-testid="minitoc"] a[href]')
    const hrefs = links.map((i, link) => $(link).attr('href')).get()
    expect(hrefs.length).toBeGreaterThan(0)

    for (const href of hrefs) {
      if (!href.startsWith('#')) {
        throw new Error(`Expected href to start with # but got ${href}`)
      }
      const headings = $(href)
      expect(headings.length).toBe(1)
    }
    expect.assertions(hrefs.length + 1)
  })

  test('minitoc hrefs on changelog match and verify slugger behavior', async () => {
    // Testing the minitoc links match the heading ids but also validating
    // slugger behavior see docs-engineering/issues#5792.
    // Little funky because we need to make 2 requests to the page to test
    // the problem behavior where slugger state accumulates across
    // requests, it won't fail the first time around.
    await getDOM('/graphql/overview/changelog')
    const $ = await getDOM('/graphql/overview/changelog')
    const links = $('[data-testid="minitoc"] a[href]')
    const hrefs = links.map((i, link) => $(link).attr('href')).get()
    const headings = $('#article-contents h2')
    const headingIds = headings.map((i, heading) => `#${$(heading).attr('id')}`).get()

    expect(hrefs.length).toBe(headingIds.length)

    for (let i = 0; i < hrefs.length; i++) {
      expect(hrefs[i]).toBe(headingIds[i])
    }
  })

  const autogeneratedPages = pageList.filter(
    (page) => page.autogenerated === 'graphql' && page.relativePath.includes('reference'),
  )
  const nonFPTPermalinks = autogeneratedPages
    .map((page) =>
      page.permalinks.find(
        (permalink: Permalink) => permalink.pageVersion !== 'free-pro-team@latest',
      ),
    )
    .filter(Boolean)
  const nonFPTPermalinksHrefs = nonFPTPermalinks.map((permalink) => {
    return permalink!.href
  })

  test.each(nonFPTPermalinksHrefs)(
    'all links keep locale and version in %s',
    async (permalinkHref) => {
      const $ = await getDOM(permalinkHref)
      const internalLinks = $('#article-contents a[href^="/"]')
      const hrefs = internalLinks.map((i, link) => $(link).attr('href')).get()
      const [, pageLocale, pageVersion] = permalinkHref.split('/')
      for (const href of hrefs) {
        const [, locale, version] = href.split('/')
        expect(locale).toBe(pageLocale)
        expect(version).toBe(pageVersion)
      }
    },
  )
})