quasar 2.7.0 → 2.7.3

package/src/components/select/__tests__/QSelect.spec.js

@@ -1,7 +1,23 @@
 /* eslint-disable no-unused-expressions */
 import { mount } from '@cypress/vue'
-import { ref, h } from 'vue'
-import WrapperOne from './WrapperOne.vue'
+import { h, ref } from 'vue'
+import { vModelAdapter } from '../../../../test/cypress/helpers/v-model-adapter.js'
+import QSelect from '../QSelect.js'
+
+function getHostElement (extendedSelector = '') {
+  return cy.get(`.q-select ${ extendedSelector }`)
+}
+
+function mountQSelect (options = {}) {
+  if (!options.props?.modelValue) {
+    options.props = {
+      modelValue: null,
+      ...options.props ?? {}
+    }
+  }
+
+  return mount(QSelect, options)
+}
 
 // QSelect does not set the `data-cy` attribute on the root element, but on the `.q-field__native` element
 // This means we cannot use data-cy everywhere, but instead use a custom class `select-root` for this purpose
@@ -49,12 +65,12 @@ describe('QSelect API', () => {
       describe('(prop): dropdown-icon', () => {
         it('should use the dropdown-icon supplied', () => {
           const icon = 'map'
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               dropdownIcon: icon
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .get(`div:contains(${ icon })`)
             .should('exist')
         })
@@ -62,21 +78,27 @@ describe('QSelect API', () => {
 
       describe('(prop): use-input', () => {
         it('should render an input inside the select', () => {
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               useInput: true
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .get('input')
             .should('exist')
         })
 
-        it('should not render an input by default', () => {
-          mount(WrapperOne)
-          cy.get('.select-root')
+        it('should render an input, but it shouldn\'t be visible', () => {
+          mountQSelect()
+
+          getHostElement()
             .get('input')
-            .should('not.exist')
+            .should('not.be.visible')
+        })
+
+        it.skip('should not render an input by default', () => {
+          // Native input is now always rendered, due to having a target for autocomplete
+          // Refer to commit: https://github.com/quasarframework/quasar/commit/21a3af0dfe01bac0da617737562b599edee397a2
         })
       })
 
@@ -84,13 +106,13 @@ describe('QSelect API', () => {
         it('should use an input-debounce of 500ms by default', () => {
           const fn = cy.stub()
           const text = 'Hello there'
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               useInput: true,
               onFilter: fn
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .get('input')
             .type(text)
             .then(() => {
@@ -105,14 +127,14 @@ describe('QSelect API', () => {
         it('should use a custom input-debounce', () => {
           const fn = cy.stub()
           const text = 'Hello there'
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               useInput: true,
               onFilter: fn,
               inputDebounce: 800
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .get('input')
             .type(text)
             .wait(500)
@@ -130,19 +152,19 @@ describe('QSelect API', () => {
     describe('Category: content|behavior', () => {
       describe('(prop): hide-dropdown-icon', () => {
         it('should show the dropdown-icon when this property is not supplied', () => {
-          mount(WrapperOne)
-          cy.get('.select-root')
+          mountQSelect()
+          getHostElement()
             .get('.q-icon')
             .should('exist')
         })
 
         it('should hide the dropdown-icon when this property is true', () => {
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               hideDropdownIcon: true
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .get('.q-icon')
             .should('not.exist')
         })
@@ -152,21 +174,21 @@ describe('QSelect API', () => {
     describe('Category: general', () => {
       describe('(prop): tabindex', () => {
         it('should have a default tabindex of 0', () => {
-          mount(WrapperOne)
-          cy.get('.select-root [tabindex="0"]')
+          mountQSelect()
+          getHostElement('[tabindex="0"]')
             .should('exist')
         })
 
         it('should set the tabindex to the supplied value', () => {
           const tabindex = 2
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               tabindex
             }
           })
-          cy.get(`.select-root [tabindex="${ tabindex }"]`)
+          getHostElement(`[tabindex="${ tabindex }"]`)
             .should('exist')
-          cy.get('.select-root [tabindex="0"]')
+          getHostElement('[tabindex="0"]')
             .should('not.exist')
         })
       })
@@ -176,13 +198,13 @@ describe('QSelect API', () => {
       describe('(prop): model-value', () => {
         it('should have the option selected passed in the model-value', () => {
           const modelValue = 'Option 1'
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               modelValue,
               options: [ 'Option 1', 'Option 2', 'Option 3' ]
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .should('include.text', modelValue)
         })
       })
@@ -190,14 +212,14 @@ describe('QSelect API', () => {
       describe('(prop): emit-value', () => {
         it('should emit the value under the value key, if options are objects', () => {
           const fn = cy.stub()
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               emitValue: true,
               'onUpdate:modelValue': fn,
               options: [ { label: 'Option 1', value: 1 }, { label: 'Option 2', value: 2 } ]
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .contains('Option 1')
@@ -210,13 +232,13 @@ describe('QSelect API', () => {
         it('should emit the whole object by default if options are objects', () => {
           const fn = cy.stub()
           const options = [ { label: 'Option 1', value: 1 }, { label: 'Option 2', value: 2 } ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               'onUpdate:modelValue': fn,
               options
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .contains('Option 1')
@@ -233,58 +255,60 @@ describe('QSelect API', () => {
         it('should select only one option by default', () => {
           const options = [ 'Option 1', 'Option 2' ]
           const model = ref(null)
-          mount(WrapperOne, {
-            attrs: {
-              modelValue: model,
-              'onUpdate:modelValue': (val) => {
-                model.value = val
-              },
+          mountQSelect({
+            props: {
+              ...vModelAdapter(model),
               options
             }
           })
-          cy.get('.select-root')
-            .click()
-          cy.get('.q-menu')
-            .contains('Option 1')
-            .click()
-            .then(() => {
-              expect(model.value).to.equal(options[ 0 ])
-            })
-          cy.get('.q-menu')
-            .contains('Option 2')
-            .click()
-            .then(() => {
-              expect(model.value).to.equal(options[ 1 ])
-            })
+
+          getHostElement().click()
+          cy.withinSelectMenu(() => {
+            cy.contains('Option 1')
+              .click()
+              .then(() => {
+                expect(model.value).to.equal(options[ 0 ])
+              })
+          })
+
+          getHostElement().click()
+          cy.withinSelectMenu(() => {
+            cy.contains('Option 2')
+              .click()
+              .then(() => {
+                expect(model.value).to.equal(options[ 1 ])
+              })
+          })
         })
 
         it('should select multiple options if multiple is true', () => {
           const options = [ 'Option 1', 'Option 2' ]
           const model = ref([])
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
+              ...vModelAdapter(model),
               multiple: true,
-              modelValue: model,
-              'onUpdate:modelValue': (val) => {
-                model.value = val
-              },
               options
             }
           })
-          cy.get('.select-root')
-            .click()
-          cy.get('.q-menu')
-            .contains('Option 1')
-            .click()
-            .then(() => {
-              expect(model.value).to.eql([ options[ 0 ] ])
-            })
-          cy.get('.q-menu')
-            .contains('Option 2')
-            .click()
-            .then(() => {
-              expect(model.value).to.eql(options)
-            })
+
+          getHostElement().click()
+          cy.withinSelectMenu({
+            persistent: true,
+            fn: () => {
+              cy.contains('Option 1')
+                .click()
+                .then(() => {
+                  expect(model.value).to.eql([ options[ 0 ] ])
+                })
+
+              cy.contains('Option 2')
+                .click()
+                .then(() => {
+                  expect(model.value).to.eql(options)
+                })
+            }
+          })
         })
       })
     })
@@ -293,12 +317,12 @@ describe('QSelect API', () => {
       describe('(prop): options', () => {
         it('should show each option when opening the dropdown', () => {
           const options = [ 'Option 1', 'Option 2', 'Option 3', 'Option 4' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .children()
@@ -313,17 +337,14 @@ describe('QSelect API', () => {
         it('should use the value key as option-value by default', () => {
           const options = [ { label: 'Option one', value: 1 }, { label: 'Option two', value: 2 } ]
           const model = ref(null)
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
+              ...vModelAdapter(model),
               options,
-              emitValue: true,
-              modelValue: model,
-              'onUpdate:modelValue': (val) => {
-                model.value = val
-              }
+              emitValue: true
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .contains(options[ 0 ].label)
@@ -336,18 +357,15 @@ describe('QSelect API', () => {
         it('should use a custom key supplied by option-value', () => {
           const options = [ { label: 'Option one', test: 1 }, { label: 'Option two', test: 2 } ]
           const model = ref(null)
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
+              ...vModelAdapter(model),
               options,
               emitValue: true,
-              optionValue: 'test',
-              modelValue: model,
-              'onUpdate:modelValue': (val) => {
-                model.value = val
-              }
+              optionValue: 'test'
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .contains(options[ 0 ].label)
@@ -360,18 +378,15 @@ describe('QSelect API', () => {
         it('should accept a function as option-value', () => {
           const options = [ { label: 'Option one', test: 1 }, { label: 'Option two', test: 2 } ]
           const model = ref(null)
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
+              ...vModelAdapter(model),
               options,
               emitValue: true,
-              optionValue: (val) => val.test,
-              modelValue: model,
-              'onUpdate:modelValue': (val) => {
-                model.value = val
-              }
+              optionValue: (val) => val.test
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .contains(options[ 0 ].label)
@@ -385,12 +400,12 @@ describe('QSelect API', () => {
       describe('(prop): option-label', () => {
         it('should use the "label" key by default as option-label', () => {
           const options = [ { label: 'Option one', value: 1 }, { label: 'Option two', value: 2 } ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .children()
@@ -400,13 +415,13 @@ describe('QSelect API', () => {
 
         it('should use the key supplied by option-label', () => {
           const options = [ { test: 'Option one', value: 1 }, { test: 'Option two', value: 2 } ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               optionLabel: 'test'
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .children()
@@ -416,13 +431,13 @@ describe('QSelect API', () => {
 
         it('should accept a function as option-label', () => {
           const options = [ { test: 'Option one', value: 1 }, { test: 'Option two', value: 2 } ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               optionLabel: (item) => (item === null ? 'Null' : item.test)
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .children()
@@ -433,12 +448,12 @@ describe('QSelect API', () => {
       describe('(prop): option-disable', () => {
         it('should use the "disable" key by default as option-disable', () => {
           const options = [ { label: 'Option one', value: 1, disable: true }, { label: 'Option two', value: 2, disable: true } ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .get('[role="option"][aria-disabled="true"]')
@@ -447,13 +462,13 @@ describe('QSelect API', () => {
 
         it('should use the key supplied by option-disable', () => {
           const options = [ { label: 'Option one', value: 1, test: true }, { label: 'Option two', value: 2, disable: true } ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               optionDisable: 'test'
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .get('[role="option"][aria-disabled="true"]')
@@ -463,13 +478,13 @@ describe('QSelect API', () => {
 
         it('should accept a function as option-disable', () => {
           const options = [ { label: 'Option one', value: 1, test: true }, { label: 'Option two', value: 2, disable: true } ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               optionDisable: (item) => (item === null ? true : item.test)
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .get('[role="option"][aria-disabled="true"]')
@@ -481,13 +496,13 @@ describe('QSelect API', () => {
       describe('(prop): options-dense', () => {
         it('should show options list dense', () => {
           const options = [ 'Option 1', 'Option 2', 'Option 3', 'Option 4' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               optionsDense: true
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .get('.q-item')
@@ -498,13 +513,13 @@ describe('QSelect API', () => {
       describe('(prop): options-dark', () => {
         it('should show options list in dark mode', () => {
           const options = [ 'Option 1', 'Option 2', 'Option 3', 'Option 4' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               optionsDark: true
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .get('.q-item')
@@ -515,14 +530,14 @@ describe('QSelect API', () => {
       describe('(prop): options-selected-class', () => {
         it('should have text-{color} applied as selected by default', () => {
           const options = [ 'Option 1', 'Option 2', 'Option 3', 'Option 4' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               modelValue: 'Option 1',
               color: 'orange'
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .contains('[role="option"]', options[ 0 ])
@@ -531,15 +546,15 @@ describe('QSelect API', () => {
 
         it('should not have default active class when passed option is empty', () => {
           const options = [ 'Option 1', 'Option 2', 'Option 3', 'Option 4' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               modelValue: 'Option 1',
               optionsSelectedClass: '',
               color: 'orange'
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .contains('[role="option"]', options[ 0 ])
@@ -548,15 +563,15 @@ describe('QSelect API', () => {
 
         it('should have class name supplied by options-selected-class on active item', () => {
           const options = [ 'Option 1', 'Option 2', 'Option 3', 'Option 4' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               modelValue: 'Option 1',
               optionsSelectedClass: 'test-class',
               color: 'orange'
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .contains('[role="option"]', options[ 0 ])
@@ -572,12 +587,12 @@ describe('QSelect API', () => {
       describe('(prop): options-html', () => {
         it('should not render options with html by default', () => {
           const options = [ '<b style="color: red">Option 1</b>', 'Option 2' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .contains('Option 1')
@@ -587,13 +602,13 @@ describe('QSelect API', () => {
 
         it('should render options with html when options-html is true', () => {
           const options = [ '<b style="color: red">Option 1</b>', 'Option 2' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               optionsHtml: true
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .contains('Option 1')
@@ -605,27 +620,27 @@ describe('QSelect API', () => {
       describe('(prop): options-cover', () => {
         it('should make the popup menu cover the select', (done) => {
           const options = [ 'Option 1', 'Option 2', 'Option 3', 'Option 4' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               optionsCover: true
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
             .isNotActionable(done)
         })
 
         it('should not make the popup menu cover the select when use-input is used', () => {
           const options = [ 'Option 1', 'Option 2', 'Option 3', 'Option 4' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               optionsCover: true,
               useInput: true
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
             .click({ timeout: 100 })
         })
@@ -634,14 +649,14 @@ describe('QSelect API', () => {
       describe('(prop): menu-shrink', () => {
         it('should shrink the menu', () => {
           const options = [ '1', '2', '3', '4' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               menuShrink: true
             }
           })
           let selectWidth = 0
-          cy.get('.select-root')
+          getHostElement()
             .then(($el) => {
               selectWidth = $el[ 0 ].clientWidth
             })
@@ -656,26 +671,26 @@ describe('QSelect API', () => {
       describe('(prop): map-options', () => {
         it('should display the label of the selected value instead of the value itself', () => {
           const options = [ { label: 'Option one', value: 1 }, { label: 'Option two', value: 2 } ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               modelValue: 1,
               mapOptions: true
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .contains(options[ 0 ].label)
         })
 
         it('should display the selected value as string by default', () => {
           const options = [ { label: 'Option one', value: 1 }, { label: 'Option two', value: 2 } ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               modelValue: 1
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .contains(options[ 0 ].value)
         })
       })
@@ -699,37 +714,37 @@ describe('QSelect API', () => {
       describe('(prop): display-value', () => {
         it('should override the default selection string', () => {
           const options = [ { label: 'Option one', value: 1 }, { label: 'Option two', value: 2 } ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               modelValue: 1,
               displayValue: 'Test'
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .should('not.contain', options[ 0 ].value)
             .should('contain', 'Test')
         })
 
         it('should not override the default selection string when using `use-chips`', () => {
           const options = [ { label: 'Option one', value: 1 }, { label: 'Option two', value: 2 } ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               modelValue: 1,
               displayValue: 'Test',
               useChips: true
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .should('contain', options[ 0 ].value)
             .should('not.contain', 'Test')
         })
 
         it('should not override the default selection string when using `selected` slot', () => {
           const options = [ { label: 'Option one', value: 1 }, { label: 'Option two', value: 2 } ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               modelValue: 1,
               displayValue: 'Test'
@@ -738,7 +753,7 @@ describe('QSelect API', () => {
               selected: () => 'Hello there'
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .should('not.contain', options[ 0 ].value)
             .should('not.contain', 'Test')
             .should('contain', 'Hello there')
@@ -748,14 +763,14 @@ describe('QSelect API', () => {
       describe('(prop): display-value-html', () => {
         it('should render the selected option as html', () => {
           const options = [ '<b style="color: red">Option 1</b>', 'Option 2' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               modelValue: options[ 0 ],
               displayValueHtml: true
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .contains('Option 1')
             .should('have.color', 'red')
             .should('have.css', 'font-weight', '700')
@@ -764,8 +779,8 @@ describe('QSelect API', () => {
         it('should not render the selected option as html when using `selected` slot', () => {
           const html = '<b style="color: red">Option 1</b>'
           const options = [ 'Option 1', 'Option 2' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               modelValue: options[ 0 ],
               displayValueHtml: true
@@ -774,15 +789,15 @@ describe('QSelect API', () => {
               selected: () => html
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .contains(html)
         })
 
         it('should not render the selected option as html when using `selected-item` slot', () => {
           const html = '<b style="color: red">Option 1</b>'
           const options = [ 'Option 1', 'Option 2' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               modelValue: options[ 0 ],
               displayValueHtml: true
@@ -791,7 +806,7 @@ describe('QSelect API', () => {
               'selected-item': () => html
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .contains(html)
         })
       })
@@ -799,22 +814,22 @@ describe('QSelect API', () => {
       describe('(prop): hide-selected', () => {
         it('should not show the selected value', () => {
           const options = [ 'Option 1', 'Option 2' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               modelValue: options[ 0 ],
               hideSelected: true
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .should('not.contain', options[ 0 ])
         })
 
         it('should set the value on the underlying input when using hide-selected', () => {
           // Todo: it its not really clear from the docs that you need to use `useInput` and `fillInput` together with this prop to achieve this
           const options = [ 'Option 1', 'Option 2' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               modelValue: options[ 0 ],
               hideSelected: true,
@@ -822,7 +837,7 @@ describe('QSelect API', () => {
               useInput: true
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .get('input')
             .should('have.value', options[ 0 ])
         })
@@ -832,25 +847,22 @@ describe('QSelect API', () => {
         it('should allow a maximum number of selections', () => {
           const max = 3
           const options = [ '1', '2', '3', '4', '5' ]
-          const modelValue = ref([])
-          mount(WrapperOne, {
-            attrs: {
+          const model = ref([])
+          mountQSelect({
+            props: {
+              ...vModelAdapter(model),
               options,
-              modelValue,
               maxValues: max,
-              'onUpdate:modelValue': (val) => {
-                modelValue.value = val
-              },
               multiple: true
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .get('[role="option"]')
             .click({ multiple: true })
             .then(() => {
-              expect(modelValue.value.length).to.equal(max)
+              expect(model.value.length).to.equal(max)
             })
         })
       })
@@ -858,14 +870,14 @@ describe('QSelect API', () => {
       describe('(prop): use-chips', () => {
         it('should use QChips to show the selected value', () => {
           const options = [ 'Option 1', 'Option 2' ]
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options,
               modelValue: options[ 0 ],
               useChips: true
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .get('.q-chip')
             .should('contain', options[ 0 ])
         })
@@ -876,13 +888,13 @@ describe('QSelect API', () => {
       describe('(prop): popup-content-class', () => {
         it('should apply the class to the popup element', () => {
           const className = 'test-class'
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options: [ '1', '2 ' ],
               popupContentClass: className
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .should('have.class', className)
@@ -892,13 +904,13 @@ describe('QSelect API', () => {
       describe('(prop): popup-content-style', () => {
         it('should apply the style definitions to the popup element', () => {
           const style = 'background: red;'
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               options: [ '1', '2 ' ],
               popupContentStyle: style
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .click()
           cy.get('.q-menu')
             .should('have.backgroundColor', 'red')
@@ -908,13 +920,13 @@ describe('QSelect API', () => {
       describe('(prop): input-class', () => {
         it('should apply a class to the input element when using `useInput`', () => {
           const className = 'test-class'
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               useInput: true,
               inputClass: className
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .get('input')
             .should('have.class', className)
         })
@@ -923,13 +935,13 @@ describe('QSelect API', () => {
       describe('(prop): input-style', () => {
         it('should apply a style to the input element when using `useInput`', () => {
           const style = 'font-size: 30px'
-          mount(WrapperOne, {
-            attrs: {
+          mountQSelect({
+            props: {
               useInput: true,
               inputStyle: style
             }
           })
-          cy.get('.select-root')
+          getHostElement()
             .get('input')
             .should('have.css', 'font-size', '30px')
         })
@@ -942,8 +954,8 @@ describe('QSelect API', () => {
       it('should display when something is selected', () => {
         const selectedString = 'Test slot selected'
         const options = [ 'Option 1', 'Option 2' ]
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options,
             modelValue: options[ 0 ]
           },
@@ -951,7 +963,7 @@ describe('QSelect API', () => {
             selected: () => selectedString
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .should('contain', selectedString)
       })
     })
@@ -959,44 +971,44 @@ describe('QSelect API', () => {
     describe('(slot): loading', () => {
       it('should display when element is loading', () => {
         const loadingString = 'Test slot loading'
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             loading: true
           },
           slots: {
             loading: () => loadingString
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .should('contain', loadingString)
       })
 
       it('should not display when element is loading', () => {
         const loadingString = 'Test slot loading'
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             loading: false
           },
           slots: {
             loading: () => loadingString
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .should('not.contain', loadingString)
       })
     })
 
     describe('(slot): before-options', () => {
       it('should display the slot content before the options', () => {
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options: [ '1', '2', '3' ]
           },
           slots: {
             'before-options': () => h('div', { class: 'dummyClass' }, 'Hello')
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .click()
         cy.get('.q-menu')
           .children().first()
@@ -1006,15 +1018,15 @@ describe('QSelect API', () => {
 
     describe('(slot): after-options', () => {
       it('should display the slot content after the options', () => {
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options: [ '1', '2', '3' ]
           },
           slots: {
             'after-options': () => h('div', { class: 'dummyClass' }, 'Hello')
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .click()
         cy.get('.q-menu')
           .children().last()
@@ -1025,15 +1037,15 @@ describe('QSelect API', () => {
     describe('(slot): no-option', () => {
       it('should display the slot content when there are no options', () => {
         const compareString = 'No options :('
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options: [ ]
           },
           slots: {
             'no-option': () => compareString
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .click()
         cy.get('.q-menu')
           .should('contain', compareString)
@@ -1041,8 +1053,8 @@ describe('QSelect API', () => {
 
       it('should pass the inputValue to the slot scope', () => {
         const compareString = 'No options :('
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options: [ ],
             useInput: true
           },
@@ -1050,7 +1062,7 @@ describe('QSelect API', () => {
             'no-option': (scope) => compareString + scope.inputValue
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .click()
           .type('Hello')
         cy.get('.q-menu')
@@ -1059,15 +1071,15 @@ describe('QSelect API', () => {
 
       it('should not display the slot content when there are options', () => {
         const compareString = 'No options :('
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options: [ '1', '2', '3' ]
           },
           slots: {
             'no-option': () => compareString
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .click()
         cy.get('.q-menu')
           .should('not.contain', compareString)
@@ -1077,8 +1089,8 @@ describe('QSelect API', () => {
     describe('(slot): selected-item', () => {
       it('should override the default selection slot', () => {
         const options = [ { label: 'Option one', value: 1 }, { label: 'Option two', value: 2 } ]
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options,
             modelValue: 1
           },
@@ -1086,15 +1098,15 @@ describe('QSelect API', () => {
             'selected-item': () => 'Test'
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .should('not.contain', options[ 0 ].value)
           .should('contain', 'Test')
       })
 
       it('should pass the selected option index to the slot scope', () => {
         const options = [ { label: 'Option one', value: 1 }, { label: 'Option two', value: 2 } ]
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options,
             modelValue: 1
           },
@@ -1102,14 +1114,14 @@ describe('QSelect API', () => {
             'selected-item': (scope) => 'Test' + scope.index
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .should('contain', 'Test0')
       })
 
       it('should pass the selected option value to the slot scope', () => {
         const options = [ { label: 'Option one', value: 1 }, { label: 'Option two', value: 2 } ]
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options,
             modelValue: 1
           },
@@ -1117,29 +1129,26 @@ describe('QSelect API', () => {
             'selected-item': (scope) => 'Test' + scope.opt
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .should('contain', 'Test1')
       })
 
       it('should pass a removeAtIndex function to the slot scope', () => {
         const options = [ { label: 'Option one', value: 1 }, { label: 'Option two', value: 2 } ]
         const model = ref(1)
-        mount(WrapperOne, {
-          attrs: {
-            options,
-            modelValue: model,
-            'onUpdate:modelValue': (val) => {
-              model.value = val
-            }
+        mountQSelect({
+          props: {
+            ...vModelAdapter(model),
+            options
           },
           slots: {
             'selected-item': (scope) => h('button', { class: 'remove', onClick: () => scope.removeAtIndex(scope.index) }, 'Remove')
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .get('button.remove')
           .click()
-        cy.get('.select-root')
+        getHostElement()
           .get('button.remove')
           .should('not.exist')
       })
@@ -1147,23 +1156,20 @@ describe('QSelect API', () => {
       it('should pass a toggleOption function to the slot scope', () => {
         const options = [ { label: 'Option one', value: 1 }, { label: 'Option two', value: 2 } ]
         const model = ref(1)
-        mount(WrapperOne, {
-          attrs: {
-            options,
-            modelValue: model,
-            'onUpdate:modelValue': (val) => {
-              model.value = val
-            }
+        mountQSelect({
+          props: {
+            ...vModelAdapter(model),
+            options
           },
           slots: {
             'selected-item': (scope) => h('button', { class: 'toggle', onClick: () => scope.toggleOption(2) }, 'Toggle' + scope.opt)
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .get('button.toggle')
           .should('contain', 'Toggle1')
           .click()
-        cy.get('.select-root')
+        getHostElement()
           .get('button.toggle')
           .should('contain', 'Toggle2')
       })
@@ -1172,15 +1178,15 @@ describe('QSelect API', () => {
     describe('(slot): option', () => {
       it('should render a list of the provided slot as options', () => {
         const options = [ '1', '2', '3' ]
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options
           },
           slots: {
             option: (scope) => h('div', { class: 'custom-option' }, scope.opt)
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .click()
         cy.get('.q-menu')
           .get('.custom-option')
@@ -1189,8 +1195,8 @@ describe('QSelect API', () => {
 
       it('should have a selected property in the scope', () => {
         const options = [ '1', '2', '3' ]
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             modelValue: '1',
             options
           },
@@ -1198,7 +1204,7 @@ describe('QSelect API', () => {
             option: (scope) => h('div', { class: `custom-option-${ scope.selected }` }, scope.opt + scope.selected)
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .click()
         cy.get('.q-menu')
           .get('.custom-option-true')
@@ -1212,8 +1218,8 @@ describe('QSelect API', () => {
     describe('(event): update:model-value', () => {
       it('should emit event when model value changes', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options: [ '1', '2', '3' ],
             modelValue: null,
             'onUpdate:modelValue': fn
@@ -1221,7 +1227,7 @@ describe('QSelect API', () => {
         })
 
         expect(fn).not.to.be.called
-        cy.get('.select-root')
+        getHostElement()
           .click()
         cy.get('.q-menu')
           .get('[role="option"]')
@@ -1236,8 +1242,8 @@ describe('QSelect API', () => {
     describe('(event): input-value', () => {
       it('should emit event when text input changes', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             modelValue: null,
             onInputValue: fn,
             useInput: true
@@ -1245,7 +1251,7 @@ describe('QSelect API', () => {
         })
 
         expect(fn).not.to.be.called
-        cy.get('.select-root')
+        getHostElement()
           .get('input')
           .type('h')
           .then(() => {
@@ -1258,20 +1264,17 @@ describe('QSelect API', () => {
       it('should emit event when a selected item is removed from selection', () => {
         const fn = cy.stub()
         const model = ref([ '2', '3' ])
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
+            ...vModelAdapter(model),
             onRemove: fn,
             multiple: true,
-            modelValue: model,
-            'onUpdate:modelValue': (val) => {
-              model.value = val
-            },
             options: [ '1', '2', '3' ]
           }
         })
 
         expect(fn).not.to.be.called
-        cy.get('.select-root')
+        getHostElement()
           .click()
         cy.get('.q-menu')
           .get('[role="option"]')
@@ -1295,20 +1298,17 @@ describe('QSelect API', () => {
       it('should emit event when an option is added to the selection', () => {
         const fn = cy.stub()
         const model = ref([ '2' ])
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
+            ...vModelAdapter(model),
             onAdd: fn,
             multiple: true,
-            modelValue: model,
-            'onUpdate:modelValue': (val) => {
-              model.value = val
-            },
             options: [ '1', '2', '3' ]
           }
         })
 
         expect(fn).not.to.be.called
-        cy.get('.select-root')
+        getHostElement()
           .click()
         cy.get('.q-menu')
           .get('[role="option"]')
@@ -1325,21 +1325,18 @@ describe('QSelect API', () => {
       it('should emit event when something is typed into the input field and enter is pressed', () => {
         const fn = cy.stub()
         const model = ref([ '2' ])
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
+            ...vModelAdapter(model),
             onNewValue: fn,
             multiple: true,
             useInput: true,
-            modelValue: model,
-            'onUpdate:modelValue': (val) => {
-              model.value = val
-            },
             hideDropdownIcon: true
           }
         })
 
         expect(fn).not.to.be.called
-        cy.get('.select-root')
+        getHostElement()
           .get('input')
           .type('100')
           .then(() => {
@@ -1353,22 +1350,19 @@ describe('QSelect API', () => {
 
       it('should add the value to the model when the doneFn is called', () => {
         const model = ref([ '2' ])
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
+            ...vModelAdapter(model),
             onNewValue: (val, doneFn) => {
               doneFn(val)
             },
             multiple: true,
             useInput: true,
-            modelValue: model,
-            'onUpdate:modelValue': (val) => {
-              model.value = val
-            },
             hideDropdownIcon: true
           }
         })
 
-        cy.get('.select-root')
+        getHostElement()
           .get('input')
           .type('100')
           .type('{enter}')
@@ -1381,8 +1375,8 @@ describe('QSelect API', () => {
     describe('(event): filter', () => {
       it('should emit event when something is typed into the input field', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             onFilter: fn,
             useInput: true,
             inputDebounce: 0
@@ -1390,7 +1384,7 @@ describe('QSelect API', () => {
         })
 
         expect(fn).not.to.be.called
-        cy.get('.select-root')
+        getHostElement()
           .get('input')
           .type('h')
           .then(() => {
@@ -1403,8 +1397,8 @@ describe('QSelect API', () => {
       it('should emit event when the the filterFn has not called the doneFn yet and a new filter is requested', () => {
         const fn = cy.stub()
         const filterFn = cy.stub()
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             onFilter: filterFn,
             onFilterAbort: fn,
             useInput: true,
@@ -1413,7 +1407,7 @@ describe('QSelect API', () => {
         })
 
         expect(fn).not.to.be.called
-        cy.get('.select-root')
+        getHostElement()
           .get('input')
           .click()
           .then(() => {
@@ -1428,8 +1422,8 @@ describe('QSelect API', () => {
 
       it('should not emit event when the filter has called its doneFn', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             onFilter: (val, doneFn) => {
               doneFn()
             },
@@ -1440,7 +1434,7 @@ describe('QSelect API', () => {
         })
 
         expect(fn).not.to.be.called
-        cy.get('.select-root')
+        getHostElement()
           .get('input')
           .click()
           .then(() => {
@@ -1456,15 +1450,15 @@ describe('QSelect API', () => {
     describe('(event): popup-show', () => {
       it('should emit event when the options are shown', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             onPopupShow: fn,
             options: [ '1', '2', '3' ]
           }
         })
 
         expect(fn).not.to.be.called
-        cy.get('.select-root')
+        getHostElement()
           .click()
           .then(() => {
             expect(fn).to.be.called
@@ -1475,15 +1469,15 @@ describe('QSelect API', () => {
     describe('(event): popup-hide', () => {
       it('should emit event when the options are hidden', () => {
         const fn = cy.stub()
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             onPopupHide: fn,
             options: [ '1', '2', '3' ]
           }
         })
 
         expect(fn).not.to.be.called
-        cy.get('.select-root')
+        getHostElement()
           .click()
           .then(() => {
             expect(fn).not.to.be.called
@@ -1508,16 +1502,16 @@ describe('QSelect API', () => {
   describe('Methods', () => {
     describe('(method): focus', () => {
       it('should focus the component', () => {
-        mount(WrapperOne)
+        mountQSelect()
 
-        cy.dataCy('select')
+        getHostElement()
           .get('[tabindex="0"]')
           .should('not.have.focus')
-        cy.dataCy('select')
+        getHostElement()
           .then(() => {
-            Cypress.vueWrapper.vm.compRef.focus()
+            Cypress.vueWrapper.vm.focus()
           })
-        cy.dataCy('select')
+        getHostElement()
           .get('[tabindex="0"]')
           .should('have.focus')
       })
@@ -1525,8 +1519,8 @@ describe('QSelect API', () => {
 
     describe('(method): showPopup', () => {
       it('should open the popup and focus the component', () => {
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options: [ '1', '2' ]
           }
         })
@@ -1534,11 +1528,11 @@ describe('QSelect API', () => {
         cy.get('.q-menu')
           .should('not.exist')
           .then(() => {
-            Cypress.vueWrapper.vm.compRef.showPopup()
+            Cypress.vueWrapper.vm.showPopup()
           })
         cy.get('.q-menu')
           .should('be.visible')
-        cy.dataCy('select')
+        getHostElement()
           .get('[tabindex="0"]')
           .should('have.focus')
       })
@@ -1546,18 +1540,18 @@ describe('QSelect API', () => {
 
     describe('(method): hidePopup', () => {
       it('should hide the popup', () => {
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options: [ '1', '2' ]
           }
         })
 
-        cy.get('.select-root')
+        getHostElement()
           .click()
         cy.get('.q-menu')
           .should('be.visible')
           .then(() => {
-            Cypress.vueWrapper.vm.compRef.hidePopup()
+            Cypress.vueWrapper.vm.hidePopup()
           })
         cy.get('.q-menu')
           .should('not.exist')
@@ -1568,19 +1562,16 @@ describe('QSelect API', () => {
       it('should remove a selected option at the correct index', () => {
         const options = [ '1', '2', '3', '4' ]
         const model = ref([ '1', '2', '4' ])
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
-            'onUpdate:modelValue': (val) => {
-              model.value = val
-            },
+        mountQSelect({
+          props: {
+            ...vModelAdapter(model),
             multiple: true,
             options
           }
         })
           .then(() => {
             expect(model.value.includes('4')).to.be.true
-            Cypress.vueWrapper.vm.compRef.removeAtIndex(2)
+            Cypress.vueWrapper.vm.removeAtIndex(2)
             expect(model.value.includes('4')).to.be.false
           })
       })
@@ -1589,38 +1580,32 @@ describe('QSelect API', () => {
     describe('(method): add', () => {
       it('should add a selected option', () => {
         const model = ref([ '1', '2' ])
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
-            'onUpdate:modelValue': (val) => {
-              model.value = val
-            },
+        mountQSelect({
+          props: {
+            ...vModelAdapter(model),
             multiple: true
           }
         })
           .then(() => {
             expect(model.value.includes('100')).to.be.false
-            Cypress.vueWrapper.vm.compRef.add('100')
+            Cypress.vueWrapper.vm.add('100')
             expect(model.value.includes('100')).to.be.true
           })
       })
 
       it('should not add a duplicate option when unique is true', () => {
         const model = ref([ '1', '2' ])
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
-            'onUpdate:modelValue': (val) => {
-              model.value = val
-            },
+        mountQSelect({
+          props: {
+            ...vModelAdapter(model),
             multiple: true
           }
         })
           .then(() => {
             expect(model.value.length).to.be.equal(2)
-            Cypress.vueWrapper.vm.compRef.add('2', true)
+            Cypress.vueWrapper.vm.add('2', true)
             expect(model.value.length).to.be.equal(2)
-            Cypress.vueWrapper.vm.compRef.add('2')
+            Cypress.vueWrapper.vm.add('2')
             expect(model.value.length).to.be.equal(3)
           })
       })
@@ -1629,24 +1614,21 @@ describe('QSelect API', () => {
     describe('(method): toggleOption', () => {
       it('should toggle an option', () => {
         const model = ref([ '1', '2' ])
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
-            'onUpdate:modelValue': (val) => {
-              model.value = val
-            },
+        mountQSelect({
+          props: {
+            ...vModelAdapter(model),
             multiple: true
           }
         })
           .then(() => {
             expect(model.value.length).to.be.equal(2)
-            Cypress.vueWrapper.vm.compRef.toggleOption('2')
+            Cypress.vueWrapper.vm.toggleOption('2')
             expect(model.value.length).to.be.equal(1)
           })
           // When not using this wait this test will succeed on `open-ct` but fail on `run-ct`
           .wait(50)
           .then(() => {
-            Cypress.vueWrapper.vm.compRef.toggleOption('2')
+            Cypress.vueWrapper.vm.toggleOption('2')
             expect(model.value.length).to.be.equal(2)
           })
       })
@@ -1655,25 +1637,22 @@ describe('QSelect API', () => {
       // should this be consistent? E.g. use `true` as argument when multiple is true by default but make sure it can be overridden.
       it('should close the menu and clear the filter', () => {
         const model = ref('1')
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
-            'onUpdate:modelValue': (val) => {
-              model.value = val
-            },
+        mountQSelect({
+          props: {
+            ...vModelAdapter(model),
             options: [ '1', '2' ],
             useInput: true
           }
         })
 
-        cy.get('.select-root')
+        getHostElement()
           .click()
           .get('input')
           .type('h')
         cy.get('.q-menu')
           .should('be.visible')
           .then(() => {
-            Cypress.vueWrapper.vm.compRef.toggleOption('2')
+            Cypress.vueWrapper.vm.toggleOption('2')
           })
         cy.get('.q-menu')
           .should('not.exist')
@@ -1683,25 +1662,22 @@ describe('QSelect API', () => {
 
       it('should not close the menu and clear the filter when keepOpen is true', () => {
         const model = ref('1')
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
-            'onUpdate:modelValue': (val) => {
-              model.value = val
-            },
+        mountQSelect({
+          props: {
+            ...vModelAdapter(model),
             options: [ '1', '2' ],
             useInput: true
           }
         })
 
-        cy.get('.select-root')
+        getHostElement()
           .click()
           .get('input')
           .type('h')
         cy.get('.q-menu')
           .should('be.visible')
           .then(() => {
-            Cypress.vueWrapper.vm.compRef.toggleOption('2', true)
+            Cypress.vueWrapper.vm.toggleOption('2', true)
           })
         cy.get('.q-menu')
           .should('be.visible')
@@ -1713,15 +1689,15 @@ describe('QSelect API', () => {
     describe('(method): setOptionIndex', () => {
       it('should set an option from the menu dropdown as focused', () => {
         const options = [ '1', '2', '3', '4' ]
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .click()
           .then(() => {
-            Cypress.vueWrapper.vm.compRef.setOptionIndex(0)
+            Cypress.vueWrapper.vm.setOptionIndex(0)
           })
           .get('[role="option"]')
           .first()
@@ -1732,21 +1708,21 @@ describe('QSelect API', () => {
     describe('(method): moveOptionSelection', () => {
       it('should move the optionSelection by some index offset', () => {
         const options = [ '1', '2', '3', '4' ]
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .click()
           .then(() => {
-            Cypress.vueWrapper.vm.compRef.setOptionIndex(0)
+            Cypress.vueWrapper.vm.setOptionIndex(0)
           })
           .get('[role="option"]')
           .first()
           .should('have.class', 'q-manual-focusable--focused')
           .then(() => {
-            Cypress.vueWrapper.vm.compRef.moveOptionSelection(3)
+            Cypress.vueWrapper.vm.moveOptionSelection(3)
           })
           .get('[role="option"]')
           .last()
@@ -1759,18 +1735,18 @@ describe('QSelect API', () => {
         const options = [ '1', '2', '3', '4' ]
         const fn = cy.stub()
         const text = 'test'
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options,
             useInput: true,
             onFilter: fn
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .click()
           .then(() => {
             expect(fn).not.to.be.calledWith(text)
-            Cypress.vueWrapper.vm.compRef.filter(text)
+            Cypress.vueWrapper.vm.filter(text)
             expect(fn).to.be.calledWith(text)
           })
       })
@@ -1787,18 +1763,18 @@ describe('QSelect API', () => {
         const options = [ '1', '2', '3', '4' ]
         const fn = cy.stub()
         const text = 'test'
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options,
             useInput: true,
             onFilter: fn
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .click()
           .then(() => {
             expect(fn).not.to.be.calledWith(text)
-            Cypress.vueWrapper.vm.compRef.updateInputValue(text)
+            Cypress.vueWrapper.vm.updateInputValue(text)
             expect(fn).to.be.calledWith(text)
           })
           .get('input')
@@ -1809,18 +1785,18 @@ describe('QSelect API', () => {
         const options = [ '1', '2', '3', '4' ]
         const fn = cy.stub()
         const text = 'test'
-        mount(WrapperOne, {
-          attrs: {
+        mountQSelect({
+          props: {
             options,
             useInput: true,
             onFilter: fn
           }
         })
-        cy.get('.select-root')
+        getHostElement()
           .click()
           .then(() => {
             expect(fn).not.to.be.calledWith(text)
-            Cypress.vueWrapper.vm.compRef.updateInputValue(text, true)
+            Cypress.vueWrapper.vm.updateInputValue(text, true)
             expect(fn).not.to.be.calledWith(text)
           })
           .get('input')
@@ -1831,17 +1807,17 @@ describe('QSelect API', () => {
     describe('(method): isOptionSelected', () => {
       it('should tell when an option is selected', () => {
         const options = [ '1', '2', '3', '4' ]
-        const model = ref([ '1', '2', '4' ])
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
+        const modelValue = [ '1', '2', '4' ]
+        mountQSelect({
+          props: {
+            modelValue,
             multiple: true,
             options
           }
         })
           .then(() => {
-            expect(Cypress.vueWrapper.vm.compRef.isOptionSelected(options[ 0 ])).to.be.true
-            expect(Cypress.vueWrapper.vm.compRef.isOptionSelected(options[ 2 ])).to.be.false
+            expect(Cypress.vueWrapper.vm.isOptionSelected(options[ 0 ])).to.be.true
+            expect(Cypress.vueWrapper.vm.isOptionSelected(options[ 2 ])).to.be.false
           })
       })
     })
@@ -1849,44 +1825,44 @@ describe('QSelect API', () => {
     describe('(method): getEmittingOptionValue', () => {
       it('should return the emit value with plain options', () => {
         const options = [ '1', '2', '3', '4' ]
-        const model = ref('1')
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
+        const modelValue = '1'
+        mountQSelect({
+          props: {
+            modelValue,
             options
           }
         })
           .then(() => {
-            expect(Cypress.vueWrapper.vm.compRef.getEmittingOptionValue(options[ 2 ])).to.equal(options[ 2 ])
+            expect(Cypress.vueWrapper.vm.getEmittingOptionValue(options[ 2 ])).to.equal(options[ 2 ])
           })
       })
 
       it('should return the emit value with object options', () => {
         const options = [ { label: '1', value: 1 }, { label: '2', value: 2 }, { label: '3', value: 3 } ]
-        const model = ref(options[ 0 ])
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
+        const modelValue = options[ 0 ]
+        mountQSelect({
+          props: {
+            modelValue,
             options
           }
         })
           .then(() => {
-            expect(Cypress.vueWrapper.vm.compRef.getEmittingOptionValue(options[ 2 ])).to.equal(options[ 2 ])
+            expect(Cypress.vueWrapper.vm.getEmittingOptionValue(options[ 2 ])).to.equal(options[ 2 ])
           })
       })
 
       it('should respect emit-value when using options', () => {
         const options = [ { label: '1', value: 1 }, { label: '2', value: 2 }, { label: '3', value: 3 } ]
-        const model = ref(options[ 0 ])
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
+        const modelValue = options[ 0 ]
+        mountQSelect({
+          props: {
+            modelValue,
             options,
             emitValue: true
           }
         })
           .then(() => {
-            expect(Cypress.vueWrapper.vm.compRef.getEmittingOptionValue(options[ 2 ])).to.equal(options[ 2 ].value)
+            expect(Cypress.vueWrapper.vm.getEmittingOptionValue(options[ 2 ])).to.equal(options[ 2 ].value)
           })
       })
     })
@@ -1894,44 +1870,44 @@ describe('QSelect API', () => {
     describe('(method): getOptionValue', () => {
       it('should return the option value with plain options', () => {
         const options = [ '1', '2', '3', '4' ]
-        const model = ref('1')
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
+        const modelValue = '1'
+        mountQSelect({
+          props: {
+            modelValue,
             options
           }
         })
           .then(() => {
-            expect(Cypress.vueWrapper.vm.compRef.getOptionValue(options[ 2 ])).to.equal(options[ 2 ])
+            expect(Cypress.vueWrapper.vm.getOptionValue(options[ 2 ])).to.equal(options[ 2 ])
           })
       })
 
       it('should return the option value with object options (value by default)', () => {
         const options = [ { label: '1', value: 1 }, { label: '2', value: 2 }, { label: '3', value: 3 } ]
-        const model = ref(options[ 0 ])
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
+        const modelValue = options[ 0 ]
+        mountQSelect({
+          props: {
+            modelValue,
             options
           }
         })
           .then(() => {
-            expect(Cypress.vueWrapper.vm.compRef.getOptionValue(options[ 2 ])).to.equal(options[ 2 ].value)
+            expect(Cypress.vueWrapper.vm.getOptionValue(options[ 2 ])).to.equal(options[ 2 ].value)
           })
       })
 
       it('should respect the option-value option', () => {
         const options = [ { label: '1', test: 1 }, { label: '2', test: 2 }, { label: '3', test: 3 } ]
-        const model = ref(options[ 0 ])
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
+        const modelValue = options[ 0 ]
+        mountQSelect({
+          props: {
+            modelValue,
             options,
             optionValue: 'test'
           }
         })
           .then(() => {
-            expect(Cypress.vueWrapper.vm.compRef.getOptionValue(options[ 2 ])).to.equal(options[ 2 ].test)
+            expect(Cypress.vueWrapper.vm.getOptionValue(options[ 2 ])).to.equal(options[ 2 ].test)
           })
       })
     })
@@ -1939,44 +1915,44 @@ describe('QSelect API', () => {
     describe('(method): getOptionLabel', () => {
       it('should return the option label with plain options', () => {
         const options = [ '1', '2', '3', '4' ]
-        const model = ref('1')
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
+        const modelValue = '1'
+        mountQSelect({
+          props: {
+            modelValue,
             options
           }
         })
           .then(() => {
-            expect(Cypress.vueWrapper.vm.compRef.getOptionLabel(options[ 2 ])).to.equal(options[ 2 ])
+            expect(Cypress.vueWrapper.vm.getOptionLabel(options[ 2 ])).to.equal(options[ 2 ])
           })
       })
 
       it('should return the option label with object options (label by default)', () => {
         const options = [ { label: '1', value: 1 }, { label: '2', value: 2 }, { label: '3', value: 3 } ]
-        const model = ref(options[ 0 ])
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
+        const modelValue = options[ 0 ]
+        mountQSelect({
+          props: {
+            modelValue,
             options
           }
         })
           .then(() => {
-            expect(Cypress.vueWrapper.vm.compRef.getOptionLabel(options[ 2 ])).to.equal(options[ 2 ].label)
+            expect(Cypress.vueWrapper.vm.getOptionLabel(options[ 2 ])).to.equal(options[ 2 ].label)
           })
       })
 
       it('should respect the option-value option', () => {
         const options = [ { test: '1', value: 1 }, { test: '2', value: 2 }, { test: '3', value: 3 } ]
-        const model = ref(options[ 0 ])
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
+        const modelValue = options[ 0 ]
+        mountQSelect({
+          props: {
+            modelValue,
             options,
             optionLabel: 'test'
           }
         })
           .then(() => {
-            expect(Cypress.vueWrapper.vm.compRef.getOptionLabel(options[ 2 ])).to.equal(options[ 2 ].test)
+            expect(Cypress.vueWrapper.vm.getOptionLabel(options[ 2 ])).to.equal(options[ 2 ].test)
           })
       })
     })
@@ -1984,18 +1960,18 @@ describe('QSelect API', () => {
     describe('(method): isOptionDisabled', () => {
       it('should return if an option is disabled correctly', () => {
         const options = [ { label: '1', value: 1, disable: true }, { label: '2', value: 2 }, { label: '3', value: 3 } ]
-        const model = ref(options[ 0 ])
-        mount(WrapperOne, {
-          attrs: {
-            modelValue: model,
+        const modelValue = options[ 0 ]
+        mountQSelect({
+          props: {
+            modelValue,
             options
           }
         })
           .then(() => {
-            expect(Cypress.vueWrapper.vm.compRef.isOptionDisabled(options[ 0 ])).to.be.true
+            expect(Cypress.vueWrapper.vm.isOptionDisabled(options[ 0 ])).to.be.true
             // This currently fails: https://github.com/quasarframework/quasar/issues/12046
-            // expect(Cypress.vueWrapper.vm.compRef.isOptionDisabled(options[ 1 ])).to.be.false
-            // expect(Cypress.vueWrapper.vm.compRef.isOptionDisabled(options[ 2 ])).to.be.false
+            // expect(Cypress.vueWrapper.vm.isOptionDisabled(options[ 1 ])).to.be.false
+            // expect(Cypress.vueWrapper.vm.isOptionDisabled(options[ 2 ])).to.be.false
           })
       })
     })