@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.test.ts

@@ -0,0 +1,484 @@
+import { afterEach, describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent, h } from 'vue'
+import EditorSettingsGroup from './EditorSettingsGroup.vue'
+import EditorSettingsBlock from '../EditorSettingsBlock/EditorSettingsBlock.vue'
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  vi.unstubAllEnvs()
+})
+
+/** A group holding one block, rendered as one app so both share the context. */
+const withBlock = (
+  groupProps: Record<string, unknown>,
+  blockProps: Record<string, unknown> = {},
+  content = '<p>Inhoud</p>',
+) =>
+  mount(
+    defineComponent({
+      components: { EditorSettingsGroup, EditorSettingsBlock },
+      setup: () => ({ groupProps, blockProps }),
+      template: `
+        <EditorSettingsGroup v-bind="groupProps">
+          <EditorSettingsBlock label="Stijl" v-bind="blockProps">${content}</EditorSettingsBlock>
+        </EditorSettingsGroup>
+      `,
+    }),
+  )
+
+const blockRoot = (wrapper: ReturnType<typeof withBlock>) =>
+  wrapper.findComponent(EditorSettingsBlock).element as HTMLElement
+
+describe('EditorSettingsGroup', () => {
+  // No assertions on typography utilities: headings are found by tag and text.
+  describe('without a label', () => {
+    it('renders no group role, no name and no heading', () => {
+      const wrapper = mount(EditorSettingsGroup, { slots: { default: '<p>Inhoud</p>' } })
+
+      expect(wrapper.attributes('role')).toBeUndefined()
+      expect(wrapper.attributes('aria-labelledby')).toBeUndefined()
+      expect(wrapper.find('h1, h2, h3, h4, h5, h6').exists()).toBe(false)
+      expect(wrapper.text()).toBe('Inhoud')
+    })
+
+    it('draws the divider on top', () => {
+      const wrapper = mount(EditorSettingsGroup)
+
+      expect(wrapper.classes()).toEqual(
+        expect.arrayContaining(['border-t', 'border-editor-divider']),
+      )
+    })
+  })
+
+  describe('with a label', () => {
+    it('is a group named by its heading', () => {
+      const wrapper = mount(EditorSettingsGroup, { props: { label: 'Lijn' } })
+      const heading = wrapper.get('h3')
+
+      expect(wrapper.attributes('role')).toBe('group')
+      expect(heading.text()).toBe('Lijn')
+      expect(heading.attributes('id')).toBeTruthy()
+      expect(wrapper.attributes('aria-labelledby')).toBe(heading.attributes('id'))
+    })
+
+    it('renders the heading at the given level', () => {
+      const wrapper = mount(EditorSettingsGroup, { props: { label: 'Lijn', headingLevel: 4 } })
+
+      expect(wrapper.find('h3').exists()).toBe(false)
+      expect(wrapper.get('h4').text()).toBe('Lijn')
+    })
+
+    it('puts the heading before the settings', () => {
+      const wrapper = withBlock({ label: 'Lijn' })
+
+      expect(wrapper.element.firstElementChild!.tagName).toBe('H3')
+    })
+
+    it('gives two groups distinct heading ids', () => {
+      const wrapper = mount(
+        defineComponent({
+          render: () => [
+            h(EditorSettingsGroup, { label: 'Lijn' }),
+            h(EditorSettingsGroup, { label: 'Ruimte' }),
+          ],
+        }),
+      )
+
+      const ids = wrapper.findAll('h3').map((heading) => heading.attributes('id'))
+      expect(new Set(ids).size).toBe(2)
+    })
+  })
+
+  describe('blocks inside', () => {
+    it('give a block pt-4 instead of py-4', () => {
+      const root = blockRoot(withBlock({ label: 'Lijn' }))
+
+      expect(root.classList).toContain('pt-4')
+      expect(root.classList).not.toContain('py-4')
+    })
+
+    it('leave the block label a paragraph under a labelled group', () => {
+      const wrapper = withBlock({ label: 'Lijn' })
+
+      expect(wrapper.findComponent(EditorSettingsBlock).get('p').text()).toBe('Stijl')
+      expect(wrapper.findAll('h3')).toHaveLength(1)
+    })
+
+    it('promote the block label to a heading in a group without a label', () => {
+      const wrapper = withBlock({})
+      const block = wrapper.findComponent(EditorSettingsBlock)
+
+      expect(block.get('h3').text()).toBe('Stijl')
+      expect(block.find('p').text()).toBe('Inhoud')
+    })
+
+    it('promote at the group heading level', () => {
+      const block = withBlock({ headingLevel: 5 }).findComponent(EditorSettingsBlock)
+
+      expect(block.get('h5').text()).toBe('Stijl')
+    })
+
+    it('keep a switchable promoted label as the switch label, not a heading', () => {
+      const block = withBlock({}, { switchable: true }).findComponent(EditorSettingsBlock)
+
+      expect(block.find('h3').exists()).toBe(false)
+      expect(block.get('label span').text()).toBe('Stijl')
+    })
+
+    it('follow a label that is added after mount', async () => {
+      const wrapper = mount(EditorSettingsGroup, {
+        slots: { default: () => h(EditorSettingsBlock, { label: 'Stijl' }) },
+      })
+      expect(wrapper.findComponent(EditorSettingsBlock).find('h3').exists()).toBe(true)
+
+      await wrapper.setProps({ label: 'Lijn' })
+
+      expect(wrapper.findComponent(EditorSettingsBlock).get('p').text()).toBe('Stijl')
+    })
+  })
+
+  // Colour is not typography: the title colour is a design decision for every group.
+  describe('title colour', () => {
+    it('colours the heading of a labelled group cornflower-blue-700', () => {
+      const heading = mount(EditorSettingsGroup, { props: { label: 'Lijn' } }).get('h3')
+
+      expect(heading.classes()).toContain('text-cornflower-blue-700')
+      expect(heading.classes()).not.toContain('text-gray-900')
+    })
+
+    it('colours the title of a collapsible group, and leaves the chevron grey', () => {
+      const wrapper = mount(EditorSettingsGroup, { props: { label: 'Lijn', collapsible: true } })
+      const button = wrapper.get('h3 > button')
+      const chevron = wrapper.get('button i')
+
+      expect(wrapper.get('h3').classes()).toContain('text-cornflower-blue-700')
+      // The button inherits the heading colour rather than setting its own.
+      expect(button.classes().filter((name) => /^text-(?!left)/.test(name))).toEqual([])
+      expect(chevron.classes()).toEqual(
+        expect.arrayContaining(['text-gray-700', 'group-hover/toggle:text-gray-900']),
+      )
+      expect(chevron.classes()).not.toContain('text-cornflower-blue-700')
+    })
+
+    it('colours a promoted block label like a group title', () => {
+      const block = withBlock({}).findComponent(EditorSettingsBlock)
+
+      expect(block.get('h3').classes()).toContain('text-cornflower-blue-700')
+    })
+
+    it('leaves a block label under a labelled group gray-900', () => {
+      const block = withBlock({ label: 'Lijn' }).findComponent(EditorSettingsBlock)
+
+      expect(block.get('p').classes()).toContain('text-gray-900')
+      expect(block.get('p').classes()).not.toContain('text-cornflower-blue-700')
+    })
+  })
+
+  describe('nesting', () => {
+    const nested = () =>
+      mount(
+        defineComponent({
+          components: { EditorSettingsGroup },
+          template: `
+            <EditorSettingsGroup label="Buiten">
+              <EditorSettingsGroup label="Binnen"><p>Inhoud</p></EditorSettingsGroup>
+            </EditorSettingsGroup>
+          `,
+        }),
+      )
+
+    it('warns exactly once in development and still renders', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+      const wrapper = nested()
+
+      expect(warn).toHaveBeenCalledTimes(1)
+      expect(warn).toHaveBeenCalledWith('NexxtEditorSettingsGroup cannot be nested')
+      expect(wrapper.findAll('[role="group"]')).toHaveLength(2)
+      expect(wrapper.text()).toContain('Inhoud')
+    })
+
+    it('does not warn for groups side by side', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+      mount(
+        defineComponent({
+          render: () => [
+            h(EditorSettingsGroup, { label: 'Lijn' }),
+            h(EditorSettingsGroup, { label: 'Ruimte' }),
+          ],
+        }),
+      )
+
+      expect(warn).not.toHaveBeenCalled()
+    })
+
+    it('stays silent in production', () => {
+      vi.stubEnv('NODE_ENV', 'production')
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+      nested()
+
+      expect(warn).not.toHaveBeenCalled()
+    })
+  })
+})
+
+// Taken before `collapsible` existed: a group that does not opt in must render
+// exactly this markup -- no button, no wrapper, no extra ids. Since then only
+// the rhythm changed on purpose: 24px between groups (pt-6 / pt-2 unlabelled, pb-5).
+describe('EditorSettingsGroup without collapsible', () => {
+  it('renders a labelled group unchanged', () => {
+    const wrapper = mount(EditorSettingsGroup, {
+      props: { label: 'Lijn' },
+      slots: { default: '<p>Inhoud</p>' },
+    })
+
+    expect(wrapper.html()).toMatchInlineSnapshot(`
+      "<div class="border-t border-editor-divider pb-5 pt-6" role="group" aria-labelledby="v-0">
+        <!--
+            The line sits on top, always, the first group included: it separates the
+            group from whatever comes before it, so the last group has none below.
+            24px between groups: line to heading, and last control to the next line
+            (the last block's 4px of focus-ring room plus \`pb-5\`); 16px inside one.
+            Without a label the top is \`pt-2\`: the one setting inside brings its own
+            \`pt-4\`, so its promoted label also lands 24px under the line.
+          -->
+        <h3 id="v-0" class="small-semibold text-cornflower-blue-700">Lijn</h3>
+        <p>Inhoud</p>
+      </div>"
+    `)
+  })
+
+  it('renders a group without a label unchanged', () => {
+    const wrapper = mount(EditorSettingsGroup, { slots: { default: '<p>Inhoud</p>' } })
+
+    expect(wrapper.html()).toMatchInlineSnapshot(`
+      "<div class="border-t border-editor-divider pb-5 pt-2">
+        <!--
+            The line sits on top, always, the first group included: it separates the
+            group from whatever comes before it, so the last group has none below.
+            24px between groups: line to heading, and last control to the next line
+            (the last block's 4px of focus-ring room plus \`pb-5\`); 16px inside one.
+            Without a label the top is \`pt-2\`: the one setting inside brings its own
+            \`pt-4\`, so its promoted label also lands 24px under the line.
+          -->
+        <!--v-if-->
+        <p>Inhoud</p>
+      </div>"
+    `)
+  })
+})
+
+describe('EditorSettingsGroup collapsible', () => {
+  const collapsible = (props: Record<string, unknown> = {}) =>
+    mount(EditorSettingsGroup, {
+      props: { label: 'Lijn', collapsible: true, ...props },
+      slots: { default: '<input data-testid="field" />' },
+      attachTo: document.body,
+    })
+
+  const content = (wrapper: ReturnType<typeof collapsible>) =>
+    wrapper.get('[data-testid="editor-settings-group-content"]')
+
+  it('puts one native button inside the heading, with the label', () => {
+    const wrapper = collapsible()
+    const button = wrapper.get('h3 > button')
+
+    expect(button.attributes('type')).toBe('button')
+    expect(button.text()).toBe('Lijn')
+    expect(wrapper.findAll('button')).toHaveLength(1)
+    // Still named by its heading.
+    expect(wrapper.attributes('role')).toBe('group')
+    expect(wrapper.attributes('aria-labelledby')).toBe(wrapper.get('h3').attributes('id'))
+    expect(wrapper.attributes('aria-expanded')).toBeUndefined()
+    wrapper.unmount()
+  })
+
+  it('hides the chevron from assistive technology', () => {
+    const wrapper = collapsible()
+
+    expect(wrapper.get('button i').element.closest('[aria-hidden="true"]')).not.toBeNull()
+    wrapper.unmount()
+  })
+
+  // Named, so a `.group` around the panel in the app cannot light the chevron.
+  it('scopes the chevron hover to its own button', () => {
+    const wrapper = collapsible()
+
+    expect(wrapper.get('button').classes()).toContain('group/toggle')
+    expect(wrapper.get('button').classes()).not.toContain('group')
+    expect(wrapper.get('button i').classes()).toContain('group-hover/toggle:text-gray-900')
+    wrapper.unmount()
+  })
+
+  it('points aria-controls at the content, which exists', () => {
+    const wrapper = collapsible()
+    const id = wrapper.get('button').attributes('aria-controls')!
+
+    expect(document.getElementById(id)).toBe(content(wrapper).element)
+    wrapper.unmount()
+  })
+
+  it('is open by default and follows the model in aria-expanded', async () => {
+    const wrapper = collapsible()
+    expect(wrapper.get('button').attributes('aria-expanded')).toBe('true')
+
+    await wrapper.setProps({ open: false })
+
+    expect(wrapper.get('button').attributes('aria-expanded')).toBe('false')
+    wrapper.unmount()
+  })
+
+  it('emits update:open on click, and stays focused on the button', async () => {
+    const wrapper = collapsible()
+    const button = wrapper.get('button')
+    ;(button.element as HTMLButtonElement).focus()
+
+    await button.trigger('click')
+    expect(wrapper.emitted('update:open')).toEqual([[false]])
+    expect(document.activeElement).toBe(button.element)
+
+    await wrapper.setProps({ open: false })
+    await button.trigger('click')
+    expect(wrapper.emitted('update:open')).toEqual([[false], [true]])
+    wrapper.unmount()
+  })
+
+  it('makes closed content inert, and open content not inert at all', async () => {
+    const wrapper = collapsible({ open: false })
+    expect(content(wrapper).attributes('inert')).toBeDefined()
+    expect(content(wrapper).classes()).toContain('grid-rows-[0fr]')
+
+    await wrapper.setProps({ open: true })
+
+    // Absent, not "false": a browser treats inert="false" as inert.
+    expect(content(wrapper).element.hasAttribute('inert')).toBe(false)
+    expect(content(wrapper).classes()).toContain('grid-rows-[1fr]')
+    wrapper.unmount()
+  })
+
+  it('keeps the content mounted while closed', () => {
+    const wrapper = collapsible({ open: false })
+
+    expect(wrapper.find('[data-testid="field"]').exists()).toBe(true)
+    wrapper.unmount()
+  })
+
+  it('moves focus to the button when closed from outside while focus is inside', async () => {
+    const wrapper = collapsible()
+    const field = wrapper.get('[data-testid="field"]').element as HTMLInputElement
+    field.focus()
+    expect(document.activeElement).toBe(field)
+
+    await wrapper.setProps({ open: false })
+
+    expect(document.activeElement).toBe(wrapper.get('button').element)
+    wrapper.unmount()
+  })
+
+  it('leaves focus alone when closed from outside while focus is elsewhere', async () => {
+    const outside = document.createElement('input')
+    document.body.append(outside)
+    const wrapper = collapsible()
+    outside.focus()
+
+    await wrapper.setProps({ open: false })
+
+    expect(document.activeElement).toBe(outside)
+    wrapper.unmount()
+    outside.remove()
+  })
+
+  it('drops motion for height and chevron under reduced motion, but keeps the fade', () => {
+    const wrapper = collapsible()
+    const clip = content(wrapper).element.firstElementChild!
+    const chevron = wrapper.get('button span[aria-hidden="true"]')
+
+    expect(content(wrapper).classes()).toContain('motion-reduce:transition-none')
+    expect(chevron.classes()).toContain('motion-reduce:transition-none')
+    expect(wrapper.classes()).toContain('motion-reduce:transition-none')
+    expect(clip.classList).not.toContain('motion-reduce:transition-none')
+    expect(clip.classList).toContain('transition-opacity')
+    wrapper.unmount()
+  })
+
+  it('points the chevron down when open and up when closed', async () => {
+    const wrapper = collapsible()
+    const chevron = () => wrapper.get('button span[aria-hidden="true"]')
+    expect(chevron().classes()).toContain('rotate-0')
+
+    await wrapper.setProps({ open: false })
+
+    expect(chevron().classes()).toContain('rotate-180')
+    expect(chevron().classes()).not.toContain('-rotate-90')
+    wrapper.unmount()
+  })
+
+  it('opens on ease-out-strong and closes on ease-in-out-strong, in step', async () => {
+    const wrapper = collapsible()
+    const root = () => wrapper.classes()
+    const rows = () => content(wrapper).classes()
+    const clip = () => [...content(wrapper).element.firstElementChild!.classList]
+    const chevron = () => wrapper.get('button span[aria-hidden="true"]').classes()
+
+    for (const classes of [root(), rows(), clip(), chevron()]) {
+      expect(classes).toEqual(expect.arrayContaining(['duration-200', 'ease-out-strong']))
+    }
+
+    await wrapper.setProps({ open: false })
+
+    // Height, root padding and chevron share duration and curve when closing.
+    for (const classes of [root(), rows(), chevron()]) {
+      expect(classes).toEqual(expect.arrayContaining(['duration-200', 'ease-in-out-strong']))
+    }
+    // The fade is shorter and softer, so the content stays readable.
+    expect(clip()).toEqual(expect.arrayContaining(['duration-150', 'ease-in-out']))
+    wrapper.unmount()
+  })
+
+  it('moves the closed compensation to the root: pb-6 closed, pb-5 open', async () => {
+    const wrapper = collapsible()
+    expect(wrapper.classes()).toContain('pb-5')
+    expect(wrapper.classes()).toContain('transition-[padding-bottom]')
+
+    await wrapper.setProps({ open: false })
+
+    expect(wrapper.classes()).toContain('pb-6')
+    expect(wrapper.classes()).not.toContain('pb-5')
+    // The content wrapper carries no padding of its own, so closed it is 0px.
+    expect(
+      content(wrapper)
+        .classes()
+        .some((name) => /^p[bty]?-/.test(name)),
+    ).toBe(false)
+    wrapper.unmount()
+  })
+
+  describe('without a label', () => {
+    it('warns once, renders no button and always shows the content', () => {
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+      const wrapper = mount(EditorSettingsGroup, {
+        props: { collapsible: true, open: false },
+        slots: { default: '<p>Inhoud</p>' },
+      })
+
+      expect(warn).toHaveBeenCalledTimes(1)
+      expect(wrapper.find('button').exists()).toBe(false)
+      expect(wrapper.find('[inert]').exists()).toBe(false)
+      expect(wrapper.find('[data-testid="editor-settings-group-content"]').exists()).toBe(false)
+      expect(wrapper.text()).toBe('Inhoud')
+    })
+
+    it('stays silent in production', () => {
+      vi.stubEnv('NODE_ENV', 'production')
+      const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+
+      mount(EditorSettingsGroup, { props: { collapsible: true } })
+
+      expect(warn).not.toHaveBeenCalled()
+    })
+  })
+})