quasar 2.15.2 → 2.15.4

package/src/utils/{private → private.keyboard}/escape-key.js

@@ -1,5 +1,5 @@
 import { client } from '../../plugins/platform/Platform.js'
-import { isKeyCode } from './key-composition.js'
+import { isKeyCode } from '../private.keyboard/key-composition.js'
 
 const handlers = []
 let escDown

package/src/utils/private.keyboard/escape-key.test.js

@@ -0,0 +1,117 @@
+import { describe, test, expect, vi, afterEach } from 'vitest'
+
+import { addEscapeKey, removeEscapeKey } from './escape-key.js'
+
+let fnList = []
+
+afterEach(() => {
+  fnList.forEach(fn => {
+    removeEscapeKey(fn)
+  })
+
+  fnList = []
+})
+
+function createTestFn () {
+  const fn = vi.fn()
+  fnList.push(fn)
+  return fn
+}
+
+function triggerKey (keyCode = 27) {
+  const keydown = new KeyboardEvent('keydown', { keyCode })
+  window.dispatchEvent(keydown)
+
+  const keyup = new KeyboardEvent('keyup', { keyCode })
+  window.dispatchEvent(keyup)
+
+  return keyup
+}
+
+describe('[escapeKey API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)addEscapeKey]', () => {
+      test('registers correctly', async () => {
+        const fn = createTestFn()
+
+        expect(
+          addEscapeKey(fn)
+        ).toBeUndefined()
+
+        expect(fn).not.toHaveBeenCalled()
+
+        const evt = triggerKey()
+
+        expect(fn).toHaveBeenCalledTimes(1)
+        expect(fn).toHaveBeenCalledWith(evt)
+      })
+
+      test('calls only last registered fn', async () => {
+        const fnFirst = createTestFn()
+        const fnLast = createTestFn()
+
+        expect(
+          addEscapeKey(fnFirst)
+        ).toBeUndefined()
+
+        expect(
+          addEscapeKey(fnLast)
+        ).toBeUndefined()
+
+        expect(fnFirst).not.toHaveBeenCalled()
+        expect(fnLast).not.toHaveBeenCalled()
+
+        const evt = triggerKey()
+
+        expect(fnFirst).not.toHaveBeenCalled()
+        expect(fnLast).toHaveBeenCalledTimes(1)
+        expect(fnLast).toHaveBeenCalledWith(evt)
+
+        removeEscapeKey(fnLast)
+
+        const evtSecond = triggerKey()
+
+        expect(fnFirst).toHaveBeenCalledTimes(1)
+        expect(fnFirst).toHaveBeenCalledWith(evtSecond)
+      })
+
+      test('triggers only on ESC key', () => {
+        const fn = createTestFn()
+
+        expect(
+          addEscapeKey(fn)
+        ).toBeUndefined()
+
+        expect(fn).not.toHaveBeenCalled()
+
+        triggerKey(65)
+
+        expect(fn).not.toHaveBeenCalled()
+      })
+    })
+
+    describe('[(function)removeEscapeKey]', () => {
+      test('has correct return value', () => {
+        const fn = createTestFn()
+
+        addEscapeKey(fn)
+
+        expect(
+          removeEscapeKey(fn)
+        ).toBeUndefined()
+
+        triggerKey()
+
+        expect(fn).not.toHaveBeenCalled()
+      })
+
+      test('does not error out if fn is not registered', () => {
+        const fn = createTestFn()
+
+        expect(
+          removeEscapeKey(fn)
+        ).toBeUndefined()
+      })
+    })
+  })
+})

package/src/utils/private.noop-ssr-directive-transform/noop-ssr-directive-transform.test.js

@@ -0,0 +1,14 @@
+import { describe, test, expect } from 'vitest'
+
+import noopSsrDirectiveTransform from './noop-ssr-directive-transform.js'
+
+describe('[noopSsrDirectiveTransform API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('has correct return value', () => {
+        const result = noopSsrDirectiveTransform()
+        expect(result).toStrictEqual({})
+      })
+    })
+  })
+})

