quasar 2.15.3 → 2.15.4

package/src/utils/dom/dom.test.js

@@ -0,0 +1,222 @@
+import { describe, test, expect, vi, onTestFinished } from 'vitest'
+import { ref } from 'vue'
+
+import dom, { getElement, childHasFocus } from './dom.js'
+
+function createEl ({ top, left } = {}) {
+  const el = document.createElement('div')
+  el.setAttribute('tabindex', '0')
+  el.classList = 'fixed'
+
+  if (top !== void 0) {
+    el.style.top = top
+  }
+  if (left !== void 0) {
+    el.style.left = left
+  }
+
+  document.body.appendChild(el)
+  onTestFinished(() => { el.remove() })
+
+  return el
+}
+
+describe('[dom API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)offset]', () => {
+      test('has correct return value', () => {
+        const el = createEl()
+
+        expect(
+          dom.offset(el)
+        ).toStrictEqual({
+          top: expect.any(Number),
+          left: expect.any(Number)
+        })
+      })
+    })
+
+    describe('[(function)style]', () => {
+      test('has correct return value', () => {
+        const el = createEl({ top: '10px', left: '20px' })
+
+        expect(
+          dom.style(el, 'top')
+        ).toBe('10px')
+
+        expect(
+          dom.style(el, 'left')
+        ).toBe('20px')
+      })
+    })
+
+    describe('[(function)height]', () => {
+      test('height()', () => {
+        window.innerHeight = 100
+        expect(dom.height(window)).toBe(100)
+      })
+
+      test('height(el)', () => {
+        const el = createEl()
+        el.style.height = '100px'
+
+        expect(
+          dom.height(el)
+        ).toBeTypeOf('number')
+      })
+    })
+
+    describe('[(function)width]', () => {
+      test('width()', () => {
+        window.innerHeight = 100
+        expect(dom.height(window)).toBe(100)
+      })
+
+      test('width(el)', () => {
+        const el = createEl()
+        el.style.width = '100px'
+
+        expect(
+          dom.width(el)
+        ).toBeTypeOf('number')
+      })
+    })
+
+    describe('[(function)css]', () => {
+      test('has correct return value', () => {
+        const el = createEl()
+
+        const result = dom.css(el, {
+          width: '54px',
+          height: '154px'
+        })
+
+        expect(result).toBeUndefined()
+        expect(el.style.width).toBe('54px')
+        expect(el.style.height).toBe('154px')
+      })
+    })
+
+    describe('[(function)cssBatch]', () => {
+      test('has correct return value', () => {
+        const el1 = createEl()
+        const el2 = createEl()
+
+        const result = dom.cssBatch([ el1, el2 ], {
+          width: '54px',
+          height: '154px'
+        })
+
+        expect(result).toBeUndefined()
+
+        expect(el1.style.width).toBe('54px')
+        expect(el1.style.height).toBe('154px')
+
+        expect(el2.style.width).toBe('54px')
+        expect(el2.style.height).toBe('154px')
+      })
+    })
+
+    describe('[(function)ready]', () => {
+      test('ready()', () => {
+        expect(
+          dom.ready()
+        ).toBeUndefined()
+      })
+
+      test('ready(5)', () => {
+        expect(
+          dom.ready(5)
+        ).toBeUndefined()
+      })
+
+      test('ready(fn)', () => {
+        const fn = vi.fn(() => 5)
+
+        expect(
+          dom.ready(fn)
+        ).toBe(5)
+      })
+    })
+
+    describe('[(function)getElement]', () => {
+      test('getElement()', () => {
+        expect(getElement()).toBeUndefined()
+      })
+
+      test('getElement(null)', () => {
+        expect(getElement(null)).toBeUndefined()
+      })
+
+      test('getElement(el)', () => {
+        const el = createEl()
+        el.setAttribute('id', 'test-el')
+
+        expect(getElement('#test-el')).toBe(el)
+        expect(getElement('#bogus')).toBeUndefined()
+      })
+
+      test('getElement(vnode)', () => {
+        const el = createEl()
+        const vnode = { $el: el }
+
+        expect(getElement(vnode)).toBe(el)
+      })
+
+      test('getElement(ref)', () => {
+        const el = createEl()
+        const elRef = ref(el)
+
+        expect(getElement(elRef)).toBe(el)
+      })
+    })
+
+    describe('[(function)childHasFocus]', () => {
+      test('childHasFocus()', () => {
+        expect(childHasFocus()).toBe(true)
+      })
+
+      test('childHasFocus(null)', () => {
+        expect(childHasFocus(null)).toBe(true)
+      })
+
+      test('childHasFocus(el, elChild)', () => {
+        const el = createEl()
+        const elChild = document.createElement('div')
+        el.appendChild(elChild)
+
+        expect(
+          childHasFocus(el, elChild)
+        ).toBe(true)
+      })
+
+      test('childHasFocus(el, parentEl)', () => {
+        const parentEl = createEl()
+        const el = document.createElement('div')
+
+        expect(
+          childHasFocus(el, parentEl)
+        ).toBe(false)
+      })
+
+      test('childHasFocus(el, nextSiblingEl)', () => {
+        const el = createEl()
+        /* intermediateEl */ createEl()
+        const nextSiblingEl = createEl()
+
+        expect(
+          childHasFocus(el, nextSiblingEl)
+        ).toBe(true)
+      })
+
+      test('childHasFocus(el, prevSiblingEl)', () => {
+        const prevSiblingEl = createEl()
+        const el = createEl()
+
+        expect(
+          childHasFocus(el, prevSiblingEl)
+        ).toBe(false)
+      })
+    })
+  })
+})

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.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.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)
+      })
+    })
+  })
+})