quasar 2.12.7 → 2.13.1

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)
+        })
       })
     })
   })

package/src/composables/private/use-field.js

@@ -14,8 +14,10 @@ import uid from '../../utils/uid.js'
 import { prevent, stopAndPrevent } from '../../utils/event.js'
 import { addFocusFn, removeFocusFn } from '../../utils/private/focus-manager.js'
 
-function getTargetUid (val) {
-  return val === void 0 ? `f_${ uid() }` : val
+function getTargetUid (val, requiredForAttr) {
+  return val === void 0
+    ? (requiredForAttr === true ? `f_${ uid() }` : void 0)
+    : val
 }
 
 export function fieldValueIsFilled (val) {
@@ -74,12 +76,17 @@ export const useFieldProps = {
 
 export const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur', 'popupShow', 'popupHide' ]
 
-export function useFieldState () {
+export function useFieldState ({ requiredForAttr = true, tagProp } = {}) {
   const { props, attrs, proxy, vnode } = getCurrentInstance()
 
   const isDark = useDark(props, proxy.$q)
 
   return {
+    requiredForAttr,
+    tag: tagProp === true
+      ? computed(() => props.tag)
+      : { value: 'label' },
+
     isDark,
 
     editable: computed(() =>
@@ -91,7 +98,9 @@ export function useFieldState () {
     hasPopupOpen: false,
 
     splitAttrs: useSplitAttrs(attrs, vnode),
-    targetUid: ref(getTargetUid(props.for)),
+    targetUid: ref(
+      getTargetUid(props.for, requiredForAttr)
+    ),
 
     rootRef: ref(null),
     targetRef: ref(null),
@@ -260,7 +269,7 @@ export default function (state) {
   watch(() => props.for, val => {
     // don't transform targetUid into a computed
     // prop as it will break SSR
-    state.targetUid.value = getTargetUid(val)
+    state.targetUid.value = getTargetUid(val, state.requiredForAttr)
   })
 
   function focusHandler () {
@@ -545,8 +554,12 @@ export default function (state) {
   })
 
   onMounted(() => {
-    if (isRuntimeSsrPreHydration.value === true && props.for === void 0) {
-      state.targetUid.value = getTargetUid()
+    if (
+      isRuntimeSsrPreHydration.value === true
+      && state.requiredForAttr === true
+      && props.for === void 0
+    ) {
+      state.targetUid.value = `f_${ uid() }` // getTargetUid(void 0, true)
     }
 
     props.autofocus === true && proxy.focus()
@@ -568,7 +581,7 @@ export default function (state) {
         }
       : attributes.value
 
-    return h('label', {
+    return h(state.tag.value, {
       ref: state.rootRef,
       class: [
         classes.value,

package/src/composables/private/use-validate.json

@@ -7,7 +7,8 @@
     },
 
     "error": {
-      "type": "Boolean",
+      "type": [ "Boolean", "null" ],
+      "default": null,
       "desc": "Does field have validation errors?",
       "category": "behavior"
     },