quasar 2.15.3 → 2.16.0

package/src/composables/use-interval/use-interval.test.js

@@ -0,0 +1,173 @@
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+import useInterval from './use-interval.js'
+
+let wrapper
+
+beforeEach(() => {
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  vi.clearAllTimers()
+  vi.restoreAllMocks()
+
+  if (wrapper !== null) {
+    wrapper.unmount()
+    wrapper = null
+  }
+})
+
+describe('[useInterval API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('correctly registers an interval (int)', () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerInterval } = useInterval()
+
+              registerInterval(fn, 100)
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(99)
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(1)
+        expect(fn).toHaveBeenCalledTimes(1)
+
+        vi.advanceTimersByTime(100)
+
+        expect(fn).toHaveBeenCalledTimes(2)
+      })
+
+      test('correctly registers an interval (str)', () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerInterval } = useInterval()
+
+              registerInterval(fn, '100')
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(99)
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(1)
+        expect(fn).toHaveBeenCalledTimes(1)
+
+        vi.advanceTimersByTime(100)
+
+        expect(fn).toHaveBeenCalledTimes(2)
+      })
+
+      test('removeInterval works correctly', () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const {
+                registerInterval,
+                removeInterval
+              } = useInterval()
+
+              registerInterval(fn, 100)
+              return { registerInterval, removeInterval }
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(200)
+        expect(fn).toHaveBeenCalledTimes(2)
+
+        wrapper.vm.removeInterval()
+        vi.advanceTimersToNextTimer()
+
+        expect(fn).toHaveBeenCalledTimes(2)
+
+        wrapper.vm.registerInterval(fn, 100)
+        wrapper.unmount()
+
+        vi.advanceTimersToNextTimer()
+        vi.runAllTimers()
+
+        expect(fn).toHaveBeenCalledTimes(2)
+      })
+
+      test('unmount stops timeout', () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerInterval } = useInterval()
+
+              registerInterval(fn, 100)
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+
+        wrapper.unmount()
+        wrapper = null
+
+        vi.advanceTimersToNextTimer()
+        vi.runAllTimers()
+
+        expect(fn).not.toHaveBeenCalled()
+      })
+
+      test('can override timeout', () => {
+        const fn1 = vi.fn()
+        const fn2 = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerInterval } = useInterval()
+              return { registerInterval }
+            }
+          })
+        )
+
+        wrapper.vm.registerInterval(fn1, 100)
+        vi.advanceTimersByTime(99)
+        expect(fn1).not.toHaveBeenCalled()
+
+        wrapper.vm.registerInterval(fn2, 200)
+        vi.advanceTimersByTime(199)
+        expect(fn1).not.toHaveBeenCalled()
+        expect(fn2).not.toHaveBeenCalled()
+
+        vi.advanceTimersByTime(1)
+        expect(fn1).not.toHaveBeenCalled()
+        expect(fn2).toHaveBeenCalledTimes(1)
+
+        vi.advanceTimersToNextTimer()
+        expect(fn1).not.toHaveBeenCalled()
+        expect(fn2).toHaveBeenCalledTimes(2)
+      })
+    })
+  })
+})

package/src/composables/use-render-cache/use-render-cache.js

@@ -25,7 +25,7 @@ export default function () {
     },
 
     hasCache (key) {
-      return cache.hasOwnProperty(key)
+      return Object.hasOwnProperty.call(cache, key)
     },
 
     clearCache (key) {
@@ -33,7 +33,7 @@ export default function () {
         delete cache[ key ]
       }
       else {
-        cache = {}
+        cache = Object.create(null)
       }
     }
   }

package/src/composables/use-render-cache/use-render-cache.test.js

