@nexxtmove/ui 2.5.0 → 2.7.0

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

@@ -0,0 +1,464 @@
+import { describe, it, expect } from 'vitest'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import EditorDimensionField from './EditorDimensionField.vue'
+import type { EditorDimensionValue } from './EditorDimensionField.vue'
+
+let wrapper: VueWrapper
+
+const mountField = (
+  modelValue: EditorDimensionValue | null,
+  props: Record<string, unknown> = {},
+) => {
+  wrapper = mount(EditorDimensionField, {
+    props: {
+      label: 'Breedte',
+      modelValue,
+      // Feed every write back in, the way `v-model` does.
+      'onUpdate:modelValue': (value: EditorDimensionValue | null) =>
+        wrapper.setProps({ modelValue: value }),
+      ...props,
+    },
+  })
+  return wrapper
+}
+
+const input = () => wrapper.get('input')
+
+const shown = () => (input().element as HTMLInputElement).value
+
+const writes = () => wrapper.emitted('update:modelValue')?.map(([value]) => value) ?? []
+
+const commits = () => wrapper.emitted('commit')?.length ?? 0
+
+const commit = async (typed: string) => {
+  await input().setValue(typed)
+  await input().trigger('blur')
+  await flushPromises()
+}
+
+const press = async (key: string, options: Record<string, unknown> = {}) => {
+  await input().trigger('keydown', { key, ...options })
+  await flushPromises()
+}
+
+const release = async (key: string) => {
+  await input().trigger('keyup', { key })
+  await flushPromises()
+}
+
+/**
+ * Types text the number input cannot parse. jsdom empties the value as a
+ * browser does, but never sets `badInput`, so that part is stubbed.
+ */
+const typeUnparseable = async (typed: string) => {
+  Object.defineProperty(input().element, 'validity', { value: { badInput: true } })
+  await input().setValue(typed)
+}
+
+const pickUnit = async (unit: string) => {
+  await wrapper.get('select').setValue(unit)
+  await flushPromises()
+}
+
+describe('EditorDimensionField', () => {
+  it('is a whole-number input bounded by the range of its unit', async () => {
+    mountField({ value: 200, unit: 'px' }, { units: ['px', '%'], max: { px: 800 } })
+
+    expect(input().attributes()).toMatchObject({ type: 'number', step: '1', min: '40', max: '800' })
+
+    await pickUnit('%')
+    expect(input().attributes()).toMatchObject({ min: '1', max: '100' })
+  })
+
+  describe('typing', () => {
+    it('writes a confirmed value in the current unit', async () => {
+      mountField({ value: 200, unit: 'px' })
+
+      await commit('320')
+
+      expect(writes()).toEqual([{ value: 320, unit: 'px' }])
+      expect(shown()).toBe('320')
+    })
+
+    it('writes nothing while typing, only on blur or Enter', async () => {
+      mountField({ value: 200, unit: 'px' })
+
+      await input().setValue('3')
+      expect(writes()).toEqual([])
+
+      await press('Enter')
+      expect(writes()).toEqual([{ value: 40, unit: 'px' }])
+    })
+
+    it('clamps px to 40..1600 by default', async () => {
+      mountField({ value: 200, unit: 'px' })
+
+      await commit('10')
+      expect(shown()).toBe('40')
+
+      await commit('5000')
+      expect(shown()).toBe('1600')
+      expect(writes()).toEqual([
+        { value: 40, unit: 'px' },
+        { value: 1600, unit: 'px' },
+      ])
+    })
+
+    it('clamps % to 1..100 by default', async () => {
+      mountField({ value: 50, unit: '%' }, { units: ['px', '%'] })
+
+      await commit('0')
+      expect(shown()).toBe('1')
+
+      await commit('150')
+      expect(shown()).toBe('100')
+    })
+
+    it('takes min and max per unit, keeping the defaults of the other unit', async () => {
+      mountField(
+        { value: 50, unit: '%' },
+        { units: ['px', '%'], min: { '%': 10 }, max: { px: 800 } },
+      )
+
+      await commit('5')
+      expect(shown()).toBe('10')
+
+      await pickUnit('px')
+      await commit('1000')
+      expect(shown()).toBe('800')
+
+      await commit('1')
+      expect(shown()).toBe('40')
+    })
+
+    it('puts the old value back for text that is not a number', async () => {
+      mountField({ value: 200, unit: 'px' })
+
+      await typeUnparseable('12a')
+      await input().trigger('blur')
+      await flushPromises()
+
+      expect(writes()).toEqual([])
+      expect(shown()).toBe('200')
+    })
+
+    it('does not take unparseable text in an optional field for an emptied one', async () => {
+      mountField({ value: 200, unit: 'px' }, { optional: true })
+
+      await typeUnparseable('12a')
+      await press('Enter')
+
+      expect(writes()).toEqual([])
+      expect(commits()).toBe(0)
+      expect(shown()).toBe('200')
+    })
+
+    it('puts the old value back for numbers that are not whole and positive', async () => {
+      mountField({ value: 200, unit: 'px' })
+
+      await commit('1.5')
+      await commit('-5')
+      await commit('1e2')
+
+      expect(writes()).toEqual([])
+      expect(shown()).toBe('200')
+    })
+
+    it('puts the old value back for an emptied field that is not optional', async () => {
+      mountField({ value: 200, unit: 'px' })
+
+      await commit('')
+
+      expect(writes()).toEqual([])
+      expect(shown()).toBe('200')
+    })
+
+    it('writes null for an emptied optional field, and shows the placeholder', async () => {
+      mountField({ value: 200, unit: 'px' }, { optional: true })
+
+      await commit('')
+
+      expect(writes()).toEqual([null])
+      expect(input().attributes('placeholder')).toBe('Geen')
+    })
+
+    it('shows the unit next to the placeholder of an empty optional field', () => {
+      mountField(null, { optional: true })
+
+      expect(input().attributes('placeholder')).toBe('Geen')
+      expect(wrapper.get('[data-testid="editor-dimension-unit"]').text()).toBe('px')
+    })
+  })
+
+  describe('Escape', () => {
+    it('reverts the typing without writing, and keeps the key to itself', async () => {
+      mountField({ value: 200, unit: 'px' })
+      const bubbled: Event[] = []
+      wrapper.element.parentElement?.addEventListener('keydown', (event: Event) =>
+        bubbled.push(event),
+      )
+      wrapper.element.addEventListener('keydown', (event: Event) => bubbled.push(event))
+
+      await input().setValue('999')
+      await press('Escape')
+
+      expect(shown()).toBe('200')
+      expect(writes()).toEqual([])
+      expect(bubbled).toEqual([])
+    })
+
+    it('reverts unparseable text in an empty field, though the value reads as empty', async () => {
+      mountField(null, { optional: true })
+      const bubbled: Event[] = []
+      wrapper.element.addEventListener('keydown', (event: Event) => bubbled.push(event))
+
+      await typeUnparseable('abc')
+      await press('Escape')
+
+      expect(bubbled).toEqual([])
+      expect(writes()).toEqual([])
+    })
+
+    it('lets the key through when there is nothing to revert', async () => {
+      mountField({ value: 200, unit: 'px' })
+      const bubbled: Event[] = []
+      wrapper.element.addEventListener('keydown', (event: Event) => bubbled.push(event))
+
+      await press('Escape')
+
+      expect(bubbled).toHaveLength(1)
+    })
+  })
+
+  describe('arrow keys', () => {
+    it('steps by 1, and by 10 with Shift', async () => {
+      mountField({ value: 200, unit: 'px' })
+
+      await press('ArrowUp')
+      await press('ArrowDown', { shiftKey: true })
+
+      expect(writes()).toEqual([
+        { value: 201, unit: 'px' },
+        { value: 191, unit: 'px' },
+      ])
+      expect(shown()).toBe('191')
+    })
+
+    it('stops at the ends of the range', async () => {
+      mountField({ value: 1595, unit: 'px' })
+
+      await press('ArrowUp', { shiftKey: true })
+      await press('ArrowUp')
+
+      expect(writes()).toEqual([{ value: 1600, unit: 'px' }])
+    })
+
+    it('starts an empty field at the minimum', async () => {
+      mountField(null, { optional: true })
+
+      await press('ArrowDown')
+
+      expect(writes()).toEqual([{ value: 40, unit: 'px' }])
+    })
+  })
+
+  describe('commit', () => {
+    it('follows a typed value straight away', async () => {
+      mountField({ value: 200, unit: 'px' })
+
+      await commit('300')
+
+      expect(commits()).toBe(1)
+    })
+
+    it('is not emitted when a typed value changes nothing', async () => {
+      mountField({ value: 200, unit: 'px' })
+
+      await commit('200')
+      await commit('abc')
+
+      expect(commits()).toBe(0)
+    })
+
+    it('ends a stream of arrow steps once, when the key is let go', async () => {
+      mountField({ value: 200, unit: 'px' })
+
+      await press('ArrowUp')
+      await press('ArrowUp')
+      await press('ArrowUp')
+      expect(commits()).toBe(0)
+
+      await release('ArrowUp')
+      expect(commits()).toBe(1)
+      expect(writes()).toHaveLength(3)
+
+      // Blurring afterwards has nothing left to close.
+      await input().trigger('blur')
+      await flushPromises()
+      expect(commits()).toBe(1)
+    })
+
+    it('ends a stream on blur when the keyup never came', async () => {
+      mountField({ value: 200, unit: 'px' })
+
+      await press('ArrowUp')
+      await input().trigger('blur')
+      await flushPromises()
+
+      expect(commits()).toBe(1)
+    })
+
+    it('is not emitted for an arrow key that changed nothing', async () => {
+      mountField({ value: 1600, unit: 'px' })
+
+      await press('ArrowUp')
+      await release('ArrowUp')
+
+      expect(commits()).toBe(0)
+    })
+  })
+
+  describe('units', () => {
+    it('shows one unit as text, without a selector', () => {
+      mountField({ value: 200, unit: 'px' })
+
+      expect(wrapper.find('select').exists()).toBe(false)
+      expect(input().attributes('aria-label')).toBe('Breedte (px)')
+    })
+
+    it('offers more than one unit as a named selector', () => {
+      mountField({ value: 200, unit: 'px' }, { units: ['px', '%'] })
+
+      const select = wrapper.get('select')
+      expect(select.attributes('aria-label')).toBe('Eenheid')
+      expect(select.findAll('option').map((option) => option.text())).toEqual(['px', '%'])
+    })
+
+    it('shows the selector of an empty optional field', () => {
+      mountField(null, { units: ['px', '%'], optional: true })
+
+      expect(input().attributes('placeholder')).toBe('Geen')
+      expect(wrapper.get('[data-testid="editor-dimension-unit"]').classes()).not.toContain('hidden')
+      expect(wrapper.find('select').exists()).toBe(true)
+    })
+
+    it('keeps its keyboard focus style for the keyboard, not for a pick with the pointer', async () => {
+      mountField({ value: 200, unit: 'px' }, { units: ['px', '%'] })
+      const select = wrapper.get('select')
+
+      // Chromium counts a clicked <select> as :focus-visible; the attribute opts out.
+      await select.trigger('pointerdown')
+      await pickUnit('%')
+      expect(select.attributes('data-pointer')).toBe('true')
+
+      await select.trigger('keydown', { key: 'ArrowDown' })
+      expect(select.attributes('data-pointer')).toBeUndefined()
+
+      await select.trigger('pointerdown')
+      await select.trigger('blur')
+      expect(select.attributes('data-pointer')).toBeUndefined()
+    })
+
+    it('gives keyboard focus its style after a click that did not focus the selector', async () => {
+      mountField({ value: 200, unit: 'px' }, { units: ['px', '%'] })
+      const select = wrapper.get('select')
+
+      // Safari and Firefox on macOS: the click does not focus the select.
+      await select.trigger('pointerdown')
+      await new Promise((resolve) => setTimeout(resolve))
+
+      // Later, Tab or Shift+Tab lands on it.
+      await select.trigger('focus')
+      expect(select.attributes('data-pointer')).toBeUndefined()
+    })
+
+    it('treats a focus in the same task as the pointerdown as a click', async () => {
+      mountField({ value: 200, unit: 'px' }, { units: ['px', '%'] })
+      const select = wrapper.get('select')
+
+      select.element.dispatchEvent(new Event('pointerdown'))
+      select.element.dispatchEvent(new Event('focus'))
+      await flushPromises()
+
+      expect(select.attributes('data-pointer')).toBe('true')
+    })
+
+    it('always shows the selector of a field that has a value', () => {
+      mountField({ value: 200, unit: 'px' }, { units: ['px', '%'], optional: true })
+
+      expect(wrapper.get('[data-testid="editor-dimension-unit"]').classes()).not.toContain('hidden')
+    })
+
+    it('clamps the value into the range of the unit switched to', async () => {
+      mountField({ value: 800, unit: 'px' }, { units: ['px', '%'] })
+
+      await pickUnit('%')
+
+      expect(writes()).toEqual([{ value: 100, unit: '%' }])
+      expect(shown()).toBe('100')
+      expect(input().attributes('aria-label')).toBe('Breedte (%)')
+      expect(commits()).toBe(1)
+    })
+
+    it('keeps a value that fits the new range', async () => {
+      mountField({ value: 50, unit: '%' }, { units: ['px', '%'] })
+
+      await pickUnit('px')
+
+      expect(writes()).toEqual([{ value: 50, unit: 'px' }])
+    })
+
+    it('writes nothing when switching the unit of an empty field, but types in it next', async () => {
+      mountField(null, { units: ['px', '%'], optional: true })
+
+      await pickUnit('%')
+      expect(writes()).toEqual([])
+
+      await commit('250')
+      expect(writes()).toEqual([{ value: 100, unit: '%' }])
+    })
+
+    it('follows a unit change from outside', async () => {
+      mountField({ value: 200, unit: 'px' }, { units: ['px', '%'] })
+
+      await wrapper.setProps({ modelValue: { value: 30, unit: '%' } })
+
+      expect((wrapper.get('select').element as HTMLSelectElement).value).toBe('%')
+      expect(shown()).toBe('30')
+    })
+
+    it('falls back to the first unit when the model turns null from outside', async () => {
+      mountField({ value: 50, unit: '%' }, { units: ['px', '%'], optional: true })
+
+      // Another element without a limit is selected.
+      await wrapper.setProps({ modelValue: null })
+      expect((wrapper.get('select').element as HTMLSelectElement).value).toBe('px')
+
+      await commit('300')
+      expect(writes()).toEqual([{ value: 300, unit: 'px' }])
+    })
+
+    it('keeps the unit of a field the user emptied', async () => {
+      mountField({ value: 50, unit: '%' }, { units: ['px', '%'], optional: true })
+
+      await commit('')
+      expect(writes()).toEqual([null])
+      expect((wrapper.get('select').element as HTMLSelectElement).value).toBe('%')
+
+      await commit('30')
+      expect(writes()).toEqual([null, { value: 30, unit: '%' }])
+    })
+  })
+
+  it('merges messages per key', () => {
+    mountField(null, {
+      units: ['px', '%'],
+      optional: true,
+      messages: { placeholder: 'None', unit: 'Unit' },
+    })
+
+    expect(input().attributes('placeholder')).toBe('None')
+    expect(wrapper.get('select').attributes('aria-label')).toBe('Unit')
+    expect(wrapper.findAll('option').map((option) => option.text())).toEqual(['px', '%'])
+  })
+})