Playwright tests for website (#905)

Playwright tests for website

- Change to use mock service worker (msw) instead of targeting actual
API, to make testing in CI easier
- Check /api/user/me in oauth callback to prevent 404s later if a user
doesnt have a savefile
 - Some styling and rendering changes to news page

.gitattributes

@@ -2,7 +2,6 @@
 # Set default behavior to automatically normalize line endings.
 ###############################################################################
 * text=auto
-
 ###############################################################################
 # Set default behavior for command prompt diff.
 #
@@ -11,7 +10,6 @@
 # Note: This is only used by command line
 ###############################################################################
 #*.cs     diff=csharp
-
 ###############################################################################
 # Set the merge driver for project and solution files
 #
@@ -34,7 +32,6 @@
 #*.modelproj merge=binary
 #*.sqlproj   merge=binary
 #*.wwaproj   merge=binary
-
 ###############################################################################
 # behavior for image files
 #
@@ -43,7 +40,6 @@
 #*.jpg   binary
 #*.png   binary
 #*.gif   binary
-
 ###############################################################################
 # diff behavior for common document formats
 # 
@@ -61,3 +57,4 @@
 #*.PDF   diff=astextplain
 #*.rtf   diff=astextplain
 #*.RTF   diff=astextplain
+*.png filter=lfs diff=lfs merge=lfs -text

.github/workflows/test-api.yaml

@@ -16,6 +16,10 @@ on:
       - Shared/**
       - Directory.Packages.props
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   integration-test:
     name: Integration test

.github/workflows/website.yaml

@@ -0,0 +1,65 @@
+name: Website
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - Website/**
+  pull_request:
+    paths:
+      - Website/**
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  playwright:
+    name: Playwright test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          sparse-checkout: "Website"
+          lfs: true
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Setup node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "pnpm"
+          cache-dependency-path: "Website/pnpm-lock.yaml"
+
+      - name: Install dependencies
+        working-directory: Website/
+        run: pnpm install
+
+      - name: Install Playwright browsers
+        working-directory: Website/
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Run Playwright tests
+        working-directory: Website/
+        run: pnpm exec playwright test
+
+      - name: Upload report
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: Website/playwright-report/
+          retention-days: 3
+
+      - name: Upload snapshots
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: snapshots
+          path: Website/tests/__screenshots__/
+          retention-days: 3

DragaliaAPI/DragaliaAPI/Features/Web/Account/UserController.cs

@@ -33,19 +33,6 @@ public async Task<ActionResult<User>> GetSelf(CancellationToken cancellationToke
     public async Task<ActionResult<UserProfile>> GetSelfProfile(
         CancellationToken cancellationToken
     ) => await userService.GetUserProfile(cancellationToken);
-
-    [HttpGet("me/savefile")]
-    [Authorize(Policy = PolicyNames.RequireDawnshardIdentity)]
-    public async Task<FileResult> GetSavefile(CancellationToken cancellationToken)
-    {
-        LoadIndexResponse savefile = await userService.GetSavefile(cancellationToken);
-
-        return this.File(
-            JsonSerializer.SerializeToUtf8Bytes(savefile, ApiJsonOptions.Instance),
-            "application/json",
-            "savedata.txt"
-        );
-    }
 }
 
 file static class ClaimsPrincipalExtensions

DragaliaAPI/DragaliaAPI/Features/Web/Account/UserService.cs

@@ -26,7 +26,4 @@ public Task<UserProfile> GetUserProfile(CancellationToken cancellationToken) =>
                 LastLoginTime = x.LastLoginTime
             })
             .FirstAsync(cancellationToken);
-
-    public Task<LoadIndexResponse> GetSavefile(CancellationToken cancellationToken) =>
-        loadService.BuildIndexData(cancellationToken);
 }

DragaliaAPI/DragaliaAPI/Features/Web/Savefile/SavefileController.cs

@@ -0,0 +1,23 @@
+using DragaliaAPI.Models.Generated;
+using DragaliaAPI.Services;
+using DragaliaAPI.Shared.Serialization;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+
+namespace DragaliaAPI.Features.Web.Savefile;
+
+public class SavefileController(ILoadService loadService) : ControllerBase
+{
+    [HttpGet("export")]
+    [Authorize(Policy = AuthConstants.PolicyNames.RequireDawnshardIdentity)]
+    public async Task<FileResult> GetSavefile(CancellationToken cancellationToken)
+    {
+        LoadIndexResponse savefile = await loadService.BuildIndexData(cancellationToken);
+
+        return this.File(
+            JsonSerializer.SerializeToUtf8Bytes(savefile, ApiJsonOptions.Instance),
+            "application/json",
+            "savedata.txt"
+        );
+    }
+}

DragaliaAPI/DragaliaAPI/Features/Web/WebAuthenticationHelper.cs

@@ -1,5 +1,6 @@
 using System.Diagnostics;
 using System.IdentityModel.Tokens.Jwt;
+using System.Net.Http.Headers;
 using System.Security.Claims;
 using System.Text.Encodings.Web;
 using DragaliaAPI.Database;
@@ -25,6 +26,16 @@ public static Task OnMessageReceived(MessageReceivedContext context)
             context.Token = idToken;
         }
 
+        if (
+            AuthenticationHeaderValue.TryParse(
+                context.Request.Headers.Authorization,
+                out AuthenticationHeaderValue? authHeader
+            ) && authHeader is { Scheme: "Bearer", Parameter: not null }
+        )
+        {
+            context.Token = authHeader.Parameter;
+        }
+
         return Task.CompletedTask;
     }
 

Website/.env.development

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

Website/.gitignore

@@ -8,3 +8,4 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .pnpm-store
 .idea
+test-results

Website/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "dev": "vite dev",
+    "dev:test": "vite dev --mode test",
     "api": "dotnet run --project ../DragaliaAPI/DragaliaAPI",
     "build": "vite build",
     "preview": "vite preview",
@@ -23,13 +24,15 @@
     "@sveltejs/kit": "2.5.17",
     "@sveltejs/vite-plugin-svelte": "3.1.1",
     "@types/eslint": "8.56.10",
+    "@types/node": "20.14.9",
     "@typescript-eslint/eslint-plugin": "8.0.0-alpha.14",
     "@typescript-eslint/parser": "8.0.0-alpha.30",
     "autoprefixer": "10.4.19",
     "eslint": "9.5.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-simple-import-sort": "12.1.0",
     "eslint-plugin-svelte": "2.41.0",
+    "msw": "2.3.1",
     "postcss": "8.4.38",
     "postcss-load-config": "5.1.0",
     "prettier": "3.3.2",

Website/playwright.config.ts

@@ -1,12 +1,30 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
+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',
-    port: 4173
+    command: 'pnpm run build && pnpm run preview -- --mode dev',
+    url,
+    stdout: 'pipe',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000
+  },
+  use: {
+    baseURL: url
   },
+  updateSnapshots: process.env.UPDATE_SNAPSHOTS ? 'all' : 'missing',
+  ignoreSnapshots: !process.env.CI,
   testDir: 'tests',
-  testMatch: /(.+\.)?(test|spec)\.[jt]s/
+  snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}',
+  testMatch: /(.+\.)?(test|spec)\.[jt]s/,
+  timeout: 600000,
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    }
+  ]
 };
 
 export default config;