quasar 2.11.7 → 2.11.8

package/src/components/menu/__tests__/{QMenu.spec.js → QMenu.cy.js}

@@ -1,5 +1,4 @@
 /* eslint-disable no-unused-expressions */
-import { mount } from '@cypress/vue'
 import WrapperOne from './WrapperOne.vue'
 import WrapperTwo from './WrapperTwo.vue'
 
@@ -14,7 +13,7 @@ describe('Menu API', () => {
 
       describe('(prop): touch-position', () => {
         it('should show menu at the position of the click', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               'touch-position': true
             }
@@ -44,7 +43,7 @@ describe('Menu API', () => {
 
       describe('(prop): persistent', () => {
         it('should close the menu when clicking outside the menu', () => {
-          mount(WrapperOne)
+          cy.mount(WrapperOne)
 
           cy.dataCy('wrapper')
             .click()
@@ -57,7 +56,7 @@ describe('Menu API', () => {
         })
 
         it('should close the menu when hitting the escape key', () => {
-          mount(WrapperOne)
+          cy.mount(WrapperOne)
 
           cy.dataCy('wrapper')
             .click()
@@ -70,7 +69,7 @@ describe('Menu API', () => {
         })
 
         it('should not close the menu when clicking outside the menu when persistent', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               persistent: true
             }
@@ -89,7 +88,7 @@ describe('Menu API', () => {
         })
 
         it('should not close the menu when hitting the escape key when persistent', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               persistent: true
             }
@@ -116,7 +115,7 @@ describe('Menu API', () => {
 
       describe('(prop): auto-close', () => {
         it('should not close the menu when clicking a menu child without v-close-popup', () => {
-          mount(WrapperOne)
+          cy.mount(WrapperOne)
 
           cy.dataCy('wrapper')
             .click()
@@ -131,7 +130,7 @@ describe('Menu API', () => {
         })
 
         it('should close the menu when clicking a menu child without v-close-popup when auto-close is true', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               'auto-close': true
             }
@@ -159,7 +158,7 @@ describe('Menu API', () => {
       describe('(prop): no-refocus', () => {
         // TODO: it is not clear from the docs that refocussing does not happen when clicking outside or closing by escape/programatticaly. Should this be added?
         it('should switch focus back to parent element when closing', () => {
-          mount(WrapperOne)
+          cy.mount(WrapperOne)
 
           cy.dataCy('wrapper')
             .focus()
@@ -178,7 +177,7 @@ describe('Menu API', () => {
         })
 
         it('should not switch focus back to parent element when closing if no-refocus is true', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               'no-refocus': true
             }
@@ -203,7 +202,7 @@ describe('Menu API', () => {
 
       describe('(prop): no-focus', () => {
         it('should switch focus to the menu when opening', () => {
-          mount(WrapperOne)
+          cy.mount(WrapperOne)
 
           cy.dataCy('wrapper')
             .click()
@@ -213,7 +212,7 @@ describe('Menu API', () => {
         })
 
         it('should no switch focus to the menu when opening with no-focus is true', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               'no-focus': true
             }
@@ -231,7 +230,7 @@ describe('Menu API', () => {
     describe('Category: position', () => {
       describe('(prop): fit', () => {
         it('should show a menu that matches the full with of the target when fit is supplied', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               target: '.other-target',
               fit: true
@@ -250,7 +249,7 @@ describe('Menu API', () => {
         })
 
         it('should show a menu that not matches the full with of the target when fit is false', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               target: '.other-target',
               fit: false
@@ -271,7 +270,7 @@ describe('Menu API', () => {
 
       describe('(prop): cover', () => {
         it('should show a menu that overlays the target when using cover', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               cover: true
             }
@@ -284,7 +283,7 @@ describe('Menu API', () => {
         })
 
         it('should show a menu that overlays the target when using cover', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               cover: true,
               target: '.other-target'
@@ -298,7 +297,7 @@ describe('Menu API', () => {
         })
 
         it('should ignore self property when using cover', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               cover: true,
               self: 'center right',
@@ -315,7 +314,7 @@ describe('Menu API', () => {
 
       describe('(prop): anchor & self', () => {
         it('should show a menu at anchor: bottom left and self: top left  by default', () => {
-          mount(WrapperOne)
+          cy.mount(WrapperOne)
 
           cy.dataCy('wrapper')
             .click()
@@ -333,7 +332,7 @@ describe('Menu API', () => {
             verticalSelf.forEach((vS) => {
               horizontalSelf.forEach((hS) => {
                 it(`should position Anchor(${ vA } ${ hA }) & Self(${ vS } ${ hS })  correctly`, () => {
-                  mount(WrapperOne, {
+                  cy.mount(WrapperOne, {
                     props: {
                       anchor: `${ vA } ${ hA }`,
                       self: `${ vS } ${ hS }`
@@ -362,7 +361,7 @@ describe('Menu API', () => {
         verticalAnchor.forEach((vA) => {
           verticalSelf.forEach((vS) => {
             it(`should offset vertical position Anchor(${ vA } left) & Self(${ vS } left) correctly`, () => {
-              mount(WrapperOne, {
+              cy.mount(WrapperOne, {
                 props: {
                   anchor: `${ vA } left`,
                   self: `${ vS } left`,
@@ -383,7 +382,7 @@ describe('Menu API', () => {
         horizontalAnchor.forEach((hA) => {
           horizontalSelf.forEach((hS) => {
             it(`should offset horizontal position Anchor(top ${ hA }) & Self(top ${ hS }) correctly`, () => {
-              mount(WrapperOne, {
+              cy.mount(WrapperOne, {
                 props: {
                   anchor: `top ${ hA }`,
                   self: `top ${ hS }`,
@@ -404,7 +403,7 @@ describe('Menu API', () => {
     describe('Category: style', () => {
       describe('(prop): dark', () => {
         it('should set the --q-dark color as background and white text color', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               dark: true
             }
@@ -419,7 +418,7 @@ describe('Menu API', () => {
 
       describe('(prop): square', () => {
         it('should not have border-radius when using this prop', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               square: true
             }
@@ -434,7 +433,7 @@ describe('Menu API', () => {
       describe('(prop): max-height', () => {
         it('should specify a max-height when setting this prop', () => {
           const maxHeight = '30px'
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               maxHeight
             }
@@ -449,7 +448,7 @@ describe('Menu API', () => {
       describe('(prop): max-width', () => {
         it('should specify a max-width when setting this prop', () => {
           const maxWidth = '30px'
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               maxWidth
             }
@@ -475,7 +474,7 @@ describe('Menu API', () => {
     describe('(event): escape-key', () => {
       it('should emit @escape-key event when escape key is pressed', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
+        cy.mount(WrapperOne, {
           props: {
             onEscapeKey: fn
           }
@@ -498,7 +497,7 @@ describe('Menu API', () => {
 
       it('should not emit @escape-key event when menu is persistent', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
+        cy.mount(WrapperOne, {
           props: {
             onEscapeKey: fn,
             persistent: true
@@ -525,7 +524,7 @@ describe('Menu API', () => {
   describe('Methods', () => {
     describe('(method): updatePosition', () => {
       it('should reposition the menu when it is no longer in correct position', () => {
-        mount(WrapperTwo, {
+        cy.mount(WrapperTwo, {
           props: {
             anchor: 'bottom left',
             self: 'bottom left'
@@ -570,7 +569,7 @@ describe('Menu API', () => {
 
     describe('(method): focus', () => {
       it('should focus the menu', () => {
-        mount(WrapperOne, {
+        cy.mount(WrapperOne, {
           props: {
             'no-focus': true
           }
@@ -592,7 +591,7 @@ describe('Menu API', () => {
       })
 
       it('should focus the autofocus element inside the menu', () => {
-        mount(WrapperTwo, {
+        cy.mount(WrapperTwo, {
           props: {
             'no-focus': true
           }

package/src/components/select/QSelect.js

@@ -1545,7 +1545,8 @@ export default createComponent({
 
         return h('div', {
           class: 'q-field__native row items-center',
-          ...attrs
+          ...attrs,
+          ...state.splitAttrs.listeners.value
         }, child)
       },
 

package/src/components/select/__tests__/{QSelect.spec.js → QSelect.cy.js}

@@ -1,7 +1,6 @@
 /* eslint-disable no-unused-expressions */
-import { mount } from '@cypress/vue'
+import { vModelAdapter } from '@quasar/quasar-app-extension-testing-e2e-cypress'
 import { h, ref } from 'vue'
-import { vModelAdapter } from '../../../../test/cypress/helpers/v-model-adapter.js'
 import QSelect from '../QSelect.js'
 
 function getHostElement (extendedSelector = '') {
@@ -16,7 +15,7 @@ function mountQSelect (options = {}) {
     }
   }
 
-  return mount(QSelect, options)
+  return cy.mount(QSelect, options)
 }
 
 // QSelect does not set the `data-cy` attribute on the root element, but on the `.q-field__native` element

package/src/components/table/QTable.js

@@ -569,7 +569,7 @@ export default createComponent({
 
         if (topLeft !== void 0) {
           child.push(
-            h('div', { class: 'q-table-control' }, [
+            h('div', { class: 'q-table__control' }, [
               topLeft(marginalsScope.value)
             ])
           )

package/src/components/uploader/__tests__/{QUploader.spec.js → QUploader.cy.js}

@@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue'
 import QUploader from '../QUploader'
 
 describe('Uploader API', () => {
@@ -111,7 +110,7 @@ describe('Uploader API', () => {
 </template>
 `
 
-        mount(QUploader, {
+        cy.mount(QUploader, {
           slots: {
             header: headerSlot
           }

package/src/composables/private/__tests__/{use-anchor.spec.js → use-anchor.cy.js}

@@ -1,12 +1,11 @@
-import { mount } from '@cypress/vue'
-import WrapperOne from './../../../components/menu/__tests__/WrapperOne.vue'
+import WrapperOne from '../../../components/menu/__tests__/WrapperOne.vue'
 
 describe('use-anchor API', () => {
   describe('Props', () => {
     describe('Category: behavior', () => {
       describe('(prop): target', () => {
         it('should use another target using a CSS selector', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               target: '.other-target'
             }
@@ -26,7 +25,7 @@ describe('use-anchor API', () => {
         })
 
         it('should not show when target is false', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               target: false
             }
@@ -41,7 +40,7 @@ describe('use-anchor API', () => {
 
       describe('(prop): no-parent-event', () => {
         it('should not show when clicking parent with no-parent-event true', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               'no-parent-event': true
             }
@@ -54,7 +53,7 @@ describe('use-anchor API', () => {
         })
 
         it('should show when clicking parent with no-parent-event false', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               'no-parent-event': false
             }
@@ -69,7 +68,7 @@ describe('use-anchor API', () => {
 
       describe('(prop): context-menu', () => {
         it('should not show when left clicking parent', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               'context-menu': true
             }
@@ -82,7 +81,7 @@ describe('use-anchor API', () => {
         })
 
         it('should show when right clicking parent', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               'context-menu': true
             }

package/src/composables/private/__tests__/{use-field.spec.js → use-field.cy.js}

@@ -1,4 +1,3 @@
-import { mount } from '@cypress/vue'
 import FieldWrapper from './FieldWrapper.vue'
 
 describe('use-field API', () => {
@@ -41,7 +40,7 @@ describe('use-field API', () => {
       describe('(prop): label', () => {
         it('should show the label when supplied', () => {
           const label = 'Select something'
-          mount(FieldWrapper, {
+          cy.mount(FieldWrapper, {
             props: {
               label
             }
@@ -52,7 +51,7 @@ describe('use-field API', () => {
 
         it('should show the label centered when not focused', () => {
           const label = 'Select something'
-          mount(FieldWrapper, {
+          cy.mount(FieldWrapper, {
             props: {
               label
             }
@@ -65,7 +64,7 @@ describe('use-field API', () => {
 
         it('should show the label stacked when focused', () => {
           const label = 'Select something'
-          mount(FieldWrapper, {
+          cy.mount(FieldWrapper, {
             props: {
               label
             }
@@ -81,7 +80,7 @@ describe('use-field API', () => {
       describe('(prop): stack-label', () => {
         it('should show the label stacked', () => {
           const label = 'Select something'
-          mount(FieldWrapper, {
+          cy.mount(FieldWrapper, {
             props: {
               label,
               stackLabel: true
@@ -96,7 +95,7 @@ describe('use-field API', () => {
       describe('(prop): hint', () => {
         it('should show a hint text', () => {
           const hint = 'Select something'
-          mount(FieldWrapper, {
+          cy.mount(FieldWrapper, {
             props: {
               hint
             }
@@ -109,7 +108,7 @@ describe('use-field API', () => {
       describe('(prop): hide-hint', () => {
         it('should not show a hint text when not focused', () => {
           const hint = 'Select something'
-          mount(FieldWrapper, {
+          cy.mount(FieldWrapper, {
             props: {
               hint,
               hideHint: true
@@ -120,7 +119,7 @@ describe('use-field API', () => {
         })
         it('should show a hint text when focused', () => {
           const hint = 'Select something'
-          mount(FieldWrapper, {
+          cy.mount(FieldWrapper, {
             props: {
               hint,
               hideHint: true

package/src/composables/private/__tests__/{use-model-toggle.spec.js → use-model-toggle.cy.js}

@@ -1,9 +1,8 @@
 /* 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 { vModelAdapter } from '@quasar/quasar-app-extension-testing-e2e-cypress'
 import { ref } from 'vue'
-import { vModelAdapter } from '../../../../test/cypress/helpers/v-model-adapter'
+import WrapperOne from '../../../components/menu/__tests__/WrapperOne.vue'
+import WrapperTwo from '../../../components/menu/__tests__/WrapperTwo.vue'
 
 describe('use-model-toggle API', () => {
   describe('Props', () => {
@@ -11,7 +10,7 @@ describe('use-model-toggle API', () => {
       describe('(prop): model-value', () => {
         it('should open the dialog when modifying the model-value', () => {
           const model = ref(false)
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               ...vModelAdapter(model)
             }
@@ -28,7 +27,7 @@ describe('use-model-toggle API', () => {
 
         it('should close the dialog when modifying the model-value', () => {
           const model = ref(true)
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               ...vModelAdapter(model)
             }
@@ -50,7 +49,7 @@ describe('use-model-toggle API', () => {
     describe('(event): update:model-value', () => {
       it('should emit @update:model-value event when state changes', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
+        cy.mount(WrapperOne, {
           props: {
             'onUpdate:modelValue': fn
           }
@@ -70,7 +69,7 @@ describe('use-model-toggle API', () => {
     describe('(event): show', () => {
       it('should emit @show event when menu is triggered by parent', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
+        cy.mount(WrapperOne, {
           props: {
             onShow: fn
           }
@@ -90,7 +89,7 @@ describe('use-model-toggle API', () => {
 
       it('should emit @show event when component is triggered with the show() method', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
+        cy.mount(WrapperOne, {
           props: {
             onShow: fn
           }
@@ -113,7 +112,7 @@ describe('use-model-toggle API', () => {
     describe('(event): before-show', () => {
       it('should emit @before-show event when menu is triggered by parent', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
+        cy.mount(WrapperOne, {
           props: {
             onBeforeShow: fn
           }
@@ -131,7 +130,7 @@ describe('use-model-toggle API', () => {
 
       it('should emit @before-show event when component is triggered with the show() method', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
+        cy.mount(WrapperOne, {
           props: {
             onBeforeShow: fn
           }
@@ -152,7 +151,7 @@ describe('use-model-toggle API', () => {
     describe('(event): hide', () => {
       it('should emit @hide event when menu is triggered by parent', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
+        cy.mount(WrapperOne, {
           props: {
             onHide: fn
           }
@@ -177,7 +176,7 @@ describe('use-model-toggle API', () => {
 
       it('should emit @hide event when component is triggered with the show() method', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
+        cy.mount(WrapperOne, {
           props: {
             onHide: fn
           }
@@ -205,7 +204,7 @@ describe('use-model-toggle API', () => {
     describe('(event): before-hide', () => {
       it('should emit @before-hide event when menu is triggered by parent', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
+        cy.mount(WrapperOne, {
           props: {
             onBeforeHide: fn
           }
@@ -230,7 +229,7 @@ describe('use-model-toggle API', () => {
 
       it('should emit @before-hide event when component is triggered with the show() method', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
+        cy.mount(WrapperOne, {
           props: {
             onBeforeHide: fn
           }
@@ -259,7 +258,7 @@ describe('use-model-toggle API', () => {
   describe('Methods', () => {
     describe('(method): show', () => {
       it('should trigger the menu to show', () => {
-        mount(WrapperOne)
+        cy.mount(WrapperOne)
 
         cy.dataCy('wrapper')
         cy.dataCy('method-show')
@@ -271,7 +270,7 @@ describe('use-model-toggle API', () => {
 
     describe('(method): hide', () => {
       it('should trigger the menu to hide', () => {
-        mount(WrapperOne)
+        cy.mount(WrapperOne)
 
         cy.dataCy('wrapper')
           .click()
@@ -286,7 +285,7 @@ describe('use-model-toggle API', () => {
 
     describe('(method): toggle', () => {
       it('should toggle the menu', () => {
-        mount(WrapperTwo)
+        cy.mount(WrapperTwo)
 
         cy.dataCy('wrapper')
           .then(() => {

package/src/composables/private/__tests__/{use-size.spec.js → use-size.cy.js}

@@ -1,6 +1,5 @@
-import QAvatar from './../../../components/avatar/QAvatar.js'
-import { mount } from '@cypress/vue'
-import { useSizeDefaults } from './../use-size.js'
+import QAvatar from '../../../components/avatar/QAvatar.js'
+import { useSizeDefaults } from '../use-size.js'
 
 describe('use-size API', () => {
   describe('Props', () => {
@@ -8,7 +7,7 @@ describe('use-size API', () => {
       describe('(prop): size', () => {
         it('should set the size', () => {
           const size = '24px'
-          mount(QAvatar, {
+          cy.mount(QAvatar, {
             props: {
               size,
               color: 'grey'
@@ -21,7 +20,7 @@ describe('use-size API', () => {
 
         it('should set the size with standard size names', () => {
           const size = 'sm'
-          mount(QAvatar, {
+          cy.mount(QAvatar, {
             props: {
               size,
               color: 'grey'

package/src/composables/private/__tests__/{use-transition.spec.js → use-transition.cy.js}

@@ -1,12 +1,11 @@
-import { mount } from '@cypress/vue'
-import WrapperOne from './../../../components/menu/__tests__/WrapperOne.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.mount(WrapperOne)
           cy.dataCy('wrapper')
             .click()
           cy.dataCy('menu', { timeout: 0 }) // Disable retry
@@ -15,7 +14,7 @@ describe('use-transition API', () => {
 
         it('should use a different show transition if defined', () => {
           const transition = 'scale'
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               transitionShow: transition
             }
@@ -29,7 +28,7 @@ describe('use-transition API', () => {
 
       describe('(prop): transition-hide', () => {
         it('should use the fade transition by default', () => {
-          mount(WrapperOne)
+          cy.mount(WrapperOne)
           cy.dataCy('wrapper')
             .click()
           cy.dataCy('menu')
@@ -42,7 +41,7 @@ describe('use-transition API', () => {
 
         it('should use a different hide transition if defined', () => {
           const transition = 'scale'
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               transitionHide: transition
             }
@@ -60,7 +59,7 @@ describe('use-transition API', () => {
 
       describe('(prop): transition-duration', () => {
         it('should be done with transitioning after 300ms passed', () => {
-          mount(WrapperOne)
+          cy.mount(WrapperOne)
           // eslint-disable-next-line cypress/no-unnecessary-waiting
           cy.dataCy('wrapper')
             .click()
@@ -70,7 +69,7 @@ describe('use-transition API', () => {
         })
 
         it('should not be done with transitioning before 300ms passed', () => {
-          mount(WrapperOne)
+          cy.mount(WrapperOne)
           // eslint-disable-next-line cypress/no-unnecessary-waiting
           cy.dataCy('wrapper')
             .click()
@@ -80,7 +79,7 @@ describe('use-transition API', () => {
         })
 
         it('should be done after a custom 1000ms passed', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               transitionDuration: 1000
             }
@@ -94,7 +93,7 @@ describe('use-transition API', () => {
         })
 
         it('should not be done before a custom 1000ms passed', () => {
-          mount(WrapperOne, {
+          cy.mount(WrapperOne, {
             props: {
               transitionDuration: 1000
             }