Add in POC of Cypress for E2E tests

Makefile

@@ -19,7 +19,7 @@
 include ${GOPATH}/.env
 
 # Set local environment variables.
-MYSQL_NAME=mysql56
+MYSQL_NAME=govueapp_db_1
 
 .PHONY: docker-build
 docker-build:

README.md

@@ -208,6 +208,13 @@ make swagger-gen
 # src/app/api/static/swagger/swagger.json
 ```
 
+# Cypress for UI Testing
+
+```bash
+# Open Cypress
+npx cypress open
+```
+
 ## Debug UI Tests
 
 Jest is used to run tests on Vue. You can use the steps below to debug the tests.

bash/reset-db.sh

@@ -7,7 +7,7 @@ if [ -z "$TRAVIS" ]; then
     source $GOPATH/.env
 fi  
 
-docker exec mysql56 sh -c "exec mysql -h 127.0.0.1 -uroot -p${MYSQL_ROOT_PASSWORD} -e 'DROP DATABASE IF EXISTS main;'"
-docker exec mysql56 sh -c "exec mysql -h 127.0.0.1 -uroot -p${MYSQL_ROOT_PASSWORD} -e 'CREATE DATABASE IF NOT EXISTS main DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_unicode_ci;'"
+docker exec govueapp_db_1 sh -c "exec mysql -h 127.0.0.1 -uroot -p${MYSQL_ROOT_PASSWORD} -e 'DROP DATABASE IF EXISTS main;'"
+docker exec govueapp_db_1 sh -c "exec mysql -h 127.0.0.1 -uroot -p${MYSQL_ROOT_PASSWORD} -e 'CREATE DATABASE IF NOT EXISTS main DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_unicode_ci;'"
 
 go run $GOPATH/src/app/api/cmd/dbmigrate/main.go

src/app/ui/components/Menu.vue

@@ -1,7 +1,7 @@
 <template>
   <nav class="navbar is-black" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
-      <nuxt-link class="navbar-item" to="/">
+      <nuxt-link class="navbar-item" to="/" data-cy="home-link">
         <strong>govueapp</strong>
       </nuxt-link>
 
@@ -26,7 +26,7 @@
             About
           </nuxt-link>
           <hr class="navbar-divider" />
-          <a v-if="isAuthenticated" class="dropdown-item" @click="logout"
+          <a v-if="isAuthenticated" @click="logout" class="dropdown-item"
             >Logout</a
           >
           <div class="navbar-item">

src/app/ui/components/Note.vue

@@ -6,17 +6,21 @@
           <input
             :id="id"
             v-model="imessage"
+            @keyup="$emit('edit', index, id, imessage)"
             type="text"
             class="input individual-note"
-            @keyup="$emit('edit', index, id, imessage)"
           />
         </div>
       </div>
       <nav class="level is-mobile">
         <div class="level-left">
           <a class="level-item">
             <span class="icon is-small has-text-danger">
-              <i class="fa fa-trash-o" @click="$emit('remove', index, id)"></i>
+              <i
+                @click="$emit('remove', index, id)"
+                class="fa fa-trash-o"
+                data-cy="delete-note-link"
+              ></i>
             </span>
           </a>
         </div>

src/app/ui/components/textfield.vue

@@ -6,6 +6,7 @@
         v-validate="{ required }"
         :name="name"
         :type="type"
+        :data-cy="dataCy"
         :placeholder="placeholder"
         :class="{ input: true, 'is-danger': errors.has(name) }"
         :value="value"
@@ -30,7 +31,8 @@ export default {
     type: { type: String, default: 'text' },
     value: { type: String, default: '' },
     required: { type: Boolean, default: false },
-    disabled: { type: Boolean, default: false }
+    disabled: { type: Boolean, default: false },
+    dataCy: { type: String, default: '' }
   }
 }
 </script>

src/app/ui/cypress.json

@@ -0,0 +1,7 @@
+{
+    "baseUrl": "http://localhost:8080",
+    "viewportWidth": 1280,
+    "viewportHeight": 1024,
+    "responseTimeout": 5000,
+    "defaultCommandTimeout": 500
+}

src/app/ui/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}