🔥🎉 CLEAN UP THE E2ETEST TYPESCRIPT CHAOS 🚀💥 (#56577)

Author: heiskr

src/archives/tests/deprecated-enterprise-versions.ts

@@ -1,7 +1,7 @@
 import { describe, expect, test, vi } from 'vitest'
 
 import enterpriseServerReleases from '@/versions/lib/enterprise-server-releases'
-import { get, getDOM } from '@/tests/helpers/e2etest-ts'
+import { get, getDOM } from '@/tests/helpers/e2etest'
 import { SURROGATE_ENUMS } from '@/frame/middleware/set-fastly-surrogate-key'
 
 describe('enterprise deprecation', () => {

src/fixtures/tests/images.ts

@@ -35,7 +35,7 @@ describe('render Markdown image tags', () => {
     // When transformed as a source in a `<picture>` tag, it's automatically
     // injected with the `mw-XXXXX` virtual indicator in the URL that
     // resizes it on-the-fly.
-    const image = sharp(res.body as Buffer)
+    const image = sharp(Buffer.from(res.body as ArrayBuffer))
     const { width, height } = await image.metadata()
     expect(width).toBe(MAX_WIDTH)
     // The `_fixtures/screenshot.png` is 2000x1494.

src/search/tests/api-ai-search-autocomplete.ts

@@ -14,7 +14,7 @@
 import { expect, test, vi } from 'vitest'
 
 import { describeIfElasticsearchURL } from '@/tests/helpers/conditional-runs'
-import { get } from '@/tests/helpers/e2etest-ts'
+import { get } from '@/tests/helpers/e2etest'
 
 import type { AutocompleteSearchResponse } from '@/search/types'
 

src/search/tests/api-combined-search.ts

@@ -14,7 +14,7 @@
 import { expect, test, vi } from 'vitest'
 
 import { describeIfElasticsearchURL } from '@/tests/helpers/conditional-runs'
-import { get } from '@/tests/helpers/e2etest-ts'
+import { get } from '@/tests/helpers/e2etest'
 
 import type { CombinedSearchResponse } from '@/search/types'
 

src/search/tests/api-search.ts

@@ -13,7 +13,7 @@
 
 import { expect, test, vi } from 'vitest'
 import { describeIfElasticsearchURL } from '@/tests/helpers/conditional-runs'
-import { get } from '@/tests/helpers/e2etest-ts'
+import { get } from '@/tests/helpers/e2etest'
 import { GeneralSearchResponse, SearchResultAggregations, GeneralSearchHit } from '@/search/types'
 
 if (!process.env.ELASTICSEARCH_URL) {

src/search/tests/rendering.ts

@@ -14,7 +14,7 @@
 import { expect, test, vi } from 'vitest'
 
 import { describeIfElasticsearchURL } from '@/tests/helpers/conditional-runs'
-import { get, getDOM } from '@/tests/helpers/e2etest-ts'
+import { get, getDOM } from '@/tests/helpers/e2etest'
 import { SURROGATE_ENUMS } from '@/frame/middleware/set-fastly-surrogate-key'
 
 if (!process.env.ELASTICSEARCH_URL) {

src/search/tests/search.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test, vi } from 'vitest'
-import { get, getDOM } from '@/tests/helpers/e2etest-ts'
+import { get, getDOM } from '@/tests/helpers/e2etest'
 
 describe('search results page', () => {
   vi.setConfig({ testTimeout: 60 * 1000 })

src/tests/helpers/e2etest.js

@@ -30,8 +30,11 @@ interface ResponseWithHeaders<T> extends Response<T> {
   headers: Record<string, string>
 }
 
+// Type alias for cached DOM results to improve maintainability
+type CachedDOMResult = cheerio.Root & { res: Response; $: cheerio.Root }
+
 // Cache to store DOM objects
-const getDOMCache = new Map<string, cheerio.Root>()
+const getDOMCache = new Map<string, CachedDOMResult>()
 
 /**
  * Makes an HTTP request using the specified method and options.
@@ -119,10 +122,10 @@ export function post(
 export async function getDOMCached(
   route: string,
   options: GetDOMOptions = {},
-): Promise<cheerio.Root> {
+): Promise<CachedDOMResult> {
   const key = `${route}::${JSON.stringify(options)}`
   if (!getDOMCache.has(key)) {
-    const { $ } = await getDOM(route, options)
+    const $ = await getDOM(route, options)
     getDOMCache.set(key, $)
   }
   // The non-null assertion is safe here because we've just set the key if it didn't exist
@@ -134,12 +137,9 @@ export async function getDOMCached(
  *
  * @param route - The route to request.
  * @param options - Options for fetching the DOM.
- * @returns A promise that resolves to the loaded DOM object.
+ * @returns A promise that resolves to the loaded DOM object with res attached and destructurable.
  */
-export async function getDOM(
-  route: string,
-  options: GetDOMOptions = {},
-): Promise<{ $: cheerio.Root; res: Response }> {
+export async function getDOM(route: string, options: GetDOMOptions = {}): Promise<CachedDOMResult> {
   const { headers, allow500s = false, allow404 = false, retries = 0 } = options
   const res = await get(route, { followRedirects: true, headers, retries })
 
@@ -152,8 +152,13 @@ export async function getDOM(
   }
 
   const $ = cheerio.load(res.body || '', { xmlMode: true })
+  const result = $ as CachedDOMResult
+  // Attach res to the cheerio object for backward compatibility
+  result.res = res
+  // Attach $ to itself for destructuring compatibility
+  result.$ = result
 
-  return { $, res }
+  return result
 }
 
 /**