My first e2e test and modifications to client to support it

ayanova/cypress.json

@@ -1,3 +1,8 @@
 {
-  "pluginsFile": "tests/e2e/plugins/index.js"
+  "pluginsFile": "tests/e2e/plugins/index.js",
-}
+  "baseUrl": "http://localhost:8080",
+  "env": {
+    "adminusername": "manager",
+    "adminpassword": "l3tm3in"
+  }
+}

ayanova/devdocs/todo.txt

@@ -49,12 +49,6 @@ CURRENT TODOs
 
 @@@@@@@@@@@ ROADMAP STAGE 2:
 
-todo: update all dependencies
-	- Widget form: After update now the controls show broken rule color for some reason and dirty checking isn't working as save doesn't enabled
-	- better test other stuff too, just did a quickie (looks like it's an issue with the rule processor for forms adn the dirty checking or input event)
-	- No errors in console, just acting weird
-	- Actually, it *knows* it's dirty because I get unsaved changes error, just doesn't enable the save button and displays as if there are broken rules but no text to go with
-
 todo: Client automated testing
 	- Need several as basis for all future, make sure it's right.
 

ayanova/package.json

@@ -7,6 +7,7 @@
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
+    "test:front": "vue-cli-service test:e2e --url http://localhost:8080",
     "lint": "vue-cli-service lint",
     "myLint": "npm run lint"
   },

ayanova/src/App.vue

@@ -19,13 +19,13 @@
               :prepend-icon="item.icon"
               :value="false"
               :key="item.key"
+              :data-cy="item.testid"
             >
               <template v-slot:activator>
                 <!--group activator -->
                 <v-list-item-title>{{ item.title }}</v-list-item-title>
               </template>
               <!-- TOP LEVEL HOLDER SUBITEMS -->
-
               <template v-for="subitem in item.navItems">
                 <template v-if="!subitem.route">
                   <!-- SECOND LEVEL HOLDER -->
@@ -64,7 +64,10 @@
                 <template v-else>
                   <!-- SECOND LEVEL ACTION -->
                   <div class="pl-3" :key="subitem.key">
-                    <v-list-item :to="subitem.route">
+                    <v-list-item
+                      :to="subitem.route"
+                      :data-cy="'nav' + subitem.route"
+                    >
                       <v-list-item-action>
                         <v-icon v-if="subitem.icon">{{ subitem.icon }}</v-icon>
                       </v-list-item-action>
@@ -107,7 +110,10 @@
       fixed
       app
     >
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
+      <v-app-bar-nav-icon
+        @click.stop="drawer = !drawer"
+        data-cy="navicon"
+      ></v-app-bar-nav-icon>
       <v-toolbar-title style="width: 300px" class="ml-0 pl-4">
         <v-icon>{{ appBar.icon }}</v-icon
         >&nbsp;
@@ -132,7 +138,7 @@
         <v-spacer></v-spacer>
         <v-menu bottom float-left>
           <template v-slot:activator="{ on }">
-            <v-btn text icon v-on="on">
+            <v-btn text icon v-on="on" data-cy="contextmenu">
               <v-icon>fa-ellipsis-v</v-icon>
             </v-btn>
           </template>
@@ -152,6 +158,7 @@
                 :disabled="item.disabled"
                 @click="clickMenuItem(item)"
                 v-bind:class="{ 'hidden-sm-and-up': item.surface }"
+                :data-cy="item.key"
               >
                 <v-list-item-action>
                   <v-icon

ayanova/src/api/initialize.js

@@ -1,12 +1,16 @@
 /* Xeslint-disable */
 
-function addNavItem(title, icon, route, navItems, key) {
+function addNavItem(title, icon, route, navItems, key, testid) {
+  if (!testid) {
+    testid = route;
+  }
   window.$gz.store.commit("addNavItem", {
     title,
     icon,
     route,
     navItems,
-    key: key
+    key: key,
+    testid: testid
   });
 }
 
@@ -157,7 +161,8 @@ export default function initialize() {
               "fa-home",
               undefined,
               sub,
-              key++
+              key++,
+              "home"
             );
           }
 
@@ -200,7 +205,8 @@ export default function initialize() {
               "fa-address-book",
               undefined,
               sub,
-              key++
+              key++,
+              "customer"
             );
           }
 
