Feature/cypress refactor and example usertask

digiwf-apps/package.json

@@ -12,6 +12,7 @@
     "serve": "npm run build && lerna run dev --stream --parallel",
     "serve:forms": "lerna run dev --stream --scope=@muenchen/digiwf-forms-example",
     "serve:tasklist": "lerna run dev --stream --scope=@muenchen/digiwf-tasklist",
+    "preview:tasklist": "lerna run preview --stream --scope=@muenchen/digiwf-tasklist",
     "serve:webcomponent": "lerna run dev --stream --scope=@muenchen/digiwf-webcomponent",
     "serve:all": "lerna run dev --stream --parallel",
     "test": "lerna run test",

digiwf-apps/packages/apps/digiwf-tasklist/components.d.ts

@@ -64,7 +64,6 @@ declare module 'vue' {
     VCol: typeof import('vuetify/lib')['VCol']
     VCombobox: typeof import('vuetify/lib')['VCombobox']
     VContainer: typeof import('vuetify/lib')['VContainer']
-    VDataIterator: typeof import('vuetify/lib')['VDataIterator']
     VDatePicker: typeof import('vuetify/lib')['VDatePicker']
     VDialog: typeof import('vuetify/lib')['VDialog']
     VDivider: typeof import('vuetify/lib')['VDivider']

digiwf-apps/packages/apps/digiwf-tasklist/package.json

@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "preview": "vite preview --host",
     "test": "jest src --coverage",
     "prettier": "prettier src --write --ignore-path ./legacy-ignore.prettierignore"
   },

digiwf-apps/packages/apps/digiwf-tasklist/src/components/UI/AppPaginationFooter.vue

@@ -1,25 +1,29 @@
 <template>
   <v-row
-    class="ma-1 mt-3"
     align="center"
+    class="ma-1 mt-3"
+    data-test="pagination-footer"
     justify="center"
   >
     <span>Seitengröße</span>
-    <v-menu offset-y>
+    <v-menu
+      offset-y
+    >
       <template #activator="{ on, attrs }">
         <v-btn
-          text
-          outlined
-          color="primary"
           class="ml-2 pa-1"
+          color="primary"
+          data-test="pagination-page-size-btn"
+          outlined
+          text
           v-bind="attrs"
           v-on="on"
         >
           <span class="mr-1">{{ size }}</span>
           <v-icon>mdi-chevron-down</v-icon>
         </v-btn>
       </template>
-      <v-list>
+      <v-list data-test="pagination-page-select">
         <v-list-item
           v-for="(number, index) in itemsPerPageArray"
           :key="index"
@@ -32,46 +36,54 @@
       </v-list>
     </v-menu>
     <v-spacer />
-    <span class="mr-1">{{ totalNumberOfItems }} {{ foundDataText }} </span>
+    <span
+      class="mr-1"
+      data-test="pagination-item-count"
+    >{{ totalNumberOfItems }} {{ foundDataText }}</span>
     <v-spacer />
 
-    <span class="mr-4"> Seite {{ page }} von {{ numberOfPages }} </span>
+    <span
+      class="mr-4"
+      data-test="pagination-page-index"
+    >Seite {{ page }} von {{ numberOfPages }}</span>
     <v-tooltip
-      top
       open-delay="700"
+      top
     >
       <template #activator="{ on, attrs }">
         <v-btn
           :disabled="lastPageButtonDisabled"
           aria-label="Vorherige Seite"
+          class="mr-1"
+          color="primary"
+          data-test="pagination-previous-page"
           small
           text
-          color="primary"
-          class="mr-1"
           v-bind="attrs"
-          v-on="on"
           @click="lastPage"
+          v-on="on"
         >
           <v-icon>mdi-chevron-left</v-icon>
         </v-btn>
       </template>
       <span>Vorherige Seite</span>
     </v-tooltip>
     <v-tooltip
-      top
       open-delay="700"
+      top
     >
       <template #activator="{ on, attrs }">
         <v-btn
-          small
-          text
           :disabled="nextPageButtonDisabled"
           aria-label="Nächste Seite"
-          color="primary"
           class="ml-1"
+          color="primary"
+          data-test="pagination-next-page"
+          small
+          text
           v-bind="attrs"
-          v-on="on"
           @click="nextPage"
+          v-on="on"
         >
           <v-icon>mdi-chevron-right</v-icon>
         </v-btn>
