diff --git a/components/article/PlatformPicker.tsx b/components/article/PlatformPicker.tsx index ee4350ffaa84..d1a2462bc502 100644 --- 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
  • , it gets passed down + // to the child . So if we find an that has the tool class and its + // parent is an
  • , 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 index c4d3ca4fecb0..a1dedcb2577a 100644 --- 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 index ed95e4298b5d..837c6610f69b 100644 --- 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 }) => {