fix(download): fix duplicate id, and update playwright test for new download page

src/components/download/DownloadScript.astro

@@ -54,7 +54,10 @@
   async function selectPlatform(platform: string, cpu = 'x86_64') {
     // Show/hide platform sections
     for (const section of platformSections) {
-      if (section.id === `${platform}-downloads` && section.getAttribute('data-cpu') === cpu) {
+      if (
+        section.getAttribute('data-platform') === platform &&
+        section.getAttribute('data-cpu') === cpu
+      ) {
         section.setAttribute('data-active', 'true')
       } else {
         section.setAttribute('data-active', 'false')

src/components/download/PlatformDownload.astro

@@ -57,7 +57,7 @@ function getReleaseLink(releases: PlatformReleases, { os, cpu }: { os: string; c
 ---
 
 <div
-  id={`${platform}-downloads`}
+  id={`${platform}-${cpu}-downloads`}
   data-active={platform === 'mac'}
   class="platform-section data-[active='false']:hidden"
   data-cpu={cpu}

src/tests/pages/download.spec.ts

@@ -3,38 +3,44 @@ import { expect, test, type BrowserContextOptions, type Page } from '@playwright
 import { getReleasesWithChecksums } from '~/components/download/release-data'
 import { CONSTANT } from '~/constants'
 
-// Helper to get the platform section by id
+const getPlatformSection = (page: Page, platform: string, cpu: string) => {
-const getPlatformSection = (page: Page, platform: string) =>
+  return page.locator(`#${platform}-${cpu}-downloads.platform-section`)
-  page.locator(`#${platform}-downloads.platform-section[data-active='true']`)
+}
 
-// Helper to get the platform tab button
+const platformConfigs: {
-const getPlatformButton = (page: Page, platform: string) =>
+  name: string
-  page.locator(`button.platform-selector[data-platform='${platform}']`)
+  userAgent: string
-
+  platform: string
-const platformConfigs: { name: string; userAgent: string; platform: string }[] = [
+  expectedCpu: string
+}[] = [
   {
     name: 'windows',
     userAgent:
       'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
     platform: 'Win32',
+    expectedCpu: 'x86_64',
   },
   {
     name: 'mac',
     userAgent:
       'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Safari/605.1.15',
     platform: 'MacIntel',
+    expectedCpu: 'x86_64',
   },
   {
     name: 'linux',
     userAgent:
       'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
     platform: 'Linux x86_64',
+    expectedCpu: 'x86_64',
   },
 ]
 
-test.describe('Download page default tab per platform', () => {
+test.describe('Download page shows correct platform section per platform', () => {
-  for (const { name, userAgent, platform } of platformConfigs) {
+  for (const { name, userAgent, platform, expectedCpu } of platformConfigs) {
-    test(`shows correct default tab for ${name} platform`, async ({ browser }) => {
+    test(`shows correct platform section for ${name} ${expectedCpu} platform`, async ({
+      browser,
+    }) => {
       const context = await browser.newContext({
         userAgent,
         locale: 'en-US',
@@ -42,66 +48,64 @@ test.describe('Download page default tab per platform', () => {
       } as BrowserContextOptions)
       const page = await context.newPage()
       await page.goto('/download')
-      await expect(getPlatformSection(page, name)).toBeVisible()
+
-      await expect(getPlatformButton(page, name)).toHaveAttribute('data-active', 'true')
+      await page.waitForLoadState('domcontentloaded')
-      // Other platforms should not be active
+
-      for (const other of platformConfigs.filter(p => p.name !== name)) {
+      await expect(getPlatformSection(page, name, expectedCpu)).toBeVisible()
-        await expect(getPlatformSection(page, other.name)).toBeHidden()
+
-        await expect(getPlatformButton(page, other.name)).not.toHaveAttribute('data-active', 'true')
+      for (const other of platformConfigs.filter(
+        p => !(p.name === name && p.expectedCpu === expectedCpu)
+      )) {
+        const otherSection = page.locator(
+          `#${other.name}-${other.expectedCpu}-downloads.platform-section`
+        )
+        await expect(otherSection).toBeHidden()
       }
       await context.close()
     })
   }
 })
 
-test.describe('Download page platform detection and tab switching', () => {
-  test('shows correct platform section and tab when switching platforms', async ({ page }) => {
-    await page.goto('/download')
-    const platforms = ['windows', 'mac', 'linux']
-    for (const platform of platforms) {
-      await getPlatformButton(page, platform).click()
-      await expect(getPlatformSection(page, platform)).toBeVisible()
-      await expect(getPlatformButton(page, platform)).toHaveAttribute('data-active', 'true')
-      // other platform sections should be hidden
-      for (const otherPlatform of platforms.filter(p => p !== platform)) {
-        await expect(getPlatformSection(page, otherPlatform)).toBeHidden()
-        await expect(getPlatformButton(page, otherPlatform)).not.toHaveAttribute(
-          'data-active',
-          'true'
-        )
-      }
-    }
-  })
-})
-
 test.describe('Download page download links', () => {
   const releases = getReleasesWithChecksums('en')(CONSTANT.CHECKSUMS)
 
   type Releases = ReturnType<ReturnType<typeof getReleasesWithChecksums>>
   function getPlatformLinks(releases: Releases) {
     return {
-      mac: [releases.macos.universal],
+      'mac-x86_64': [releases.macos.universal],
-      windows: [releases.windows.x86_64, releases.windows.arm64],
+      'mac-arm64': [releases.macos.universal],
-      linux: [
+      'windows-x86_64': [releases.windows.x86_64],
-        releases.linux.x86_64.tarball,
+      'windows-arm64': [releases.windows.arm64],
-        releases.linux.aarch64.tarball,
+      'linux-x86_64': [releases.linux.x86_64.tarball, releases.linux.flathub.all],
-        releases.linux.flathub.all,
+      'linux-aarch64': [releases.linux.aarch64.tarball, releases.linux.flathub.all],
-      ],
     }
   }
 
   test('all platform download links are correct', async ({ page }) => {
-    const platforms = ['windows', 'mac', 'linux']
     const platformLinkSelectors = getPlatformLinks(releases)
     await page.goto('/download')
     await page.waitForLoadState('domcontentloaded')
-    for (const platform of platforms) {
+
-      await getPlatformButton(page, platform).click()
+    for (const [platformCpu, links] of Object.entries(platformLinkSelectors)) {
-      for (const { label, link } of platformLinkSelectors[
+      const platform = platformCpu.split('-')[0] as 'mac' | 'windows' | 'linux'
-        platform as keyof typeof platformLinkSelectors
+
-      ]) {
+      for (const { link } of links) {
-        const downloadLink = page.locator(`#${platform}-downloads .download-link[href="${link}"]`)
+        const downloadLink = page.locator(
-        await expect(downloadLink).toContainText(label)
+          `#${platformCpu}-downloads .download-button[href="${link}"]`
+        )
+
+        const isFlathubLink = link.includes('flathub.org')
+
+        if (isFlathubLink) {
+          await expect(downloadLink).toContainText('Flathub')
+        } else {
+          await expect(downloadLink).toContainText(
+            `Download for ${
+              platform === 'mac' ? 'MacOS' : platform.charAt(0).toUpperCase() + platform.slice(1)
+            }`
+          )
+        }
+
         await expect(downloadLink).toHaveAttribute('href', link)
       }
     }