diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts index 73445a7497..7d527cbd09 100644 --- a/app/composables/useSettings.ts +++ b/app/composables/useSettings.ts @@ -48,6 +48,8 @@ export function useSettings() { if (!settingsRef) { settingsRef = useLocalStorage(STORAGE_KEY, DEFAULT_SETTINGS, { mergeDefaults: true, + initOnMounted: true, + writeDefaults: false, }) } diff --git a/tests/settings.spec.ts b/tests/settings.spec.ts new file mode 100644 index 0000000000..a234ddfe0e --- /dev/null +++ b/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) + }) +})