@@ -82,22 +94,22 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import {defineComponent} from "vue";
 
 export default defineComponent({
+  components: {},
   props: {
-    numberOfPages: { type: Number, required: true },
-    totalNumberOfItems: { type: Number, required: true },
-    page: { type: Number, required: true },
-    size: { type: Number, required: true },
-    foundDataText: { type: String, required: true },
-    nextPageButtonDisabled: { type: Boolean, required: true },
-    lastPageButtonDisabled: { type: Boolean, required: true },
-    updateItemsPerPage: { type: Function, required: true },
-    nextPage: { type: Function, required: true },
-    lastPage: { type: Function, required: true },
+    numberOfPages: {type: Number, required: true},
+    totalNumberOfItems: {type: Number, required: true},
+    page: {type: Number, required: true},
+    size: {type: Number, required: true},
+    foundDataText: {type: String, required: true},
+    nextPageButtonDisabled: {type: Boolean, required: true},
+    lastPageButtonDisabled: {type: Boolean, required: true},
+    updateItemsPerPage: {type: Function, required: true},
+    nextPage: {type: Function, required: true},
+    lastPage: {type: Function, required: true},
   },
-  components: {},
   setup() {
     return {
       itemsPerPageArray: [5, 10, 20],

digiwf-apps/packages/apps/digiwf-tasklist/src/components/UI/appMenu/AppMenuList.vue

@@ -1,49 +1,56 @@
 <template>
   <v-list>
     <AppMenuItem
-      path="/mytask"
-      label="Meine Aufgaben"
       :number-of-elements="numberOfMyTasks"
+      data-test="my-tasks-btn"
+      label="Meine Aufgaben"
+      path="/mytask"
     />
-    <hr class="hrDividerMenu" />
+    <hr class="hrDividerMenu">
     <AppMenuItem
-      path="/instance"
-      label="Meine Vorgänge"
       :number-of-elements="numberOfProcessInstances"
+      data-test="current-instances-btn"
+      label="Meine Vorgänge"
+      path="/instance"
     />
-    <hr class="hrDividerMenu" />
+    <hr class="hrDividerMenu">
     <AppMenuItem
-      path="/process"
+      data-test="start-process-btn"
       label="Vorgang Starten"
+      path="/process"
     />
     <hr
       class="hrDividerMenu"
       style="margin-bottom: 60px"
-    />
-    <p class="grey--text ml-9 mt-5 mb-0">Gruppenaufgaben</p>
+    >
+    <p class="grey--text ml-9 mt-5 mb-0">
+      Gruppenaufgaben
+    </p>
     <AppMenuItem
-      path="/opengrouptask"
-      label="Offen"
       :number-of-elements="numberOfOpenGroupTasks"
+      data-test="open-group-tasks-btn"
+      label="Offen"
+      path="/opengrouptask"
     />
-    <hr class="hrDividerMenu" />
+    <hr class="hrDividerMenu">
     <AppMenuItem
-      path="/assignedgrouptask"
-      label="In Bearbeitung"
       :number-of-elements="numberOfAssignedGroupTasks"
+      data-test="assigned-group-tasks-btn"
+      label="In Bearbeitung"
+      path="/assignedgrouptask"
     />
-    <hr class="hrDividerMenu" />
+    <hr class="hrDividerMenu">
   </v-list>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import {defineComponent} from "vue";
 
-import { useNumberOfTasks } from "@/middleware/tasks/taskMiddleware";
+import {useNumberOfTasks} from "@/middleware/tasks/taskMiddleware";
 import AppMenuItem from "./AppMenuItem.vue";
 
 export default defineComponent({
-  components: { AppMenuItem },
+  components: {AppMenuItem},
   props: ["numberOfProcessInstances"],
   setup() {
     const numberOfTasks = useNumberOfTasks();

digiwf-apps/packages/apps/digiwf-tasklist/src/components/common/SearchField.vue

@@ -1,19 +1,18 @@
 <template>
   <!-- input.native to prevent this issue: https://github.com/vuetifyjs/vuetify/issues/4679 -->
   <v-combobox
-    id="suchfeld"
-    class="searchField"
+    :items="persistentFilters?.map((f) => f.filterString) || []"
     :value="syncedFilter"
-    data-cy="search-field"
+    aria-label="Aufgaben durchsuchen"
+    class="searchField"
+    clearable
     color="black"
-    flat
+    data-test="search-field"
     dense
-    outlined
+    flat
     hide-details
-    :items="persistentFilters?.map((f) => f.filterString) || []"
-    aria-label="Aufgaben durchsuchen"
     label="Aufgaben durchsuchen"
-    clearable
+    outlined
     style="max-width: 500px"
     @change="changeFilter"
     @input.native="(e) => changeFilter(e.target.value)"
@@ -22,42 +21,42 @@
       <div class="v-input__icon">
         <v-btn
           v-if="isFilterPersistent()"
-          icon
           aria-label="Filter löschen"
           class="v-icon"
+          icon
           @click="deletePersistentFilter()"
         >
           <v-icon
-            color="primary"
+            aria-hidden="false"
             aria-label="Filter löschen"
+            color="primary"
             role="img"
-            aria-hidden="false"
           >
             mdi-star
           </v-icon>
         </v-btn>
         <v-btn
           v-else-if="showSaveBtn()"
-          icon
           aria-label="Filter speichern"
           class="v-icon"
+          icon
           @click="savePersistentFilter()"
         >
           <v-icon
-            color="primary"
+            aria-hidden="false"
             aria-label="Filter speichern"
+            color="primary"
             role="img"
-            aria-hidden="false"
           >
             mdi-star-outline
           </v-icon>
         </v-btn>
       </div>
       <v-icon
-        class="ml-2"
+        aria-hidden="false"
         aria-label="Aufgaben durchsuchen"
+        class="ml-2"
         role="img"
-        aria-hidden="false"
       >
         mdi-magnify
       </v-icon>
@@ -66,13 +65,13 @@
 </template>
 
 <script lang="ts">
-import { FilterTO, SaveFilterTO } from "@muenchen/digiwf-engine-api-internal";
+import {FilterTO, SaveFilterTO} from "@muenchen/digiwf-engine-api-internal";
 import debounce from "debounce";
-import { defineComponent, ref } from "vue";
+import {defineComponent, ref} from "vue";
 
-import { SEARCH_DEBOUNCE_INTERVAL } from "../../constants";
-import { usePageId } from "../../middleware/pageId";
-import { useGetPaginationData } from "../../middleware/paginationData";
+import {SEARCH_DEBOUNCE_INTERVAL} from "../../constants";
+import {usePageId} from "../../middleware/pageId";
+import {useGetPaginationData} from "../../middleware/paginationData";
 import {
   useDeletePersistentFilters,
   useGetPersistentFilters,
@@ -87,7 +86,7 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const { getSearchQueryOfUrl } = useGetPaginationData();
+    const {getSearchQueryOfUrl} = useGetPaginationData();
     const searchQuery = ref<string>(getSearchQueryOfUrl() || "");
     const pageId = usePageId();