@@ -0,0 +1,73 @@
+import { describe, test, expect } from 'vitest'
+
+import useRenderCache from './use-render-cache.js'
+
+describe('[useRenderCache API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('has correct return value', () => {
+        const result = useRenderCache()
+        expect(result).toStrictEqual({
+          getCache: expect.any(Function),
+          setCache: expect.any(Function),
+          hasCache: expect.any(Function),
+          clearCache: expect.any(Function)
+        })
+      })
+
+      test('getCache() returns undefined', () => {
+        const { getCache } = useRenderCache()
+        expect(getCache('key')).toBeUndefined()
+      })
+
+      test('setCache() sets cache', () => {
+        const { setCache, getCache } = useRenderCache()
+        setCache('key', 'value')
+        expect(getCache('key')).toBe('value')
+
+        setCache('key', 'second-value')
+        expect(getCache('key')).toBe('second-value')
+
+        setCache('another-key', 'another-value')
+        expect(getCache('another-key')).toBe('another-value')
+        expect(getCache('key')).toBe('second-value')
+      })
+
+      test('hasCache() returns true', () => {
+        const { hasCache, setCache } = useRenderCache()
+        setCache('key', 0)
+        setCache('key2', 10)
+        expect(hasCache('key')).toBe(true)
+        expect(hasCache('key2')).toBe(true)
+      })
+
+      test('clearCache() clears cache', () => {
+        const { clearCache, setCache, getCache, hasCache } = useRenderCache()
+        setCache('key', 0)
+        setCache('key2', 0)
+
+        clearCache()
+
+        expect(hasCache('key')).toBe(false)
+        expect(getCache('key')).toBeUndefined()
+
+        expect(hasCache('key2')).toBe(false)
+        expect(getCache('key2')).toBeUndefined()
+      })
+
+      test('clearCache(key) clears only the key', () => {
+        const { clearCache, setCache, getCache, hasCache } = useRenderCache()
+        setCache('key', 0)
+        setCache('key2', 0)
+
+        clearCache('key')
+
+        expect(hasCache('key')).toBe(false)
+        expect(getCache('key')).toBeUndefined()
+
+        expect(hasCache('key2')).toBe(true)
+        expect(getCache('key2')).toBe(0)
+      })
+    })
+  })
+})

package/src/composables/use-split-attrs/use-split-attrs.test.js

@@ -0,0 +1,55 @@
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+import useSplitAttrs from './use-split-attrs.js'
+
+describe('[useSplitAttrs API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test.each([
+        [ 'no attrs', {}, [] ],
+        [ 'attrs', { a: '1' }, [] ],
+        [ 'listeners', {}, [ 'b' ] ],
+        [ 'attrs and listeners', { a: '1' }, [ 'b' ] ],
+        [ 'multiple attrs and listeners', { a: '1', b: '2' }, [ 'f1', 'f2' ] ]
+      ])('correctly splits: %s', (_, attrs, listeners) => {
+        const attrHtml = Object.keys(attrs).map(
+          key => `${ key }="${ attrs[ key ] }"`
+        ).join(' ')
+
+        const fn = () => {}
+        const fnList = {}
+        const listenerHtml = listeners.map(key => {
+          fnList[ 'on' + key.toUpperCase() ] = fn
+          return `@${ key }="fn"`
+        }).join(' ')
+
+        const ChildComponent = {
+          name: 'ChildComponent',
+          template: '<div />',
+          setup () {
+            const result = useSplitAttrs()
+            return { result }
+          }
+        }
+
+        const wrapper = mount(
+          defineComponent({
+            template: `<ChildComponent ${ attrHtml } ${ listenerHtml } />`,
+            components: { ChildComponent },
+            setup () {
+              return { fn }
+            }
+          })
+        )
+
+        const target = wrapper.findComponent({ name: 'ChildComponent' })
+        expect(target.vm.result).toStrictEqual({
+          attributes: expect.$ref(attrs),
+          listeners: expect.$ref(fnList)
+        })
+      })
+    })
+  })
+})

package/src/composables/use-tick/use-tick.test.js

