quasar 2.4.13 → 2.5.0

package/src/composables/private/__tests__/use-model-toggle.spec.js

@@ -0,0 +1,306 @@
+/* eslint-disable no-unused-expressions */
+import { mount } from '@cypress/vue'
+import WrapperOne from './../../../components/menu/__tests__/WrapperOne.vue'
+import WrapperTwo from './../../../components/menu/__tests__/WrapperTwo.vue'
+import { ref } from 'vue'
+
+describe('use-model-toggle API', () => {
+  describe('Props', () => {
+    describe('Category: model', () => {
+      describe('(prop): model-value', () => {
+        it('should open the dialog when modifying the model-value', () => {
+          const modelValue = ref(false)
+          mount(WrapperOne, {
+            attrs: {
+              modelValue
+            }
+          })
+          cy.dataCy('wrapper')
+          cy.dataCy('menu')
+            .should('not.exist')
+            .then(() => {
+              modelValue.value = true
+              cy.dataCy('menu')
+                .should('exist')
+            })
+        })
+
+        it('should close the dialog when modifying the model-value', () => {
+          const modelValue = ref(true)
+          mount(WrapperOne, {
+            attrs: {
+              modelValue
+            }
+          })
+          cy.dataCy('wrapper')
+          cy.dataCy('menu')
+            .should('exist')
+            .then(() => {
+              modelValue.value = false
+              cy.dataCy('menu')
+                .should('not.exist')
+            })
+        })
+      })
+    })
+  })
+
+  describe('Events', () => {
+    describe('(event): update:model-value', () => {
+      it('should emit @update:model-value event when state changes', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            'onUpdate:modelValue': fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+          .click()
+        cy.dataCy('menu')
+          .should('exist')
+          .then(() => {
+            expect(fn).to.be.called
+          })
+      })
+    })
+
+    describe('(event): show', () => {
+      it('should emit @show event when menu is triggered by parent', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            onShow: fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+          .click()
+        cy.dataCy('menu')
+          .should('exist')
+          .wait(300) // Await menu animation
+          .then(() => {
+            expect(fn).to.be.called
+          })
+      })
+
+      it('should emit @show event when component is triggered with the show() method', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            onShow: fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+        cy.dataCy('method-show')
+          .click({ force: true }) // Element is hidden to prevent clogging the window
+        cy.dataCy('menu')
+          .should('exist')
+          .wait(300) // Await menu animation
+          .then(() => {
+            expect(fn).to.be.called
+          })
+      })
+    })
+
+    describe('(event): before-show', () => {
+      it('should emit @before-show event when menu is triggered by parent', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            onBeforeShow: fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+          .click()
+        cy.dataCy('menu')
+          .should('exist')
+          .then(() => {
+            expect(fn).to.be.called
+          })
+      })
+
+      it('should emit @before-show event when component is triggered with the show() method', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            onBeforeShow: fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+        cy.dataCy('method-show')
+          .click({ force: true }) // Element is hidden to prevent clogging the window
+        cy.dataCy('menu')
+          .should('exist')
+          .then(() => {
+            expect(fn).to.be.called
+          })
+      })
+    })
+
+    describe('(event): hide', () => {
+      it('should emit @hide event when menu is triggered by parent', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            onHide: fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+          .click()
+        cy.dataCy('menu')
+          .should('exist')
+          .then(() => {
+            expect(fn).not.to.be.called
+          })
+        cy.get('body')
+          .click(499, 0)
+        cy.dataCy('menu')
+          .should('not.exist')
+          .then(() => {
+            expect(fn).to.be.called
+          })
+      })
+
+      it('should emit @hide event when component is triggered with the show() method', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            onHide: fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+        cy.dataCy('method-show')
+          .click({ force: true }) // Element is hidden to prevent clogging the window
+        cy.dataCy('menu')
+          .should('exist')
+          .then(() => {
+            expect(fn).not.to.be.called
+          })
+        cy.dataCy('method-hide')
+          .click({ force: true })
+        cy.dataCy('menu')
+          .should('not.exist') // Element is hidden to prevent clogging the window
+          .then(() => {
+            expect(fn).to.be.called
+          })
+      })
+    })
+
+    describe('(event): before-hide', () => {
+      it('should emit @before-hide event when menu is triggered by parent', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            onBeforeHide: fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+          .click()
+        cy.dataCy('menu')
+          .should('exist')
+          .then(() => {
+            expect(fn).not.to.be.called
+          })
+        cy.get('body')
+          .click(499, 0)
+          .then(() => {
+            expect(fn).to.be.called
+          })
+        cy.dataCy('menu')
+          .should('not.exist')
+      })
+
+      it('should emit @before-hide event when component is triggered with the show() method', () => {
+        const fn = cy.stub()
+        mount(WrapperOne, {
+          attrs: {
+            onBeforeHide: fn
+          }
+        })
+
+        expect(fn).not.to.be.called
+        cy.dataCy('wrapper')
+        cy.dataCy('method-show')
+          .click({ force: true }) // Element is hidden to prevent clogging the window
+        cy.dataCy('menu')
+          .should('exist')
+          .then(() => {
+            expect(fn).not.to.be.called
+          })
+        cy.dataCy('method-hide')
+          .click({ force: true })
+          .then(() => {
+            expect(fn).to.be.called
+          })
+        cy.dataCy('menu')
+          .should('not.exist')
+      })
+    })
+  })
+
+  describe('Methods', () => {
+    describe('(method): show', () => {
+      it('should tigger the menu to show', () => {
+        mount(WrapperOne)
+
+        cy.dataCy('wrapper')
+        cy.dataCy('method-show')
+          .click({ force: true })
+        cy.dataCy('menu')
+          .should('exist')
+      })
+    })
+
+    describe('(method): hide', () => {
+      it('should tigger the menu to hide', () => {
+        mount(WrapperOne)
+
+        cy.dataCy('wrapper')
+          .click()
+        cy.dataCy('menu')
+          .should('exist')
+        cy.dataCy('method-hide')
+          .click({ force: true })
+        cy.dataCy('menu')
+          .should('not.exist')
+      })
+    })
+
+    describe('(method): toggle', () => {
+      it('should toggle the menu', () => {
+        mount(WrapperTwo)
+
+        cy.dataCy('wrapper')
+          .then(() => {
+            // Need to call method from wrapper
+            // Click a button closes the menu
+            Cypress.vueWrapper.vm.toggle()
+          })
+        cy.dataCy('menu')
+          .should('exist')
+          .then(() => {
+            // Need to call method from wrapper
+            // Click a button closes the menu
+            Cypress.vueWrapper.vm.toggle()
+          })
+        cy.dataCy('menu')
+          .should('not.exist')
+      })
+    })
+  })
+})