package/src/utils/{private → private.portal}/portal.js

@@ -1,4 +1,4 @@
-import { getParentProxy } from './vm.js'
+import { getParentProxy } from '../private.vm/vm.js'
 
 export const portalProxyList = []
 

package/src/utils/{private → private.position-engine}/position-engine.js

@@ -1,4 +1,4 @@
-import { getScrollbarWidth } from '../scroll.js'
+import { getScrollbarWidth } from '../scroll/scroll.js'
 import { client } from '../../plugins/platform/Platform.js'
 
 let vpLeft, vpTop

package/src/utils/private.render/render.test.js

@@ -0,0 +1,187 @@
+import { describe, test, expect } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { ref } from 'vue'
+
+import { hSlot, hUniqueSlot, hMergeSlot, hMergeSlotSafely, hDir } from './render.js'
+
+describe('[render API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)hSlot]', () => {
+      test('hSlot()', () => {
+        expect(
+          hSlot()
+        ).toBeUndefined()
+      })
+
+      test('hSlot(void, x)', () => {
+        expect(
+          hSlot(void 0, 'x')
+        ).toBe('x')
+      })
+
+      test('hSlot(() => void, x)', () => {
+        expect(
+          hSlot(() => {}, 'x')
+        ).toBe('x')
+      })
+
+      test('hSlot(() => null, x)', () => {
+        expect(
+          hSlot(() => null, 'x')
+        ).toBe('x')
+      })
+
+      test('hSlot(() => z)', () => {
+        expect(
+          hSlot(() => 'z')
+        ).toBe('z')
+      })
+
+      test('hSlot(() => z, x)', () => {
+        expect(
+          hSlot(() => 'z', 'x')
+        ).toBe('z')
+      })
+    })
+
+    describe('[(function)hUniqueSlot]', () => {
+      test('hUniqueSlot()', () => {
+        expect(
+          hUniqueSlot()
+        ).toBeUndefined()
+      })
+
+      test('hUniqueSlot(void, x)', () => {
+        expect(
+          hUniqueSlot(void 0, 'x')
+        ).toBe('x')
+      })
+
+      test('hUniqueSlot(() => [z])', () => {
+        const value = [ 'z' ]
+        const result = hUniqueSlot(() => value)
+        expect(result).not.toBe(value)
+        expect(result).toStrictEqual([ 'z' ])
+      })
+
+      test('hUniqueSlot(() => [z], x)', () => {
+        const value = [ 'z' ]
+        const result = hUniqueSlot(() => value, 'x')
+        expect(result).not.toBe(value)
+        expect(result).toStrictEqual([ 'z' ])
+      })
+
+      test('hUniqueSlot(() => void, x)', () => {
+        expect(
+          hUniqueSlot(() => {}, 'x')
+        ).toBe('x')
+      })
+
+      test('hUniqueSlot(() => null, x)', () => {
+        expect(
+          hUniqueSlot(() => null, 'x')
+        ).toBe('x')
+      })
+    })
+
+    describe('[(function)hMergeSlot]', () => {
+      test('hMergeSlot(void, [x])', () => {
+        const source = [ 'x' ]
+        const result = hMergeSlot(void 0, source)
+        expect(result).toBe(source)
+      })
+
+      test('hMergeSlot(() => z, [x])', () => {
+        const source = [ 'x' ]
+        const result = hMergeSlot(() => 'z', source)
+        expect(result).not.toBe(source)
+        expect(result).toStrictEqual([ 'x', 'z' ])
+      })
+
+      test('hMergeSlot(() => [z], [x])', () => {
+        const source = [ 'x' ]
+        const result = hMergeSlot(() => [ 'z' ], source)
+        expect(result).not.toBe(source)
+        expect(result).toStrictEqual([ 'x', 'z' ])
+      })
+    })
+
+    describe('[(function)hMergeSlotSafely]', () => {
+      test('hMergeSlotSafely()', () => {
+        expect(hMergeSlot()).toBeUndefined()
+      })
+
+      test('hMergeSlotSafely(void, [x])', () => {
+        const source = [ 'x' ]
+        const result = hMergeSlotSafely(void 0, source)
+        expect(result).toBe(source)
+      })
+
+      test('hMergeSlotSafely(() => z, [x])', () => {
+        const source = [ 'x' ]
+        const result = hMergeSlotSafely(() => 'z', source)
+        expect(result).not.toBe(source)
+        expect(result).toStrictEqual([ 'x', 'z' ])
+      })
+
+      test('hMergeSlotSafely(() => [z], [x])', () => {
+        const source = [ 'x' ]
+        const z = [ 'z' ]
+        const result = hMergeSlotSafely(() => z, source)
+        expect(result).not.toBe(source)
+        expect(result).not.toBe(z)
+        expect(result).toStrictEqual([ 'x', 'z' ])
+      })
+
+      test('hMergeSlotSafely(() => [z])', () => {
+        const z = [ 'z' ]
+        const result = hMergeSlotSafely(() => z)
+        expect(result).toBe(z)
+      })
+    })
+
+    describe('[(function)hDir]', () => {
+      test('correctly mounts/unmounts directive', async () => {
+        let directiveIsMounted = false
+        const condition = ref(true)
+
+        const directive = {
+          name: 'custom-directive',
+          beforeMount () {
+            directiveIsMounted = true
+          },
+          beforeUnmount () {
+            directiveIsMounted = false
+          }
+        }
+
+        const wrapper = mount({
+          setup: () => {
+            return () => hDir(
+              'div',
+              { class: 'div-class' },
+              [ 'child' ],
+              'key',
+              condition.value,
+              () => [ [ directive ] ]
+            )
+          }
+        })
+
+        expect(directiveIsMounted).toBe(true)
+        expect(wrapper.html()).toBe('<div class="div-class">child</div>')
+
+        condition.value = false
+        await flushPromises()
+
+        expect(directiveIsMounted).toBe(false)
+        expect(wrapper.html()).toBe('<div class="div-class">child</div>')
+
+        condition.value = true
+        await flushPromises()
+        expect(directiveIsMounted).toBe(true)
+        expect(wrapper.html()).toBe('<div class="div-class">child</div>')
+      })
+    })
+  })
+})