@@ -0,0 +1,118 @@
+import { describe, test, expect, vi, afterEach } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+import useTick from './use-tick.js'
+
+let wrapper
+
+afterEach(() => {
+  if (wrapper !== null) {
+    wrapper.unmount()
+    wrapper = null
+  }
+})
+
+describe('[useTick API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('correctly registers a tick', async () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerTick } = useTick()
+
+              registerTick(fn)
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        await flushPromises()
+        expect(fn).toHaveBeenCalledTimes(1)
+      })
+
+      test('removeTick works correctly', async () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const {
+                registerTick,
+                removeTick
+              } = useTick()
+
+              registerTick(fn)
+              return { registerTick, removeTick }
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        wrapper.vm.removeTick()
+
+        await flushPromises()
+        expect(fn).not.toHaveBeenCalled()
+      })
+
+      test('unmount stops tick', async () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerTick } = useTick()
+
+              registerTick(fn)
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+
+        wrapper.unmount()
+        wrapper = null
+
+        await flushPromises()
+
+        expect(fn).not.toHaveBeenCalled()
+      })
+
+      test('can override tick', async () => {
+        const fn1 = vi.fn()
+        const fn2 = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerTick } = useTick()
+              return { registerTick }
+            }
+          })
+        )
+
+        expect(fn1).not.toHaveBeenCalled()
+        wrapper.vm.registerTick(fn1)
+        expect(fn1).not.toHaveBeenCalled()
+
+        wrapper.vm.registerTick(fn2)
+        expect(fn1).not.toHaveBeenCalled()
+        expect(fn2).not.toHaveBeenCalled()
+
+        await flushPromises()
+
+        expect(fn1).not.toHaveBeenCalled()
+        expect(fn2).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+})

package/src/composables/use-timeout/use-timeout.test.js

@@ -0,0 +1,169 @@
+import { describe, test, expect, vi, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+
+import useTimeout from './use-timeout.js'
+
+let wrapper
+
+beforeEach(() => {
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  vi.clearAllTimers()
+  vi.restoreAllMocks()
+
+  if (wrapper !== null) {
+    wrapper.unmount()
+    wrapper = null
+  }
+})
+
+describe('[useTimeout API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('correctly registers a timeout (int)', () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerTimeout } = useTimeout()
+
+              registerTimeout(fn, 100)
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(99)
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(1)
+        expect(fn).toHaveBeenCalledTimes(1)
+
+        vi.runAllTimers()
+        expect(fn).toHaveBeenCalledTimes(1)
+      })
+
+      test('correctly registers a timeout (str)', () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerTimeout } = useTimeout()
+
+              registerTimeout(fn, '100')
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(99)
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(1)
+        expect(fn).toHaveBeenCalledTimes(1)
+
+        vi.runAllTimers()
+        expect(fn).toHaveBeenCalledTimes(1)
+      })
+
+      test('removeTimeout works correctly', () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const {
+                registerTimeout,
+                removeTimeout
+              } = useTimeout()
+
+              registerTimeout(fn, 100)
+              return { registerTimeout, removeTimeout }
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+        vi.advanceTimersByTime(200)
+        expect(fn).toHaveBeenCalledTimes(1)
+
+        wrapper.vm.removeTimeout()
+        vi.runAllTimers()
+
+        expect(fn).toHaveBeenCalledTimes(1)
+
+        wrapper.vm.registerTimeout(fn, 100)
+        wrapper.unmount()
+
+        vi.runAllTimers()
+
+        expect(fn).toHaveBeenCalledTimes(1)
+      })
+
+      test('unmount stops timeout', () => {
+        const fn = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerTimeout } = useTimeout()
+
+              registerTimeout(fn, 100)
+              return {}
+            }
+          })
+        )
+
+        expect(fn).not.toHaveBeenCalled()
+
+        wrapper.unmount()
+        wrapper = null
+
+        vi.runAllTimers()
+
+        expect(fn).not.toHaveBeenCalled()
+      })
+
+      test('can override timeout', () => {
+        const fn1 = vi.fn()
+        const fn2 = vi.fn()
+
+        wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const { registerTimeout } = useTimeout()
+              return { registerTimeout }
+            }
+          })
+        )
+
+        wrapper.vm.registerTimeout(fn1, 100)
+        vi.advanceTimersByTime(99)
+        expect(fn1).not.toHaveBeenCalled()
+
+        wrapper.vm.registerTimeout(fn2, 200)
+        vi.advanceTimersByTime(199)
+        expect(fn1).not.toHaveBeenCalled()
+        expect(fn2).not.toHaveBeenCalled()
+
+        vi.advanceTimersByTime(1)
+        expect(fn1).not.toHaveBeenCalled()
+        expect(fn2).toHaveBeenCalledTimes(1)
+
+        vi.runAllTimers()
+        expect(fn1).not.toHaveBeenCalled()
+        expect(fn2).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+})

