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/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/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();
 

digiwf-cypress/.env.local

@@ -0,0 +1,7 @@
+BASE_URL="http://localhost:8083"
+SSO_URL="http://keycloak:8080"
+SSO_REALM="P82"
+SSO_CLIENT="digitalwfv2"
+SSO_USERNAME="johndoe"
+SSO_PASSWORD="test"
+USER_REALNAME="John Doe"

digiwf-cypress/readme.md → digiwf-cypress/README.md

@@ -3,24 +3,31 @@
 ## Getting started
 
 Download and install run:
+
 ```BASH
+cd digiwf-cypress
 npm install
 ```
+
 For further information see:  https://docs.cypress.io/guides/getting-started/installing-cypress
-It is important to use cypress in the digiwf-cypress folder. 
+It is important to use cypress in the `digiwf-cypress` folder.
 
 ## Run a cypress test
 
-Navigate to the digiwf-cypress folder in the bash and run:
+Navigate to the `digiwf-cypress` folder in the bash and run:
 
 ```bash
+cd digiwf-cypress
+# set proxy (remote env) or unset proxy (local) via env variables if needed
+# setup .env file or needed env variables
 npx cypress run # a) to run all the tests
 npx cypress open # b) to open the cypress app and run each test separate
 ```
-a) There will be a test summary in the end in the bash and the produced videos and test reports in the 
-digiwf-cypress/output folder. 
 
-b) The test with the test steps is shown in the Cypress App. The test will restart if elements 
-in the cypress test are changed and the results from the run before will be lost. 
+a) There will be a test summary in the end in the bash and the produced videos and test reports in the
+digiwf-cypress/output folder.
+
+b) The test with the test steps is shown in the Cypress App. The test will restart if elements
+in the cypress test are changed and the results from the run before will be lost.
 The test steps can be analysed by clicking in the corresponding line. The test flow is well comprehensible visible.
 

digiwf-cypress/cypress.config.js

@@ -1,32 +1,36 @@
-const { defineConfig } = require("cypress");
+const {defineConfig} = require("cypress");
+
+require('dotenv').config()
 
 module.exports = defineConfig({
-  viewportHeight: 1200,
-  viewportWidth: 2000,
-  //pageLoadTimeout: 300000,
-  videosFolder: "output/videos",
-  reporter: "cypress-multi-reporters",
-  reporterOptions: {
-    reporterEnabled: "mochawesome",
-    mochawesomeReporterOptions: {
-      reportDir: "output/reports/mocha",
-      quite: true,
-      overwrite: false,
-      html: false,
-      json: true
-    }
-  },
-  env: {
-    username: "johndoe",
-    fullUsername: "John Doe",
-    password: "test",
-    home: "localhost:8083/",
-    groupName1: "group1"
-  },
-  e2e: {
-    setupNodeEvents(on, config) {
-      // implement node event listeners here
+    viewportHeight: 1200,
+    viewportWidth: 2000,
+    defaultCommandTimeout: 10000,
+    videosFolder: "output/videos",
+    reporter: "cypress-multi-reporters",
+    reporterOptions: {
+        reporterEnabled: "mochawesome",
+        mochawesomeReporterOptions: {
+            reportDir: "output/reports/mocha",
+            quite: true,
+            overwrite: false,
+            html: false,
+            json: true
+        }
+    },
+    env: {
+        sso_url: process.env.SSO_URL,
+        sso_realm: process.env.SSO_REALM,
+        sso_client: process.env.SSO_CLIENT,
+        username: process.env.SSO_USERNAME,
+        password: process.env.SSO_PASSWORD,
+        realname: process.env.USER_REALNAME
+    },
+    e2e: {
+        baseUrl: process.env.BASE_URL,
+        setupNodeEvents(on, config) {
+            // implement node event listeners here
+        },
     },
-  },
-  chromeWebSecurity:false
+    chromeWebSecurity: false
 });