package/src/utils/private.rtl/rtl.test.js

@@ -0,0 +1,13 @@
+import { describe, test, expect } from 'vitest'
+
+import { rtlHasScrollBug } from './rtl.js'
+
+describe('[rtl API]', () => {
+  describe('[Variables]', () => {
+    describe('[(variable)rtlHasScrollBug]', () => {
+      test('is defined correctly', () => {
+        expect(rtlHasScrollBug).toBeTypeOf('boolean')
+      })
+    })
+  })
+})

package/src/utils/private.selection/selection.test.js

@@ -0,0 +1,40 @@
+import { describe, test, expect, onTestFinished } from 'vitest'
+
+import { clearSelection } from './selection.js'
+
+describe('[selection API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)clearSelection]', () => {
+      test('has correct return value', () => {
+        expect(
+          clearSelection()
+        ).toBeUndefined()
+      })
+
+      test('works correctly', () => {
+        const selection = window.getSelection()
+
+        const el = document.createElement('div')
+        el.innerHTML = '<address>quasar@email.com</address>'
+
+        document.body.appendChild(el)
+
+        onTestFinished(() => { el.remove() })
+
+        selection.selectAllChildren(el)
+
+        expect(
+          selection.toString()
+        ).toBe('quasar@email.com')
+
+        expect(
+          clearSelection()
+        ).toBeUndefined()
+
+        expect(
+          selection.toString()
+        ).toBe('')
+      })
+    })
+  })
+})

package/src/utils/private.sort/sort.test.js

