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/PluginRail.test.ts

@@ -1,11 +1,12 @@
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { themeChoice } from '../../src/state/usePreferences'
 import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
 import PluginRail from '../../src/components/shell/PluginRail.vue'
 import { setNavigation } from '../../src/state/useNavigation'
 import { setSettings } from '../../src/state/useSettings'
 import { NARROW_QUERY, SIDEBAR_KEY, setCollapsed, watchViewport } from '../../src/state/useSidebar'
 import { navigationFixture, settingsFixture } from '../fixtures/typed'
-import { fakeMedia, keydown, resetState, routerAt, signIn, wait } from '../helpers'
+import { API, fakeMedia, keydown, requestsTo, resetState, routerAt, signIn, wait } from '../helpers'
 
 async function mountRail(path: string) {
   await signIn()
@@ -147,4 +148,38 @@ describe('plugin rail', () => {
     await flushPromises()
     expect(document.querySelector('[data-section-flyout]')).toBeNull()
   })
+
+  it('cycles the theme from the top button, naming the current choice, and keeps Ustawienia', async () => {
+    const calls = await signIn({
+      [`PUT ${API}/account/preferences`]: { body: { data: { theme: 'light', locale: '' }, meta: {} } },
+    })
+    setNavigation(navigationFixture.data)
+    setSettings(settingsFixture.list.data)
+    const router = await routerAt('/acme/demo/widgets')
+    const wrapper = mount(PluginRail, { global: { plugins: [router] }, attachTo: document.body })
+    await flushPromises()
+
+    const button = wrapper.get('[data-theme-toggle]')
+    expect(button.element.tagName).toBe('BUTTON')
+    expect(button.attributes('type')).toBe('button')
+    expect(button.attributes('aria-label')).toBe('Motyw: Systemowy')
+    expect(button.attributes('title')).toBe('Motyw: Systemowy')
+
+    await button.trigger('click')
+    await flushPromises()
+    expect(themeChoice.value).toBe('light')
+    expect(button.attributes('aria-label')).toBe('Motyw: Jasny')
+    await button.trigger('click')
+    await flushPromises()
+    expect(button.attributes('aria-label')).toBe('Motyw: Ciemny')
+    expect(document.documentElement.classList.contains('dark')).toBe(true)
+
+    const puts = requestsTo(calls, 'PUT', `${API}/account/preferences`)
+    expect(await Promise.all(puts.map(async (request) => JSON.parse(await request.clone().text())))).toEqual([
+      { theme: 'light' },
+      { theme: 'dark' },
+    ])
+    expect(wrapper.find('[data-rail-settings]').exists()).toBe(true)
+    document.documentElement.classList.remove('dark')
+  })
 })