ayanova/src/components/gz-data-table.vue

@@ -19,16 +19,17 @@
           item-value="id"
           :label="t('DataListView')"
           @input="listViewChanged"
+          data-cy="selectlistview"
         >
         </v-select>
         <v-spacer></v-spacer>
         <div>
           <v-btn @click="refresh">
-            <v-icon>fa-sync</v-icon>
+            <v-icon data-cy="refresh">fa-sync</v-icon>
           </v-btn>
 
           <v-btn class="ml-12" @click="editListView">
-            <v-icon>fa-filter</v-icon>
+            <v-icon data-cy="filter">fa-filter</v-icon>
           </v-btn>
         </div>
       </v-card-title>
@@ -60,6 +61,7 @@
           :loading-text="t('Loading')"
           :no-data-text="t('NoData')"
           class="elevation-1"
+          data-cy="datatable-wide"
         >
           <template v-slot:body="{ items }">
             <tbody>
@@ -176,6 +178,7 @@
           }"
           :loading-text="t('Loading')"
           class="elevation-1"
+          data-cy="datatable-mobile"
         >
           <template v-slot:header="props">
             <!-- Mimic the full width data table select all toggle :no-data-text="t('NoData')"-->

ayanova/src/views/ay-data-list-view.vue

@@ -47,6 +47,7 @@
                     :error-messages="form().serverErrors(this, 'name')"
                     ref="name"
                     @input="fieldValueChanged('name')"
+                    data-cy="name"
                   ></v-text-field>
                 </v-col>
                 <v-col cols="12" sm="6" lg="4" xl="3">
@@ -62,7 +63,7 @@
             </v-col>
             <template v-for="(item, index) in obj.editView">
               <v-col :key="item.key" cols="12" sm="6" lg="4" xl="3" px-2>
-                <v-card>
+                <v-card :data-cy="'columncard:' + item.key">
                   <v-card-title>
                     {{ item.title }}
                   </v-card-title>
@@ -85,7 +86,9 @@
                     <!-- RE-ORDER CONTROL -->
                     <div class="d-flex justify-space-between">
                       <v-btn large icon @click="move('start', index)"
-                        ><v-icon large>fa-step-backward</v-icon></v-btn
+                        ><v-icon large data-cy="movestart"
+                          >fa-step-backward</v-icon
+                        ></v-btn
                       >
                       <v-btn large icon @click="move('left', index)"
                         ><v-icon large>fa-backward</v-icon></v-btn

ayanova/tests/e2e/specs/gz-data-table.js

@@ -14,6 +14,38 @@ describe("GZ-DATA-TABLE", () => {
     cy.visit("/widgets");
     cy.url().should("include", "/widgets");
 
+    cy.contains("Rows per page");
+    //select default widget list view
+    cy.get("[data-cy=selectlistview]").type("-{enter}", { force: true });
+    //confirm we see the data expected
+    cy.contains("Name");
+    cy.contains("Serial #");
+    cy.contains("Price");
+    //refresh
+    cy.get("[data-cy=refresh]").click();
+
+    //change datafilters
+    cy.get("[data-cy=selectlistview]").type("-{enter}", { force: true });
+
+    //filter
+    cy.get("[data-cy=filter]").click();
+    cy.contains("List view");
+    //move username to first position
+    cy.get(
+      '[data-cy="columncard:username"] > .v-card__text > .d-flex > :nth-child(1) > .v-btn__content > [data-cy=movestart]'
+    ).click();
+
+    //go back to widgetlist
+    cy.go("back");
+
+    //confirm the first column is the username
+    // console.log(
+    //   cy.get("thead > tr > th:nth-child(1) > span").invoke("innerText")
+    // );
+    cy.get("thead > tr > th:nth-child(1) > span").contains("NUser");
+
+    //cy.get("thead > tr > th:nth-child(1)").contains("User");
+
     // //navigate and confirm
     // //open nav and home menu
     // cy.get("[data-cy=navicon]").click();