quasar 2.12.6 → 2.13.0

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

@@ -1,37 +1,113 @@
 import FieldWrapper from './FieldWrapper.vue'
+import { ref } from 'vue'
+import { vModelAdapter } from '@quasar/quasar-app-extension-testing-e2e-cypress'
+import Icons from '../../../../icon-set/material-icons.mjs'
+
+function mountQFieldWrapper (options) {
+  return cy.mount(FieldWrapper, options)
+}
+
+function getHostElement () {
+  return cy.get('.select-root')
+}
+
+const selectOptions = [ 'Option 1', 'Option 2' ]
 
 describe('use-field API', () => {
   describe('Props', () => {
     describe('Category: behavior', () => {
       describe('(prop): autofocus', () => {
-        it.skip(' ', () => {
-          //
+        it('should autofocus on component', () => {
+          mountQFieldWrapper({
+            props: {
+              autofocus: true
+            }
+          })
+
+          getHostElement()
+            .get('.q-field--focused')
+            .should('exist')
+            .get('input')
+            .should('have.focus')
         })
       })
 
       describe('(prop): for', () => {
-        it.skip(' ', () => {
-          //
+        it('should set the for attribute for the value and the id of the control', () => {
+          const forProp = 'hello-there'
+
+          mountQFieldWrapper({
+            props: {
+              for: forProp
+            }
+          })
+
+          getHostElement().should('have.attr', 'for', forProp)
+          getHostElement().get('input').should('have.id', forProp)
         })
       })
 
       describe('(prop): name', () => {
-        it.skip(' ', () => {
-          //
+        it('should use the value of the for prop as control name if name is not set', () => {
+          const forProp = 'hello-there'
+          const model = ref(selectOptions[ 0 ])
+
+          mountQFieldWrapper({
+            props: {
+              ...vModelAdapter(model),
+              options: selectOptions,
+              for: forProp
+            }
+          })
+
+          getHostElement().get('select').should('have.attr', 'name', forProp)
+        })
+
+        it('should set the name of the control', () => {
+          const name = 'hello-there'
+          const model = ref(selectOptions[ 0 ])
+
+          mountQFieldWrapper({
+            props: {
+              ...vModelAdapter(model),
+              options: selectOptions,
+              name
+            }
+          })
+
+          getHostElement().get('select').should('have.attr', 'name', name)
         })
       })
     })
 
     describe('Category: behavior|content', () => {
       describe('(prop): loading', () => {
-        it.skip(' ', () => {
-          //
+        it('should should set the component into a loading state', () => {
+          mountQFieldWrapper({
+            props: {
+              loading: true
+            }
+          })
+
+          getHostElement().get('.q-spinner').should('exist')
         })
       })
 
       describe('(prop): clearable', () => {
-        it.skip(' ', () => {
-          //
+        it('should append a clear icon', () => {
+          const model = ref(selectOptions[ 0 ])
+
+          mountQFieldWrapper({
+            props: {
+              ...vModelAdapter(model),
+              clearable: true,
+              options: selectOptions
+            }
+          })
+
+          getHostElement().find('input').should('exist').should('have.value', model.value)
+          getHostElement().get('button[type="button"]').contains(Icons.field.clear).click()
+          getHostElement().get('input').should('have.value', '')
         })
       })
     })
@@ -133,102 +209,202 @@ describe('use-field API', () => {
       })
 
       describe('(prop): prefix', () => {
-        it.skip(' ', () => {
-          //
+        it('should display a prefix', () => {
+          const prefix = 'Hello there!'
+          mountQFieldWrapper({
+            props: {
+              prefix
+            }
+          })
+
+          getHostElement().get('.q-field__prefix').should('exist').should('contain', prefix)
         })
       })
 
       describe('(prop): suffix', () => {
-        it.skip(' ', () => {
-          //
+        it('should display a suffix', () => {
+          const suffix = 'Hello there!'
+          mountQFieldWrapper({
+            props: {
+              suffix
+            }
+          })
+
+          getHostElement().get('.q-field__suffix').should('exist').should('contain', suffix)
         })
       })
 
       describe('(prop): clear-icon', () => {
-        it.skip(' ', () => {
-          //
+        it('should display custom clear-icon when one is set', () => {
+          const model = ref(selectOptions[ 0 ])
+          const clearIcon = 'custom-clear-icon'
+          mountQFieldWrapper({
+            props: {
+              ...vModelAdapter(model),
+              options: selectOptions,
+              clearable: true,
+              clearIcon
+            }
+          })
+
+          getHostElement().get('.q-field__append').get('button').should('contain', clearIcon)
         })
       })
 
       describe('(prop): label-slot', () => {
-        it.skip(' ', () => {
-          //
+        it('should force the use of the label slot even when a label prop is set', () => {
+          const model = ref(selectOptions[ 0 ])
+          const labelSlot = 'Hello world'
+
+          mountQFieldWrapper({
+            props: {
+              ...vModelAdapter(model),
+              options: selectOptions,
+              labelSlot: true,
+              label: 'Hello there'
+            },
+            slots: {
+              label: () => labelSlot
+            }
+          })
+
+          getHostElement().find('.q-field__label').should('contain.text', labelSlot)
         })
       })
 
       describe('(prop): bottom-slots', () => {
-        it.skip(' ', () => {
-          //
+        it('should use a bottom error slot', () => {
+          const model = ref(selectOptions[ 0 ])
+          const bottomSlot = 'Hello there'
+
+          mountQFieldWrapper({
+            props: {
+              ...vModelAdapter(model),
+              options: selectOptions,
+              bottomSlotSlots: true,
+              error: true
+            },
+            slots: {
+              error: () => bottomSlot
+            }
+          })
+
+          getHostElement().find('.q-field__bottom')
+            .should('contain.text', bottomSlot)
+        })
+
+        it('should use a bottom hint slot', () => {
+          const model = ref(selectOptions[ 0 ])
+          const bottomSlot = 'Hello there'
+
+          mountQFieldWrapper({
+            props: {
+              ...vModelAdapter(model),
+              options: selectOptions,
+              bottomSlots: true
+            },
+            slots: {
+              hint: () => bottomSlot
+            }
+          })
+
+          getHostElement().find('.q-field__bottom').should('contain.text', bottomSlot)
+        })
+
+        it('should use a bottom counter slot', () => {
+          const model = ref(selectOptions[ 0 ])
+
+          mountQFieldWrapper({
+            props: {
+              ...vModelAdapter(model),
+              options: selectOptions,
+              counter: true
+            }
+          })
+
+          getHostElement().find('.q-field__bottom').should('contain.text', model.value.length)
         })
       })
 
       describe('(prop): counter', () => {
-        it.skip(' ', () => {
-          //
+        it('should show an automatic counter on bottom right', () => {
+          const model = ref(selectOptions[ 0 ])
+          mountQFieldWrapper({
+            props: {
+              ...vModelAdapter(model),
+              options: selectOptions,
+              counter: true
+            }
+          })
+
+          getHostElement().get('.q-field__counter').should('contain', model.value.length)
         })
       })
     })
 
     describe('Category: state', () => {
       describe('(prop): disable', () => {
-        it.skip(' ', () => {
-          //
+        it('should put the component on disable state', () => {
+          mountQFieldWrapper({
+            props: {
+              disable: true
+            }
+          })
+
+          getHostElement().should('have.class', 'q-field--disabled')
         })
       })
 
       describe('(prop): readonly', () => {
-        it.skip(' ', () => {
-          //
+        it('should put the component on readonly state', () => {
+          mountQFieldWrapper({
+            props: {
+              readonly: true
+            }
+          })
+
+          getHostElement().should('have.class', 'q-field--readonly')
         })
       })
     })
 
     describe('Category: style', () => {
       describe('(prop): label-color', () => {
-        it.skip(' ', () => {
-          //
-        })
-      })
+        it('should display a label color', () => {
+          const label = 'Hello there!'
+          mountQFieldWrapper({
+            props: {
+              label,
+              labelColor: 'red'
+            }
+          })
 
-      describe('(prop): color', () => {
-        it.skip(' ', () => {
-          //
+          getHostElement().get('.q-field__label.text-red').should('contain', label)
         })
       })
 
-      describe('(prop): bg-color', () => {
-        it.skip(' ', () => {
-          //
-        })
-      })
-
-      describe('(prop): dark', () => {
-        it.skip(' ', () => {
-          //
-        })
-      })
+      describe('(prop): color', () => {
+        it('should set a color on the component', () => {
+          mountQFieldWrapper()
+          getHostElement().get('.q-field__control.text-red').should('not.exist')
 
-      describe('(prop): filled', () => {
-        it.skip(' ', () => {
-          //
-        })
-      })
+          getHostElement().get('input').then(() => {
+            Cypress.vueWrapper.setProps({ color: 'red' })
 
-      describe('(prop): outlined', () => {
-        it.skip(' ', () => {
-          //
+            getHostElement().get('.q-field__control.text-red').should('exist')
+          })
         })
       })
 
-      describe('(prop): borderless', () => {
-        it.skip(' ', () => {
-          //
-        })
-      })
+      describe('(prop): bg-color', () => {
+        it('should display a background color', () => {
+          mountQFieldWrapper({
+            props: {
+              bgColor: 'red'
+            }
+          })
 
-      describe('(prop): standout', () => {
-        it.skip(' ', () => {
-          //
+          getHostElement().get('.q-field__control.bg-red').should('exist')
         })
       })
 
@@ -238,112 +414,133 @@ describe('use-field API', () => {
         })
       })
 
-      describe('(prop): rounded', () => {
-        it.skip(' ', () => {
-          //
-        })
-      })
+      const fieldLooks = [ 'item-aligned', 'dark', 'filled', 'outlined', 'borderless', 'standout', 'rounded', 'square', 'dense' ]
+      for (const style of fieldLooks) {
+        describe(`(prop): ${ style }`, () => {
+          it(`should apply ${ style } design style`, () => {
+            mountQFieldWrapper({
+              props: {
+                [ style ]: true
+              }
+            })
 
-      describe('(prop): square', () => {
-        it.skip(' ', () => {
-          //
-        })
-      })
-
-      describe('(prop): dense', () => {
-        it.skip(' ', () => {
-          //
-        })
-      })
-
-      describe('(prop): item-aligned', () => {
-        it.skip(' ', () => {
-          //
+            getHostElement().get(`.q-field--${ style }`).should('exist')
+          })
         })
-      })
+      }
     })
   })
 
   describe('Slots', () => {
-    describe('(slot): default', () => {
-      it.skip(' ', () => {
-        //
-      })
-    })
-
-    describe('(slot): prepend', () => {
-      it.skip(' ', () => {
-        //
-      })
-    })
+    const slots = [ 'prepend', 'append', 'before', 'after', 'label' ]
 
-    describe('(slot): append', () => {
-      it.skip(' ', () => {
-        //
-      })
-    })
-
-    describe('(slot): before', () => {
-      it.skip(' ', () => {
-        //
-      })
-    })
-
-    describe('(slot): after', () => {
-      it.skip(' ', () => {
-        //
-      })
-    })
+    describe('(slot): default', () => {
+      it('should use the default slot', () => {
+        const model = ref(selectOptions[ 0 ])
+        const labelSlot = 'Hello world'
 
-    describe('(slot): label', () => {
-      it.skip(' ', () => {
-        //
-      })
-    })
+        mountQFieldWrapper({
+          props: {
+            ...vModelAdapter(model),
+            options: selectOptions,
+            labelSlot: true
+          },
+          slots: {
+            default: () => labelSlot
+          }
+        })
 
-    describe('(slot): error', () => {
-      it.skip(' ', () => {
-        //
+        getHostElement().should('contain.text', labelSlot)
       })
     })
 
-    describe('(slot): hint', () => {
-      it.skip(' ', () => {
-        //
-      })
-    })
+    for (const slot of slots) {
+      describe(`(slot): ${ slot }`, () => {
+        it(`should append a '${ slot }' slot`, () => {
+          const model = ref(selectOptions[ 0 ])
+          const labelSlot = 'Hello world'
 
-    describe('(slot): counter', () => {
-      it.skip(' ', () => {
-        //
-      })
-    })
+          mountQFieldWrapper({
+            props: {
+              ...vModelAdapter(model),
+              options: selectOptions,
+              labelSlot: true
+            },
+            slots: {
+              [ slot ]: () => labelSlot
+            }
+          })
 
-    describe('(slot): loading', () => {
-      it.skip(' ', () => {
-        //
+          getHostElement().get(`.q-field__${ slot }`).should('contain.text', labelSlot)
+        })
       })
-    })
+    }
   })
 
   describe('Events', () => {
     describe('(event): clear', () => {
-      it.skip(' ', () => {
-        //
+      it('should emit the clear event when the clear button is clicked', () => {
+        const model = ref(selectOptions[ 0 ])
+        const fn = cy.stub()
+
+        mountQFieldWrapper({
+          props: {
+            ...vModelAdapter(model),
+            clearable: true,
+            options: selectOptions,
+            onClear: fn
+          }
+        })
+
+        getHostElement().get('button[type="button"]')
+          .contains(Icons.field.clear).click()
+          .then(() => {
+            expect(fn).to.be.calledWith()
+          })
       })
     })
   })
 
   describe('Methods', () => {
     describe('(method): focus', () => {
-      it.skip(' ', () => {
-        //
+      it('should focus the component', () => {
+        mountQFieldWrapper()
+
+        getHostElement()
+          .get('input')
+          .should('not.have.focus')
+        getHostElement()
+          .then(() => {
+            Cypress.vueWrapper.vm.focusMethod()
+          })
+        getHostElement()
+          .get('input')
+          .should('have.focus')
       })
     })
 
     describe('(method): blur', () => {
-      it.skip(' ', () => {
-        //
+      it('should blur the component', () => {
+        mountQFieldWrapper()
+
+        getHostElement()
+          .get('input').focus()
+        getHostElement()
+          .get('.q-field--focused')
+          .as('focused-element')
+          .should('exist')
+
+        cy.get('@focused-element')
+          .get('input')
+          .should('have.focus')
+
+        getHostElement()
+          .then(() => {
+            Cypress.vueWrapper.vm.blur()
+          })
+
+        cy.get('@focused-element').should('not.exist')
+        getHostElement().get('input').should('not.have.focus')
       })
     })
   })