quasar 2.15.3 → 2.15.4

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/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.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" ]
     }
   },

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

@@ -0,0 +1,206 @@
+import { describe, test, expect, afterEach } from 'vitest'
+import { mount, config } from '@vue/test-utils'
+
+// jsdom hack
+// this import should always sit before the AppFullscreen one
+import { createMockedEl } from './test/mock-fullscreen.js'
+
+import AppFullscreen from './AppFullscreen.js'
+
+const mountPlugin = () => mount({ template: '<div />' })
+
+// We override Quasar install so it installs this plugin
+const quasarVuePlugin = config.global.plugins.find(entry => entry.name === 'Quasar')
+const { install } = quasarVuePlugin
+quasarVuePlugin.install = app => install(app, { plugins: { AppFullscreen } })
+
+afterEach(async () => {
+  // ensure we don't leave test in fullscreen state
+  await AppFullscreen.exit()
+})
+
+describe('[AppFullscreen API]', () => {
+  describe('[Injection]', () => {
+    test('is injected into $q', () => {
+      const wrapper = mountPlugin()
+      expect(AppFullscreen).toMatchObject(wrapper.vm.$q.fullscreen)
+    })
+  })
+
+  describe('[Props]', () => {
+    describe('[(prop)isCapable]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(AppFullscreen.isCapable).toBeTypeOf('boolean')
+      })
+    })
+
+    describe('[(prop)isActive]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(AppFullscreen.isActive).toBeTypeOf('boolean')
+      })
+
+      test('is reactive', async () => {
+        mountPlugin()
+
+        expect(AppFullscreen.isActive).toBe(false)
+        await AppFullscreen.request()
+        expect(AppFullscreen.isActive).toBe(true)
+
+        await AppFullscreen.exit()
+        expect(AppFullscreen.isActive).toBe(false)
+      })
+    })
+
+    describe('[(prop)activeEl]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(AppFullscreen.activeEl).$any([
+          expect.any(Element),
+          null
+        ])
+      })
+
+      test('is reactive', async () => {
+        mountPlugin()
+
+        expect(AppFullscreen.activeEl).toBe(null)
+        await AppFullscreen.request()
+        expect(AppFullscreen.activeEl).not.toBe(null)
+
+        await AppFullscreen.exit()
+        expect(AppFullscreen.activeEl).toBe(null)
+      })
+    })
+  })
+
+  describe('[Methods]', () => {
+    describe('[(method)request]', () => {
+      test('request()', async () => {
+        mountPlugin()
+
+        const result = AppFullscreen.request()
+        expect(
+          result
+        ).toBeInstanceOf(Promise)
+
+        await result
+        expect(AppFullscreen.isActive).toBe(true)
+        expect(AppFullscreen.activeEl).not.toBe(null)
+
+        await AppFullscreen.exit()
+        expect(AppFullscreen.isActive).toBe(false)
+        expect(AppFullscreen.activeEl).toBe(null)
+      })
+
+      test('request(el)', async () => {
+        mountPlugin()
+
+        const el = createMockedEl()
+
+        const result = AppFullscreen.request(el)
+        expect(
+          result
+        ).toBeInstanceOf(Promise)
+
+        await result
+
+        expect(el.requestFullscreen).toHaveBeenCalledTimes(1)
+        expect(AppFullscreen.isActive).toBe(true)
+        expect(AppFullscreen.activeEl).toBe(el)
+
+        await AppFullscreen.exit()
+        expect(AppFullscreen.isActive).toBe(false)
+        expect(AppFullscreen.activeEl).toBe(null)
+      })
+
+      test('call request(el) 2 times', async () => {
+        mountPlugin()
+
+        const el = createMockedEl()
+
+        const result = AppFullscreen.request(el)
+        expect(
+          result
+        ).toBeInstanceOf(Promise)
+
+        await result
+        expect(el.requestFullscreen).toHaveBeenCalledTimes(1)
+        expect(AppFullscreen.activeEl).toBe(el)
+
+        await AppFullscreen.request(el)
+        expect(el.requestFullscreen).toHaveBeenCalledTimes(1)
+        expect(AppFullscreen.activeEl).toBe(el)
+
+        await AppFullscreen.exit()
+        expect(AppFullscreen.activeEl).toBe(null)
+      })
+    })
+
+    describe('[(method)exit]', () => {
+      test('should be callable', () => {
+        mountPlugin()
+        expect(
+          AppFullscreen.exit()
+        ).toBeInstanceOf(Promise)
+      })
+
+      test('request() + exit()', async () => {
+        mountPlugin()
+
+        const result = AppFullscreen.request()
+        expect(
+          result
+        ).toBeInstanceOf(Promise)
+
+        await result
+        expect(AppFullscreen.isActive).toBe(true)
+        expect(AppFullscreen.activeEl).not.toBe(null)
+
+        await AppFullscreen.exit()
+        expect(AppFullscreen.isActive).toBe(false)
+        expect(AppFullscreen.activeEl).toBe(null)
+      })
+    })
+
+    describe('[(method)toggle]', () => {
+      test('toggle()', async () => {
+        mountPlugin()
+
+        const result = AppFullscreen.toggle()
+        expect(
+          result
+        ).toBeInstanceOf(Promise)
+
+        await result
+        expect(AppFullscreen.isActive).toBe(true)
+        expect(AppFullscreen.activeEl).not.toBe(null)
+
+        await AppFullscreen.toggle()
+        expect(AppFullscreen.isActive).toBe(false)
+        expect(AppFullscreen.activeEl).toBe(null)
+      })
+
+      test('toggle(el)', async () => {
+        mountPlugin()
+
+        const el = createMockedEl()
+
+        const result = AppFullscreen.toggle(el)
+        expect(
+          result
+        ).toBeInstanceOf(Promise)
+
+        await result
+        expect(el.requestFullscreen).toHaveBeenCalledTimes(1)
+        expect(AppFullscreen.isActive).toBe(true)
+        expect(AppFullscreen.activeEl).toBe(el)
+
+        await AppFullscreen.toggle()
+        expect(AppFullscreen.isActive).toBe(false)
+        expect(AppFullscreen.activeEl).toBe(null)
+      })
+    })
+  })
+})

