davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1import type { Page } from '@playwright/test'
2import { expect, test } from './test-utils'
3
4const PAGES = [
5 '/',
6 '/about',
7 '/settings',
8 '/privacy',
9 '/compare',
10 '/search',
11 '/package/nuxt',
12 '/search?q=vue',
13] as const
14
15// ---------------------------------------------------------------------------
16// Test matrix
17//
18// For each user setting, we test two states across all pages:
19// 1. undefined — empty localStorage, the default/fresh-install experience
20// 2. a non-default value — verifies hydration still works when the user has
21// changed that setting from its default
22// ---------------------------------------------------------------------------
23
24test.describe('Hydration', () => {
25 test.describe('no user settings (empty localStorage)', () => {
26 for (const page of PAGES) {
27 test(`${page}`, async ({ goto, hydrationErrors }) => {
28 await goto(page, { waitUntil: 'hydration' })
29
30 expect(hydrationErrors).toEqual([])
31 })
32 }
33 })
34
35 // Default: "system" → test explicit "dark"
36 test.describe('color mode: dark', () => {
37 for (const page of PAGES) {
38 test(`${page}`, async ({ page: pw, goto, hydrationErrors }) => {
39 await injectLocalStorage(pw, { 'npmx-color-mode': 'dark' })
40 await goto(page, { waitUntil: 'hydration' })
41
42 expect(hydrationErrors).toEqual([])
43 })
44 }
45 })
46
47 // Default: null → test "violet"
48 test.describe('accent color: violet', () => {
49 for (const page of PAGES) {
50 test(`${page}`, async ({ page: pw, goto, hydrationErrors }) => {
51 await injectLocalStorage(pw, {
52 'npmx-settings': JSON.stringify({ accentColorId: 'violet' }),
53 })
54 await goto(page, { waitUntil: 'hydration' })
55
56 expect(hydrationErrors).toEqual([])
57 })
58 }
59 })
60
61 // Default: null → test "slate"
62 test.describe('background theme: slate', () => {
63 for (const page of PAGES) {
64 test(`${page}`, async ({ page: pw, goto, hydrationErrors }) => {
65 await injectLocalStorage(pw, {
66 'npmx-settings': JSON.stringify({ preferredBackgroundTheme: 'slate' }),
67 })
68 await goto(page, { waitUntil: 'hydration' })
69
70 expect(hydrationErrors).toEqual([])
71 })
72 }
73 })
74
75 // Default: "npm" → test "pnpm"
76 test.describe('package manager: pnpm', () => {
77 for (const page of PAGES) {
78 test(`${page}`, async ({ page: pw, goto, hydrationErrors }) => {
79 await injectLocalStorage(pw, {
80 'npmx-pm': JSON.stringify('pnpm'),
81 })
82 await goto(page, { waitUntil: 'hydration' })
83
84 expect(hydrationErrors).toEqual([])
85 })
86 }
87 })
88
89 // Default: "en-US" (LTR) → test "ar-EG" (RTL)
90 test.describe('locale: ar-EG (RTL)', () => {
91 for (const page of PAGES) {
92 test(`${page}`, async ({ page: pw, goto, hydrationErrors }) => {
93 await injectLocalStorage(pw, {
94 'npmx-settings': JSON.stringify({ selectedLocale: 'ar-EG' }),
95 })
96 await goto(page, { waitUntil: 'hydration' })
97
98 expect(hydrationErrors).toEqual([])
99 })
100 }
101 })
102
103 // Default: false → test true
104 test.describe('relative dates: enabled', () => {
105 for (const page of PAGES) {
106 test(`${page}`, async ({ page: pw, goto, hydrationErrors }) => {
107 await injectLocalStorage(pw, {
108 'npmx-settings': JSON.stringify({ relativeDates: true }),
109 })
110 await goto(page, { waitUntil: 'hydration' })
111
112 expect(hydrationErrors).toEqual([])
113 })
114 }
115 })
116})
117
118async function injectLocalStorage(page: Page, entries: Record<string, string>) {
119 await page.addInitScript((e: Record<string, string>) => {
120 for (const [key, value] of Object.entries(e)) {
121 localStorage.setItem(key, value)
122 }
123 }, entries)
124}