quasar 2.15.2 → 2.15.4

package/src/components/badge/QBadge.test.js

@@ -1,166 +1,266 @@
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import { describe, test, expect } from 'vitest'
 
 import QBadge from './QBadge.js'
 
-const defaultOptions = {
-  label: 'simple badge'
-}
+describe('[QBadge API]', () => {
+  describe('[Props]', () => {
+    describe('[(prop)color]', () => {
+      test('is defined correctly', () => {
+        expect(QBadge.props.color).toBeDefined()
+      })
 
-const alignValues = [ 'top', 'middle', 'bottom' ]
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QBadge)
+        const target = wrapper.get('.q-badge')
 
-function mountQBadge (options = {}) {
-  options.props = {
-    ...defaultOptions,
-    ...options.props
-  }
+        expect(
+          target.classes()
+        ).not.toContain(`bg-${ propVal }`)
 
-  return mount(QBadge, options)
-}
+        expect(
+          target.classes()
+        ).not.toContain(`text-${ propVal }`)
 
-describe('[QBadge API]', () => {
-  describe('[Props]', () => {
-    describe('[(prop)floating]', () => {
-      test('should render a floating badge', () => {
-        const wrapper = mountQBadge({
-          props: { floating: true }
-        })
+        await wrapper.setProps({ color: propVal })
+        await flushPromises()
 
         expect(
-          wrapper.get('.q-badge')
-            .classes()
-        ).toContain('q-badge--floating')
+          target.classes()
+        ).toContain(`bg-${ propVal }`)
+
+        expect(
+          target.classes()
+        ).not.toContain(`text-${ propVal }`)
       })
     })
 
-    describe('[(prop)multi-line]', () => {
-      test('should render a content with multiple lines', () => {
-        const wrapper = mountQBadge({
-          props: { multiLine: true }
-        })
+    describe('[(prop)text-color]', () => {
+      test('is defined correctly', () => {
+        expect(QBadge.props.textColor).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(QBadge)
+        const target = wrapper.get('.q-badge')
 
         expect(
-          wrapper.get('.q-badge')
-            .classes()
-        ).toContain('q-badge--multi-line')
+          target.classes()
+        ).not.toContain(`bg-${ propVal }`)
+
+        expect(
+          target.classes()
+        ).not.toContain(`text-${ propVal }`)
+
+        await wrapper.setProps({ textColor: propVal })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain(`text-${ propVal }`)
+
+        expect(
+          target.classes()
+        ).not.toContain(`bg-${ propVal }`)
       })
     })
 
-    describe('[(prop)label]', () => {
-      test('should render a label inside the badge', () => {
-        const label = 'Badge label'
-        const wrapper = mountQBadge({
-          props: { label }
-        })
+    describe('[(prop)floating]', () => {
+      test('is defined correctly', () => {
+        expect(QBadge.props.floating).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBadge)
+        const target = wrapper.get('.q-badge')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-badge--floating')
+
+        await wrapper.setProps({ floating: true })
+        await flushPromises()
+
+        expect(
+          wrapper.classes()
+        ).toContain('q-badge--floating')
 
         expect(
           wrapper.get('.q-badge')
-            .text()
-        ).toContain(label)
+            .$computedStyle('position')
+        ).toBe('absolute')
       })
     })
 
-    describe('[(prop)align]', () => {
-      test(`should render a badge aligned based on defined values: ${ alignValues.join(', ') }`, () => {
-        // loop over alignValues
-        for (const align of alignValues) {
-          const wrapper = mountQBadge({
-            props: { align }
-          })
-
-          expect(
-            wrapper.get('.q-badge')
-              .$style('vertical-align')
-          ).toBe(align)
-        }
+    describe('[(prop)transparent]', () => {
+      test('is defined correctly', () => {
+        expect(QBadge.props.transparent).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBadge)
+        const target = wrapper.get('.q-badge')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-badge--transparent')
+
+        await wrapper.setProps({ transparent: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-badge--transparent')
+
+        expect(
+          target.$computedStyle('opacity')
+        ).not.toBe('1')
       })
     })
 
-    describe('[(prop)color]', () => {
-      test('should change color based on Quasar Color Palette', () => {
-        const wrapper = mountQBadge({
-          props: { color: 'red' }
-        })
+    describe('[(prop)multi-line]', () => {
+      test('is defined correctly', () => {
+        expect(QBadge.props.multiLine).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBadge)
+        const target = wrapper.get('.q-badge')
 
         expect(
-          wrapper.get('.q-badge')
-            .classes()
-        ).toContain('bg-red')
+          target.classes()
+        ).not.toContain('q-badge--multi-line')
+
+        await wrapper.setProps({ multiLine: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-badge--multi-line')
+
+        expect(
+          target.$computedStyle('word-break')
+        ).toBe('break-all')
       })
     })
 
-    describe('[(prop)text-color]', () => {
-      test('should change text color based on Quasar Color Palette', () => {
-        const wrapper = mountQBadge({
-          props: { textColor: 'red' }
-        })
+    describe('[(prop)label]', () => {
+      test('is defined correctly', () => {
+        expect(QBadge.props.label).toBeDefined()
+      })
+
+      test.each([
+        [ 'String', 'John Doe' ],
+        [ 'Number', 22 ]
+      ])('type %s has effect', async (_, propVal) => {
+        const wrapper = mount(QBadge)
+        const target = wrapper.get('.q-badge')
 
         expect(
-          wrapper.get('.q-badge')
-            .classes()
-        ).toContain('text-red')
+          target.text()
+        ).not.toContain(propVal)
+
+        await wrapper.setProps({ label: propVal })
+        await flushPromises()
+
+        expect(
+          target.text()
+        ).toContain(propVal)
       })
     })
 
-    describe('[(prop)transparent]', () => {
-      test('should have opacity style when "transparent" prop is true', () => {
-        const wrapper = mountQBadge({
-          props: { transparent: true }
-        })
+    describe('[(prop)align]', () => {
+      test('is defined correctly', () => {
+        expect(QBadge.props.align).toBeDefined()
+      })
+
+      test.each([
+        [ 'top' ],
+        [ 'middle' ],
+        [ 'bottom' ]
+      ])('value "%s" has effect', async propVal => {
+        const wrapper = mount(QBadge)
+        const target = wrapper.get('.q-badge')
 
         expect(
-          wrapper.get('.q-badge')
-            .classes()
-        ).toContain('q-badge--transparent')
+          target.$style('vertical-align')
+        ).not.toBe(propVal)
+
+        await wrapper.setProps({ align: propVal })
+        await flushPromises()
+
+        expect(
+          target.$style('vertical-align')
+        ).toBe(propVal)
       })
     })
 
     describe('[(prop)outline]', () => {
-      test('should have a outline style when "outline" prop is true', () => {
-        const wrapper = mountQBadge({
-          props: { outline: true }
-        })
+      test('is defined correctly', () => {
+        expect(QBadge.props.outline).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBadge)
+        const target = wrapper.get('.q-badge')
 
         expect(
-          wrapper.get('.q-badge')
-            .classes()
+          target.classes()
+        ).not.toContain('q-badge--outline')
+
+        await wrapper.setProps({ outline: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
         ).toContain('q-badge--outline')
+
+        expect(
+          target.$computedStyle('border')
+        ).toContain('1px solid')
       })
     })
 
     describe('[(prop)rounded]', () => {
-      test('should have a rounded style when "rounded" prop is true', () => {
-        const wrapper = mountQBadge({
-          props: { rounded: true }
-        })
+      test('is defined correctly', () => {
+        expect(QBadge.props.rounded).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBadge)
+        const target = wrapper.get('.q-badge')
 
         expect(
-          wrapper.get('.q-badge')
-            .classes()
+          target.classes()
+        ).not.toContain('q-badge--rounded')
+
+        await wrapper.setProps({ rounded: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
         ).toContain('q-badge--rounded')
+
+        expect(
+          target.$computedStyle('border-radius')
+        ).toBe('1em')
       })
     })
   })
 
   describe('[Slots]', () => {
     describe('[(slot)default]', () => {
-      test('should display the default slot content', () => {
-        const label = 'Badge label'
-
-        const wrapper = mountQBadge({
-          props: {
-            label: undefined
-          },
-
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
+        const wrapper = mount(QBadge, {
           slots: {
-            default: label
+            default: () => slotContent
           }
         })
 
-        expect(
-          wrapper.get('.q-badge')
-            .text()
-        ).toBe(label)
+        expect(wrapper.html()).toContain(slotContent)
       })
     })
   })

package/src/components/banner/QBanner.js

@@ -1,9 +1,9 @@
 import { h, computed, getCurrentInstance } from 'vue'
 
-import { createComponent } from '../../utils/private/create.js'
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
 
-import { hSlot } from '../../utils/private/render.js'
+import { hSlot } from '../../utils/private.render/render.js'
 
 export default createComponent({
   name: 'QBanner',

package/src/components/banner/QBanner.test.js

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import { describe, test, expect } from 'vitest'
 
 import QBanner from './QBanner.js'
@@ -6,117 +6,155 @@ import QBanner from './QBanner.js'
 describe('[QBanner API]', () => {
   describe('[Props]', () => {
     describe('[(prop)inline-actions]', () => {
-      test('should render the actions in the same row as the content', () => {
+      test('is defined correctly', () => {
+        expect(QBanner.props.inlineActions).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
         const wrapper = mount(QBanner, {
           slots: {
-            default: 'Banner content',
-            action: 'Banner action'
-          },
-          props: {
-            inlineActions: true
+            action: () => 'Banner action'
           }
         })
 
+        const target = wrapper
+          .get('.q-banner')
+          .get('.q-banner__actions')
+
         expect(
-          wrapper.get('.q-banner')
-            .get('.q-banner__actions')
-            .classes()
+          target.classes()
+        ).not.toContain('col-auto')
+
+        await wrapper.setProps({ inlineActions: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
         ).toContain('col-auto')
       })
     })
 
     describe('[(prop)dense]', () => {
-      test('should have a dense style when "dense" prop is true', () => {
-        const wrapper = mount(QBanner, {
-          props: {
-            dense: true
-          }
-        })
+      test('is defined correctly', () => {
+        expect(QBanner.props.dense).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBanner)
+        const target = wrapper.get('.q-banner')
 
         expect(
-          wrapper.get('.q-banner')
-            .classes()
+          target.classes()
+        ).not.toContain('q-banner--dense')
+
+        await wrapper.setProps({ dense: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
         ).toContain('q-banner--dense')
       })
     })
 
     describe('[(prop)rounded]', () => {
-      test('should have a rounded style when "rounded" prop is true', () => {
-        const wrapper = mount(QBanner, {
-          props: {
-            rounded: true
-          }
-        })
+      test('is defined correctly', () => {
+        expect(QBanner.props.rounded).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBanner)
+        const target = wrapper.get('.q-banner')
 
         expect(
-          wrapper.get('.q-banner')
-            .classes()
+          target.classes()
+        ).not.toContain('rounded-borders')
+
+        await wrapper.setProps({ rounded: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
         ).toContain('rounded-borders')
+
+        expect(
+          target.$computedStyle('border-radius')
+        ).toBe('4px')
       })
     })
 
     describe('[(prop)dark]', () => {
-      test('should have a dark style when "dark" prop is true', () => {
+      test('is defined correctly', () => {
+        expect(QBanner.props.dark).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBanner)
+        const target = wrapper.get('.q-banner')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-banner--dark')
+
+        await wrapper.setProps({ dark: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-banner--dark')
+      })
+
+      test('type null has effect', async () => {
         const wrapper = mount(QBanner, {
           props: {
-            dark: true
+            dark: null
           }
         })
 
         expect(
           wrapper.get('.q-banner')
             .classes()
-        ).toContain('q-banner--dark')
+        ).not.toContain('q-banner--dark')
       })
     })
   })
 
   describe('[Slots]', () => {
     describe('[(slot)default]', () => {
-      test('should render the default content', () => {
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
         const wrapper = mount(QBanner, {
           slots: {
-            default: 'Banner content'
+            default: () => slotContent
           }
         })
 
-        expect(
-          wrapper.get('.q-banner')
-            .get('.q-banner__content')
-            .text()
-        ).toBe('Banner content')
+        expect(wrapper.html()).toContain(slotContent)
       })
     })
 
     describe('[(slot)avatar]', () => {
-      test('should render the avatar content', () => {
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
         const wrapper = mount(QBanner, {
           slots: {
-            avatar: 'Banner avatar'
+            avatar: () => slotContent
           }
         })
 
-        expect(
-          wrapper.get('.q-banner')
-            .get('.q-banner__avatar')
-            .text()
-        ).toBe('Banner avatar')
+        expect(wrapper.html()).toContain(slotContent)
       })
     })
 
     describe('[(slot)action]', () => {
-      test('should render the action content', () => {
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
         const wrapper = mount(QBanner, {
           slots: {
-            action: 'Banner action'
+            action: () => slotContent
           }
         })
 
-        expect(
-          wrapper.get('.q-banner')
-            .get('.q-banner__actions')
-            .text()
-        ).toBe('Banner action')
+        expect(wrapper.html()).toContain(slotContent)
       })
     })
   })

package/src/components/bar/QBar.js

@@ -1,9 +1,9 @@
 import { h, computed, getCurrentInstance } from 'vue'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hSlot } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hSlot } from '../../utils/private.render/render.js'
 
 export default createComponent({
   name: 'QBar',