quasar 2.15.2 → 2.15.3

package/src/components/bar/QBar.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 QBar from './QBar.js'
@@ -6,49 +6,74 @@ import QBar from './QBar.js'
 describe('[QBar API]', () => {
   describe('[Props]', () => {
     describe('[(prop)dense]', () => {
-      test('should have a dense style when "dense" prop is true', () => {
-        const wrapper = mount(QBar, {
-          propsData: {
-            dense: true
-          }
-        })
+      test('is defined correctly', () => {
+        expect(QBar.props.dense).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBar)
+        const target = wrapper.get('.q-bar')
 
         expect(
-          wrapper.get('.q-bar')
-            .classes()
+          target.classes()
+        ).not.toContain('q-bar--dense')
+
+        await wrapper.setProps({ dense: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
         ).toContain('q-bar--dense')
       })
     })
 
     describe('[(prop)dark]', () => {
-      test('should have a dark style when "dark" prop is true', () => {
+      test('is defined correctly', () => {
+        expect(QBar.props.dark).toBeDefined()
+      })
+
+      test('type Boolean has effect', async () => {
+        const wrapper = mount(QBar)
+        const target = wrapper.get('.q-bar')
+
+        expect(
+          target.classes()
+        ).not.toContain('q-bar--dark')
+
+        await wrapper.setProps({ dark: true })
+        await flushPromises()
+
+        expect(
+          target.classes()
+        ).toContain('q-bar--dark')
+      })
+
+      test('type null has effect', async () => {
         const wrapper = mount(QBar, {
-          propsData: {
-            dark: true
+          props: {
+            dark: null
           }
         })
 
         expect(
           wrapper.get('.q-bar')
             .classes()
-        ).toContain('q-bar--dark')
+        ).not.toContain('q-bar--dark')
       })
     })
   })
 
   describe('[Slots]', () => {
     describe('[(slot)default]', () => {
-      test('should render the default slot', () => {
+      test('renders the content', () => {
+        const slotContent = 'some-slot-content'
         const wrapper = mount(QBar, {
           slots: {
-            default: 'default bar slot'
+            default: () => slotContent
           }
         })
 
-        expect(
-          wrapper.get('.q-bar')
-            .text()
-        ).toContain('default bar slot')
+        expect(wrapper.html()).toContain(slotContent)
       })
     })
   })

package/src/components/breadcrumbs/QBreadcrumbs.js

@@ -1,10 +1,10 @@
 import { h, computed } from 'vue'
 
-import useAlign, { useAlignProps } from '../../composables/private/use-align.js'
+import useAlign, { useAlignProps } from '../../composables/private.use-align/use-align.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hSlot } from '../../utils/private/render.js'
-import { getNormalizedVNodes } from '../../utils/private/vm.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hSlot } from '../../utils/private.render/render.js'
+import { getNormalizedVNodes } from '../../utils/private.vm/vm.js'
 
 const disabledValues = [ '', true ]
 
@@ -43,6 +43,8 @@ export default createComponent({
     const activeClass = computed(() => ` text-${ props.activeColor }`)
 
     return () => {
+      if (slots.default === void 0) return
+
       const vnodes = getNormalizedVNodes(
         hSlot(slots.default)
       )

package/src/components/breadcrumbs/QBreadcrumbs.test.js

@@ -1,105 +1,180 @@
-import { mount } from '@vue/test-utils'
+import { mount, flushPromises } from '@vue/test-utils'
 import { describe, test, expect } from 'vitest'
 
-import { alignMap, alignValues } from '../../composables/private/use-align.js'
+import QBreadcrumbs from './QBreadcrumbs.js'
+
+import { alignMap } from 'quasar/src/composables/private.use-align/use-align.js'
+
 import BasicBreadcrumbs from './test/BasicBreadcrumbs.vue'
 import BreadcrumbWithSeparatorSlot from './test/BreadcrumbWithSeparatorSlot.vue'
 
-const gutterValues = [ 'xs', 'sm', 'md', 'lg', 'xl' ]
-
 describe('[QBreadcrumbs API]', () => {
   describe('[Props]', () => {
     describe('[(prop)separator]', () => {
-      test('should render a custom separator based on the defined value', () => {
-        const customSeparator = '>'
-        const wrapper = mount(BasicBreadcrumbs, {
-          props: {
-            separator: customSeparator
-          }
-        })
+      test('is defined correctly', () => {
+        expect(QBreadcrumbs.props.separator).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = '>'
+        const wrapper = mount(BasicBreadcrumbs)
 
         expect(
           wrapper.get('.q-breadcrumbs__separator')
             .text()
-        ).toContain(customSeparator)
+        ).not.toContain(propVal)
+
+        await wrapper.setProps({ separator: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('.q-breadcrumbs__separator')
+            .text()
+        ).toContain(propVal)
       })
     })
 
-    describe('[(prop)gutter]', () => {
-      test(`should render a breadcrumb with a gutter based on defined values: ${ gutterValues.join(', ') }`, () => {
-        // loop through each gutter value
-        for (const gutter of gutterValues) {
-          const wrapper = mount(BasicBreadcrumbs, {
-            props: { gutter }
-          })
+    describe('[(prop)active-color]', () => {
+      test('is defined correctly', () => {
+        expect(QBreadcrumbs.props.activeColor).toBeDefined()
+      })
 
-          expect(
-            wrapper.get('.q-breadcrumbs > div')
-              .classes()
-          ).toContain(`q-gutter-${ gutter }`)
-        }
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(BasicBreadcrumbs)
+
+        expect(
+          wrapper.get('.q-breadcrumbs > div > .flex.items-center:not(.q-breadcrumbs--last)')
+            .classes()
+        ).not.toContain('text-red')
+
+        await wrapper.setProps({ activeColor: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('.q-breadcrumbs > div > .flex.items-center:not(.q-breadcrumbs--last)')
+            .classes()
+        ).toContain('text-red')
       })
+    })
+
+    describe('[(prop)gutter]', () => {
+      test('is defined correctly', () => {
+        expect(QBreadcrumbs.props.gutter).toBeDefined()
+      })
+
+      test('value "none" has effect', async () => {
+        const propVal = 'none'
+        const wrapper = mount(BasicBreadcrumbs)
+
+        expect(
+          wrapper.get('.q-breadcrumbs > div')
+            .classes()
+        ).toContain('q-gutter-sm')
 
-      test('should render a breadcrumb with no gutter when the value is set to "none"', () => {
-        const wrapper = mount(BasicBreadcrumbs, {
-          props: {
-            gutter: 'none'
-          }
-        })
+        await wrapper.setProps({ gutter: propVal })
+        await flushPromises()
 
         expect(
           wrapper.get('.q-breadcrumbs > div')
             .classes()
-        ).not.toContain('q-gutter')
+        ).toSatisfy(
+          list => list.every(cls => cls.startsWith('q-gutter') === false)
+        )
       })
-    })
 
-    describe('[(prop)align]', () => {
-      test(`should render a breadcrumb aligned based on defined values: ${ alignValues.join(', ') }`, () => {
-        // loop over alignValues
-        for (const align of alignValues) {
-          const wrapper = mount(BasicBreadcrumbs, {
-            props: { align }
-          })
+      test.each([
+        [ 'xs' ],
+        [ 'sm' ],
+        [ 'md' ],
+        [ 'lg' ],
+        [ 'xl' ]
+      ])('value %s has effect', async propVal => {
+        const wrapper = mount(BasicBreadcrumbs)
+
+        expect(
+          wrapper.get('.q-breadcrumbs > div')
+            .classes()
+        ).toContain('q-gutter-sm')
+
+        await wrapper.setProps({ gutter: propVal })
+        await flushPromises()
 
+        if (propVal !== 'sm') {
+          // the default value
           expect(
             wrapper.get('.q-breadcrumbs > div')
               .classes()
-          ).toContain(`justify-${ alignMap[ align ] }`)
+          ).not.toContain('q-gutter-sm')
         }
-      })
-    })
-
-    describe('[(prop)active-color]', () => {
-      test('should change breadcrumb item color based on Quasar Color Palette', () => {
-        const activeColor = 'red'
-        const wrapper = mount(BasicBreadcrumbs, {
-          props: { activeColor }
-        })
 
         expect(
-          wrapper.get('.q-breadcrumbs > div > .flex.items-center:not(.q-breadcrumbs--last)')
+          wrapper.get('.q-breadcrumbs > div')
             .classes()
-        ).toContain(`text-${ activeColor }`)
+        ).toContain(`q-gutter-${ propVal }`)
       })
     })
 
     describe('[(prop)separator-color]', () => {
-      test('should change breadcrumb separator color based on Quasar Color Palette', () => {
-        const separatorColor = 'red'
-        const wrapper = mount(BasicBreadcrumbs, {
-          props: { separatorColor }
-        })
+      test('is defined correctly', () => {
+        expect(QBreadcrumbs.props.separatorColor).toBeDefined()
+      })
+
+      test('type String has effect', async () => {
+        const propVal = 'red'
+        const wrapper = mount(BasicBreadcrumbs)
+
+        wrapper.findAll('.q-breadcrumbs__separator')
+          .forEach(el => expect(el.classes()).not.toContain('text-red'))
+
+        // TODO: write expectations without the prop
+        // (usually negate the effect of the prop)
+
+        await wrapper.setProps({ separatorColor: propVal })
+        await flushPromises()
 
         wrapper.findAll('.q-breadcrumbs__separator')
-          .forEach(el => expect(el.classes()).toContain(`text-${ separatorColor }`))
+          .forEach(el => expect(el.classes()).toContain('text-red'))
+      })
+    })
+
+    describe('[(prop)align]', () => {
+      test('is defined correctly', () => {
+        expect(QBreadcrumbs.props.align).toBeDefined()
+      })
+
+      test.each([
+        [ 'left' ],
+        [ 'center' ],
+        [ 'right' ],
+        [ 'between' ],
+        [ 'around' ],
+        [ 'evenly' ]
+      ])('value "%s" has effect', async propVal => {
+        const wrapper = mount(BasicBreadcrumbs)
+
+        if (propVal !== 'left') {
+          // the default value
+          expect(
+            wrapper.get('.q-breadcrumbs > div')
+              .classes()
+          ).not.toContain(`justify-${ alignMap[ propVal ] }`)
+        }
+
+        await wrapper.setProps({ align: propVal })
+        await flushPromises()
+
+        expect(
+          wrapper.get('.q-breadcrumbs > div')
+            .classes()
+        ).toContain(`justify-${ alignMap[ propVal ] }`)
       })
     })
   })
 
   describe('[Slots]', () => {
     describe('[(slot)default]', () => {
-      test('should display the default slot content', () => {
+      test('renders the content', () => {
         const wrapper = mount(BasicBreadcrumbs)
 
         expect(
@@ -110,7 +185,7 @@ describe('[QBreadcrumbs API]', () => {
     })
 
     describe('[(slot)separator]', () => {
-      test('should display the separator slot content', () => {
+      test('renders the content', () => {
         const wrapper = mount(BreadcrumbWithSeparatorSlot)
 
         expect(

package/src/components/breadcrumbs/QBreadcrumbsEl.js

@@ -2,9 +2,9 @@ import { h, computed } from 'vue'
 
 import QIcon from '../icon/QIcon.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hMergeSlot } from '../../utils/private/render.js'
-import useRouterLink, { useRouterLinkProps } from '../../composables/private/use-router-link.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hMergeSlot } from '../../utils/private.render/render.js'
+import useRouterLink, { useRouterLinkProps } from '../../composables/private.use-router-link/use-router-link.js'
 
 export default createComponent({
   name: 'QBreadcrumbsEl',

package/src/components/breadcrumbs/QBreadcrumbsEl.json

@@ -3,7 +3,7 @@
     "docsUrl": "https://v2.quasar.dev/vue-components/breadcrumbs"
   },
 
-  "mixins": [ "composables/private/use-router-link" ],
+  "mixins": [ "composables/private.use-router-link/use-router-link" ],
 
   "props": {
     "label": {