quasar 2.15.3 → 2.16.0

package/src/components/spinner/QSpinner.json

@@ -1,15 +1,11 @@
 {
-  "mixins": [ "composables/private.use-size/use-size" ],
+  "mixins": [ "components/spinner/spinner" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/spinners"
   },
 
   "props": {
-    "color": {
-      "extends": "color"
-    },
-
     "thickness": {
       "type": "Number",
       "desc": "Override value to use for stroke-width",

package/src/components/spinner/QSpinner.test.js

@@ -0,0 +1,79 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QSpinner from './QSpinner.js'
+
+describe('[QSpinner API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)size]', () => {
+      test.each([
+        [ 'String', '100px' ],
+        [ 'Number', 100 ]
+      ])('type %s has effect', async (_, propVal) => {
+        const expectedValue = '' + propVal
+        const wrapper = mount(QSpinner)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.attributes('width')
+        ).not.toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).not.toBe(expectedValue)
+
+        await wrapper.setProps({ size: propVal })
+        await flushPromises()
+
+        expect(
+          target.attributes('width')
+        ).toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).toBe(expectedValue)
+      })
+    })
+
+    describe('[(prop)color]', () => {
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QSpinner)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.classes()
+        ).not.toContain('text-red')
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('text-red')
+      })
+    })
+
+    describe('[(prop)thickness]', () => {
+      test('type Number has effect', async () => {
+        const propVal = 50
+        const wrapper = mount(QSpinner)
+
+        const target = wrapper.get('.q-spinner circle')
+
+        expect(
+          target.attributes('stroke-width')
+        ).not.toBe('' + propVal)
+
+        await wrapper.setProps({ thickness: propVal })
+        await flushPromises()
+
+        expect(
+          target.attributes('stroke-width')
+        ).toBe('' + propVal)
+      })
+    })
+  })
+})

package/src/components/spinner/QSpinnerAudio.test.js

@@ -0,0 +1,59 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QSpinnerAudio from './QSpinnerAudio.js'
+
+describe('[QSpinnerAudio API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)size]', () => {
+      test.each([
+        [ 'String', '100px' ],
+        [ 'Number', 100 ]
+      ])('type %s has effect', async (_, propVal) => {
+        const expectedValue = '' + propVal
+        const wrapper = mount(QSpinnerAudio)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.attributes('width')
+        ).not.toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).not.toBe(expectedValue)
+
+        await wrapper.setProps({ size: propVal })
+        await flushPromises()
+
+        expect(
+          target.attributes('width')
+        ).toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).toBe(expectedValue)
+      })
+    })
+
+    describe('[(prop)color]', () => {
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QSpinnerAudio)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.classes()
+        ).not.toContain('text-red')
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('text-red')
+      })
+    })
+  })
+})

package/src/components/spinner/QSpinnerBall.test.js

@@ -0,0 +1,59 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QSpinnerBall from './QSpinnerBall.js'
+
+describe('[QSpinnerBall API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)size]', () => {
+      test.each([
+        [ 'String', '100px' ],
+        [ 'Number', 100 ]
+      ])('type %s has effect', async (_, propVal) => {
+        const expectedValue = '' + propVal
+        const wrapper = mount(QSpinnerBall)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.attributes('width')
+        ).not.toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).not.toBe(expectedValue)
+
+        await wrapper.setProps({ size: propVal })
+        await flushPromises()
+
+        expect(
+          target.attributes('width')
+        ).toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).toBe(expectedValue)
+      })
+    })
+
+    describe('[(prop)color]', () => {
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QSpinnerBall)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.classes()
+        ).not.toContain('text-red')
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('text-red')
+      })
+    })
+  })
+})

package/src/components/spinner/QSpinnerBars.test.js

@@ -0,0 +1,59 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QSpinnerBars from './QSpinnerBars.js'
+
+describe('[QSpinnerBars API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)size]', () => {
+      test.each([
+        [ 'String', '100px' ],
+        [ 'Number', 100 ]
+      ])('type %s has effect', async (_, propVal) => {
+        const expectedValue = '' + propVal
+        const wrapper = mount(QSpinnerBars)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.attributes('width')
+        ).not.toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).not.toBe(expectedValue)
+
+        await wrapper.setProps({ size: propVal })
+        await flushPromises()
+
+        expect(
+          target.attributes('width')
+        ).toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).toBe(expectedValue)
+      })
+    })
+
+    describe('[(prop)color]', () => {
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QSpinnerBars)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.classes()
+        ).not.toContain('text-red')
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('text-red')
+      })
+    })
+  })
+})

package/src/components/spinner/QSpinnerBox.test.js

@@ -0,0 +1,59 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QSpinnerBox from './QSpinnerBox.js'
+
+describe('[QSpinnerBox API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)size]', () => {
+      test.each([
+        [ 'String', '100px' ],
+        [ 'Number', 100 ]
+      ])('type %s has effect', async (_, propVal) => {
+        const expectedValue = '' + propVal
+        const wrapper = mount(QSpinnerBox)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.attributes('width')
+        ).not.toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).not.toBe(expectedValue)
+
+        await wrapper.setProps({ size: propVal })
+        await flushPromises()
+
+        expect(
+          target.attributes('width')
+        ).toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).toBe(expectedValue)
+      })
+    })
+
+    describe('[(prop)color]', () => {
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QSpinnerBox)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.classes()
+        ).not.toContain('text-red')
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('text-red')
+      })
+    })
+  })
+})

package/src/components/spinner/QSpinnerClock.test.js

