Add news page tests (#907)

+ drawer improvements to close it when you change page. Slightly bugged
as it doesn't play the animation but this is a known bug in vaul-svelte

Website/.env.development

@@ -1,3 +1,4 @@
+PUBLIC_ENABLE_MSW=true
 PUBLIC_DAWNSHARD_URL=http://localhost:3001/
 PUBLIC_DAWNSHARD_API_URL=http://localhost:3001/api/ # use Vite proxy
 DAWNSHARD_API_URL_SSR=http://localhost:5000

Website/package.json

@@ -8,6 +8,7 @@
     "dev:test": "vite dev --mode test",
     "api": "dotnet run --project ../DragaliaAPI/DragaliaAPI",
     "build": "vite build",
+    "build:dev": "vite build --mode development",
     "preview": "vite preview",
     "test": "playwright test",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

Website/playwright.config.ts

@@ -1,24 +1,22 @@
 import { devices, type PlaywrightTestConfig } from '@playwright/test';
 
-const url = process.env.CI ? 'http://localhost:4173' : 'http://localhost:3001';
-
 const config: PlaywrightTestConfig = {
   webServer: {
-    command: 'pnpm run build && pnpm run preview -- --mode dev',
-    url,
+    command: 'pnpm run build:dev && pnpm run preview',
+    url: 'http://localhost:3001',
     stdout: 'pipe',
     reuseExistingServer: !process.env.CI,
     timeout: 120000
   },
   use: {
-    baseURL: url
+    baseURL: 'http://localhost:3001'
   },
   updateSnapshots: process.env.UPDATE_SNAPSHOTS ? 'all' : 'missing',
   ignoreSnapshots: !process.env.CI,
   testDir: 'tests',
   snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}',
   testMatch: /(.+\.)?(test|spec)\.[jt]s/,
-  timeout: 600000,
+  timeout: 60000,
   projects: [
     {
       name: 'chromium',

Website/src/hooks.client.ts

@@ -1,6 +1,6 @@
-import { dev } from '$app/environment';
+import { PUBLIC_ENABLE_MSW } from '$env/static/public';
 
-if (dev) {
+if (PUBLIC_ENABLE_MSW === 'true') {
   const { worker } = await import('./mocks/browser');
 
   await worker.start({

Website/src/hooks.server.ts

@@ -1,15 +1,15 @@
 import type { Handle, HandleFetch } from '@sveltejs/kit';
 
-import { dev } from '$app/environment';
 import { DAWNSHARD_API_URL_SSR } from '$env/static/private';
 import { PUBLIC_DAWNSHARD_API_URL } from '$env/static/public';
+import { PUBLIC_ENABLE_MSW } from '$env/static/public';
 import Cookies from '$lib/auth/cookies.ts';
 import getJwtMetadata from '$lib/auth/jwt.ts';
 
 const publicApiUrl = new URL(PUBLIC_DAWNSHARD_API_URL);
 const internalApiUrl = new URL(DAWNSHARD_API_URL_SSR);
 
-if (dev) {
+if (PUBLIC_ENABLE_MSW === 'true') {
   const { server } = await import('./mocks/node');
   server.listen();
 }

Website/src/routes/(main)/header.svelte

@@ -10,6 +10,7 @@
   import HeaderContents from './headerContents.svelte';
 
   let enhance = false;
+  let drawerOpen = false;
 
   export let hasValidJwt: boolean;
 
@@ -19,26 +20,26 @@
 </script>
 
 {#if enhance}
-  <Drawer.Root direction="left">
-    <header id="header" class="z-50 gap-1 bg-background px-1 md:gap-2 md:px-3">
-      <Drawer.Trigger class="md:hidden">
-        <Button variant="ghost" class="md:hidden">
-          <Menu />
-        </Button>
-      </Drawer.Trigger>
+  <Drawer.Root direction="left" bind:open={drawerOpen}>
+    <header id="header" class="top-0 z-50 gap-1 bg-background px-1 md:gap-2 md:px-3">
+      <Button
+        variant="ghost"
+        class="md:hidden"
+        aria-label="Open navigation"
+        on:click={() => (drawerOpen = true)}>
+        <Menu class="h-[1.2rem] w-[1.2rem]" />
+      </Button>
       <HeaderContents {hasValidJwt} />
 
       <Drawer.Portal class="md:hidden">
         <Drawer.Content
           id="drawer-content"
           class="fixed bottom-0 left-0 top-0 mt-0 w-[75%] bg-background pl-6 pr-2 pt-2">
           <div id="my-content" class="flex flex-col">
-            <Drawer.Close class="self-end">
-              <Button variant="ghost">
-                Close <Close class="ml-2 mt-0.5 h-5 w-5" />
-              </Button>
-            </Drawer.Close>
-            <Routes {hasValidJwt} />
+            <Button variant="ghost" class="w-[7rem] self-end" on:click={() => (drawerOpen = false)}>
+              Close <Close class="ml-2 mt-0.5 h-5 w-5" />
+            </Button>
+            <Routes {hasValidJwt} on:navigate={() => (drawerOpen = false)} />
           </div>
         </Drawer.Content>
       </Drawer.Portal>

Website/src/routes/(main)/routes.svelte

@@ -1,17 +1,30 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
   import { Button } from '$shadcn/components/ui/button';
   import { cn } from '$shadcn/utils.js.ts';
 
   import { routeGroups } from './routes.ts';
 
   export let hasValidJwt: boolean;
+
+  const dispatch = createEventDispatcher();
+
+  const onClick = () => {
+    dispatch('navigate');
+  };
 </script>
 
 {#each routeGroups as routeGroup}
   {#if !routeGroup.requireAuth || (routeGroup.requireAuth && hasValidJwt)}
     <h2 class="text-m scroll-m-20 font-semibold tracking-tight">{routeGroup.title}</h2>
     {#each routeGroup.routes as route}
-      <Button href={route.href} variant="ghost" size="sm" class={cn('justify-start', 'w-[90%]')}>
+      <Button
+        href={route.href}
+        variant="ghost"
+        size="sm"
+        class={cn('justify-start', 'w-[90%]')}
+        on:click={onClick}>
         <svelte:component this={route.icon} class="mr-2 size-4" aria-hidden="true" />
         {route.title}
       </Button>

Website/tests/home.test.ts

@@ -1,10 +1,21 @@
-import { expect, test } from '@playwright/test';
+import { devices, expect, test } from '@playwright/test';
 
-test('index page has expected h1', async ({ page }) => {
+test('displays correctly', async ({ page }) => {
   await page.goto('/');
 
   await expect(page.getByRole('heading', { name: 'Dawnshard', exact: true })).toBeVisible();
   await expect(page.getByRole('heading', { name: 'Welcome to Dawnshard' })).toBeVisible();
 
   await expect(page).toHaveScreenshot({ fullPage: true });
 });
+
+test('displays correctly on mobile', async ({ page }) => {
+  await page.setViewportSize(devices['iPhone 13'].viewport);
+
+  await page.goto('/');
+
+  await expect(page.getByRole('heading', { name: 'Dawnshard', exact: true })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Welcome to Dawnshard' })).toBeVisible();
+
+  await expect(page).toHaveScreenshot();
+});

Website/tests/news.test.ts

@@ -0,0 +1,41 @@
+import { devices, expect, test } from '@playwright/test';
+
+test('displays correctly', async ({ page }) => {
+  await page.goto('/');
+
+  const newsLink = page.getByRole('link', { name: 'News' });
+  await expect(newsLink).toBeVisible();
+  await newsLink.click();
+
+  await expect(page.getByRole('heading', { name: 'News' })).toBeVisible();
+
+  await expect(page).toHaveScreenshot();
+});
+
+test('displays correctly on mobile', async ({ page }) => {
+  await page.setViewportSize(devices['iPhone 13'].viewport);
+
+  await page.goto('/');
+
+  await page.getByRole('button', { name: 'Open navigation' }).click();
+  await page.getByRole('link', { name: 'News' }).click();
+
+  await expect(page.getByRole('heading', { name: 'News' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Game updated!' })).toBeVisible();
+
+  await expect(page).toHaveScreenshot();
+});
+
+test('change page', async ({ page }) => {
+  await page.goto('/news/1');
+
+  await page.getByRole('link', { name: 'Next' }).click();
+
+  await expect(page.getByRole('heading', { name: 'News' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Paging works' })).toBeVisible();
+
+  await page.getByRole('link', { name: 'Previous' }).click();
+
+  await expect(page.getByRole('heading', { name: 'News' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Game updated!' })).toBeVisible();
+});

Website/vite.config.ts

@@ -3,7 +3,7 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 import checker from 'vite-plugin-checker';
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins: [
     sveltekit(),
     enhancedImages(),
@@ -15,5 +15,12 @@ export default defineConfig({
   ],
   server: {
     port: 3001
+  },
+  build: {
+    // Hack to get top-level await support required by Mock Service Worker for Playwright
+    target: mode === 'development' ? 'es2022' : 'modules'
+  },
+  preview: {
+    port: 3001
   }
-});
+}));