test(QDialog): add QDialog tests (#16636)

* test(QDialog): add QDialog tests * test(QDialog): improve test stability * test(use-model-toggle): improve test stability * test(QDialog): refactor and fix some tests * test(QDialog): refactor and improve tests * chore(ui) upgrade test deps * test(QDialog): refactor some tests to be more readable * test(use-model-toggle): revert changes on use-model-toggle and prefer stopping animation on QMenu to fix event issues - After a dialog has been closed, the hide event is fired only after the duration transitionDuration has elapsed. transitionDuration is a prop passed to use-model-toggle.js and has a default value of 300ms. Hence, we cannot depend on the dialog closing to conclude that the event has been fired. Setting transitionDuration to 0 ensures it fires immediately * test(use-model-toggle): add test for 'hide' event interaction with transition duration prop * test(QDialog): apply vModelAdapter fix --------- Co-authored-by: Paolo Caleffi <[email protected]>
quasarframework · Feb 23, 2024 · a98dfb3 · a98dfb3
1 parent a03978b
commit a98dfb3
Show file tree

Hide file tree

Showing 5 changed files with 1,167 additions and 678 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -73,15 +73,15 @@
   "devDependencies": {
     "@quasar/app-vite": "^2.0.0-beta.1",
     "@quasar/extras": "^1.16.4",
-    "@quasar/quasar-app-extension-testing-e2e-cypress": "^5.2.0",
+    "@quasar/quasar-app-extension-testing-e2e-cypress": "^5.2.1",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
     "autoprefixer": "^10.4.17",
     "babel-preset-es2015-rollup": "^3.0.0",
     "cli-highlight": "^2.1.11",
     "cross-env": "^7.0.3",
     "cssnano": "^5.1.14",
-    "cypress": "^13.6.4",
+    "cypress": "^13.6.6",
     "cypress-json-results": "^1.2.1",
     "diff": "^5.2.0",
     "eslint": "^8.56.0",

diff --git a/ui/src/components/dialog/__tests__/DialogWrapper.vue b/ui/src/components/dialog/__tests__/DialogWrapper.vue
@@ -0,0 +1,33 @@
+<template>
+<q-dialog ref="dialogRef" v-bind="$attrs">
+  <q-card>
+    <q-card-section>
+      <q-btn label="Dialog Button" data-cy="dialog-button"/>
+    </q-card-section>
+  </q-card>
+</q-dialog>
+
+<q-input data-cy="input-field"/>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  inheritAttrs: false,
+  setup () {
+    const dialogRef = ref(null)
+
+    function focus () {
+      dialogRef.value.focus()
+    }
+
+    function shake () {
+      dialogRef.value.shake()
+    }
+
+    return { dialogRef, focus, shake }
+  }
+})
+
+</script>