@@ -0,0 +1,25 @@
+import { describe, test, expect } from 'vitest'
+
+import { sortDate, sortBoolean } from './sort.js'
+
+describe('[sort API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)sortDate]', () => {
+      test('has correct return value', () => {
+        const a = new Date(10)
+        const b = new Date()
+        expect(sortDate(a, b)).toBeLessThan(0)
+        expect(sortDate(b, a)).toBeGreaterThan(0)
+        expect(sortDate(a, a)).toBe(0)
+      })
+    })
+
+    describe('[(function)sortBoolean]', () => {
+      test('has correct return value', () => {
+        expect(sortBoolean(false, true)).toBeGreaterThan(0)
+        expect(sortBoolean(true, false)).toBeLessThan(0)
+        expect(sortBoolean(true, true)).toBe(0)
+      })
+    })
+  })
+})

package/src/utils/{private → private.symbols}/symbols.js

@@ -8,4 +8,4 @@ export const formKey = '_q_fo_'
 export const tabsKey = '_q_tabs_'
 export const uploaderKey = '_q_u_'
 
-export const emptyRenderFn = () => {}
+export function emptyRenderFn () {}

package/src/utils/private.touch/touch.test.js

@@ -0,0 +1,102 @@
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import { getModifierDirections, shouldStart } from './touch.js'
+
+async function createEvent (nodeName) {
+  let evt
+  const wrapper = mount({ template: `<${ nodeName } />` }, {
+    props: {
+      onClick: localEvt => { evt = localEvt }
+    }
+  })
+
+  await wrapper.trigger('click')
+  return evt
+}
+
+describe('[touch API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)getModifierDirections]', () => {
+      test.each([
+        [ 'left', { left: true } ],
+        [ 'left+right', { left: true, right: true }, { left: true, right: true, horizontal: true } ],
+        [ 'horizontal', { horizontal: true }, { left: true, right: true, horizontal: true } ],
+
+        [ 'up', { up: true } ],
+        [ 'up+down', { up: true, down: true }, { up: true, down: true, vertical: true } ],
+        [ 'vertical', { vertical: true }, { up: true, down: true, vertical: true } ],
+
+        [ 'right+down', { right: true, down: true } ],
+        [ 'none', {},
+          { up: true, down: true, left: true, right: true, horizontal: true, vertical: true, all: true }
+        ],
+        [ 'horizontal+vertical',
+          { horizontal: true, vertical: true },
+          { up: true, down: true, left: true, right: true, horizontal: true, vertical: true, all: true }
+        ]
+      ])('has correct return value for %s', (_, mod, expected) => {
+        const result = getModifierDirections(mod)
+        expect(result).toStrictEqual(expected || mod)
+      })
+    })
+
+    describe('[(function)shouldStart]', () => {
+      test('has handler', async () => {
+        const evt = await createEvent('div')
+
+        const result = shouldStart(evt, {
+          handler: () => {}
+        })
+        expect(result).toBe(true)
+      })
+
+      test('no handler', async () => {
+        const evt = await createEvent('div')
+
+        const result = shouldStart(evt, {})
+        expect(result).toBe(false)
+      })
+
+      test('input element', async () => {
+        const evt = await createEvent('input')
+
+        const result = shouldStart(evt, {
+          handler: () => {}
+        })
+        expect(result).toBe(false)
+      })
+
+      test('textarea element', async () => {
+        const evt = await createEvent('textarea')
+
+        const result = shouldStart(evt, {
+          handler: () => {}
+        })
+        expect(result).toBe(false)
+      })
+
+      test('on a Quasar cloned event (by itself)', async () => {
+        const evt = await createEvent('div')
+        evt.qClonedBy = 'abc'
+
+        const result = shouldStart(evt, {
+          uid: 'abc',
+          handler: () => {}
+        })
+        expect(result).toBe(false)
+      })
+
+      test('on a Quasar cloned event (by someone else)', async () => {
+        const evt = await createEvent('div')
+        evt.qClonedBy = 'abc'
+
+        const result = shouldStart(evt, {
+          uid: 'xyz',
+          handler: () => {}
+        })
+        expect(result).toBe(true)
+      })
+    })
+  })
+})

