quasar 2.15.3 → 2.16.0

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, onTestFinished } 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/bottom-sheet/BottomSheet.js

@@ -1,5 +1,5 @@
 import BottomSheet from './component/BottomSheetComponent.js'
-import globalDialog from '../../utils/private.global/global-dialog.js'
+import globalDialog from '../../utils/private.dialog/create-dialog.js'
 
 export default {
   install ({ $q, parentApp }) {

package/src/plugins/bottom-sheet/BottomSheet.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "utils/private.global/global-dialog" ],
+  "mixins": [ "utils/private.dialog/create-dialog" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/quasar-plugins/bottom-sheet"

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/dialog/Dialog.js

@@ -1,5 +1,5 @@
 import DialogPlugin from './component/DialogPluginComponent.js'
-import globalDialog from '../../utils/private.global/global-dialog.js'
+import globalDialog from '../../utils/private.dialog/create-dialog.js'
 
 export default {
   install ({ $q, parentApp }) {

package/src/plugins/dialog/Dialog.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "utils/private.global/global-dialog" ],
+  "mixins": [ "utils/private.dialog/create-dialog" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/quasar-plugins/dialog"

package/src/plugins/icon-set/IconSet.js

@@ -1,8 +1,7 @@
 import { createReactivePlugin } from '../../utils/private.create/create.js'
 import { injectProp } from '../../utils/private.inject-obj-prop/inject-obj-prop.js'
 
-// no extension on purpose for next one:
-import materialIcons from '../../../icon-set/material-icons'
+import materialIcons from '../../../icon-set/material-icons.js'
 
 const Plugin = createReactivePlugin({
   iconMapFn: null,

package/src/plugins/icon-set/IconSet.test.js

@@ -330,13 +330,13 @@ describe('[IconSet API]', () => {
 
       test('should work with an imported icon set', async () => {
         const { vm: { $q } } = mountPlugin()
-        const { default: newIconSet } = await import('quasar/icon-set/fontawesome-v6.mjs')
+        const { default: newIconSet } = await import('quasar/icon-set/fontawesome-v6.js')
 
         IconSet.set(newIconSet)
         expect(IconSet.props.name).toBe(newIconSet.name)
         expect($q.iconSet.name).toBe(newIconSet.name)
 
-        const { default: anotherIconSet } = await import('quasar/icon-set/ionicons-v4.mjs')
+        const { default: anotherIconSet } = await import('quasar/icon-set/ionicons-v4.js')
         $q.iconSet.set(anotherIconSet)
         expect(IconSet.props.name).toBe(anotherIconSet.name)
         expect($q.iconSet.name).toBe(anotherIconSet.name)

package/src/plugins/lang/Lang.js

@@ -1,7 +1,6 @@
 import { createReactivePlugin } from '../../utils/private.create/create.js'
 
-// no extension on purpose for next one:
-import defaultLang from '../../../lang/en-US'
+import defaultLang from '../../../lang/en-US.js'
 
 function getLocale () {
   if (__QUASAR_SSR_SERVER__) return

package/src/plugins/lang/Lang.test.js

@@ -231,13 +231,13 @@ describe('[Lang API]', () => {
 
       test('should work with an imported lang pack', async () => {
         const { vm: { $q } } = mountPlugin()
-        const { default: deLang } = await import('quasar/lang/de-DE.mjs')
+        const { default: deLang } = await import('quasar/lang/de-DE.js')
 
         Lang.set(deLang)
         expect(Lang.props.nativeName).toBe(deLang.nativeName)
         expect($q.lang.nativeName).toBe(deLang.nativeName)
 
-        const { default: itLang } = await import('quasar/lang/it.mjs')
+        const { default: itLang } = await import('quasar/lang/it.js')
         $q.lang.set(itLang)
         expect(Lang.props.nativeName).toBe(itLang.nativeName)
         expect($q.lang.nativeName).toBe(itLang.nativeName)

package/src/plugins/loading/Loading.js

@@ -5,7 +5,7 @@ import QSpinner from '../../components/spinner/QSpinner.js'
 import { createChildApp } from '../../install-quasar.js'
 
 import { createReactivePlugin } from '../../utils/private.create/create.js'
-import { createGlobalNode, removeGlobalNode } from '../../utils/private.global/global-nodes.js'
+import { createGlobalNode, removeGlobalNode } from '../../utils/private.config/nodes.js'
 import preventScroll from '../../utils/scroll/prevent-scroll.js'
 import { isObject } from '../../utils/is/is.js'
 

package/src/plugins/loading-bar/LoadingBar.js

@@ -5,7 +5,7 @@ import { createChildApp } from '../../install-quasar.js'
 
 import { createReactivePlugin } from '../../utils/private.create/create.js'
 import { noop } from '../../utils/event/event.js'
-import { createGlobalNode } from '../../utils/private.global/global-nodes.js'
+import { createGlobalNode } from '../../utils/private.config/nodes.js'
 import { isObject } from '../../utils/is/is.js'
 
 const barRef = ref(null)

package/src/plugins/notify/Notify.js

@@ -9,7 +9,7 @@ import { createChildApp } from '../../install-quasar.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
 import { noop } from '../../utils/event/event.js'
-import { createGlobalNode } from '../../utils/private.global/global-nodes.js'
+import { createGlobalNode } from '../../utils/private.config/nodes.js'
 import { isObject } from '../../utils/is/is.js'
 
 let uid = 0

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
   }
 

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