quasar 2.17.7 → 2.18.0

package/src/composables/__tests__/use-model-toggle.cy.js

@@ -1,350 +0,0 @@
-/* eslint-disable no-unused-expressions */
-import { vModelAdapter } from '@quasar/quasar-app-extension-testing-e2e-cypress'
-import { ref } from 'vue'
-import WrapperOne from '../../../components/menu/__tests__/WrapperOne.vue'
-import WrapperTwo from '../../../components/menu/__tests__/WrapperTwo.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 model = ref(false)
-          cy.mount(WrapperOne, {
-            props: {
-              ...vModelAdapter(model)
-            }
-          })
-          cy.dataCy('wrapper')
-          cy.dataCy('menu')
-            .should('not.exist')
-            .then(() => {
-              model.value = true
-              cy.dataCy('menu')
-                .should('exist')
-            })
-        })
-
-        it('should close the dialog when modifying the model-value', () => {
-          const model = ref(true)
-          cy.mount(WrapperOne, {
-            props: {
-              ...vModelAdapter(model)
-            }
-          })
-          cy.dataCy('wrapper')
-          cy.dataCy('menu')
-            .should('exist')
-            .then(() => {
-              model.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()
-        cy.mount(WrapperOne, {
-          props: {
-            '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()
-        cy.mount(WrapperOne, {
-          props: {
-            onShow: fn
-          }
-        })
-
-        expect(fn).not.to.be.called
-        cy.dataCy('wrapper')
-          .click()
-        // eslint-disable-next-line cypress/no-unnecessary-waiting
-        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()
-        cy.mount(WrapperOne, {
-          props: {
-            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
-        // eslint-disable-next-line cypress/no-unnecessary-waiting
-        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()
-        cy.mount(WrapperOne, {
-          props: {
-            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()
-        cy.mount(WrapperOne, {
-          props: {
-            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()
-        cy.mount(WrapperOne, {
-          props: {
-            onHide: fn,
-            // After the dialog has been closed, the hide event is fired only after transitionDuration.
-            // The default value for transitionDuration is 300ms. Hence, we cannot depend on the dialog closing
-            // to conclude that the event has been fired. So let's set it to 0 so that it fires immediately.
-            transitionDuration: 0
-          }
-        })
-
-        expect(fn).not.to.be.called
-        cy.dataCy('wrapper')
-          .click()
-        cy.dataCy('menu')
-          .should('exist')
-          .then(() => {
-            expect(fn).not.to.be.called
-          })
-
-        // We are clicking x distance from the left to ensure it always clicks on the body
-        // For some reason it some times does not work without it
-        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 hide() method', () => {
-        const fn = cy.stub()
-        cy.mount(WrapperOne, {
-          props: {
-            onHide: fn,
-            // After the dialog has been closed, the hide event is fired only after transitionDuration.
-            // The default value for transitionDuration is 300ms. Hence, we cannot depend on the dialog closing
-            // to conclude that the event has been fired. So let's set it to 0 so that it fires immediately.
-            transitionDuration: 0
-          }
-        })
-
-        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
-          })
-      })
-
-      it('should emit @hide event after transition duration', () => {
-        const fn = cy.stub()
-        cy.mount(WrapperOne, {
-          props: {
-            onHide: fn,
-            transitionDuration: 500
-          }
-        })
-
-        expect(fn).not.to.be.called
-        cy.dataCy('method-show')
-          .click({ force: true })
-
-        cy.dataCy('wrapper')
-        cy.dataCy('method-hide')
-          .click({ force: true })
-
-        // eslint-disable-next-line cypress/no-unnecessary-waiting
-        cy.dataCy('menu')
-          .wait(300)
-          .then(() => {
-            expect(fn).not.to.be.called
-          })
-          .wait(500)
-          .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()
-        cy.mount(WrapperOne, {
-          props: {
-            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)
-        cy.get('body')
-          .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()
-        cy.mount(WrapperOne, {
-          props: {
-            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 })
-        cy.dataCy('method-hide')
-          .then(() => {
-            expect(fn).to.be.called
-          })
-        cy.dataCy('menu')
-          .should('not.exist')
-      })
-    })
-  })
-
-  describe('Methods', () => {
-    describe('(method): show', () => {
-      it('should trigger the menu to show', () => {
-        cy.mount(WrapperOne)
-
-        cy.dataCy('wrapper')
-        cy.dataCy('method-show')
-          .click({ force: true })
-        cy.dataCy('menu')
-          .should('exist')
-      })
-    })
-
-    describe('(method): hide', () => {
-      it('should trigger the menu to hide', () => {
-        cy.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', () => {
-        cy.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/__tests__/use-portal.cy.js

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

package/src/composables/__tests__/use-router-link.cy.js

@@ -1,55 +0,0 @@
-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/__tests__/use-validate.cy.js

@@ -1,257 +0,0 @@
-import FieldWrapper from './FieldWrapper.vue'
-import Icons from '../../../../icon-set/material-icons.mjs'
-import { ref } from 'vue'
-import { vModelAdapter } from '@quasar/quasar-app-extension-testing-e2e-cypress'
-
-function mountQFieldWrapper (options) {
-  return cy.mount(FieldWrapper, options)
-}
-
-function getHostElement () {
-  return cy.get('.select-root')
-}
-
-describe('use-validate API', () => {
-  describe('Props', () => {
-    describe('Category: behavior', () => {
-      describe('(prop): error', () => {
-        it('should mark the field as having an error', () => {
-          mountQFieldWrapper()
-          getHostElement().should('not.have.class', 'q-field--error')
-
-          getHostElement().then(() => {
-            Cypress.vueWrapper.setProps({ error: true })
-          })
-
-          getHostElement().should('have.class', 'q-field--error')
-        })
-      })
-
-      describe('(prop): rules', () => {
-        it('should validate value using custom validation logic', () => {
-          const errorMessage = 'Selected value should be greater than 10 characters'
-          const model = ref('Option 1')
-          const options = [ 'Option 1', 'Option 2' ]
-
-          mountQFieldWrapper({
-            props: {
-              ...vModelAdapter(model),
-              options,
-              rules: [ val => val.length > 10 || errorMessage ]
-            }
-          })
-
-          getHostElement().then(() => {
-            model.value = 'Option 2'
-          })
-          getHostElement().get('.q-field__messages').should('contain.text', errorMessage)
-        })
-
-        it('should validate email using inbuilt validation logic', () => {
-          const errorMessage = 'Enter a valid email address'
-          const model = ref('Option 1')
-          const options = [ 'Option 1', 'Option 2' ]
-          mountQFieldWrapper({
-            props: {
-              ...vModelAdapter(model),
-              options,
-              rules: [ (val, rules) => rules.email(val) || errorMessage ]
-            }
-          })
-          getHostElement().then(() => {
-            model.value = 'Option 2'
-          })
-          getHostElement().get('.q-field__messages').should('contain.text', errorMessage)
-        })
-      })
-
-      describe('(prop): reactive-rules', () => {
-        it('should trigger validation when there\'s a change of rules', () => {
-          const errorMessage = 'Error message'
-          const model = ref('Option 1')
-          const options = [ 'Option 1', 'Option 2' ]
-          mountQFieldWrapper({
-            props: {
-              ...vModelAdapter(model),
-              options
-            }
-          })
-
-          getHostElement().then(() => {
-            Cypress.vueWrapper.setProps({ rules: [ (value) => value.length < 3 || errorMessage ] })
-
-            Cypress.vueWrapper.vm.focusMethod()
-            Cypress.vueWrapper.vm.blur()
-          })
-          getHostElement().get('.q-field__messages').should('not.exist')
-
-          getHostElement().then(() => {
-            Cypress.vueWrapper.setProps({ reactiveRules: true, rules: [ (value, rules) => rules.email(value) || errorMessage ] })
-          })
-          getHostElement().get('.q-field__messages').should('contain.text', errorMessage)
-        })
-      })
-
-      describe('(prop): lazy-rules', () => {
-        it('should validate the input only when component loses focus', () => {
-          const errorMessage = 'Use a max 3 of characters'
-          const model = ref('Option 1')
-          const options = [ 'Option 1', 'Option 2' ]
-          mountQFieldWrapper({
-            props: {
-              ...vModelAdapter(model),
-              options,
-              lazyRules: true,
-              rules: [ () => errorMessage ]
-            }
-          })
-
-          getHostElement().select('Option 2')
-          getHostElement().get('.q-field__messages').should('not.contain', errorMessage)
-
-          getHostElement().then(() => {
-            Cypress.vueWrapper.vm.blur()
-            getHostElement().get('.q-field__messages').should('contain.text', errorMessage)
-          })
-        })
-      })
-    })
-
-    describe('Category: content', () => {
-      describe('(prop): error-message', () => {
-        it('should show an error-message when error is true', () => {
-          const message = 'Please select something'
-          cy.mount(FieldWrapper, {
-            props: {
-              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'
-          cy.mount(FieldWrapper, {
-            props: {
-              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', () => {
-          cy.mount(FieldWrapper, {
-            props: {
-              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', () => {
-          cy.mount(FieldWrapper, {
-            props: {
-              error: true,
-              noErrorIcon: false
-            }
-          })
-          cy.get('.select-root')
-            .get(`i:contains(${ Icons.field.error })`)
-            .should('exist')
-        })
-      })
-    })
-
-    describe('Category: model', () => {
-      describe('(prop): model-value', () => {
-        it('should correctly update the model value', () => {
-          const model = ref()
-          const options = [ 'Option 1', 'Option 2' ]
-          mountQFieldWrapper({
-            props: {
-              ...vModelAdapter(model),
-              options
-            }
-          })
-          getHostElement().get('input').should('not.have.value', options[ 0 ])
-
-          getHostElement().then(() => {
-            model.value = options[ 0 ]
-          })
-
-          getHostElement().get('input').should('have.value', options[ 0 ])
-        })
-      })
-    })
-  })
-
-  describe('Methods', () => {
-    describe('(method): resetValidation', () => {
-      it('should reset validation', () => {
-        const errorMessage = 'Use a max 3 of characters'
-        const model = ref('Option 1')
-        const options = [ 'Option 1', 'Option 2' ]
-        mountQFieldWrapper({
-          props: {
-            ...vModelAdapter(model),
-            options,
-            rules: [ val => val.length <= 3 || errorMessage ],
-            lazyRules: 'ondemand'
-          }
-        })
-
-        getHostElement().then(() => {
-          model.value = 'Option 2'
-        })
-        getHostElement().get('.q-field__messages').should('not.contain', errorMessage)
-
-        getHostElement().then(() => {
-          Cypress.vueWrapper.vm.validate()
-          getHostElement().get('.q-field__messages').should('contain', errorMessage)
-        })
-
-        getHostElement().then(() => {
-          Cypress.vueWrapper.vm.resetValidation()
-          getHostElement().get('.q-field__messages').should('not.contain', errorMessage)
-        })
-      })
-    })
-
-    describe('(method): validate', () => {
-      it('should validate the input only when component\'s validate() method is called', () => {
-        const errorMessage = 'Use a max 3 of characters'
-        const model = ref('Option 1')
-        const options = [ 'Option 1', 'Option 2' ]
-        mountQFieldWrapper({
-          props: {
-            ...vModelAdapter(model),
-            options,
-            rules: [ val => val.length <= 3 || errorMessage ],
-            lazyRules: 'ondemand'
-          }
-        })
-
-        getHostElement().then(() => {
-          model.value = 'Option 2'
-        })
-        getHostElement().get('.q-field__messages').should('not.contain', errorMessage)
-
-        getHostElement().get('input').then(() => {
-          Cypress.vueWrapper.vm.blur()
-          getHostElement().get('.q-field__messages').should('not.contain', errorMessage)
-          Cypress.vueWrapper.vm.validate()
-          getHostElement().get('.q-field__messages').should('contain', errorMessage)
-        })
-      })
-    })
-  })
-})