package/src/utils/private.vm/vm.test.js

@@ -0,0 +1,175 @@
+import { describe, test, expect } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { h, getCurrentInstance } from 'vue'
+
+import { getParentProxy, getNormalizedVNodes, vmHasRouter, vmIsDestroyed } from './vm.js'
+
+import { getRouter } from 'testing/runtime/router.js'
+
+describe('[vm API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)getParentProxy]', () => {
+      test('has correct return value', () => {
+        let childVm, parentVm
+
+        const ChildComponent = {
+          template: '<div />',
+          setup () {
+            childVm = getCurrentInstance()
+            return {}
+          }
+        }
+
+        mount({
+          template: '<div> <ChildComponent /> </div>',
+          components: {
+            ChildComponent
+          },
+          setup () {
+            parentVm = getCurrentInstance()
+            return {}
+          }
+        })
+
+        expect(
+          getParentProxy(childVm.proxy)
+        ).toBe(parentVm.proxy)
+      })
+
+      test('handles complex hierarchy', async () => {
+        let childVm, parentVm
+
+        const ChildComponent = {
+          template: '<div />',
+          setup () {
+            childVm = getCurrentInstance()
+            return {}
+          }
+        }
+
+        const IntermediateComponent = {
+          template: '<div> <ChildComponent /> </div>',
+          components: {
+            ChildComponent
+          }
+        }
+
+        mount({
+          template: '<div> <IntermediateComponent /> </div>',
+          components: {
+            IntermediateComponent
+          },
+          setup () {
+            parentVm = getCurrentInstance()
+            return {}
+          }
+        })
+
+        await flushPromises()
+
+        expect(
+          getParentProxy(
+            getParentProxy(childVm.proxy)
+          )
+        ).toBe(parentVm.proxy)
+      })
+    })
+
+    describe('[(function)getNormalizedVNodes]', () => {
+      test('has correct return value', () => {
+        let vnodes
+
+        const ParentComponent = {
+          setup (_, { slots }) {
+            return () => {
+              vnodes = getNormalizedVNodes(slots.default())
+              return h('div', {}, vnodes)
+            }
+          }
+        }
+
+        const ChildComponent = {
+          template: `
+            <div>
+              <div>Simple</div>
+              <div v-for="n in 2" :key="n">Child {{ n }}</div>
+            </div>
+          `
+        }
+
+        mount({
+          template: `
+            <ParentComponent>
+              <ChildComponent />
+              <ChildComponent v-for="n in 2" :key="n" />
+            </ParentComponent>
+          `,
+          components: {
+            ParentComponent,
+            ChildComponent
+          }
+        })
+
+        expect(vnodes).toBeDefined()
+        expect(vnodes).toHaveLength(3)
+      })
+    })
+
+    describe('[(function)vmHasRouter]', () => {
+      test('returns correctly with no router', () => {
+        let vm
+
+        mount({
+          template: '<div />',
+          setup () {
+            vm = getCurrentInstance()
+            return {}
+          }
+        })
+
+        expect(
+          vmHasRouter(vm)
+        ).toBe(false)
+      })
+
+      test('returns correctly with router', async () => {
+        let vm
+        const router = await getRouter('/route')
+
+        mount({
+          template: '<div />',
+          setup () {
+            vm = getCurrentInstance()
+            return {}
+          }
+        }, {
+          global: {
+            plugins: [ router ]
+          }
+        })
+
+        expect(
+          vmHasRouter(vm)
+        ).toBe(true)
+      })
+    })
+
+    describe('[(function)vmIsDestroyed]', () => {
+      test('has correct return value', () => {
+        let vm
+
+        const wrapper = mount({
+          template: '<div />',
+          setup () {
+            vm = getCurrentInstance()
+            return {}
+          }
+        })
+
+        expect(vmIsDestroyed(vm)).toBe(false)
+        wrapper.unmount()
+        expect(vmIsDestroyed(vm)).toBe(true)
+      })
+    })
+  })
+})