package/src/plugins/app-fullscreen/test/mock-fullscreen.js

@@ -0,0 +1,43 @@
+import { vi } from 'vitest'
+
+/**
+ * jsdom does not support Fullscreen API,
+ * so we mock the functionality
+ */
+
+export function mockedRequestFullscreen (el = document.documentElement) {
+  document.fullscreenElement = el
+  mockedToggleFullscreen()
+}
+
+export function mockedExitFullscreen () {
+  document.fullscreenElement = null
+  mockedToggleFullscreen()
+}
+
+export function mockedToggleFullscreen () {
+  document.onfullscreenchange()
+}
+
+export function createMockedEl () {
+  const el = document.createElement('div')
+  el.setAttribute('tabindex', '0')
+  document.body.appendChild(el)
+
+  el.requestFullscreen = vi.fn(() => {
+    document.fullscreenElement = el
+    mockedToggleFullscreen()
+  })
+
+  el.exitFullscreen = mockedExitFullscreen
+
+  onTestFinished(() => { el.remove() })
+
+  return el
+}
+
+document.documentElement.requestFullscreen = mockedRequestFullscreen
+document.documentElement.exitFullscreen = mockedExitFullscreen
+
+document.requestFullscreen = mockedRequestFullscreen
+document.exitFullscreen = mockedExitFullscreen

package/src/plugins/app-visibility/AppVisibility.test.js

@@ -0,0 +1,45 @@
+import { describe, test, expect } from 'vitest'
+import { mount, config } from '@vue/test-utils'
+
+import AppVisibility from './AppVisibility.js'
+
+const mountPlugin = () => mount({ template: '<div />' })
+
+// We override Quasar install so it installs this plugin
+const quasarVuePlugin = config.global.plugins.find(entry => entry.name === 'Quasar')
+const { install } = quasarVuePlugin
+quasarVuePlugin.install = app => install(app, { plugins: { AppVisibility } })
+
+describe('[AppVisibility API]', () => {
+  describe('[Injection]', () => {
+    test('is injected into $q', () => {
+      const wrapper = mountPlugin()
+      expect(wrapper.vm.$q.appVisible).toBe(AppVisibility.appVisible)
+    })
+  })
+
+  describe('[Props]', () => {
+    describe('[(prop)appVisible]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(AppVisibility.appVisible).toBe(true)
+      })
+
+      test('is reactive', () => {
+        const wrapper = mountPlugin()
+        expect(AppVisibility.appVisible).toBe(true)
+
+        // jsdom hack
+        Object.defineProperty(document, 'hidden', {
+          configurable: true,
+          get: () => true
+        })
+
+        document.dispatchEvent(new Event('visibilitychange'))
+
+        expect(AppVisibility.appVisible).toBe(false)
+        expect(wrapper.vm.$q.appVisible).toBe(false)
+      })
+    })
+  })
+})

