feat(12.1-02): permissioneditor field in radio or checkbox mode
- type: permissioneditor with mode radio (1, -1) or checkbox (1); the controller serves the options per request through cabana.PermissionEditorProvider and reads and stores the values - a save answers 422 for a non-object, an unknown code or a value outside the mode's set and 403 for a changed locked code; stored codes that are not offered are kept - record responses carry the stored permissions as an object - SPA: PermissionEditorField with sections by tab, locked rows and a read-only mode for the preview - README, docs, OpenAPI document, TS types and dist updated
This commit is contained in:
Jakub Zych
@@ -1,5 +1,6 @@
|
||||
// Phase 12.1 form seams in the admin SPA: the password field (UI-SPEC S7,
|
||||
// D-19) and preset fields (D-27 G7). Fixtures are neutral acme.roster.* data;
|
||||
// D-19), preset fields (D-27 G7) and the permission editor (UI-SPEC S5,
|
||||
// D-16). Fixtures are neutral acme.roster.* data;
|
||||
// no application names appear in framework tests.
|
||||
import { afterEach, beforeEach, describe, expect, it } from 'vitest'
|
||||
import { enableAutoUnmount, flushPromises, type VueWrapper } from '@vue/test-utils'
|
||||
@@ -15,6 +16,12 @@ const RECORD = `${LIST}/1`
|
||||
const strings = {
|
||||
'backend::lang.form.show_password': { other: 'Show password' },
|
||||
'backend::lang.form.hide_password': { other: 'Hide password' },
|
||||
'backend::lang.permissioneditor.allow': { other: 'Allow' },
|
||||
'backend::lang.permissioneditor.inherit': { other: 'Inherit' },
|
||||
'backend::lang.permissioneditor.deny': { other: 'Deny' },
|
||||
'backend::lang.permissioneditor.locked': { other: 'You cannot change this permission.' },
|
||||
'backend::lang.permissioneditor.empty': { other: 'No permissions are defined yet.' },
|
||||
'backend::lang.permissioneditor.other': { other: 'Other' },
|
||||
}
|
||||
|
||||
function routes(overrides: Record<string, Route> = {}): Record<string, Route> {
|
||||
@@ -202,3 +209,184 @@ describe('preset (D-27 G7)', () => {
|
||||
expect(input(wrapper, 'slug').element.value).toBe('ada-lovelace')
|
||||
})
|
||||
})
|
||||
|
||||
describe('permission editor (UI-SPEC S5, D-16)', () => {
|
||||
const editor = (wrapper: VueWrapper) => wrapper.find('[data-permission-editor]')
|
||||
const row = (wrapper: VueWrapper, code: string) => wrapper.find(`[data-permission="${code}"]`)
|
||||
const segment = (wrapper: VueWrapper, code: string, value: string) => row(wrapper, code).find(`[data-segment="${value}"]`)
|
||||
const checked = (wrapper: VueWrapper, code: string) => row(wrapper, code).find('[data-state="checked"]')
|
||||
|
||||
/** Opens the update form on its Permissions tab. */
|
||||
async function open(overrides: Record<string, Route> = {}, schema = rosterFormSchemaFixture) {
|
||||
const mounted = await mountApp(
|
||||
'/acme/roster/people/1',
|
||||
routes({ [`GET ${LIST}/schema/form`]: { body: schema }, ...overrides }),
|
||||
{ attach: true },
|
||||
)
|
||||
const tab = mounted.wrapper.findAll('[role="tab"]').find((item) => item.text().includes('Permissions'))
|
||||
await tab!.trigger('click')
|
||||
await flushPromises()
|
||||
return mounted
|
||||
}
|
||||
|
||||
function withField(change: (field: (typeof rosterFormSchemaFixture.data.fields)[number]) => void) {
|
||||
const schema = clone(rosterFormSchemaFixture)
|
||||
change(schema.data.fields.find((field) => field.name === 'permissions')!)
|
||||
return schema
|
||||
}
|
||||
|
||||
it('groups the options by tab into sections of one list, untabbed ones last', async () => {
|
||||
const { wrapper } = await open()
|
||||
expect(editor(wrapper).attributes('role')).toBe('group')
|
||||
expect(editor(wrapper).attributes('aria-labelledby')).toBe('field-permissions-label')
|
||||
expect(wrapper.find('#field-permissions-label').text()).toBe('Permissions')
|
||||
expect(editor(wrapper).classes()).toEqual(expect.arrayContaining(['overflow-hidden', 'rounded-inner', 'border', 'border-border']))
|
||||
|
||||
const sections = wrapper.findAll('[data-permission-section]')
|
||||
expect(sections.map((section) => section.find('h3').text())).toEqual(['Content', 'Reports', 'Other'])
|
||||
expect(sections.map((section) => section.findAll('[data-permission]').map((item) => item.attributes('data-permission')))).toEqual([
|
||||
['posts.edit', 'posts.publish'],
|
||||
['reports.export'],
|
||||
['misc.beta'],
|
||||
])
|
||||
// Each section is a group named by its header; there is no inner tablist
|
||||
// and no inner scroll.
|
||||
expect(sections[0]!.attributes('aria-labelledby')).toBe(sections[0]!.find('h3').attributes('id'))
|
||||
expect(editor(wrapper).find('[role="tablist"]').exists()).toBe(false)
|
||||
expect(editor(wrapper).html()).not.toContain('overflow-y-auto')
|
||||
expect(editor(wrapper).html()).not.toContain('sticky')
|
||||
// Label and comment; a radio group of three named segments per row.
|
||||
expect(row(wrapper, 'posts.edit').text()).toContain('Edit posts')
|
||||
expect(row(wrapper, 'posts.edit').text()).toContain('Change the text of any post.')
|
||||
expect(row(wrapper, 'posts.edit').findAll('[role="radio"]').map((item) => item.text())).toEqual(['Allow', 'Inherit', 'Deny'])
|
||||
expect(row(wrapper, 'posts.edit').find('[role="radiogroup"]').attributes('aria-labelledby')).toBe(
|
||||
row(wrapper, 'posts.edit').find('span[id$="-label"]').attributes('id'),
|
||||
)
|
||||
// Stored allow shows as Allow; a code with no value shows as Inherit.
|
||||
expect(checked(wrapper, 'posts.edit').text()).toBe('Allow')
|
||||
expect(checked(wrapper, 'posts.publish').text()).toBe('Inherit')
|
||||
expect(checked(wrapper, 'posts.edit').classes()).toEqual(
|
||||
expect.arrayContaining(['data-[state=checked]:bg-ok-bg', 'data-[state=checked]:text-ok-text']),
|
||||
)
|
||||
// The row wraps below 640px and the control never shrinks.
|
||||
expect(row(wrapper, 'posts.edit').classes()).toEqual(expect.arrayContaining(['min-h-[56px]', 'max-sm:flex-col']))
|
||||
expect(row(wrapper, 'posts.edit').find('[role="radiogroup"]').classes()).toContain('shrink-0')
|
||||
})
|
||||
|
||||
it('sends a chosen Deny as -1, leaves inherited codes out and never sends a code that is not offered', async () => {
|
||||
const { wrapper, calls } = await open({ [`PUT ${RECORD}`]: { body: rosterRecordFixture } })
|
||||
await segment(wrapper, 'posts.publish', '-1').trigger('click')
|
||||
expect(checked(wrapper, 'posts.publish').text()).toBe('Deny')
|
||||
expect(checked(wrapper, 'posts.publish').classes()).toContain('data-[state=checked]:text-danger')
|
||||
await save(wrapper)
|
||||
|
||||
const [request] = requestsTo(calls, 'PUT', RECORD)
|
||||
const body = (await request!.clone().json()) as Record<string, unknown>
|
||||
expect(body.permissions).toEqual({ 'posts.edit': 1, 'posts.publish': -1, 'reports.export': 1 })
|
||||
})
|
||||
|
||||
it('goes back to inherit by leaving the code out', async () => {
|
||||
const { wrapper, calls } = await open({ [`PUT ${RECORD}`]: { body: rosterRecordFixture } })
|
||||
await segment(wrapper, 'posts.edit', '0').trigger('click')
|
||||
await save(wrapper)
|
||||
const [request] = requestsTo(calls, 'PUT', RECORD)
|
||||
const body = (await request!.clone().json()) as Record<string, unknown>
|
||||
expect(body.permissions).toEqual({ 'reports.export': 1 })
|
||||
})
|
||||
|
||||
it('shows a locked row with its stored value, a disabled control, the lock and its text', async () => {
|
||||
const { wrapper, calls } = await open({ [`PUT ${RECORD}`]: { body: rosterRecordFixture } })
|
||||
const locked = row(wrapper, 'reports.export')
|
||||
expect(locked.attributes('data-locked')).toBeDefined()
|
||||
expect(locked.find('[data-permission-locked]').text()).toBe('You cannot change this permission.')
|
||||
expect(locked.find('svg').attributes('aria-hidden')).toBe('true')
|
||||
expect(checked(wrapper, 'reports.export').text()).toBe('Allow')
|
||||
for (const item of locked.findAll('[role="radio"]')) {
|
||||
expect(item.attributes('disabled')).toBeDefined()
|
||||
}
|
||||
expect(locked.find('[role="radiogroup"]').attributes('aria-disabled')).toBe('true')
|
||||
// A click changes nothing, and other rows stay editable.
|
||||
await segment(wrapper, 'reports.export', '-1').trigger('click')
|
||||
expect(checked(wrapper, 'reports.export').text()).toBe('Allow')
|
||||
expect(row(wrapper, 'posts.edit').find('[role="radio"]').attributes('disabled')).toBeUndefined()
|
||||
expect(row(wrapper, 'posts.edit').find('[data-permission-locked]').exists()).toBe(false)
|
||||
|
||||
await segment(wrapper, 'misc.beta', '1').trigger('click')
|
||||
await save(wrapper)
|
||||
const [request] = requestsTo(calls, 'PUT', RECORD)
|
||||
const body = (await request!.clone().json()) as Record<string, unknown>
|
||||
expect(body.permissions).toEqual({ 'posts.edit': 1, 'reports.export': 1, 'misc.beta': 1 })
|
||||
})
|
||||
|
||||
it('edits allow with a labelled checkbox per row in checkbox mode', async () => {
|
||||
const schema = withField((field) => (field.mode = 'checkbox'))
|
||||
const { wrapper, calls } = await open({ [`PUT ${RECORD}`]: { body: rosterRecordFixture } }, schema)
|
||||
expect(editor(wrapper).attributes('data-mode')).toBe('checkbox')
|
||||
// The section header carries the column heading.
|
||||
expect(wrapper.find('[data-permission-section] h3').text()).toContain('Allow')
|
||||
const box = (code: string) => row(wrapper, code).find('[role="checkbox"]')
|
||||
expect(box('posts.edit').attributes('aria-checked')).toBe('true')
|
||||
expect(box('posts.publish').attributes('aria-checked')).toBe('false')
|
||||
expect(box('posts.edit').classes()).toEqual(expect.arrayContaining(['size-[18px]', 'rounded-checkbox']))
|
||||
// The row label is a label for the box.
|
||||
expect(row(wrapper, 'posts.publish').find('label').attributes('for')).toBe(box('posts.publish').attributes('id'))
|
||||
expect(box('reports.export').attributes('disabled')).toBeDefined()
|
||||
|
||||
await box('posts.publish').trigger('click')
|
||||
await box('posts.edit').trigger('click')
|
||||
await save(wrapper)
|
||||
const [request] = requestsTo(calls, 'PUT', RECORD)
|
||||
const body = (await request!.clone().json()) as Record<string, unknown>
|
||||
expect(body.permissions).toEqual({ 'posts.publish': 1, 'reports.export': 1 })
|
||||
})
|
||||
|
||||
it('shows the empty text when the server supplies no options', async () => {
|
||||
const { wrapper } = await open({}, withField((field) => delete field.permissionOptions))
|
||||
expect(editor(wrapper).exists()).toBe(false)
|
||||
const empty = wrapper.find('[data-permission-empty]')
|
||||
expect(empty.text()).toBe('No permissions are defined yet.')
|
||||
expect(empty.classes()).toEqual(expect.arrayContaining(['min-h-input', 'bg-subtle', 'text-muted']))
|
||||
})
|
||||
|
||||
it('renders a 422 on the field error line with a danger border and clears it on a change', async () => {
|
||||
const refused: Reply = {
|
||||
status: 422,
|
||||
body: {
|
||||
error: {
|
||||
code: 'validation_failed',
|
||||
message: 'Validation failed',
|
||||
details: { permissions: ['The permissions field contains an unknown permission.'] },
|
||||
},
|
||||
},
|
||||
}
|
||||
const { wrapper } = await open({ [`PUT ${RECORD}`]: refused })
|
||||
await segment(wrapper, 'posts.publish', '1').trigger('click')
|
||||
await save(wrapper)
|
||||
expect(wrapper.find('[data-field="permissions"]').text()).toContain('The permissions field contains an unknown permission.')
|
||||
expect(editor(wrapper).classes()).toContain('border-danger')
|
||||
expect(editor(wrapper).attributes('aria-describedby')).toBe('field-permissions-error')
|
||||
|
||||
await segment(wrapper, 'posts.publish', '0').trigger('click')
|
||||
expect(editor(wrapper).classes()).toContain('border-border')
|
||||
expect(wrapper.find('#field-permissions-error').exists()).toBe(false)
|
||||
})
|
||||
|
||||
it('is read-only on the preview: every control disabled, no lock icon and no locked text', async () => {
|
||||
const schema = withField((field) => (field.context = ['update', 'preview']))
|
||||
const { wrapper } = await mountApp('/acme/roster/people/1/preview', routes({ [`GET ${LIST}/schema/form`]: { body: schema } }))
|
||||
await flushPromises()
|
||||
const tab = wrapper.findAll('[role="tab"]').find((item) => item.text().includes('Permissions'))
|
||||
await tab!.trigger('click')
|
||||
await flushPromises()
|
||||
const shown = wrapper.find('[data-preview-field="permissions"]')
|
||||
expect(shown.find('[data-permission-editor]').exists()).toBe(true)
|
||||
const radios = shown.findAll('[role="radio"]')
|
||||
expect(radios).toHaveLength(12)
|
||||
for (const item of radios) {
|
||||
expect(item.attributes('disabled')).toBeDefined()
|
||||
}
|
||||
expect(shown.find('[data-permission-locked]').exists()).toBe(false)
|
||||
expect(shown.find('[data-locked]').exists()).toBe(false)
|
||||
expect(shown.find('[data-permission="posts.edit"] [data-state="checked"]').text()).toBe('Allow')
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user