@@ -0,0 +1,59 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QSpinnerClock from './QSpinnerClock.js'
+
+describe('[QSpinnerClock API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)size]', () => {
+      test.each([
+        [ 'String', '100px' ],
+        [ 'Number', 100 ]
+      ])('type %s has effect', async (_, propVal) => {
+        const expectedValue = '' + propVal
+        const wrapper = mount(QSpinnerClock)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.attributes('width')
+        ).not.toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).not.toBe(expectedValue)
+
+        await wrapper.setProps({ size: propVal })
+        await flushPromises()
+
+        expect(
+          target.attributes('width')
+        ).toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).toBe(expectedValue)
+      })
+    })
+
+    describe('[(prop)color]', () => {
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QSpinnerClock)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.classes()
+        ).not.toContain('text-red')
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('text-red')
+      })
+    })
+  })
+})

package/src/components/spinner/QSpinnerComment.test.js

@@ -0,0 +1,59 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QSpinnerComment from './QSpinnerComment.js'
+
+describe('[QSpinnerComment API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)size]', () => {
+      test.each([
+        [ 'String', '100px' ],
+        [ 'Number', 100 ]
+      ])('type %s has effect', async (_, propVal) => {
+        const expectedValue = '' + propVal
+        const wrapper = mount(QSpinnerComment)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.attributes('width')
+        ).not.toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).not.toBe(expectedValue)
+
+        await wrapper.setProps({ size: propVal })
+        await flushPromises()
+
+        expect(
+          target.attributes('width')
+        ).toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).toBe(expectedValue)
+      })
+    })
+
+    describe('[(prop)color]', () => {
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QSpinnerComment)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.classes()
+        ).not.toContain('text-red')
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('text-red')
+      })
+    })
+  })
+})

package/src/components/spinner/QSpinnerCube.test.js

@@ -0,0 +1,59 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QSpinnerCube from './QSpinnerCube.js'
+
+describe('[QSpinnerCube API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)size]', () => {
+      test.each([
+        [ 'String', '100px' ],
+        [ 'Number', 100 ]
+      ])('type %s has effect', async (_, propVal) => {
+        const expectedValue = '' + propVal
+        const wrapper = mount(QSpinnerCube)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.attributes('width')
+        ).not.toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).not.toBe(expectedValue)
+
+        await wrapper.setProps({ size: propVal })
+        await flushPromises()
+
+        expect(
+          target.attributes('width')
+        ).toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).toBe(expectedValue)
+      })
+    })
+
+    describe('[(prop)color]', () => {
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QSpinnerCube)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.classes()
+        ).not.toContain('text-red')
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('text-red')
+      })
+    })
+  })
+})

package/src/components/spinner/QSpinnerDots.test.js

@@ -0,0 +1,59 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QSpinnerDots from './QSpinnerDots.js'
+
+describe('[QSpinnerDots API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)size]', () => {
+      test.each([
+        [ 'String', '100px' ],
+        [ 'Number', 100 ]
+      ])('type %s has effect', async (_, propVal) => {
+        const expectedValue = '' + propVal
+        const wrapper = mount(QSpinnerDots)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.attributes('width')
+        ).not.toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).not.toBe(expectedValue)
+
+        await wrapper.setProps({ size: propVal })
+        await flushPromises()
+
+        expect(
+          target.attributes('width')
+        ).toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).toBe(expectedValue)
+      })
+    })
+
+    describe('[(prop)color]', () => {
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QSpinnerDots)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.classes()
+        ).not.toContain('text-red')
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('text-red')
+      })
+    })
+  })
+})

package/src/components/spinner/QSpinnerFacebook.test.js

@@ -0,0 +1,59 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QSpinnerFacebook from './QSpinnerFacebook.js'
+
+describe('[QSpinnerFacebook API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)size]', () => {
+      test.each([
+        [ 'String', '100px' ],
+        [ 'Number', 100 ]
+      ])('type %s has effect', async (_, propVal) => {
+        const expectedValue = '' + propVal
+        const wrapper = mount(QSpinnerFacebook)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.attributes('width')
+        ).not.toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).not.toBe(expectedValue)
+
+        await wrapper.setProps({ size: propVal })
+        await flushPromises()
+
+        expect(
+          target.attributes('width')
+        ).toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).toBe(expectedValue)
+      })
+    })
+
+    describe('[(prop)color]', () => {
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QSpinnerFacebook)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.classes()
+        ).not.toContain('text-red')
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('text-red')
+      })
+    })
+  })
+})

package/src/components/spinner/QSpinnerGears.test.js

@@ -0,0 +1,59 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+
+import QSpinnerGears from './QSpinnerGears.js'
+
+describe('[QSpinnerGears API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)size]', () => {
+      test.each([
+        [ 'String', '100px' ],
+        [ 'Number', 100 ]
+      ])('type %s has effect', async (_, propVal) => {
+        const expectedValue = '' + propVal
+        const wrapper = mount(QSpinnerGears)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.attributes('width')
+        ).not.toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).not.toBe(expectedValue)
+
+        await wrapper.setProps({ size: propVal })
+        await flushPromises()
+
+        expect(
+          target.attributes('width')
+        ).toBe(expectedValue)
+
+        expect(
+          target.attributes('height')
+        ).toBe(expectedValue)
+      })
+    })
+
+    describe('[(prop)color]', () => {
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QSpinnerGears)
+
+        const target = wrapper.get('.q-spinner')
+
+        expect(
+          target.classes()
+        ).not.toContain('text-red')
+
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('text-red')
+      })
+    })
+  })
+})