feat(10-03): open, edit and save a record with toast and 422 feedback
- The SPA loads the backend::lang bundle before /auth/me, sets the document language from meta.locale and renders plural messages with Intl.PluralRules; interpolate mirrors phrasebook for :name/:Name/:NAME - Create and record routes; mapWinterUrl maps recordUrl and redirects onto the controller's list, create and record routes only - List rows open their record; FormView loads the form schema and the record, shows context-allowed fields in the span grid, saves values keyed by field name and toasts the resolved saved message - A 422 puts each message under its field (aria-invalid, aria-describedby), shows the plural banner, focuses the first invalid field in schema order and clears a field's error on change - The D-05 registry maps text, textarea, number and dropdown; any other type renders the unsupported-field box with the type in DM Mono - The admin OpenAPI document declares the write request bodies (AdminRecord, AdminIDsRequest) and the list filter query as a deepObject, so the typed client can send them - New backend::lang form.load_failed key; boardwalk/dist rebuilt
This commit is contained in:
Jakub Zych
205
admin/tests/smoke/edit.smoke.test.ts
Normal file
205
admin/tests/smoke/edit.smoke.test.ts
Normal file
@@ -0,0 +1,205 @@
|
||||
import { afterEach, beforeEach, describe, expect, it } from 'vitest'
|
||||
import { flushPromises } from '@vue/test-utils'
|
||||
import { interpolate, loadStrings, message, setBundle, t, tc } from '../../src/app/i18n'
|
||||
import { mapWinterUrl } from '../../src/app/winterUrl'
|
||||
import { clearUser } from '../../src/state/useAuth'
|
||||
import { setNavigation } from '../../src/state/useNavigation'
|
||||
import { clearToasts } from '../../src/state/useToasts'
|
||||
import lang from '../fixtures/lang.json'
|
||||
import formSchema from '../fixtures/widgets.form-schema.json'
|
||||
import record from '../fixtures/widgets.record.json'
|
||||
import listSchema from '../fixtures/widgets.list-schema.json'
|
||||
import listRows from '../fixtures/widgets.list.json'
|
||||
import { API, mockApi, mountApp, pathOf, requestsTo, type Route } from '../helpers'
|
||||
|
||||
const RECORD = `${API}/acme/demo/widgets/1`
|
||||
|
||||
const formRoutes: Record<string, Route> = {
|
||||
[`GET ${API}/acme/demo/widgets/schema/form`]: { body: formSchema },
|
||||
[`GET ${RECORD}`]: { body: record },
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
clearUser()
|
||||
setNavigation([])
|
||||
clearToasts()
|
||||
setBundle(lang.data, 'pl')
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
document.body.innerHTML = ''
|
||||
})
|
||||
|
||||
describe('strings', () => {
|
||||
it('loads the backend::lang bundle and sets the document language', async () => {
|
||||
setBundle({}, 'en')
|
||||
const calls = mockApi({ [`GET ${API}/lang`]: { body: lang } })
|
||||
|
||||
await loadStrings()
|
||||
|
||||
expect(calls.map(pathOf)).toEqual([`${API}/lang`])
|
||||
expect(document.documentElement.lang).toBe('pl')
|
||||
expect(t('backend::lang.form.save')).toBe('Zapisz')
|
||||
expect(t('backend::lang.form.missing_key')).toBe('backend::lang.form.missing_key')
|
||||
})
|
||||
|
||||
it('interpolates :name, :Name and :NAME like phrasebook.interpolate', () => {
|
||||
expect(interpolate('Hello :name, :Name, :NAME', { name: 'ala' })).toBe('Hello ala, Ala, ALA')
|
||||
// Longer placeholders win, so :names is not eaten by :name.
|
||||
expect(interpolate(':names and :name', { name: 'x', names: 'y' })).toBe('y and x')
|
||||
expect(interpolate('Item :name', { ':name': 'żaba' })).toBe('Item żaba')
|
||||
expect(interpolate(':Name', { name: 'żaba' })).toBe('Żaba')
|
||||
expect(interpolate(':count items', { count: 3 })).toBe('3 items')
|
||||
expect(interpolate('no placeholders', {})).toBe('no placeholders')
|
||||
})
|
||||
|
||||
it('picks the CLDR plural form for the locale and falls back to other', () => {
|
||||
expect(tc('backend::lang.form.error_fields', 1)).toBe('Popraw 1 pole oznaczone poniżej.')
|
||||
expect(tc('backend::lang.form.error_fields', 2)).toBe('Popraw 2 pola oznaczone poniżej.')
|
||||
expect(tc('backend::lang.form.error_fields', 5)).toBe('Popraw 5 pól oznaczonych poniżej.')
|
||||
expect(message({ other: ':count things' }, 1)).toBe('1 things')
|
||||
})
|
||||
})
|
||||
|
||||
describe('winter URLs', () => {
|
||||
it('maps recordUrl and redirects onto the controller routes only', () => {
|
||||
const id = 'acme.demo.widgets'
|
||||
expect(mapWinterUrl('acme/demo/widgets', id)).toBe('/acme/demo/widgets')
|
||||
expect(mapWinterUrl('/acme/demo/widgets/create', id)).toBe('/acme/demo/widgets/create')
|
||||
expect(mapWinterUrl('acme/demo/widgets/update/:id', id, 42)).toBe('/acme/demo/widgets/42')
|
||||
expect(mapWinterUrl('acme/demo/widgets/update/:id', id, null)).toBe('/acme/demo/widgets')
|
||||
expect(mapWinterUrl('acme/demo/widgets/preview/:id', id, 42)).toBe('/acme/demo/widgets')
|
||||
expect(mapWinterUrl('https://evil.example/acme/demo/widgets', id, 1)).toBe('/acme/demo/widgets')
|
||||
expect(mapWinterUrl('acme/other/things/update/:id', id, 1)).toBe('/acme/demo/widgets')
|
||||
expect(mapWinterUrl('', id)).toBe('/acme/demo/widgets')
|
||||
})
|
||||
})
|
||||
|
||||
describe('edit a record', () => {
|
||||
it('opens the record route from a list row', async () => {
|
||||
const { wrapper, router } = await mountApp('/acme/demo/widgets', {
|
||||
[`GET ${API}/acme/demo/widgets/schema/list`]: { body: listSchema },
|
||||
[`GET ${API}/acme/demo/widgets`]: { body: listRows },
|
||||
...formRoutes,
|
||||
})
|
||||
|
||||
const firstRow = wrapper.findAll('tbody tr')[0]!
|
||||
expect(firstRow.find('td a').attributes('href')).toBe('/acme/demo/widgets/1')
|
||||
expect(firstRow.findAll('td').at(-2)!.classes()).not.toContain('font-semibold')
|
||||
|
||||
await firstRow.findAll('td').at(-1)!.trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
expect(router.currentRoute.value.fullPath).toBe('/acme/demo/widgets/1')
|
||||
expect(wrapper.find('h1').text()).toBe('Blue widget')
|
||||
expect(wrapper.text()).toContain('Editing widget')
|
||||
})
|
||||
|
||||
it('renders the schema fields with their values and marks required fields', async () => {
|
||||
const { wrapper } = await mountApp('/acme/demo/widgets/1', formRoutes)
|
||||
|
||||
const name = wrapper.find('#field-name')
|
||||
expect((name.element as HTMLInputElement).value).toBe('Blue widget')
|
||||
expect(name.attributes('aria-required')).toBe('true')
|
||||
expect(wrapper.find('label[for="field-name"] [aria-hidden="true"]').text()).toBe('*')
|
||||
expect((wrapper.find('#field-weight').element as HTMLInputElement).value).toBe('12')
|
||||
expect(wrapper.find('#field-notes').attributes('rows')).toBe('4')
|
||||
const size = wrapper.find('#field-size')
|
||||
expect(size.findAll('option').map((option) => option.text())).toEqual(['— none —', 'Small', 'Medium', 'Large'])
|
||||
expect((size.element as HTMLSelectElement).value).toBe('1')
|
||||
expect(wrapper.find('#field-code').attributes('aria-describedby')).toBe('field-code-comment')
|
||||
expect(wrapper.find('#field-code-comment').text()).toBe('Unique widget code')
|
||||
})
|
||||
|
||||
it('PUTs the typed body keyed by field name and shows the saved toast', async () => {
|
||||
const { wrapper, calls } = await mountApp('/acme/demo/widgets/1', {
|
||||
...formRoutes,
|
||||
[`PUT ${RECORD}`]: async (request) => ({
|
||||
body: { data: { ...record.data, ...((await request.json()) as object) }, meta: { labels: {} } },
|
||||
}),
|
||||
})
|
||||
|
||||
await wrapper.find('#field-name').setValue('Red widget')
|
||||
await wrapper.find('#field-size').setValue('2')
|
||||
await wrapper.find('#field-weight').setValue('')
|
||||
await wrapper.find('[data-action="save"]').trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
const [put] = requestsTo(calls, 'PUT', RECORD)
|
||||
expect(put).toBeDefined()
|
||||
expect(put!.headers.get('X-Requested-With')).toBe('XMLHttpRequest')
|
||||
expect(await put!.json()).toEqual({ name: 'Red widget', code: 'W-01', size: 'l', weight: null, notes: 'Round' })
|
||||
const toast = wrapper.find('[role="status"]')
|
||||
expect(toast.text()).toContain('Widget „Red widget” saved')
|
||||
expect(toast.find('button').attributes('aria-label')).toBe('Zamknij')
|
||||
})
|
||||
|
||||
it('maps a 422 onto fields, focuses the first invalid one and clears on change', async () => {
|
||||
const { wrapper } = await mountApp(
|
||||
'/acme/demo/widgets/1',
|
||||
{
|
||||
...formRoutes,
|
||||
[`PUT ${RECORD}`]: {
|
||||
status: 422,
|
||||
body: {
|
||||
error: {
|
||||
code: 'validation_failed',
|
||||
message: 'The given data was invalid.',
|
||||
details: { weight: ['The weight must be positive.'], name: ['The name field is required.'] },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
{ attach: true },
|
||||
)
|
||||
|
||||
await wrapper.find('#field-name').setValue('')
|
||||
await wrapper.find('[data-action="save"]').trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
const banner = wrapper.find('[data-error-banner]')
|
||||
expect(banner.attributes('role')).toBe('alert')
|
||||
expect(banner.text()).toContain('Nie udało się zapisać.')
|
||||
expect(banner.text()).toContain('Popraw 2 pola oznaczone poniżej.')
|
||||
const name = wrapper.find('#field-name')
|
||||
expect(name.attributes('aria-invalid')).toBe('true')
|
||||
expect(name.attributes('aria-describedby')).toBe('field-name-error')
|
||||
expect(wrapper.find('#field-name-error').text()).toBe('The name field is required.')
|
||||
expect(wrapper.find('#field-weight').attributes('aria-invalid')).toBe('true')
|
||||
// Schema order decides which invalid field is first, not the details order.
|
||||
expect(document.activeElement?.id).toBe('field-name')
|
||||
|
||||
await name.setValue('Fixed')
|
||||
expect(wrapper.find('#field-name').attributes('aria-invalid')).toBeUndefined()
|
||||
expect(wrapper.find('#field-name-error').exists()).toBe(false)
|
||||
expect(wrapper.find('#field-weight').attributes('aria-invalid')).toBe('true')
|
||||
expect(wrapper.find('[data-error-banner]').text()).toContain('Popraw 1 pole oznaczone poniżej.')
|
||||
})
|
||||
|
||||
it('shows a danger toast with the envelope message for other errors', async () => {
|
||||
const { wrapper } = await mountApp('/acme/demo/widgets/1', {
|
||||
...formRoutes,
|
||||
[`PUT ${RECORD}`]: { status: 403, body: { error: { code: 'forbidden', message: 'Forbidden.', details: {} } } },
|
||||
})
|
||||
|
||||
await wrapper.find('[data-action="save"]').trigger('click')
|
||||
await flushPromises()
|
||||
|
||||
const toast = wrapper.find('[data-tone="danger"]')
|
||||
expect(toast.attributes('role')).toBe('alert')
|
||||
expect(toast.text()).toContain('Forbidden.')
|
||||
expect(wrapper.find('[data-error-banner]').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('renders an unknown field type as the unsupported box instead of breaking the form', async () => {
|
||||
const { wrapper } = await mountApp('/acme/demo/widgets/1', formRoutes)
|
||||
|
||||
const box = wrapper.find('[data-unsupported-field]')
|
||||
expect(box.exists()).toBe(true)
|
||||
expect(box.text()).toBe('Nieobsługiwany typ pola: colorpicker')
|
||||
expect(box.find('code').text()).toBe('colorpicker')
|
||||
expect(box.find('code').classes()).toContain('font-mono')
|
||||
expect(box.find('svg').exists()).toBe(true)
|
||||
expect(wrapper.find('label[for="field-color"]').text()).toBe('Colour')
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user