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>
59 lines
2.5 KiB
TypeScript
59 lines
2.5 KiB
TypeScript
import { describe, it, expect } from 'vitest'
|
|
import { mount } from '@vue/test-utils'
|
|
import BaseInput from '@/components/BaseInput.vue'
|
|
|
|
describe('BaseInput', () => {
|
|
it('renders with label and default empty value', () => {
|
|
const wrapper = mount(BaseInput, { props: { label: 'Name' } })
|
|
expect(wrapper.find('label').text()).toBe('Name')
|
|
expect((wrapper.find('input').element as HTMLInputElement).value).toBe('')
|
|
expect(wrapper.find('.input-wrap--filled').exists()).toBe(false)
|
|
})
|
|
|
|
it('binds modelValue and emits update:modelValue on input', async () => {
|
|
const wrapper = mount(BaseInput, { props: { label: 'Name', modelValue: 'Bob' } })
|
|
const input = wrapper.find('input')
|
|
expect((input.element as HTMLInputElement).value).toBe('Bob')
|
|
|
|
await input.setValue('Alice')
|
|
expect(wrapper.emitted('update:modelValue')).toBeTruthy()
|
|
expect(wrapper.emitted('update:modelValue')![0]).toEqual(['Alice'])
|
|
})
|
|
|
|
it('marks .input-wrap--filled when modelValue is non-empty', () => {
|
|
const wrapper = mount(BaseInput, { props: { label: 'Name', modelValue: 'x' } })
|
|
expect(wrapper.find('.input-wrap--filled').exists()).toBe(true)
|
|
})
|
|
|
|
it('emits blur events', async () => {
|
|
const wrapper = mount(BaseInput, { props: { label: 'Name' } })
|
|
await wrapper.find('input').trigger('blur')
|
|
expect(wrapper.emitted('blur')).toBeTruthy()
|
|
})
|
|
|
|
it('renders error message and applies error class when error is set', () => {
|
|
const wrapper = mount(BaseInput, { props: { label: 'Name', error: 'Required' } })
|
|
expect(wrapper.find('.input-wrap--error').exists()).toBe(true)
|
|
expect(wrapper.find('.input-wrap__error').text()).toBe('Required')
|
|
expect(wrapper.find('[role="alert"]').exists()).toBe(true)
|
|
})
|
|
|
|
it('honors a custom id and links the label via for=', () => {
|
|
const wrapper = mount(BaseInput, { props: { label: 'Email', id: 'email' } })
|
|
expect(wrapper.find('input').attributes('id')).toBe('email')
|
|
expect(wrapper.find('label').attributes('for')).toBe('email')
|
|
})
|
|
|
|
it('uses a generated id when none is provided', () => {
|
|
const wrapper = mount(BaseInput, { props: { label: 'Email' } })
|
|
const id = wrapper.find('input').attributes('id')
|
|
expect(id).toMatch(/^input-/)
|
|
expect(wrapper.find('label').attributes('for')).toBe(id)
|
|
})
|
|
|
|
it('passes type prop down to the underlying input', () => {
|
|
const wrapper = mount(BaseInput, { props: { label: 'Email', type: 'email' } })
|
|
expect(wrapper.find('input').attributes('type')).toBe('email')
|
|
})
|
|
})
|