hide "preview" nav item on desktop

tests/desktop.test.ts

@@ -14,3 +14,8 @@ test('desktop page has two-column layout', async ({ page }) => {
   await page.goto('/');
   await expect(page.locator('#pane-preview')).toBeVisible();
 });
+
+test('desktop page has no "preview" nav item', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.getByRole('tab').filter({ hasText: 'preview' })).toBeHidden();
+});

tests/general.test.ts

@@ -9,14 +9,9 @@ test('page has headline', async ({ page }) => {
 
 test('nav items work', async ({ page }) => {
   await page.goto('/');
-  let lastPane = '#pane-preview';
-  for (const pane of ['content', 'style', 'preview']) {
-    const currentPaneId = `pane-${pane}`;
-    await page.locator(`nav li[aria-controls="${currentPaneId}"]`).click();
-    await expect(page.locator(`#${currentPaneId}`)).toBeVisible();
-    if (lastPane !== '#pane-preview') {
-      await expect(page.locator(lastPane)).toBeHidden();
-    }
-    lastPane = `#${currentPaneId}`;
+
+  for (const tab of await page.getByRole('tab').all()) {
+    await tab.click();
+    await expect(page.getByTestId(`${await tab.textContent()}-pane`)).toBeVisible();
   }
 });

tests/mobile.test.ts

@@ -24,3 +24,9 @@ test('mobile page has single-column layout', async ({ page }) => {
   await page.goto('/');
   await expect(page.locator('#pane-preview')).toBeHidden();
 });
+
+test('mobile page has preview nav item', async ({ page }) => {
+  await page.goto('/');
+  await page.getByText('show navigation').click();
+  await expect(page.getByRole('tab').filter({ hasText: 'preview' })).toBeVisible();
+});