quasar 2.15.3 → 2.15.4

package/src/plugins/private.body/Body.test.js

@@ -0,0 +1,28 @@
+import { describe, test, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import Body from './Body.js'
+
+const mountPlugin = () => mount({ template: '<div />' })
+
+describe('[Body API]', () => {
+  describe('[Functions]', () => {
+    describe('[(function)install]', () => {
+      test('should be defined correctly', () => {
+        expect(Body).toBeTypeOf('object')
+
+        expect(
+          Body.install
+        ).toBeTypeOf('function')
+      })
+
+      test('sets body classes', () => {
+        mountPlugin()
+
+        expect(
+          document.body.getAttribute('class')
+        ).toBe('desktop touch body--light')
+      })
+    })
+  })
+})

package/src/plugins/private.history/History.test.js

@@ -0,0 +1,38 @@
+import { describe, test, expect } from 'vitest'
+
+import History from './History.js'
+
+/**
+ * Can't really fully test it since it handles
+ * Capacitor and Cordova platforms
+ */
+
+describe('[History API]', () => {
+  describe('[Variables]', () => {
+    describe('[(variable)__history]', () => {
+      test('is defined correctly', () => {
+        expect(Array.isArray(History.__history)).toBe(true)
+      })
+    })
+
+    describe('[(variable)add]', () => {
+      test('is defined correctly', () => {
+        expect(History.add).toBeTypeOf('function')
+      })
+    })
+
+    describe('[(variable)remove]', () => {
+      test('is defined correctly', () => {
+        expect(History.remove).toBeTypeOf('function')
+      })
+    })
+  })
+
+  describe('[Functions]', () => {
+    describe('[(function)install]', () => {
+      test('is defined correctly', () => {
+        expect(History.install).toBeTypeOf('function')
+      })
+    })
+  })
+})

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