test: add coverage for settings persistence

Author: damevin

app/pages/settings.vue

@@ -103,6 +103,7 @@ defineOgImageComponent('Default', {
                 type="button"
                 class="w-full flex items-center justify-between gap-4 group"
                 role="switch"
+                data-testid="settings-toggle"
                 :aria-checked="settings.relativeDates"
                 @click="settings.relativeDates = !settings.relativeDates"
               >
@@ -134,6 +135,7 @@ defineOgImageComponent('Default', {
                 type="button"
                 class="w-full flex items-center justify-between gap-4 group"
                 role="switch"
+                data-testid="settings-toggle"
                 :aria-checked="settings.includeTypesInInstall"
                 @click="settings.includeTypesInInstall = !settings.includeTypesInInstall"
               >
@@ -167,6 +169,7 @@ defineOgImageComponent('Default', {
                 type="button"
                 class="w-full flex items-center justify-between gap-4 group"
                 role="switch"
+                data-testid="settings-toggle"
                 :aria-checked="settings.hidePlatformPackages"
                 @click="settings.hidePlatformPackages = !settings.hidePlatformPackages"
               >

tests/settings.spec.ts

@@ -0,0 +1,27 @@
+import { expect, test } from '@nuxt/test-utils/playwright'
+
+test.describe('Settings', () => {
+  test('settings persist across new tabs and reloads', async ({ page, goto }) => {
+    await goto('/settings', { waitUntil: 'domcontentloaded' })
+
+    const toggles = page.getByTestId('settings-toggle')
+    const toggleCount = await toggles.count()
+    expect(toggleCount).toBeGreaterThan(0)
+    for (let i = 0; i < toggleCount; i += 1) {
+      await toggles.nth(i).click()
+    }
+
+    const page2 = await page.context().newPage()
+    await page2.goto('/nuxt', { waitUntil: 'domcontentloaded' })
+
+    const storedBefore = await page.evaluate(() => localStorage.getItem('npmx-settings'))
+
+    await page.reload()
+    const storedAfter = await page.evaluate(() => localStorage.getItem('npmx-settings'))
+    expect(storedAfter).toBe(storedBefore)
+
+    await page2.reload()
+    const storedFromOtherTab = await page2.evaluate(() => localStorage.getItem('npmx-settings'))
+    expect(storedFromOtherTab).toBe(storedBefore)
+  })
+})