football2801
5fcfb806be
CI / test (push) Has been cancelled
- Add manifest.webmanifest with standalone display + warm-craft theme colors, apple-touch-icon, and 192/512/512-maskable icons (frame-with-sunset glyph). - Add PWA meta tags + viewport-fit=cover so add-to-home-screen produces a true standalone app on iOS instead of a Safari bookmark. - Drop the Shared bottom-nav tab; the in-page sub-tabs already cover that. Three nav tabs total (Home / Library / Settings); pending-share badge moves to the Library tab. Predicate-based isActive() now correctly disambiguates /library vs /library?tab=shared. - Safe-area handling: bottom nav, bottom sheet, upload overlay, and #app respect env(safe-area-inset-*); sticky Library tabs anchor below the iPhone status bar. Introduces --bottom-nav-height token consumed by Settings, Library, and the toast. - LibraryView reactively follows route.query.tab so deep-linking /library?tab=shared lands on the right sub-tab. - Theme-color meta syncs client-side via useTheme.applyTheme so the user's chosen theme follows them into Android Chrome's chrome bar. Test suite expanded to 278 tests / 100% line coverage (99.84% statements, 99.78% branches). Remaining gaps are unreachable defensive code. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
import { describe, it, expect, vi, beforeEach } from 'vitest'
|
|
import { mount } from '@vue/test-utils'
|
|
import { setActivePinia, createPinia } from 'pinia'
|
|
import SettingsView from '@/views/SettingsView.vue'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
import { THEMES } from '@/composables/useTheme'
|
|
|
|
describe('SettingsView', () => {
|
|
beforeEach(() => {
|
|
setActivePinia(createPinia())
|
|
})
|
|
|
|
it('renders one swatch per theme and the user email', () => {
|
|
const auth = useAuthStore()
|
|
auth.setUser({ id: 1, email: 'matt@example.com', roles: [], theme: 'warm-craft', timezone: 'UTC' })
|
|
const wrapper = mount(SettingsView)
|
|
expect(wrapper.findAll('.theme-swatch')).toHaveLength(THEMES.length)
|
|
expect(wrapper.text()).toContain('matt@example.com')
|
|
})
|
|
|
|
it('marks the user current theme as the active swatch', () => {
|
|
const auth = useAuthStore()
|
|
auth.setUser({ id: 1, email: 'm@e', roles: [], theme: 'ocean-dusk', timezone: 'UTC' })
|
|
const wrapper = mount(SettingsView)
|
|
const active = wrapper.find('.theme-swatch--active')
|
|
expect(active.attributes('aria-label')).toBe('Ocean Dusk')
|
|
expect(active.attributes('aria-checked')).toBe('true')
|
|
})
|
|
|
|
it('falls back to warm-craft as active when user has no theme set', () => {
|
|
const auth = useAuthStore()
|
|
auth.setUser({ id: 1, email: 'm@e', roles: [], theme: null, timezone: 'UTC' })
|
|
const wrapper = mount(SettingsView)
|
|
expect(wrapper.find('.theme-swatch--active').attributes('aria-label')).toBe('Warm Craft')
|
|
})
|
|
|
|
it('clicking a swatch saves the theme via PATCH /api/user/theme', async () => {
|
|
const auth = useAuthStore()
|
|
auth.setUser({ id: 1, email: 'm@e', roles: [], theme: 'warm-craft', timezone: 'UTC' })
|
|
const fetchMock = vi.fn().mockResolvedValue({ ok: true })
|
|
vi.stubGlobal('fetch', fetchMock)
|
|
|
|
const wrapper = mount(SettingsView)
|
|
const swatch = wrapper.findAll('.theme-swatch').find(s => s.attributes('aria-label') === 'Sage & Cream')!
|
|
await swatch.trigger('click')
|
|
|
|
expect(fetchMock).toHaveBeenCalledWith(
|
|
'/api/user/theme',
|
|
expect.objectContaining({
|
|
method: 'PATCH',
|
|
body: JSON.stringify({ theme: 'sage-cream' }),
|
|
}),
|
|
)
|
|
vi.unstubAllGlobals()
|
|
})
|
|
|
|
it('renders a Sign out link to /logout', () => {
|
|
const auth = useAuthStore()
|
|
auth.setUser({ id: 1, email: 'm@e', roles: [], theme: 'warm-craft', timezone: 'UTC' })
|
|
const wrapper = mount(SettingsView)
|
|
const logout = wrapper.find('a.settings__logout')
|
|
expect(logout.text()).toBe('Sign out')
|
|
expect(logout.attributes('href')).toBe('/logout')
|
|
})
|
|
})
|