hide "preview" nav item on desktop

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["resumarkdown", "spacebar"]
+  "cSpell.words": ["resumarkdown", "spacebar", "testid"]
 }

src/lib/components/content.svelte

@@ -3,6 +3,8 @@
 
   export let pane: Pane;
 
+  export let testid: string | undefined = undefined;
+
   // don't show pane if we're not the current pane
   let hidden: boolean;
   $: hidden = pane !== $navStore;
@@ -12,7 +14,9 @@
   $: preview = pane === 'preview';
 </script>
 
-<div id={`pane-${pane}`} role="tabpanel" class:hidden class:preview><slot /></div>
+<div id={`pane-${pane}`} data-testid={testid} role="tabpanel" class:hidden class:preview>
+  <slot />
+</div>
 
 <style lang="less">
   div {

src/lib/components/nav-item.svelte

@@ -6,6 +6,10 @@
   let selected: boolean;
   $: selected = destination === $pane;
 
+  // we need to hide the "preview" tab on desktop
+  let hiddenOnDesktop: boolean;
+  $: hiddenOnDesktop = destination === 'preview';
+
   function handleKey({ key }: KeyboardEvent) {
     if (key === ' ' || key === 'Enter' || key === 'Spacebar') {
       navigate();
@@ -22,6 +26,7 @@
   aria-selected={selected}
   role="tab"
   tabindex="0"
+  class:hiddenOnDesktop
   class:selected
   on:click={navigate}
   on:keyup={handleKey}
@@ -39,6 +44,10 @@
 
     @media screen and (min-width: @sizes[lg]) {
       flex-grow: 1;
+
+      &.hiddenOnDesktop {
+        display: none;
+      }
     }
 
     &.selected {

src/routes/+page.svelte

@@ -22,13 +22,13 @@
     </NavTree>
   </header>
   <main>
-    <Content pane="content">
+    <Content pane="content" testid="content-pane">
       <CodeInput bind:code={markdown} />
     </Content>
-    <Content pane="style">
+    <Content pane="style" testid="style-pane">
       <CodeInput bind:code={stylesheet} />
     </Content>
-    <Content pane="preview">
+    <Content pane="preview" testid="preview-pane">
       <dl>
         <dt>markdown:</dt>
         <dd>{markdown !== '' ? markdown : '???'}</dd>

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']) {
+  for (const tab of await page.getByRole('tab').all()) {
-    const currentPaneId = `pane-${pane}`;
+    await tab.click();
-    await page.locator(`nav li[aria-controls="${currentPaneId}"]`).click();
+    await expect(page.getByTestId(`${await tab.textContent()}-pane`)).toBeVisible();
-    await expect(page.locator(`#${currentPaneId}`)).toBeVisible();
-    if (lastPane !== '#pane-preview') {
-      await expect(page.locator(lastPane)).toBeHidden();
-    }
-    lastPane = `#${currentPaneId}`;
   }
 });

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();
+});