package/src/composables/private/__tests__/use-portal.spec.js

@@ -0,0 +1,4 @@
+describe('use-portal API', () => {
+  describe('Props', () => {
+  })
+})

package/src/composables/private/__tests__/use-router-link.spec.js

@@ -0,0 +1,55 @@
+describe('use-router-link API', () => {
+  describe('Props', () => {
+    describe('Category: navigation', () => {
+      describe('(prop): to', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): exact', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): replace', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): active-class', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): exact-active-class', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): href', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): target', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: state', () => {
+      describe('(prop): disable', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+})

package/src/composables/private/__tests__/use-size.spec.js

@@ -0,0 +1,37 @@
+import QAvatar from './../../../components/avatar/QAvatar'
+import { mount } from '@cypress/vue'
+import { useSizeDefaults } from './../use-size'
+
+describe('use-size API', () => {
+  describe('Props', () => {
+    describe('Category: style', () => {
+      describe('(prop): size', () => {
+        it('should set the size', () => {
+          const size = '24px'
+          mount(QAvatar, {
+            props: {
+              size,
+              color: 'grey'
+            }
+          })
+
+          cy.get('.q-avatar')
+            .should('have.css', 'font-size', size)
+        })
+
+        it('should set the size with standard size names', () => {
+          const size = 'sm'
+          mount(QAvatar, {
+            props: {
+              size,
+              color: 'grey'
+            }
+          })
+
+          cy.get('.q-avatar')
+            .should('have.css', 'font-size', `${ useSizeDefaults.sm }px`)
+        })
+      })
+    })
+  })
+})

package/src/composables/private/__tests__/use-transition.spec.js

@@ -0,0 +1,108 @@
+import { mount } from '@cypress/vue'
+import WrapperOne from './../../../components/menu/__tests__/WrapperOne.vue'
+
+describe('use-transition API', () => {
+  describe('Props', () => {
+    describe('Category: transition', () => {
+      describe('(prop): transition-show', () => {
+        it('should use the fade transition by default', () => {
+          mount(WrapperOne)
+          cy.dataCy('wrapper')
+            .click()
+          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+            .should('have.class', 'q-transition--fade-enter-active')
+        })
+
+        it('should use a different show transtion if defined', () => {
+          const transition = 'scale'
+          mount(WrapperOne, {
+            attrs: {
+              transitionShow: transition
+            }
+          })
+          cy.dataCy('wrapper')
+            .click()
+          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+            .should('have.class', `q-transition--${ transition }-enter-active`)
+        })
+      })
+
+      describe('(prop): transition-hide', () => {
+        it('should use the fade transition by default', () => {
+          mount(WrapperOne)
+          cy.dataCy('wrapper')
+            .click()
+          cy.dataCy('menu')
+            .should('exist')
+          cy.get('body')
+            .type('{esc}')
+          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+            .should('have.class', 'q-transition--fade-leave-active')
+        })
+
+        it('should use a different hide transtion if defined', () => {
+          const transition = 'scale'
+          mount(WrapperOne, {
+            attrs: {
+              transitionHide: transition
+            }
+          })
+          cy.dataCy('wrapper')
+            .click()
+          cy.dataCy('menu')
+            .should('exist')
+          cy.get('body')
+            .type('{esc}')
+          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+            .should('have.class', `q-transition--${ transition }-leave-active`)
+        })
+      })
+
+      describe('(prop): transition-duration', () => {
+        it('should be done with transitioning after 300ms passed', () => {
+          mount(WrapperOne)
+          cy.dataCy('wrapper')
+            .click()
+            .wait(300)
+          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+            .should('not.have.class', 'q-transition--fade-enter-active')
+        })
+
+        it('should not be done with transitioning before 300ms passed', () => {
+          mount(WrapperOne)
+          cy.dataCy('wrapper')
+            .click()
+            .wait(200) // Commands take some time so a high value can fail, just take a decent margin
+          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+            .should('have.class', 'q-transition--fade-enter-active')
+        })
+
+        it('should be done after a custom 1000ms passed', () => {
+          mount(WrapperOne, {
+            attrs: {
+              transitionDuration: 1000
+            }
+          })
+          cy.dataCy('wrapper')
+            .click()
+            .wait(1000)
+          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+            .should('not.have.class', 'q-transition--fade-enter-active')
+        })
+
+        it('should not be done before a custom 1000ms passed', () => {
+          mount(WrapperOne, {
+            attrs: {
+              transitionDuration: 1000
+            }
+          })
+          cy.dataCy('wrapper')
+            .click()
+            .wait(900)
+          cy.dataCy('menu', { timeout: 0 }) // Disable retry
+            .should('have.class', 'q-transition--fade-enter-active')
+        })
+      })
+    })
+  })
+})

package/src/composables/private/__tests__/use-validate.spec.js

@@ -0,0 +1,111 @@
+import { mount } from '@cypress/vue'
+import FieldWrapper from './FieldWrapper.vue'
+import Icons from './../../../../icon-set/material-icons'
+
+// const snapshotOptions = { customSnapshotsDir: '../__tests__' }
+
+describe('use-validate API', () => {
+  describe('Props', () => {
+    describe('Category: behavior', () => {
+      describe('(prop): error', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): rules', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): reactive-rules', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+
+      describe('(prop): lazy-rules', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+
+    describe('Category: content', () => {
+      describe('(prop): error-message', () => {
+        it('should show an error-message when error is true', () => {
+          const message = 'Please select something'
+          mount(FieldWrapper, {
+            attrs: {
+              error: true,
+              errorMessage: message
+            }
+          })
+          cy.get('.select-root')
+            .should('include.text', message)
+        })
+
+        it('should not show an error-message when error is false', () => {
+          const message = 'Please select something'
+          mount(FieldWrapper, {
+            attrs: {
+              error: false,
+              errorMessage: message
+            }
+          })
+          cy.get('.select-root')
+            .should('not.include.text', message)
+        })
+      })
+
+      describe('(prop): no-error-icon', () => {
+        it('should not show an error icon when error is true', () => {
+          mount(FieldWrapper, {
+            attrs: {
+              error: true,
+              noErrorIcon: true
+            }
+          })
+          cy.get('.select-root')
+            .get(`i:contains(${ Icons.field.error })`)
+            .should('not.exist')
+        })
+
+        it('should show an error icon when error is true an no-error-icon is false', () => {
+          mount(FieldWrapper, {
+            attrs: {
+              error: true,
+              noErrorIcon: false
+            }
+          })
+          cy.get('.select-root')
+            .get(`i:contains(${ Icons.field.error })`)
+            .should('exist')
+        })
+      })
+    })
+
+    describe('Category: model', () => {
+      describe('(prop): model-value', () => {
+        it.skip(' ', () => {
+          //
+        })
+      })
+    })
+  })
+
+  describe('Methods', () => {
+    describe('(method): resetValidation', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+
+    describe('(method): validate', () => {
+      it.skip(' ', () => {
+        //
+      })
+    })
+  })
+})

package/src/composables/private/use-fullscreen.js

@@ -19,7 +19,7 @@ export default function () {
   let historyEntry, fullscreenFillerNode, container
   const inFullscreen = ref(false)
 
-  vmHasRouter(vm) === true && watch(() => proxy.$route, () => {
+  vmHasRouter(vm) === true && watch(() => proxy.$route.fullPath, () => {
     props.noRouteFullscreenExit !== true && exitFullscreen()
   })
 

package/src/composables/private/use-model-toggle.js

@@ -136,7 +136,7 @@ export default function ({
   watch(() => props.modelValue, processModelChange)
 
   if (hideOnRouteChange !== void 0 && vmHasRouter(vm) === true) {
-    watch(() => proxy.$route, () => {
+    watch(() => proxy.$route.fullPath, () => {
       if (hideOnRouteChange.value === true && showing.value === true) {
         hide()
       }

package/src/composables/private/use-validate.js

@@ -37,12 +37,16 @@ export default function (focused, innerLoading) {
   let validateIndex = 0, unwatchRules
 
   const hasRules = computed(() =>
-    props.disable !== true
-    && props.rules !== void 0
+    props.rules !== void 0
     && props.rules !== null
     && props.rules.length > 0
   )
 
+  const hasActiveRules = computed(() =>
+    props.disable !== true
+    && hasRules.value === true
+  )
+
   const hasError = computed(() =>
     props.error === true || innerError.value === true
   )
@@ -80,7 +84,7 @@ export default function (focused, innerLoading) {
     else if (isDirtyModel.value === false) {
       isDirtyModel.value = true
 
-      if (hasRules.value === true && props.lazyRules !== 'ondemand') {
+      if (hasActiveRules.value === true && props.lazyRules !== 'ondemand') {
         debouncedValidate()
       }
     }
@@ -102,7 +106,7 @@ export default function (focused, innerLoading) {
    *   - Promise (pending async validation)
    */
   function validate (val = props.modelValue) {
-    if (hasRules.value !== true) {
+    if (hasActiveRules.value !== true) {
       return true
     }
 
@@ -190,7 +194,7 @@ export default function (focused, innerLoading) {
 
   function validateIfNeeded (changedRules) {
     if (
-      hasRules.value === true
+      hasActiveRules.value === true
       && props.lazyRules !== 'ondemand'
       && (isDirtyModel.value === true || (props.lazyRules !== true && changedRules !== true))
     ) {

package/src/plugins/Meta.js

@@ -140,7 +140,7 @@ function apply ({ add, remove }) {
 function getAttr (seed) {
   return att => {
     const val = seed[ att ]
-    return att + (val !== void 0 ? `="${ val }"` : '')
+    return att + (val !== true && val !== void 0 ? `="${ val }"` : '')
   }
 }