quasar 2.12.6 → 2.13.0

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

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