quasar 2.14.4 → 2.14.6

package/src/components/dialog/__tests__/QDialog.cy.js

@@ -1,21 +1,127 @@
+import DialogWrapper from './DialogWrapper.vue'
+import { ref } from 'vue'
+import { vModelAdapter } from '@quasar/quasar-app-extension-testing-e2e-cypress'
+
+function mountQDialogWrapper (options) {
+  return cy.mount(DialogWrapper, options)
+}
+
+function closeDialogViaBackdrop () {
+  return cy.get('.q-dialog__backdrop').click({ force: true })
+}
+
+// TODO: this only works in `withinDialog` context,
+// as when using it outside it `.root()` will yeld "html" tag
+// and Cypress won't be able to find anything with `.closest('body')`
+// since it only searches upwards
+function closeDialogViaEscKey () {
+  // Official way to escape `within` context
+  // https://docs.cypress.io/api/commands/within#Temporarily-escape
+  return cy.root().closest('body').type('{esc}')
+}
+
+// TODO: we'll add this check to the AE helper to automatically test persistent dialogs
+// TODO: take into consideration that seamless dialogs have always 'aria-modal' false
+// TODO: take into consideration that dialogs without backdrop have always 'aria-modal' false
+// Check if there's a more reliable way to check for persistent dialogs
+function assertPersistentDialogExists () {
+  cy.get('.q-dialog__inner').should('not.have.attr', 'aria-modal', 'false')
+}
+
 describe('Dialog API', () => {
   describe('Props', () => {
     describe('Category: behavior', () => {
       describe('(prop): persistent', () => {
-        it.skip(' ', () => {
-          //
+        it('should display a persistent dialog', () => {
+          const model = ref(true)
+          mountQDialogWrapper({
+            props: {
+              ...vModelAdapter(model),
+              persistent: true
+            }
+          })
+
+          cy.withinDialog({
+            persistent: true,
+            fn: () => {
+              closeDialogViaBackdrop()
+            }
+          })
+
+          assertPersistentDialogExists()
+
+          cy.withinDialog({
+            persistent: true,
+            fn: () => {
+              closeDialogViaEscKey()
+            }
+          })
+
+          assertPersistentDialogExists()
         })
       })
 
       describe('(prop): no-esc-dismiss', () => {
-        it.skip(' ', () => {
-          //
+        it('should not allow closing the dialog with the escape key', () => {
+          const model = ref(true)
+          mountQDialogWrapper({
+            props: {
+              ...vModelAdapter(model),
+              noEscDismiss: true
+            }
+          })
+
+          cy.withinDialog({
+            persistent: true,
+            fn: () => {
+              closeDialogViaEscKey()
+            }
+          })
+
+          assertPersistentDialogExists()
+
+          cy.wrap()
+            .then(async () => {
+              // Care as you need to wait setProps to complete its execution
+              // before moving on or the tests will fail due to the race condition
+              await Cypress.vueWrapper.setProps({ noEscDismiss: false })
+            })
+
+          cy.withinDialog(() => {
+            closeDialogViaEscKey()
+          })
         })
       })
 
       describe('(prop): no-backdrop-dismiss', () => {
-        it.skip(' ', () => {
-          //
+        it('should not close dialog with backdrop', () => {
+          const model = ref(true)
+          mountQDialogWrapper({
+            props: {
+              ...vModelAdapter(model),
+              noBackdropDismiss: true
+            }
+          })
+
+          cy.withinDialog({
+            persistent: true,
+            fn: () => {
+              closeDialogViaBackdrop()
+            }
+          })
+
+          assertPersistentDialogExists()
+
+          cy.wrap()
+            .then(async () => {
+              // Care as you need to wait setProps to complete its execution
+              // before moving on or the tests will fail due to the race condition
+              await Cypress.vueWrapper.setProps({ noBackdropDismiss: false })
+            })
+
+          cy.withinDialog(() => {
+            closeDialogViaBackdrop()
+          })
         })
       })
 
@@ -26,66 +132,294 @@ describe('Dialog API', () => {
       })
 
       describe('(prop): auto-close', () => {
-        it.skip(' ', () => {
-          //
+        it('should auto-close the dialog', () => {
+          const model = ref(true)
+          mountQDialogWrapper({
+            props: {
+              ...vModelAdapter(model),
+              autoClose: true
+            }
+          })
+
+          cy.withinDialog(() => {
+            cy.dataCy('dialog-button').click()
+          })
         })
       })
 
       describe('(prop): no-refocus', () => {
-        it.skip(' ', () => {
-          //
+        it('should not refocus on the DOM element that had focus', () => {
+          const model = ref(false)
+
+          mountQDialogWrapper({
+            props: {
+              ...vModelAdapter(model),
+              noRefocus: false
+            }
+          })
+
+          // Test the input field regaining focus
+          cy.dataCy('input-field')
+            .focus()
+          cy.dataCy('input-field')
+            .then(() => {
+              model.value = true
+            })
+          cy.withinDialog(() => {
+            closeDialogViaBackdrop()
+          })
+
+          cy.dataCy('input-field')
+            .should('have.focus')
+
+          // Test the input field not regaining focus
+          cy.dataCy('input-field')
+            .then(async () => {
+              await Cypress.vueWrapper.setProps({ noRefocus: true })
+              model.value = true
+            })
+
+          cy.withinDialog(() => {
+            closeDialogViaBackdrop()
+          })
+          cy.dataCy('input-field')
+            .should('not.have.focus')
         })
       })
 
       describe('(prop): no-focus', () => {
-        it.skip(' ', () => {
-          //
+        it('should not focus on dialog when switching to it', () => {
+          const model = ref(true)
+          mountQDialogWrapper({
+            props: {
+              ...vModelAdapter(model),
+              noFocus: false
+            }
+          })
+
+          cy.withinDialog(() => {
+            cy.focused()
+              .should('have.class', 'q-dialog__inner')
+            closeDialogViaBackdrop()
+          })
+
+          cy.wrap().then(async () => {
+            await Cypress.vueWrapper.setProps({ noFocus: true })
+            model.value = true
+          })
+
+          cy.withinDialog(() => {
+            cy.focused().should('not.exist')
+            closeDialogViaBackdrop()
+          })
         })
       })
 
       describe('(prop): no-shake', () => {
-        it.skip(' ', () => {
-          //
+        it('should not shake dialog', () => {
+          const model = ref(true)
+          mountQDialogWrapper({
+            props: {
+              ...vModelAdapter(model),
+              persistent: true
+            }
+          })
+
+          cy.withinDialog({
+            persistent: true,
+            fn: () => {
+              closeDialogViaBackdrop()
+              cy.get('.q-dialog__inner')
+                .should('have.class', 'q-animate--scale')
+            }
+          })
+
+          assertPersistentDialogExists()
+
+          cy.wrap().then(async () => {
+            await Cypress.vueWrapper.setProps({ noShake: true })
+          })
+
+          cy.withinDialog({
+            persistent: true, fn: () => {
+              closeDialogViaBackdrop()
+              cy.get('.q-dialog__inner')
+                .should('not.have.class', 'q-animate--scale')
+            }
+          })
+
+          assertPersistentDialogExists()
         })
       })
     })
 
     describe('Category: content', () => {
       describe('(prop): seamless', () => {
-        it.skip(' ', () => {
-          //
+        it('should put the dialog in a seamless state', () => {
+          const model = ref(true)
+          mountQDialogWrapper({
+            props: {
+              ...vModelAdapter(model),
+              seamless: true
+            }
+          })
+
+          cy.withinDialog(() => {
+            cy.root()
+              .should('have.class', 'q-dialog--seamless')
+
+            // When in seamless state, the dialog isn't modal
+            // We check this by checking out if the underlying input is visible
+            cy.root()
+              .closest('body')
+              .dataCy('input-field')
+              .should('be.visible')
+              .then(async () => {
+                await Cypress.vueWrapper.setProps({ seamless: false })
+              })
+
+            cy.root()
+              .should('not.have.class', 'q-dialog--seamless')
+
+            cy.root()
+              .closest('body')
+              .dataCy('input-field')
+              .should('not.be.visible')
+
+            closeDialogViaBackdrop()
+          })
         })
       })
 
       describe('(prop): maximized', () => {
-        it.skip(' ', () => {
-          //
+        it('should maximize the dialog', () => {
+          const model = ref(true)
+          mountQDialogWrapper({
+            props: {
+              ...vModelAdapter(model),
+              maximized: true
+            }
+          })
+
+          cy.withinDialog(() => {
+            cy.get('.q-dialog__inner')
+              .should('have.class', 'q-dialog__inner--maximized')
+              .then(async () => {
+                await Cypress.vueWrapper.setProps({ maximized: false })
+              })
+
+            cy.get('.q-dialog__inner')
+              .should('not.have.class', 'q-dialog__inner--maximized')
+
+            closeDialogViaBackdrop()
+          })
         })
       })
 
       describe('(prop): full-width', () => {
-        it.skip(' ', () => {
-          //
+        it('should use a full-width for the dialog', () => {
+          const model = ref(true)
+          mountQDialogWrapper({
+            props: {
+              ...vModelAdapter(model),
+              fullWidth: true
+            }
+          })
+
+          cy.withinDialog(() => {
+            cy.get('.q-dialog__inner')
+              .should('have.class', 'q-dialog__inner--fullwidth')
+              .then(async () => {
+                await Cypress.vueWrapper.setProps({ fullWidth: false })
+              })
+
+            cy.get('.q-dialog__inner')
+              .should('not.have.class', 'q-dialog__inner--fullwidth')
+
+            // We are closing the dialog here and in other places where it is not necessary because
+            // withinDialog expects the dialog to be closed when called like this
+            closeDialogViaBackdrop()
+          })
         })
       })
 
       describe('(prop): full-height', () => {
-        it.skip(' ', () => {
-          //
+        it('should set the dialog to full-height', () => {
+          const model = ref(true)
+          mountQDialogWrapper({
+            props: {
+              ...vModelAdapter(model),
+              fullHeight: true
+            }
+          })
+
+          cy.withinDialog(() => {
+            cy.get('.q-dialog__inner')
+              .should('have.class', 'q-dialog__inner--fullheight')
+              .then(async () => {
+                await Cypress.vueWrapper.setProps({ fullHeight: false })
+              })
+
+            cy.get('.q-dialog__inner')
+              .should('not.have.class', 'q-dialog__inner--fullheight')
+
+            closeDialogViaBackdrop()
+          })
         })
       })
 
       describe('(prop): position', () => {
-        it.skip(' ', () => {
-          //
+        it('should display the dialog at a specific position', () => {
+          const model = ref(true)
+          mountQDialogWrapper({
+            props: {
+              ...vModelAdapter(model)
+            }
+          })
+
+          const positions = [ 'top', 'right', 'bottom', 'left' ]
+
+          for (const position of positions) {
+            cy.wrap().then(async () => {
+              await Cypress.vueWrapper.setProps({ position })
+            })
+
+            cy.withinDialog({
+              persistent: true,
+              fn: () => {
+                cy.get('.q-dialog__inner')
+                  .should('have.class', `q-dialog__inner--${ position }`)
+                  .should('have.class', `fixed-${ position }`)
+              }
+            })
+          }
         })
       })
     })
 
     describe('Category: style', () => {
       describe('(prop): square', () => {
-        it.skip(' ', () => {
-          //
+        it('should use a square style for dialog', () => {
+          const model = ref(true)
+          mountQDialogWrapper({
+            props: {
+              ...vModelAdapter(model),
+              square: true
+            }
+          })
+
+          cy.withinDialog(() => {
+            cy.get('.q-dialog__inner')
+              .should('have.class', 'q-dialog__inner--square')
+              .then(async () => {
+                await Cypress.vueWrapper.setProps({ square: false })
+              })
+
+            cy.get('.q-dialog__inner')
+              .should('not.have.class', 'q-dialog__inner--square')
+
+            closeDialogViaBackdrop()
+          })
         })
       })
     })
@@ -93,36 +427,116 @@ describe('Dialog API', () => {
 
   describe('Slots', () => {
     describe('(slot): default', () => {
-      it.skip(' ', () => {
-        //
+      it('should display a default slot', () => {
+        const model = ref(true)
+        mountQDialogWrapper({
+          props: {
+            ...vModelAdapter(model)
+          }
+        })
+
+        // Host element is the default slot, so let's simply test that it exists
+        cy.dataCy('dialog-button').should('exist')
       })
     })
   })
 
   describe('Events', () => {
     describe('(event): shake', () => {
-      it.skip(' ', () => {
-        //
+      it('should emit shake event', () => {
+        const fn = cy.stub()
+        const model = ref(true)
+        mountQDialogWrapper({
+          props: {
+            ...vModelAdapter(model),
+            persistent: true,
+            onShake: fn
+          }
+        })
+
+        cy.withinDialog({
+          persistent: true,
+          fn: () => {
+            closeDialogViaBackdrop()
+
+            cy.get('.q-dialog__inner')
+              .should('have.class', 'q-animate--scale')
+              .then(() => {
+                expect(fn).to.be.calledWith()
+              })
+          }
+        })
       })
     })
 
     describe('(event): escape-key', () => {
-      it.skip(' ', () => {
-        //
+      it('should emit escape-key event', () => {
+        const fn = cy.stub()
+        const model = ref(true)
+        mountQDialogWrapper({
+          props: {
+            ...vModelAdapter(model),
+            onEscapeKey: fn
+          }
+        })
+
+        cy.withinDialog(() => {
+          closeDialogViaEscKey()
+        })
+
+        cy.wrap().then(() => {
+          expect(fn).to.be.calledWith()
+        })
       })
     })
   })
 
   describe('Methods', () => {
     describe('(method): focus', () => {
-      it.skip(' ', () => {
-        //
+      it('should use the focus method to focus on dialog', () => {
+        const model = ref(true)
+        mountQDialogWrapper({
+          props: {
+            ...vModelAdapter(model),
+            seamless: true
+          }
+        })
+
+        cy.focused().should('have.class', 'q-dialog__inner')
+        cy.dataCy('input-field').focus()
+        cy.focused().should('not.have.class', 'q-dialog__inner')
+
+        cy.wrap().then(async () => {
+          await Cypress.vueWrapper.vm.focus()
+        })
+        cy.focused().should('have.class', 'q-dialog__inner')
       })
     })
 
     describe('(method): shake', () => {
-      it.skip(' ', () => {
-        //
+      it('should use the shake method to shake dialog', () => {
+        const model = ref(true)
+        mountQDialogWrapper({
+          props: {
+            ...vModelAdapter(model),
+            persistent: true
+          }
+        })
+
+        cy.withinDialog({
+          persistent: true,
+          fn: () => {
+            cy.get('.q-dialog__inner')
+              .should('not.have.class', 'q-animate--scale')
+
+            cy.wrap().then(async () => {
+              await Cypress.vueWrapper.vm.shake()
+            })
+
+            cy.get('.q-dialog__inner')
+              .should('have.class', 'q-animate--scale')
+          }
+        })
       })
     })
   })

package/src/components/drawer/QDrawer.js

@@ -193,7 +193,7 @@ export default createComponent({
     const fixed = computed(() =>
       props.overlay === true
       || props.miniToOverlay === true
-      || $layout.view.value.indexOf(rightSide.value ? 'R' : 'L') > -1
+      || $layout.view.value.indexOf(rightSide.value ? 'R' : 'L') !== -1
       || ($q.platform.is.ios === true && $layout.isContainer.value === true)
     )
 

package/src/components/drawer/QDrawer.json

@@ -89,7 +89,7 @@
 
     "persistent": {
       "type": "Boolean",
-      "desc": "Prevents drawer from auto-closing when app's route changes",
+      "desc": "Prevents drawer from auto-closing when app's route changes; Also, an app route change won't hide it",
       "category": "behavior"
     },
 

package/src/components/file/QFile.js

@@ -121,7 +121,7 @@ export default createComponent({
 
     function removeFile (file) {
       const index = innerValue.value.indexOf(file)
-      if (index > -1) {
+      if (index !== -1) {
         removeAtIndex(index)
       }
     }
@@ -155,7 +155,7 @@ export default createComponent({
       }
 
       // if nothing to do...
-      if (files === void 0) { return }
+      if (files === void 0) return
 
       // protect against input @change being called in a loop
       // like it happens on Safari, so don't emit same thing:

package/src/components/footer/QFooter.js

@@ -47,7 +47,7 @@ export default createComponent({
 
     const fixed = computed(() =>
       props.reveal === true
-      || $layout.view.value.indexOf('F') > -1
+      || $layout.view.value.indexOf('F') !== -1
       || ($q.platform.is.ios && $layout.isContainer.value === true)
     )
 
@@ -119,7 +119,7 @@ export default createComponent({
     }
 
     function updateRevealed () {
-      if (props.reveal !== true) { return }
+      if (props.reveal !== true) return
 
       const { direction, position, inflectionPoint } = $layout.scroll.value
 

package/src/components/form/QForm.js

@@ -136,12 +136,12 @@ export default createComponent({
 
     function focus () {
       addFocusFn(() => {
-        if (rootRef.value === null) { return }
+        if (rootRef.value === null) return
 
         const target = rootRef.value.querySelector('[autofocus][tabindex], [data-autofocus][tabindex]')
           || rootRef.value.querySelector('[autofocus] [tabindex], [data-autofocus] [tabindex]')
           || rootRef.value.querySelector('[autofocus], [data-autofocus]')
-          || Array.prototype.find.call(rootRef.value.querySelectorAll('[tabindex]'), el => el.tabIndex > -1)
+          || Array.prototype.find.call(rootRef.value.querySelectorAll('[tabindex]'), el => el.tabIndex !== -1)
 
         target !== null && target !== void 0 && target.focus({ preventScroll: true })
       })
@@ -154,7 +154,7 @@ export default createComponent({
 
       unbindComponent (vmProxy) {
         const index = registeredComponents.indexOf(vmProxy)
-        if (index > -1) {
+        if (index !== -1) {
           registeredComponents.splice(index, 1)
         }
       }

package/src/components/header/QHeader.js

@@ -44,7 +44,7 @@ export default createComponent({
 
     const fixed = computed(() =>
       props.reveal === true
-      || $layout.view.value.indexOf('H') > -1
+      || $layout.view.value.indexOf('H') !== -1
       || ($q.platform.is.ios && $layout.isContainer.value === true)
     )