@@ -387,7 +393,8 @@ export default function initialize() {
               "fa-toolbox",
               undefined,
               sub,
-              key++
+              key++,
+              "service"
             );
           }
 
@@ -467,7 +474,8 @@ export default function initialize() {
               "fa-box",
               undefined,
               sub,
-              key++
+              key++,
+              "inventory"
             );
           }
 
@@ -488,7 +496,8 @@ export default function initialize() {
               "fa-store",
               "/vendors",
               [],
-              key++
+              key++,
+              "vendor"
             );
           }
 
@@ -516,7 +525,8 @@ export default function initialize() {
               "fa-calculator",
               undefined,
               sub,
-              key++
+              key++,
+              "accounting"
             );
           }
 
@@ -602,7 +612,8 @@ export default function initialize() {
               "fa-user-tie",
               undefined,
               sub,
-              key++
+              key++,
+              "administration"
             );
           }
 
@@ -668,7 +679,8 @@ export default function initialize() {
               "fa-server",
               undefined,
               sub,
-              key++
+              key++,
+              "operations"
             );
           }
 
@@ -688,7 +700,8 @@ export default function initialize() {
               "fa-vial",
               "/widgets",
               [],
-              key++
+              key++,
+              "widgets"
             );
           }
 
@@ -730,7 +743,8 @@ export default function initialize() {
               "fa-home",
               undefined,
               sub,
-              key++
+              key++,
+              "homecustomer"
             );
           }
         })

ayanova/tests/e2e/specs/jwt-example.js

@@ -0,0 +1,62 @@
+// login just once using API
+let user;
+
+before(function fetchUser() {
+  cy.request("POST", "http://localhost:7575/api/v8/Auth", {
+    username: Cypress.env("adminusername"),
+    password: Cypress.env("adminpassword")
+  })
+    .its("body")
+    .then(res => {
+      user = res;
+    });
+});
+
+// but set the user before visiting the page
+// so the app thinks it is already authenticated
+beforeEach(function setUser() {
+  cy.visit("/", {
+    onBeforeLoad(win) {
+      // and before the page finishes loading
+      // set the user object in local storage
+      win.localStorage.setItem("user", JSON.stringify(user));
+    }
+  });
+  // the page should be opened and the user should be logged in
+});
+describe("The home page", () => {
+  it("Successfully loads the home page", () => {
+    cy.visit("/");
+  });
+});
+
+describe("JWT", () => {
+  it("makes authenticated request", () => {
+    // we can make authenticated request ourselves
+    // since we know the token
+    cy.request({
+      url: "http://localhost:7575/api/v8/User/1",
+      auth: {
+        bearer: user.token
+      }
+    })
+      .its("body")
+      .should("deep.equal", [
+        {
+          id: 1,
+          username: "test",
+          firstName: "Test",
+          lastName: "User"
+        }
+      ]);
+  });
+
+  it("is logged in", () => {
+    cy.contains("Hi Test!").should("be.visible");
+  });
+
+  it("shows loaded user", () => {
+    // this user information came from authenticated XHR call
+    cy.contains("li", "Test User").should("be.visible");
+  });
+});

ayanova/tests/e2e/specs/login-logout.js

@@ -0,0 +1,29 @@
+// https://docs.cypress.io/api/introduction/api.html
+
+describe("Login", () => {
+  it("Successfully logs in navigate and log out", () => {
+    cy.visit("/login");
+
+    cy.get("input[name=username]")
+      .clear()
+      .type(Cypress.env("adminusername"));
+
+    // {enter} causes the form to submit
+    cy.get("input[name=password]")
+      .clear()
+      .type(`${Cypress.env("adminpassword")}{enter}`);
+
+    // we should be redirected to /dashboard
+    cy.url().should("include", "/home-dashboard");
+
+    //navigate and confirm
+    //open nav and home menu
+    cy.get("[data-cy=navicon]").click();
+    cy.get("[data-cy=home]").click();
+    cy.get("[data-cy='nav/home-user-settings']").click();
+    cy.url().should("include", "/home-user-settings");
+    cy.get("[data-cy=contextmenu]").click();
+    cy.get("[data-cy='app:logout']").click();
+    cy.url().should("include", "/login");
+  });
+});