fix platform picker so minitoc links are correctly hidden/unhidden (#…

…39403)
Hupdy · Jul 21, 2023 · 764530d · 764530d
1 parent 5e7f74f
commit 764530d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 14 deletions.
diff --git a/components/article/PlatformPicker.tsx b/components/article/PlatformPicker.tsx
@@ -22,6 +22,14 @@ function showPlatformSpecificContent(platform: string) {
     .filter((el) => platforms.some((platform) => el.classList.contains(platform.value)))
     .forEach((el) => {
       el.style.display = el.classList.contains(platform) ? '' : 'none'
+
+      // hack: special handling for minitoc links -- we can't pass the tool classes
+      // directly to the Primer NavList.Item generated <li>, it gets passed down
+      // to the child <a>.  So if we find an <a> that has the tool class and its
+      // parent is an <li>, we hide/unhide that element as well.
+      if (el.tagName === 'A' && el.parentElement && el.parentElement.tagName === 'LI') {
+        el.parentElement.style.display = el.classList.contains(platform) ? '' : 'none'
+      }
     })
 
   // find all platform-specific *inline* elements and hide or show as appropriate

diff --git a/tests/fixtures/content/get-started/liquid/platform-specific.md b/tests/fixtures/content/get-started/liquid/platform-specific.md
@@ -7,6 +7,7 @@ versions:
   ghae: '*'
   ghec: '*'
 type: how_to
+defaultPlatform: windows
 ---
 
 ## General

diff --git a/tests/rendering-fixtures/playwright-rendering.spec.ts b/tests/rendering-fixtures/playwright-rendering.spec.ts
@@ -72,6 +72,24 @@ test.describe('platform picker', () => {
     await expect(page.getByRole('heading', { name: /Macintosh/ })).not.toBeVisible()
   })
 
+  test('minitoc matches picker', async ({ page }) => {
+    // default platform set to windows in fixture fronmatter
+    await page.goto('/get-started/liquid/platform-specific')
+    await expect(
+      page.getByTestId('minitoc').getByRole('link', { name: 'Macintosh until 1999' }),
+    ).not.toBeVisible()
+    await expect(
+      page.getByTestId('minitoc').getByRole('link', { name: 'Windows 95 was awesome' }),
+    ).toBeVisible()
+    await page.getByTestId('platform-picker').getByRole('link', { name: 'Linux' }).click()
+    await expect(
+      page.getByTestId('minitoc').getByRole('link', { name: 'Macintosh until 1999' }),
+    ).not.toBeVisible()
+    await expect(
+      page.getByTestId('minitoc').getByRole('link', { name: 'The year of Linux on the desktop' }),
+    ).toBeVisible()
+  })
+
   test('remember last clicked OS', async ({ page }) => {
     await page.goto('/get-started/liquid/platform-specific')
     await page.getByTestId('platform-picker').getByRole('link', { name: 'Windows' }).click()
@@ -97,20 +115,6 @@ test.describe('tool picker', () => {
     await expect(page.getByText('this is cli content')).not.toBeVisible()
     await expect(page.getByText('this is desktop content')).not.toBeVisible()
     await expect(page.getByText('this is webui content')).toBeVisible()
-
-    // Go to page again so that we start with the default webui content and can
-    // check the minitoc links
-    await page.goto('/get-started/liquid/tool-specific')
-    await expect(
-      page.getByTestId('minitoc').getByRole('link', { name: 'Webui section' }),
-    ).toBeVisible()
-    await expect(
-      page.getByTestId('minitoc').getByRole('link', { name: 'Desktop section' }),
-    ).not.toBeVisible()
-    await page.getByTestId('tool-picker').getByRole('link', { name: 'Web browser' }).click()
-    await expect(
-      page.getByTestId('minitoc').getByRole('link', { name: 'Desktop section' }),
-    ).not.toBeVisible()
   })
 
   test('prefer default tool', async ({ page }) => {
@@ -132,6 +136,24 @@ test.describe('tool picker', () => {
     await expect(page.getByText('this is desktop content')).not.toBeVisible()
     await expect(page.getByText('this is webui content')).toBeVisible()
   })
+
+  test('minitoc matches picker', async ({ page }) => {
+    // default tool set to desktop in fixture fronmatter
+    await page.goto('/get-started/liquid/tool-specific')
+    await expect(
+      page.getByTestId('minitoc').getByRole('link', { name: 'Desktop section' }),
+    ).toBeVisible()
+    await expect(
+      page.getByTestId('minitoc').getByRole('link', { name: 'Webui section' }),
+    ).not.toBeVisible()
+    await page.getByTestId('tool-picker').getByRole('link', { name: 'Web browser' }).click()
+    await expect(
+      page.getByTestId('minitoc').getByRole('link', { name: 'Desktop section' }),
+    ).not.toBeVisible()
+    await expect(
+      page.getByTestId('minitoc').getByRole('link', { name: 'Webui section' }),
+    ).toBeVisible()
+  })
 })
 
 test('filter article cards', async ({ page }) => {