Fix to flaky Download CTA unit test, removing hard-coded content dependency

Author: webstackdev

src/components/CallToAction/Download/__tests__/index.spec.ts

@@ -1,8 +1,49 @@
+import type { CollectionEntry } from 'astro:content'
+import { getCollection } from 'astro:content'
 import { beforeEach, describe, expect, test } from 'vitest'
 import { experimental_AstroContainer as AstroContainer } from 'astro/container'
 import { withJsdomEnvironment } from '@test/unit/helpers/litRuntime'
 
-const existingResource = 'performance-testing-load-models-benchmark-accuracy'
+type DownloadFixture = {
+  directDownloadUrl: string
+  resource: string
+}
+
+const getDownloadResource = (download: CollectionEntry<'downloads'>): string | null => {
+  const normalizedFilePath = download.filePath?.replace(/\\/g, '/')
+  const filePathMatch = normalizedFilePath?.match(/\/articles\/(.+)\/download\.[^/.]+$/)
+
+  if (filePathMatch?.[1]) {
+    return filePathMatch[1]
+  }
+
+  const normalizedId = download.id.replace(/\\/g, '/')
+  const idWithoutDownloadSuffix = normalizedId.replace(/\/download$/, '')
+  return idWithoutDownloadSuffix.split('/')[0] ?? null
+}
+
+const getDownloadFixture = async (): Promise<DownloadFixture | null> => {
+  const [download] = await getCollection('downloads')
+
+  if (!download) {
+    return null
+  }
+
+  const resource = getDownloadResource(download)
+  const fileName = download.data.fileName?.trim()
+
+  if (!resource || !fileName) {
+    return null
+  }
+
+  return {
+    directDownloadUrl: `/downloads/${fileName}`,
+    resource,
+  }
+}
+
+const downloadFixture = await getDownloadFixture()
+const existingDownloadTest = downloadFixture ? test : test.skip
 
 describe('Download CallToAction (Astro)', () => {
   let container: AstroContainer
@@ -42,12 +83,16 @@ describe('Download CallToAction (Astro)', () => {
     })
   })
 
-  test('renders direct and landing download URLs for the web component host', async () => {
+  existingDownloadTest('renders direct and landing download URLs for the web component host', async () => {
+    if (!downloadFixture) {
+      throw new Error('Expected an existing download fixture')
+    }
+
     const Download = (await import('@components/CallToAction/Download/index.astro')).default
 
     const renderedHtml = await container.renderToString(Download, {
       props: {
-        resource: existingResource,
+        resource: downloadFixture.resource,
       },
     })
 
@@ -58,12 +103,12 @@ describe('Download CallToAction (Astro)', () => {
       const primaryLink = window.document.querySelector('[data-download-cta-primary]')
 
       expect(host?.getAttribute('data-landing-url')).toBe(
-        `/downloads/${existingResource}`
+        `/downloads/${downloadFixture.resource}`
       )
       expect(host?.getAttribute('data-direct-download-url')).toBe(
-        '/downloads/performance-testing-load-models-benchmark-accuracy.pdf'
+        downloadFixture.directDownloadUrl
       )
-      expect(primaryLink?.getAttribute('href')).toBe(`/downloads/${existingResource}`)
+      expect(primaryLink?.getAttribute('href')).toBe(`/downloads/${downloadFixture.resource}`)
     })
   })
 

src/components/Pages/Resume/index.astro

@@ -95,6 +95,7 @@ const {
 
 <style>
   {/** DO NOT ADD STYLES HERE - Use Tailwind classes on HTML elements, this are resets */}
+
   *, *::before, *::after {
     box-sizing: border-box;
   }

src/components/Pages/Resume/partials/Controls.astro

@@ -7,22 +7,22 @@ import Tooltip from '@components/Tooltip/index.astro'
   <li>
     <Tooltip text="Download PDF">
       <a
-        class="inline-flex h-7 w-7 items-center justify-center hover:text-primary transition-colors duration-200"
+        class="inline-flex h-7 w-7 items-center justify-center text-primary-offset hover:text-primary transition-colors duration-200"
         href="pdf/resume.pdf"
         aria-label="Download PDF"
       >
-        <Icon icon="download" color="primary-offset" size={7} />
+        <Icon icon="download" color="inherit" size={7} />
       </a>
     </Tooltip>
   </li>
   <li>
     <Tooltip text="Print Resume">
       <button
-        class="inline-flex h-7 w-7 cursor-pointer items-center justify-center appearance-none border-0 bg-transparent p-0 leading-none hover:text-primary transition-colors duration-200"
+        class="inline-flex h-7 w-7 cursor-pointer items-center justify-center appearance-none border-0 bg-transparent p-0 leading-none text-primary-offset hover:text-primary transition-colors duration-200"
         onclick="window.print()"
         aria-label="Print Resume"
       >
-        <Icon icon="print" color="primary-offset" size={6} />
+        <Icon icon="print" color="inherit" size={6} />
       </button>
     </Tooltip>
   </li>