quasar 2.15.3 → 2.15.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.15.3",
+  "version": "2.15.4",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",
@@ -63,8 +63,8 @@
     "table": "^6.8.2",
     "typescript": "^5.4.5",
     "vue": "^3",
-    "eslint-config-quasar": "0.0.1",
-    "@quasar/extras": "1.16.11"
+    "@quasar/extras": "1.16.11",
+    "eslint-config-quasar": "0.0.1"
   },
   "vetur": {
     "tags": "dist/vetur/quasar-tags.json",

package/src/components/toolbar/QToolbar.test.js

@@ -0,0 +1,45 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QToolbar from './QToolbar.js'
+
+describe('[QToolbar API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)inset]', () => {
+      test('is defined correctly', () => {
+        expect(QToolbar.props.inset).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QToolbar)
+        const target = wrapper.get('.q-toolbar')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-toolbar--inset')
+
+        await wrapper.setProps({ inset: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-toolbar--inset')
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
+        const wrapper = mount(QToolbar, {
+          slots: {
+            default: () => slotContent
+          }
+        })
+
+        expect(wrapper.html()).toContain(slotContent)
+      })
+    })
+  })
+})

package/src/components/toolbar/QToolbarTitle.test.js

@@ -0,0 +1,45 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QToolbarTitle from './QToolbarTitle.js'
+
+describe('[QToolbarTitle API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)shrink]', () => {
+      test('is defined correctly', () => {
+        expect(QToolbarTitle.props.shrink).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QToolbarTitle)
+        const target = wrapper.get('.q-toolbar__title')
+
+        expect(
+          target.classes()
+        ).not.toContain('col-shrink')
+
+        await wrapper.setProps({ shrink: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('col-shrink')
+      })
+    })
+  })
+
+  describe('[Slots]', () => {
+    describe('[(slot)default]', () => {
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
+        const wrapper = mount(QToolbarTitle, {
+          slots: {
+            default: () => slotContent
+          }
+        })
+
+        expect(wrapper.html()).toContain(slotContent)
+      })
+    })
+  })
+})

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