quasar 2.17.7 → 2.18.0

package/src/components/input/__tests__/QInput.cy.js

@@ -1,786 +0,0 @@
-import QInput from '../QInput'
-import { ref } from 'vue'
-import { vModelAdapter } from '@quasar/quasar-app-extension-testing-e2e-cypress'
-
-function getHostElement () {
-  return cy.get('.q-field')
-}
-
-function mountQInput (options) {
-  return cy.mount(QInput, options)
-}
-
-describe('Input API', () => {
-  describe('Props', () => {
-    describe('Category: behaviour', () => {
-      describe('(prop): error', () => {
-        it('should mark the field as having an error', () => {
-          mountQInput()
-          getHostElement().should('not.have.class', 'q-field--error')
-
-          mountQInput({
-            props: {
-              error: true
-            }
-          })
-
-          getHostElement().should('have.class', 'q-field--error')
-        })
-      })
-
-      describe('(prop): rules', () => {
-        it('should validate value using custom validation logic', () => {
-          const errorMessage = 'Use a max 3 of characters'
-          const model = ref('')
-          mountQInput({
-            props: {
-              ...vModelAdapter(model),
-              rules: [ val => val.length <= 3 || errorMessage ]
-            }
-          })
-          getHostElement().get('input').type('1234')
-          getHostElement().get('.q-field__messages').should('contain', errorMessage)
-        })
-
-        it('should validate email using inbuilt validation logic', () => {
-          const errorMessage = 'Enter a valid email address'
-          const model = ref('')
-          mountQInput({
-            props: {
-              ...vModelAdapter(model),
-              rules: [ (val, rules) => rules.email(val) || errorMessage ]
-            }
-          })
-          getHostElement().get('input').type('1234')
-          getHostElement().get('.q-field__messages').should('contain', errorMessage)
-        })
-      })
-
-      describe('(prop): loading', () => {
-        it('should set the component into a loading state', () => {
-          mountQInput({
-            props: {
-              loading: true
-            }
-          })
-
-          getHostElement().get('.q-spinner').should('exist')
-        })
-      })
-
-      describe('(prop): clearable', () => {
-        it('should append a cancel icon', () => {
-          const model = ref('')
-
-          mountQInput({
-            props: {
-              ...vModelAdapter(model),
-              clearable: true
-            }
-          })
-
-          getHostElement().get('input').type('1')
-          getHostElement().get('button').should('exist').should('contain', 'cancel')
-        })
-      })
-
-      describe('(prop): autofocus', () => {
-        it('should autofocus on component', () => {
-          mountQInput({
-            props: {
-              autofocus: true
-            }
-          })
-
-          getHostElement()
-            .get('.q-field--focused')
-            .should('exist')
-            .get('input')
-            .should('have.focus')
-        })
-      })
-
-      describe('(prop): lazy-rules', () => {
-        it('should validate the input only when component loses focus', () => {
-          const errorMessage = 'Use a max 3 of characters'
-          const model = ref('')
-          mountQInput({
-            props: {
-              ...vModelAdapter(model),
-              rules: [ val => val.length <= 3 || errorMessage ],
-              lazyRules: true
-            }
-          })
-
-          getHostElement().get('input').type('1234')
-          getHostElement().get('.q-field__messages').should('not.contain', errorMessage)
-
-          getHostElement().get('input').then(() => {
-            Cypress.vueWrapper.vm.blur()
-            getHostElement().get('.q-field__messages').should('contain', errorMessage)
-          })
-        })
-
-        it('should validate the input only when component\'s validate() method is called', () => {
-          const errorMessage = 'Use a max 3 of characters'
-          const model = ref('')
-          mountQInput({
-            props: {
-              ...vModelAdapter(model),
-              rules: [ val => val.length <= 3 || errorMessage ],
-              lazyRules: 'ondemand'
-            }
-          })
-
-          getHostElement().get('input').type('1234')
-          getHostElement().get('.q-field__messages').should('not.contain', errorMessage)
-
-          getHostElement().get('input').then(() => {
-            Cypress.vueWrapper.vm.blur()
-            getHostElement().get('.q-field__messages').should('not.contain', errorMessage)
-            Cypress.vueWrapper.vm.validate()
-            getHostElement().get('.q-field__messages').should('contain', errorMessage)
-          })
-        })
-      })
-    })
-
-    describe('Category: content', () => {
-      describe('(prop): error-message', () => {
-        it('should display validation error message if error = true', () => {
-          const errorMessage = 'Username must have at least 3 characters'
-          mountQInput({
-            props: {
-              errorMessage
-            }
-          })
-          getHostElement().should('not.contain', errorMessage)
-
-          mountQInput({
-            props: {
-              error: true,
-              errorMessage
-            }
-          })
-          getHostElement().should('contain', errorMessage)
-        })
-      })
-
-      describe('(prop): no-error-icon', () => {
-        it('should hide error icon when there is an error', () => {
-          mountQInput({
-            props: {
-              error: true,
-              errorMessage: 'error message'
-            }
-          })
-
-          getHostElement().get('.q-field__append .q-icon').should('contain', 'error')
-
-          mountQInput({
-            props: {
-              error: true,
-              errorMessage: 'error message',
-              noErrorIcon: true
-            }
-          })
-
-          getHostElement().get('.q-field__append .q-icon').should('not.exist')
-        })
-      })
-
-      describe('(prop): label', () => {
-        it('should display the label set', () => {
-          const label = 'Hello there!'
-
-          mountQInput({
-            props: {
-              label
-            }
-          })
-
-          getHostElement().get('.q-field__label').should('contain', label)
-        })
-      })
-
-      describe('(prop): stack-label', () => {
-        it('should stack label', () => {
-          const label = 'Hello there!'
-          mountQInput({
-            props: {
-              label
-            }
-          })
-          getHostElement().should('not.have.class', 'q-field--float')
-
-          mountQInput({
-            props: {
-              label,
-              stackLabel: true
-            }
-          })
-
-          getHostElement().should('have.class', 'q-field--float')
-        })
-      })
-
-      describe('(prop): hint', () => {
-        it('should display the hint message', () => {
-          const hint = 'hint message'
-          mountQInput({
-            props: {
-              hint
-            }
-          })
-
-          getHostElement().get('.q-field__messages').should('contain', hint)
-        })
-      })
-
-      describe('(prop): hide-hint', () => {
-        it('should hide hint when element is not focused', () => {
-          const hint = 'hint message'
-          mountQInput({
-            props: {
-              hint,
-              hideHint: true
-            }
-          })
-          getHostElement().get('.q-field__messages').should('not.contain', hint)
-
-          getHostElement().get('input').then(() => {
-            Cypress.vueWrapper.vm.focus()
-            getHostElement().get('.q-field__messages').should('contain', hint)
-          })
-        })
-      })
-
-      describe('(prop): prefix', () => {
-        it('should display a prefix', () => {
-          const prefix = 'Hello there!'
-          mountQInput({
-            props: {
-              prefix
-            }
-          })
-
-          getHostElement().get('.q-field__prefix').should('exist').should('contain', prefix)
-        })
-      })
-
-      describe('(prop): suffix', () => {
-        it('should display a suffix', () => {
-          const suffix = 'Hello there!'
-          mountQInput({
-            props: {
-              suffix
-            }
-          })
-
-          getHostElement().get('.q-field__suffix').should('exist').should('contain', suffix)
-        })
-      })
-
-      describe('(prop): clear-icon', () => {
-        it('should display custom clear-icon when one is set', () => {
-          const model = ref('')
-          const clearIcon = 'custom-clear-icon'
-          mountQInput({
-            props: {
-              ...vModelAdapter(model),
-              clearable: true,
-              clearIcon
-            }
-          })
-
-          getHostElement().get('input').type('123')
-          getHostElement().get('.q-field__append').get('button').should('contain', clearIcon)
-        })
-      })
-
-      describe('(prop): label-slot', () => {
-        it('should force use the label slot when a label is not set', () => {
-          const labelSlot = 'Hello there'
-          mountQInput({
-            props: {
-              labelSlot: true
-            },
-            slots: {
-              label: () => labelSlot
-            }
-          })
-
-          getHostElement().get('.q-field__label').should('contain', labelSlot)
-        })
-      })
-
-      describe('(prop): counter', () => {
-        it('should show an automatic counter on bottom right', () => {
-          const model = ref('')
-          mountQInput({
-            props: {
-              ...vModelAdapter(model),
-              counter: true
-            }
-          })
-
-          const value = '1234'
-          getHostElement().get('input').type(value)
-          getHostElement().get('.q-field__counter').should('contain', value.length)
-        })
-      })
-
-      describe('(prop): shadow-text', () => {
-        it('should render shadow-text', () => {
-          const shadowText = 'Shadow Text'
-
-          mountQInput({
-            props: {
-              shadowText
-            }
-          })
-
-          getHostElement().get('.q-field__shadow').should('exist').contains(shadowText)
-        })
-      })
-
-      describe('(prop): autogrow', () => {
-        it('should use textarea for input field', () => {
-          mountQInput()
-          getHostElement().get('textarea').should('not.exist').get('input').should('exist')
-
-          mountQInput({
-            props: {
-              autogrow: true
-            }
-          })
-
-          getHostElement().get('textarea').should('exist')
-          getHostElement().get('input').should('not.exist')
-        })
-      })
-    })
-
-    describe('Category: general', () => {
-      describe('(prop): type', () => {
-        it('should render an input text type by default', () => {
-          mountQInput()
-
-          getHostElement().get('input[type=text]').should('exist')
-        })
-
-        it('should render with the appropriate type set', () => {
-          const types = [ 'text', 'password', 'email', 'search', 'tel', 'file', 'number', 'url', 'time', 'date' ]
-
-          types.forEach((type) => {
-            mountQInput({
-              props: {
-                type
-              }
-            })
-
-            getHostElement().get(`input[type="${ type }"]`).should('exist')
-          })
-
-          mountQInput({
-            props: {
-              type: 'textarea'
-            }
-          })
-
-          getHostElement().get('input').should('not.exist').get('textarea').should('exist')
-        })
-      })
-    })
-
-    describe('Category: model', () => {
-      describe('(prop): model-value', () => {
-        it('should render with the correct model value', () => {
-          const model = ref('Input Model Value')
-          mountQInput()
-          getHostElement().get('input').should('not.have.value', model.value)
-
-          mountQInput({
-            props: {
-              modelValue: model.value
-            }
-          })
-
-          getHostElement().get('input').should('have.value', model.value)
-        })
-      })
-
-      describe('(prop): debounce', () => {
-        it('should no input debounce by default', () => {
-          const fn = cy.stub()
-          const text = 'Hello there'
-          mountQInput({
-            props: {
-              'onUpdate:modelValue': fn
-            }
-          })
-          getHostElement()
-            .get('input')
-            .type(text)
-            .then(() => {
-              expect(fn).to.be.calledWith(text)
-            })
-        })
-
-        it('should use a custom input-debounce', () => {
-          const fn = cy.stub()
-          const text = 'Hello there'
-          mountQInput({
-            props: {
-              'onUpdate:modelValue': fn,
-              debounce: 800
-            }
-          })
-          getHostElement()
-            .get('input')
-            .type(text)
-            .wait(500)
-            .then(() => {
-              expect(fn).not.to.be.calledWith(text)
-            })
-            .wait(300)
-            .then(() => {
-              expect(fn).to.be.calledWith(text)
-            })
-        })
-      })
-
-      describe('(prop): maxlength', () => {
-        it('should respect the maxLength specified', () => {
-          mountQInput()
-          getHostElement()
-            .get('input')
-            .type('1234567890abcdefghij')
-            .should('have.value', '1234567890abcdefghij')
-
-          mountQInput({
-            props: {
-              maxlength: 10
-            }
-          })
-
-          getHostElement()
-            .get('input')
-            .type('1234567890abcdefghij')
-            .should('have.value', '1234567890')
-        })
-      })
-    })
-
-    describe('Category: style', () => {
-      describe('(prop): input-class', () => {
-        it('should apply the input class to the underlying element', () => {
-          mountQInput()
-          getHostElement().get('input.input-class').should('not.exist')
-
-          mountQInput({
-            props: {
-              inputClass: 'input-class'
-            }
-          })
-
-          getHostElement().get('input.input-class').should('exist')
-        })
-
-        it('should apply the input class specified as an object', () => {
-          mountQInput({
-            props: {
-              inputClass: { 'input-class': true }
-            }
-          })
-
-          getHostElement().get('input.input-class').should('exist')
-        })
-      })
-
-      describe('(prop): input-style', () => {
-        it('should set input-style as string', () => {
-          mountQInput({
-            props: {
-              inputStyle: 'background-color: red'
-            }
-          })
-
-          getHostElement().get('input[style="background-color: red;"]').should('exist')
-        })
-
-        it('should set input-style as an object', () => {
-          mountQInput({
-            props: {
-              inputStyle: { backgroundColor: 'red' }
-            }
-          })
-
-          getHostElement().get('input[style="background-color: red;"]').should('exist')
-        })
-      })
-
-      describe('(prop): label-color', () => {
-        it('should display a label color', () => {
-          const label = 'Hello there!'
-          mountQInput({
-            props: {
-              label,
-              labelColor: 'red'
-            }
-          })
-
-          getHostElement().get('.q-field__label.text-red').should('contain', label)
-        })
-      })
-
-      describe('(prop): color', () => {
-        it('should set a color on the component', () => {
-          mountQInput()
-          getHostElement().get('.q-field__control.text-red').should('not.exist')
-          mountQInput({
-            props: {
-              color: 'red'
-            }
-          })
-
-          getHostElement().get('input').then(() => {
-            Cypress.vueWrapper.vm.focus()
-            getHostElement().get('.q-field__control.text-red').should('exist')
-          })
-        })
-      })
-
-      describe('(prop): bg-color', () => {
-        it('should display a background color', () => {
-          mountQInput({
-            props: {
-              bgColor: 'red'
-            }
-          })
-
-          getHostElement().get('.q-field__control.bg-red').should('exist')
-        })
-      })
-
-      describe('(prop): filled', () => {
-        it('should use a filled design', () => {
-          mountQInput({
-            props: {
-              filled: true
-            }
-          })
-
-          getHostElement().get('.q-field--filled').should('exist')
-        })
-      })
-
-      describe('(prop): outlined', () => {
-        it('should use a outlined design', () => {
-          mountQInput({
-            props: {
-              outlined: true
-            }
-          })
-
-          getHostElement().get('.q-field--outlined').should('exist')
-        })
-      })
-
-      describe('(prop): borderless', () => {
-        it('should use a borderless design', () => {
-          mountQInput({
-            props: {
-              borderless: true
-            }
-          })
-
-          getHostElement().get('.q-field--borderless').should('exist')
-        })
-      })
-
-      describe('(prop): standout', () => {
-        it('should display a standout color', () => {
-          mountQInput({
-            props: {
-              standout: true
-            }
-          })
-
-          getHostElement().get('.q-field--standout').should('exist')
-        })
-      })
-
-      describe('(prop): hide-bottom-space', () => {
-        it('should hide bottom space', () => {
-          mountQInput({
-            props: {
-              rules: [ (value) => !!value || '' ]
-            }
-          })
-          getHostElement().get('.q-field__messages').should('exist')
-
-          mountQInput({
-            props: {
-              rules: [ (value) => !!value || '' ],
-              hideBottomSpace: true
-            }
-          })
-
-          getHostElement().get('.q-field__messages').should('not.exist')
-        })
-      })
-
-      describe('(prop): rounded', () => {
-        it('should use a rounded design', () => {
-          mountQInput({
-            props: {
-              rounded: true
-            }
-          })
-
-          getHostElement().get('.q-field--rounded').should('exist')
-        })
-      })
-
-      describe('(prop): square', () => {
-        it('should use a square design', () => {
-          mountQInput({
-            props: {
-              square: true
-            }
-          })
-
-          getHostElement().get('.q-field--square').should('exist')
-        })
-      })
-
-      describe('(prop): dense', () => {
-        it('should use a dense design', () => {
-          mountQInput({
-            props: {
-              dense: true
-            }
-          })
-
-          getHostElement().get('.q-field--dense').should('exist')
-        })
-      })
-    })
-  })
-
-  describe('Events', () => {
-    describe('(event): update:model-value', () => {
-      it('should emit onUpdate:modelValue event', () => {
-        const fn = cy.stub()
-        const text = 'Hello there'
-        mountQInput({
-          props: {
-            'onUpdate:modelValue': fn
-          }
-        })
-        getHostElement()
-          .get('input')
-          .type(text)
-          .then(() => {
-            expect(fn).to.be.calledWith(text)
-          })
-      })
-    })
-
-    describe('(event): focus', () => {
-      it('should emit focus event', () => {
-        const fn = cy.stub()
-        mountQInput({
-          props: {
-            onfocus: fn,
-            autoFocus: true
-          }
-        })
-
-        getHostElement()
-          .get('input')
-          .as('input')
-          .focus()
-
-        cy.get('@input').then(() => {
-          expect(fn).to.be.calledWith()
-        })
-      })
-    })
-
-    describe('(event): blur', () => {
-      it('should emit blur event', () => {
-        const fn = cy.stub()
-        mountQInput({
-          props: {
-            onblur: fn
-          }
-        })
-
-        getHostElement()
-          .get('input')
-          .focus()
-          .blur()
-          .then(() => {
-            expect(fn).to.be.calledWith()
-          })
-      })
-    })
-  })
-
-  describe('Methods', () => {
-    describe('(method): focus', () => {
-      it('should focus the component', () => {
-        mountQInput()
-
-        getHostElement()
-          .get('.q-field--focused')
-          .should('not.exist')
-          .get('input')
-          .should('not.have.focus')
-        getHostElement()
-          .then(() => {
-            Cypress.vueWrapper.vm.focus()
-          })
-        getHostElement()
-          .get('.q-field--focused')
-          .should('exist')
-          .get('input')
-          .should('have.focus')
-      })
-    })
-
-    describe('(method): blur', () => {
-      it('should blur the component', () => {
-        mountQInput()
-        getHostElement()
-          .get('input').focus()
-        getHostElement()
-          .get('.q-field--focused')
-          .should('exist')
-          .get('input')
-          .should('have.focus')
-
-        getHostElement()
-          .then(() => {
-            Cypress.vueWrapper.vm.blur()
-          })
-
-        getHostElement().get('.q-field--focused').should('not.exist').get('input').should('not.have.focus')
-      })
-    })
-
-    describe('(method): select', () => {
-      it.skip(' ', () => {
-        //
-      })
-    })
-
-    describe('(method): getNativeElement', () => {
-      it.skip(' ', () => {
-        //
-      })
-    })
-  })
-})