package/src/plugins/dark/Dark.test.js

@@ -0,0 +1,158 @@
+import { describe, test, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import Dark from './Dark.js'
+
+const mountPlugin = () => mount({ template: '<div />' })
+
+describe('[Dark API]', () => {
+  describe('[Injection]', () => {
+    test('is injected into $q', () => {
+      const wrapper = mountPlugin()
+      expect(Dark).toMatchObject(wrapper.vm.$q.dark)
+    })
+  })
+
+  describe('[Props]', () => {
+    describe('[(prop)isActive]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect(Dark.isActive).toBeTypeOf('boolean')
+      })
+
+      test('is reactive', () => {
+        const { vm: { $q } } = mountPlugin()
+
+        expect(Dark.isActive).toBe(false)
+        expect($q.dark.isActive).toBe(false)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(false)
+
+        Dark.set(true)
+
+        expect(Dark.isActive).toBe(true)
+        expect($q.dark.isActive).toBe(true)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(true)
+      })
+    })
+
+    describe('[(prop)mode]', () => {
+      test('is correct type', () => {
+        mountPlugin()
+        expect([ 'auto', true, false ]).toContain(Dark.mode)
+      })
+    })
+  })
+
+  describe('[Methods]', () => {
+    describe('[(method)set]', () => {
+      test('should be callable', () => {
+        const { vm: { $q } } = mountPlugin()
+
+        expect(
+          Dark.set(true)
+        ).toBeUndefined()
+
+        expect(Dark.isActive).toBe(true)
+        expect($q.dark.isActive).toBe(true)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(true)
+
+        expect(
+          Dark.set(false)
+        ).toBeUndefined()
+
+        expect(Dark.isActive).toBe(false)
+        expect($q.dark.isActive).toBe(false)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(false)
+      })
+
+      test('should handle auto mode', () => {
+        const { vm: { $q } } = mountPlugin()
+
+        // jsdom hack
+        const media = {
+          matches: true,
+          addListener: vi.fn(),
+          removeListener: vi.fn()
+        }
+        window.matchMedia = vi.fn(() => media)
+
+        Dark.set('auto')
+
+        expect(Dark.mode).toBe('auto')
+
+        expect(media.addListener).toHaveBeenCalledTimes(1)
+        expect(media.removeListener).not.toHaveBeenCalled()
+
+        expect(Dark.isActive).toBe(true)
+        expect($q.dark.isActive).toBe(true)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(true)
+
+        media.matches = false
+        Dark.__updateMedia()
+
+        expect(media.addListener).toHaveBeenCalledTimes(1)
+        expect(media.removeListener).not.toHaveBeenCalled()
+
+        expect(Dark.isActive).toBe(false)
+        expect($q.dark.isActive).toBe(false)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(false)
+
+        Dark.set(true)
+        expect(Dark.mode).not.toBe('auto')
+
+        expect(media.addListener).toHaveBeenCalledTimes(1)
+        expect(media.removeListener).toHaveBeenCalledTimes(1)
+
+        expect(Dark.isActive).toBe(true)
+        expect($q.dark.isActive).toBe(true)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(true)
+      })
+    })
+
+    describe('[(method)toggle]', () => {
+      test('should be callable', () => {
+        const { vm: { $q } } = mountPlugin()
+
+        Dark.set(true)
+
+        expect(Dark.isActive).toBe(true)
+        expect($q.dark.isActive).toBe(true)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(true)
+
+        expect(
+          Dark.toggle()
+        ).toBeUndefined()
+
+        expect(Dark.isActive).toBe(false)
+        expect($q.dark.isActive).toBe(false)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(false)
+
+        Dark.toggle()
+
+        expect(Dark.isActive).toBe(true)
+        expect($q.dark.isActive).toBe(true)
+        expect(
+          document.body.classList.contains('body--dark')
+        ).toBe(true)
+      })
+    })
+  })
+})

package/src/plugins/platform/Platform.js

@@ -124,8 +124,9 @@ function getPlatform (UA) {
     browser.firefox = true
     matched.browser = 'firefox'
   }
+
   // Set iOS if on iPod, iPad or iPhone
-  else if (browser.ipod || browser.ipad || browser.iphone) {
+  if (browser.ipod || browser.ipad || browser.iphone) {
     browser.ios = true
   }