test(quick-261016-0fm): theme switch, language switcher and footer offset

- theme: light and dark ignore prefers-color-scheme, choices and guard
- i18n: ?locale= only with a preference, availableLocales from meta
- usePreferences: cache validation, cycle order and PUT bodies, revert
  with a danger toast, profile apply, setLocale save, cache and reload
- rail theme button, user menu language group, --shell-offset and the
  form save bar offset; fixture strings and resetState theme reset

admin/tests/shell/UserMenu.test.ts

@@ -1,9 +1,12 @@
-import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
 import type { AdminProfile } from '../../src/api/types'
 import UserMenu from '../../src/components/shell/UserMenu.vue'
+import { loadStrings } from '../../src/app/i18n'
 import { currentUser } from '../../src/state/useAuth'
-import { API, profile, requestsTo, resetState, routerAt, signIn, wait } from '../helpers'
+import { page } from '../../src/state/usePreferences'
+import { API, mockApi, profile, requestsTo, resetState, routerAt, signIn, wait } from '../helpers'
+import { langFixture } from '../fixtures/typed'
 
 async function mountMenu(user: Partial<AdminProfile> | null) {
   let calls: Request[] = []
@@ -128,4 +131,61 @@ describe('user menu', () => {
     expect(currentUser.value).toBeNull()
     expect(router.currentRoute.value.name).toBe('login')
   })
+
+  describe('language', () => {
+    /** Loads the bundle with the given admin locales, then mounts the menu. */
+    async function mountWithLocales(locales: string[], preference = '') {
+      mockApi({
+        [`GET ${API}/lang`]: { body: { data: langFixture.data, meta: { locale: 'pl', locales } } },
+      })
+      await loadStrings()
+      vi.restoreAllMocks()
+      return mountMenu({ preferences: { theme: 'system', locale: preference } })
+    }
+
+    afterEach(() => {
+      vi.restoreAllMocks()
+    })
+
+    it('lists every admin locale named in its own language, the current one checked', async () => {
+      const { wrapper } = await mountWithLocales(['en', 'pl'])
+      const content = await open(wrapper)
+      expect(content.querySelector('[data-language-label]')?.textContent?.trim()).toBe('Język')
+      const options = [...content.querySelectorAll<HTMLElement>('[data-locale-option]')]
+      expect(options.map((option) => option.dataset.localeOption)).toEqual(['en', 'pl'])
+      expect(options.map((option) => option.textContent?.trim())).toEqual(['English', 'Polski'])
+      expect(options.map((option) => option.getAttribute('role'))).toEqual(['menuitemradio', 'menuitemradio'])
+      expect(options.map((option) => option.getAttribute('aria-checked'))).toEqual(['false', 'true'])
+    })
+
+    it('checks the stored preference over the bundle locale', async () => {
+      const { wrapper } = await mountWithLocales(['en', 'pl'], 'en')
+      const content = await open(wrapper)
+      const en = content.querySelector<HTMLElement>('[data-locale-option="en"]')!
+      expect(en.getAttribute('aria-checked')).toBe('true')
+    })
+
+    it('saves the chosen language and reloads the page', async () => {
+      const { wrapper } = await mountWithLocales(['en', 'pl'])
+      const reload = vi.spyOn(page, 'reload').mockImplementation(() => undefined)
+      const calls = mockApi({
+        [`PUT ${API}/account/preferences`]: { body: { data: { theme: 'system', locale: 'en' }, meta: {} } },
+      })
+      const content = await open(wrapper)
+      content.querySelector<HTMLElement>('[data-locale-option="en"]')!.click()
+      await flushPromises()
+      const puts = requestsTo(calls, 'PUT', `${API}/account/preferences`)
+      expect(puts).toHaveLength(1)
+      expect(JSON.parse(await puts[0]!.clone().text())).toEqual({ locale: 'en' })
+      expect(window.localStorage.getItem('summer-admin.locale')).toBe('en')
+      expect(reload).toHaveBeenCalledTimes(1)
+    })
+
+    it('has no language group with a single admin locale', async () => {
+      const { wrapper } = await mountWithLocales(['pl'])
+      const content = await open(wrapper)
+      expect(content.querySelector('[data-locale-option]')).toBeNull()
+      expect(content.querySelector('[data-language-label]')).toBeNull()
+    })
+  })
 })