Add UI tests

src/App.vue

@@ -63,8 +63,9 @@ export default class App extends Vue {
     this.$store.dispatch('setRange', {router: this.$router, start, end});
 
     const self = this;
-    users.forEach((user) => {
-      self.$store.dispatch('getGithubData', {username: user, router: this.$router});
+    users.forEach(async (user) => {
+      self.$store.dispatch('getGithubData', {username: user, router: this.$router, firstRun: true});
+      this.$store.commit('setValidUser', '');
     });
   }
 }

src/components/DateSelection.vue

@@ -5,13 +5,13 @@
         </v-toolbar>
         <v-list two-line>
             <v-list-tile>
-                <v-list-tile-content>
+                <v-list-tile-content id="startDate">
                     <v-list-tile-title>{{getRange.start}}</v-list-tile-title>
                     <v-list-tile-sub-title>From</v-list-tile-sub-title>
                 </v-list-tile-content>
             </v-list-tile>
             <v-list-tile>
-                <v-list-tile-content>
+                <v-list-tile-content id="endDate">
                     <v-list-tile-title>{{getRange.end}}</v-list-tile-title>
                     <v-list-tile-sub-title>Until</v-list-tile-sub-title>
                 </v-list-tile-content>

src/components/UserTable.vue

@@ -36,30 +36,35 @@ export default class UserTable extends Vue {
           align: 'center',
           sortable: true,
           value: 'commits',
+          class: 'commits',
         },
         {
           text: 'Days with commits',
           align: 'center',
           sortable: true,
           value: 'daysWithCommits',
+          class: 'daysWithCommits',
         },
         {
           text: 'Commits per day',
           align: 'center',
           sortable: true,
           value: 'commitsPerDay',
+          class: 'commitsPerDay',
         },
         {
           text: '% of days',
           align: 'center',
           sortable: true,
           value: 'percentageOfDays',
+          class: 'percentageOfDays',
         },
         {
           text: 'Longest streak',
           align: 'center',
           sortable: true,
           value: 'streak',
+          class: 'streak',
         },
     ];
 }

src/components/Users.vue

@@ -1,30 +1,41 @@
 <template>
-  <v-card>
+  <v-card id="user-card">
     <v-toolbar color="light-blue lighten-1" dark>
       <v-toolbar-title>Github Users</v-toolbar-title>
     </v-toolbar>
 
     <v-alert
+      id="invalidUser"
       :value="invalidUser"
       type="error"
     >
       {{invalidUser}} is not a valid Github user.
     </v-alert>
 
     <v-alert
+      id="usernameBlank"
       :value="usernameBlank"
       type="error"
     >
       Username not entered
     </v-alert>
 
     <v-alert
+      id="usernameDuplicate"
       :value="usernameDuplicate"
       type="error"
     >
       {{username}} already exists in the list
     </v-alert>
 
+    <v-alert
+      id="validUser"
+      :value="validUser"
+      type="success"
+    >
+      {{validUser}} was successfully added
+    </v-alert>
+
     <v-list two-line>
       <template v-for="(user) in getUsers">
         <v-subheader :key="user">
@@ -87,7 +98,7 @@ export default class Users extends Vue {
 
         this.username = '';
 
-        this.$store.dispatch('getGithubData', {username, router: this.$router});
+        this.$store.dispatch('getGithubData', {username, router: this.$router, firstRun: false});
     }
 }
 </script>

src/store/actions.ts

@@ -16,12 +16,17 @@ export default {
         commit('updateQueryString', router);
       },
       getGithubData: ({commit}: any,
-                      {username, router}: {username: string, router: Route}) => {
+                      {username, router, firstRun}:
+                      {username: string, router: Route, firstRun: boolean}) => {
         return axios.get(`https://api.github.com/users/${username}`)
           .then(() => {
             // Username is valid
             commit('addUser', username);
-            commit('setValidUser', username);
+
+            if (!firstRun) {
+              commit('setValidUser', username);
+            }
+
             commit('updateQueryString', router);
 
             return axios.get(`https://github-contributions-api.now.sh/v1/${username}?format=nested`)

src/store/mutations.ts

@@ -21,13 +21,13 @@ export default {
       store.invalidUser = username;
       setTimeout(() => {
         store.invalidUser = '';
-      }, 1_500);
+      }, 2_000);
     },
     setValidUser: (store: State, username: string) => {
       store.validUser = username;
       setTimeout(() => {
         store.validUser = '';
-      }, 1_500);
+      }, 2_000);
     },
     updateQueryString: (store: State, router: VueRouter) => {
       const query = {

src/views/Home.vue

@@ -7,6 +7,7 @@
     <v-container grid-list-md text-xs-center>
       <h1>Commit Competition</h1>
       <v-alert
+        id="apiError"
         :value="hasAPIError"
         type="error">
         API does not appear to be working, please try again later