package/src/install-quasar.js

@@ -9,7 +9,7 @@ import Lang from './plugins/lang/Lang.js'
 import IconSet from './plugins/icon-set/IconSet.js'
 
 import { quasarKey } from './utils/private.symbols/symbols.js'
-import { globalConfig, globalConfigIsFrozen, freezeGlobalConfig } from './utils/private.global/global-config.js'
+import { globalConfig, globalConfigIsFrozen, freezeGlobalConfig } from './utils/private.config/instance-config.js'
 import { isObject } from './utils/is/is.js'
 
 /**

package/src/plugins/addressbar/AddressbarColor.test.js

@@ -0,0 +1,53 @@
+import { describe, test, expect, vi } from 'vitest'
+import { mount, config } from '@vue/test-utils'
+
+import AddressbarColor from './AddressbarColor.js'
+
+// We override Quasar install so it installs this plugin
+const quasarVuePlugin = config.global.plugins.find(entry => entry.name === 'Quasar')
+const { install } = quasarVuePlugin
+
+function mountPlugin (addressbarColor) {
+  quasarVuePlugin.install = app => install(app, {
+    config: { addressbarColor },
+    plugins: { AddressbarColor }
+  })
+
+  return mount({ template: '<div />' })
+}
+
+describe('[AddressbarColor API]', () => {
+  describe('[Injection]', () => {
+    test('is injected into $q', () => {
+      const wrapper = mountPlugin()
+      expect(AddressbarColor).toBe(wrapper.vm.$q.addressbarColor)
+    })
+  })
+
+  describe('[Methods]', () => {
+    describe('[(method)set]', () => {
+      test('should be callable', () => {
+        mountPlugin()
+
+        expect(
+          AddressbarColor.set('#ff0000')
+        ).toBeUndefined()
+      })
+
+      test('should be called automatically when $q.config.addressbarColor is set', () => {
+        const original = AddressbarColor.set
+
+        // override original since the real test would be on a
+        // mobile platform (and we can't test that here, yet)
+        AddressbarColor.set = vi.fn()
+        mountPlugin('#aabbcc')
+
+        expect.soft(AddressbarColor.set).toHaveBeenCalledTimes(1)
+        expect.soft(AddressbarColor.set).toHaveBeenCalledWith('#aabbcc')
+
+        // restore original
+        AddressbarColor.set = original
+      })
+    })
+  })
+})

package/src/plugins/app-fullscreen/AppFullscreen.js

@@ -1,5 +1,5 @@
 import { createReactivePlugin } from '../../utils/private.create/create.js'
-import { changeGlobalNodesTarget } from '../../utils/private.global/global-nodes.js'
+import { changeGlobalNodesTarget } from '../../utils/private.config/nodes.js'
 
 const prefixes = {}
 

package/src/plugins/app-fullscreen/AppFullscreen.json

@@ -13,12 +13,14 @@
 
     "isActive": {
       "type": "Boolean",
-      "desc": "Is Fullscreen active?"
+      "desc": "Is Fullscreen active?",
+      "reactive": true
     },
 
     "activeEl": {
       "type": [ "Element", "null" ],
       "desc": "The DOM element used as root for fullscreen, otherwise 'null'",
+      "reactive": true,
       "examples": [ "document.fullscreenElement", "null" ]
     }
   },