quasar 2.15.3 → 2.16.0

package/src/plugins/screen/Screen.test.js

@@ -0,0 +1,453 @@
+import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import Screen from './Screen.js'
+
+const mountPlugin = () => mount({ template: '<div />' })
+
+beforeEach(() => {
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  vi.clearAllTimers()
+  vi.restoreAllMocks()
+})
+
+function setWidth (width) {
+  window.innerWidth = width
+  window.dispatchEvent(new Event('resize'))
+  vi.runAllTimers()
+}
+
+function setHeight (height) {
+  window.innerHeight = height
+  window.dispatchEvent(new Event('resize'))
+  vi.runAllTimers()
+}
+
+describe('[Screen API]', () => {
+  describe('[Injection]', () => {
+    test('is injected into $q', () => {
+      const wrapper = mountPlugin()
+      expect(Screen).toBe(wrapper.vm.$q.screen)
+    })
+  })
+
+  describe('[Props]', () => {
+    describe('[(prop)width]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(Screen.width).toBeTypeOf('number')
+      })
+
+      test('is reactive', () => {
+        mountPlugin()
+        expect(Screen.width).not.toBe(100)
+        setWidth(100)
+        vi.runAllTimers()
+        expect(Screen.width).toBe(100)
+      })
+    })
+
+    describe('[(prop)height]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(Screen.height).toBeTypeOf('number')
+      })
+
+      test('is reactive', () => {
+        mountPlugin()
+        expect(Screen.height).not.toBe(100)
+        setHeight(100)
+        expect(Screen.height).toBe(100)
+      })
+    })
+
+    describe('[(prop)name]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect([ 'xs', 'sm', 'md', 'lg', 'xl' ]).toContain(Screen.name)
+      })
+
+      test('is reactive', () => {
+        mountPlugin()
+
+        setWidth(500)
+        expect(Screen.name).toBe('xs')
+
+        setWidth(800)
+        expect(Screen.name).toBe('sm')
+
+        setWidth(1200)
+        expect(Screen.name).toBe('md')
+
+        setWidth(1600)
+        expect(Screen.name).toBe('lg')
+
+        setWidth(2000)
+        expect(Screen.name).toBe('xl')
+      })
+    })
+
+    describe('[(prop)sizes]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(Screen.sizes).toStrictEqual({
+          sm: expect.any(Number),
+          md: expect.any(Number),
+          lg: expect.any(Number),
+          xl: expect.any(Number)
+        })
+      })
+    })
+
+    describe('[(prop)lt]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(Screen.lt).toStrictEqual({
+          sm: expect.any(Boolean),
+          md: expect.any(Boolean),
+          lg: expect.any(Boolean),
+          xl: expect.any(Boolean)
+        })
+      })
+
+      test('is reactive', () => {
+        mountPlugin()
+
+        setWidth(500) // xs
+        expect(Screen.lt).toStrictEqual({
+          sm: true,
+          md: true,
+          lg: true,
+          xl: true
+        })
+
+        setWidth(800) // sm
+        expect(Screen.lt).toStrictEqual({
+          sm: false,
+          md: true,
+          lg: true,
+          xl: true
+        })
+
+        setWidth(1200) // md
+        expect(Screen.lt).toStrictEqual({
+          sm: false,
+          md: false,
+          lg: true,
+          xl: true
+        })
+
+        setWidth(1600) // lg
+        expect(Screen.lt).toStrictEqual({
+          sm: false,
+          md: false,
+          lg: false,
+          xl: true
+        })
+
+        setWidth(2000) // xl
+        expect(Screen.lt).toStrictEqual({
+          sm: false,
+          md: false,
+          lg: false,
+          xl: false
+        })
+      })
+    })
+
+    describe('[(prop)gt]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(Screen.gt).toStrictEqual({
+          xs: expect.any(Boolean),
+          sm: expect.any(Boolean),
+          md: expect.any(Boolean),
+          lg: expect.any(Boolean)
+        })
+      })
+
+      test('is reactive', () => {
+        mountPlugin()
+
+        setWidth(500) // xs
+        expect(Screen.gt).toStrictEqual({
+          xs: false,
+          sm: false,
+          md: false,
+          lg: false
+        })
+
+        setWidth(800) // sm
+        expect(Screen.gt).toStrictEqual({
+          xs: true,
+          sm: false,
+          md: false,
+          lg: false
+        })
+
+        setWidth(1200) // md
+        expect(Screen.gt).toStrictEqual({
+          xs: true,
+          sm: true,
+          md: false,
+          lg: false
+        })
+
+        setWidth(1600) // lg
+        expect(Screen.gt).toStrictEqual({
+          xs: true,
+          sm: true,
+          md: true,
+          lg: false
+        })
+
+        setWidth(2000) // xl
+        expect(Screen.gt).toStrictEqual({
+          xs: true,
+          sm: true,
+          md: true,
+          lg: true
+        })
+      })
+    })
+
+    describe('[(prop)xs]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(Screen.xs).toBeTypeOf('boolean')
+      })
+
+      test('is reactive', () => {
+        mountPlugin()
+
+        setWidth(500) // xs
+        expect(Screen.xs).toBe(true)
+
+        setWidth(800) // sm
+        expect(Screen.xs).toBe(false)
+      })
+    })
+
+    describe('[(prop)sm]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(Screen.sm).toBeTypeOf('boolean')
+      })
+
+      test('is reactive', () => {
+        mountPlugin()
+
+        setWidth(500) // xs
+        expect(Screen.sm).toBe(false)
+
+        setWidth(800) // sm
+        expect(Screen.sm).toBe(true)
+      })
+    })
+
+    describe('[(prop)md]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(Screen.md).toBeTypeOf('boolean')
+      })
+
+      test('is reactive', () => {
+        mountPlugin()
+
+        setWidth(800) // sm
+        expect(Screen.md).toBe(false)
+
+        setWidth(1200) // md
+        expect(Screen.md).toBe(true)
+      })
+    })
+
+    describe('[(prop)lg]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(Screen.lg).toBeTypeOf('boolean')
+      })
+
+      test('is reactive', () => {
+        mountPlugin()
+
+        setWidth(1200) // md
+        expect(Screen.lg).toBe(false)
+
+        setWidth(1600) // lg
+        expect(Screen.lg).toBe(true)
+      })
+    })
+
+    describe('[(prop)xl]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(Screen.xl).toBeTypeOf('boolean')
+      })
+
+      test('is reactive', () => {
+        mountPlugin()
+
+        setWidth(1600) // lg
+        expect(Screen.xl).toBe(false)
+
+        setWidth(2000) // xl
+        expect(Screen.xl).toBe(true)
+      })
+    })
+  })
+
+  describe('[Methods]', () => {
+    describe('[(method)setSizes]', () => {
+      test('should be callable', () => {
+        mountPlugin()
+
+        const newSizes = {
+          sm: 10,
+          md: 15,
+          lg: 20,
+          xl: 25
+        }
+
+        expect(
+          Screen.setSizes(newSizes)
+        ).toBeUndefined()
+
+        expect(
+          Screen.sizes
+        ).toStrictEqual(newSizes)
+
+        setWidth(5)
+        expect(Screen).toMatchObject({
+          name: 'xs',
+          xs: true,
+          sm: false,
+          md: false,
+          lg: false,
+          xl: false,
+          lt: {
+            sm: true,
+            md: true,
+            lg: true,
+            xl: true
+          },
+          gt: {
+            xs: false,
+            sm: false,
+            md: false,
+            lg: false
+          }
+        })
+
+        setWidth(11)
+        expect(Screen).toMatchObject({
+          name: 'sm',
+          xs: false,
+          sm: true,
+          md: false,
+          lg: false,
+          xl: false,
+          lt: {
+            sm: false,
+            md: true,
+            lg: true,
+            xl: true
+          },
+          gt: {
+            xs: true,
+            sm: false,
+            md: false,
+            lg: false
+          }
+        })
+
+        setWidth(16)
+        expect(Screen).toMatchObject({
+          name: 'md',
+          xs: false,
+          sm: false,
+          md: true,
+          lg: false,
+          xl: false,
+          lt: {
+            sm: false,
+            md: false,
+            lg: true,
+            xl: true
+          },
+          gt: {
+            xs: true,
+            sm: true,
+            md: false,
+            lg: false
+          }
+        })
+
+        setWidth(21)
+        expect(Screen).toMatchObject({
+          name: 'lg',
+          xs: false,
+          sm: false,
+          md: false,
+          lg: true,
+          xl: false,
+          lt: {
+            sm: false,
+            md: false,
+            lg: false,
+            xl: true
+          },
+          gt: {
+            xs: true,
+            sm: true,
+            md: true,
+            lg: false
+          }
+        })
+
+        setWidth(26)
+        expect(Screen).toMatchObject({
+          name: 'xl',
+          xs: false,
+          sm: false,
+          md: false,
+          lg: false,
+          xl: true,
+          lt: {
+            sm: false,
+            md: false,
+            lg: false,
+            xl: false
+          },
+          gt: {
+            xs: true,
+            sm: true,
+            md: true,
+            lg: true
+          }
+        })
+      })
+    })
+
+    describe('[(method)setDebounce]', () => {
+      test('should be callable', () => {
+        mountPlugin()
+        expect(
+          Screen.setDebounce(1000)
+        ).toBeUndefined()
+
+        window.innerWidth = 100
+        window.dispatchEvent(new Event('resize'))
+
+        expect(Screen.width).not.toBe(100)
+        vi.advanceTimersByTime(999)
+        expect(Screen.width).not.toBe(100)
+        vi.advanceTimersByTime(1)
+        expect(Screen.width).toBe(100)
+      })
+    })
+  })
+})

package/src/utils/css-var/get-css-var.test.js

@@ -27,6 +27,18 @@ describe('[getCssVar API]', () => {
 
         el.remove()
       })
+
+      test('should throw if propName is not a string', () => {
+        expect(() => {
+          getCssVar(5)
+        }).toThrow(TypeError)
+      })
+
+      test('should throw if element is not a DOM element', () => {
+        expect(() => {
+          getCssVar('prop', {})
+        }).toThrow(TypeError)
+      })
     })
   })
 })

package/src/utils/css-var/set-css-var.test.js

@@ -31,6 +31,24 @@ describe('[setCssVar API]', () => {
 
         el.remove()
       })
+
+      test('should throw if propName is not a string', () => {
+        expect(() => {
+          setCssVar(5, 'awesome')
+        }).toThrow(TypeError)
+      })
+
+      test('should throw if value is not a string', () => {
+        expect(() => {
+          setCssVar('prop', 5)
+        }).toThrow(TypeError)
+      })
+
+      test('should throw if element is not a DOM element', () => {
+        expect(() => {
+          setCssVar('prop', 'awesome', {})
+        }).toThrow(TypeError)
+      })
     })
   })
 })

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