From 538f267ce89b3d5bfb58bbd7f0b142411f17c286 Mon Sep 17 00:00:00 2001
From: Luke E Glasscock <luke.glasscock@norsemanservices.com>
Date: Fri, 12 Mar 2021 02:44:56 -0700
Subject: [PATCH 1/4] Fix dropdown bug

---
 src/views/super-admin/Training.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/views/super-admin/Training.vue b/src/views/super-admin/Training.vue
index 1176ca6..0d0bc11 100644
--- a/src/views/super-admin/Training.vue
+++ b/src/views/super-admin/Training.vue
@@ -88,6 +88,7 @@
                       @change="fetchDebounced()"
                       v-model="filter.courseType"
                       label="Filter by Course Type"
+                      class="mt-3"
                     ></v-select>
                   </div>
                 </v-col>
@@ -481,10 +482,6 @@ export default {
 };
 </script>
 <style lang="scss">
-#app .v-select__selections {
-  height: 39px;
-}
-
 #training-table {
   .availability-bar {
     min-width: 120px;
-- 
GitLab


From 4235a6d85b7386ea98bad36bd1e5536e85ca8692 Mon Sep 17 00:00:00 2001
From: Luke E Glasscock <luke.glasscock@norsemanservices.com>
Date: Fri, 12 Mar 2021 11:49:19 -0700
Subject: [PATCH 2/4] Add ability to add users to course

---
 src/components/CourseSelect.vue | 175 ++++++++++++++++++++++++++++++++
 src/views/Team.vue              | 148 ++++++++++++++++++++++-----
 2 files changed, 296 insertions(+), 27 deletions(-)
 create mode 100644 src/components/CourseSelect.vue

diff --git a/src/components/CourseSelect.vue b/src/components/CourseSelect.vue
new file mode 100644
index 0000000..c725c66
--- /dev/null
+++ b/src/components/CourseSelect.vue
@@ -0,0 +1,175 @@
+<template>
+  <v-autocomplete
+    v-model="model"
+    ref="courseAutocomplete"
+    :loading="loading"
+    :items="items"
+    :search-input.sync="search"
+    :rules="rules"
+    :multiple="multiple"
+    :label="label"
+    item-text="name"
+    return-object
+    required
+    :hint="hint"
+    :persistent-hint="true"
+    clearable
+    hide-no-data
+    hide-selected
+    @change="modelChanged"
+    placeholder="Start typing to find course"
+    @click:prepend="setInputElementFocus($refs.courseAutocomplete)"
+    class="course-select-component"
+  >
+    <template v-slot:selection="data">
+      <v-chip
+        v-bind="data.attr"
+        :input-value="data.selected"
+        :close="multiple"
+        @click:close="remove(data.item)"
+      >
+        <span v-text="data.item.name"></span>
+      </v-chip>
+    </template>
+
+    <template v-slot:item="{ item }">
+      <v-list-item-content>
+        <v-list-item-title
+          class="text-left"
+          v-html="item.name"
+        ></v-list-item-title>
+        <v-list-item-subtitle
+          class="text-left"
+          v-html="item.email"
+        ></v-list-item-subtitle>
+      </v-list-item-content>
+    </template>
+  </v-autocomplete>
+</template>
+
+<script>
+import TrainingService from "@/api/services/training";
+import uniq from "lodash/uniq";
+import { setInputElementFocus } from "@/utils/events";
+
+export default {
+  props: {
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    preload: {
+      type: Boolean,
+      default: false,
+    },
+    rules: Array,
+    label: String,
+    value: [Object, Array],
+    preloadData: Array,
+    onChange: Function,
+  },
+  data: () => ({
+    loading: false,
+    items: [],
+    search: "",
+    model: null, // array of selected courses if multiple===true
+  }),
+  created() {
+    if (this.value) {
+      this.model = this.value;
+      this.items = this.value;
+    }
+  },
+  computed: {
+    hint() {
+      if (this.loading) {
+        return "";
+      }
+      if (this.items.length === 0 && this.search) {
+        return "No matching courses found";
+      }
+      return "";
+    },
+  },
+  watch: {
+    search(val) {
+      if (val) {
+        this.queryDebounced(val);
+      }
+    },
+  },
+  methods: {
+    setInputElementFocus,
+    clear() {
+      this.search = null;
+      this.model = null;
+      this.items = [];
+    },
+    remove(item) {
+      const index = this.model.indexOf(item);
+      if (index >= 0) {
+        this.model.splice(index, 1);
+      }
+      this.modelChanged();
+    },
+    modelChanged() {
+      this.$emit("input", this.model);
+      // reset the search text
+      this.search = null;
+      // sync the items based on the current model
+      if (this.multiple) {
+        this.items = this.model;
+      } else if (this.model) {
+        this.items = [this.model];
+      } else {
+        this.items = [];
+      }
+      if (this.onChange) {
+        this.onChange(this.model);
+      }
+    },
+    queryDebounced(val) {
+      // cancel pending call
+      clearTimeout(this._timerId);
+
+      this.loading = true;
+      // delay new call
+      this._timerId = setTimeout(() => {
+        this.query(val);
+      }, 400);
+    },
+    async query(val) {
+      try {
+        const newItems = await TrainingService.getCourses({
+          q: val,
+          registeredCount: true,
+        });
+        if (this.model) {
+          if (Array.isArray(this.model)) {
+            this.items = uniq([...newItems.courses, ...this.model]);
+          } else {
+            this.items = uniq([...newItems.courses, this.model]);
+          }
+        } else {
+          this.items = newItems.courses;
+        }
+      } catch (e) {
+        // TODO: WHY AREN'T ERRORS DISPLAYED TO THE USER???
+        console.error("unable to get courses", e);
+        this.items = [];
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.course-select-component {
+  padding-top: 14px;
+}
+</style>
diff --git a/src/views/Team.vue b/src/views/Team.vue
index e600552..1223534 100644
--- a/src/views/Team.vue
+++ b/src/views/Team.vue
@@ -88,52 +88,81 @@
             </div>
 
             <v-dialog
-              v-model="state.isAdding"
+              v-if="state.isAddingCourse"
+              v-model="state.isAddingCourse"
               persistent
               no-click-animation
               max-width="500px"
+              content-class="mx-0 mx-sm-4"
             >
               <v-card>
-                <v-card-title>
-                  <span class="headline"
-                    >Add new member to {{ team.name }}</span
-                  >
+                <v-card-title class="d-flex flex-column mb-8">
+                  <div class="mt-2 mb-1">
+                    <img
+                      src="@/assets/images/logos/Logo_P1_Yodahead-WH.png"
+                      alt="Platform One Smokey"
+                    />
+                  </div>
+                  <h3>Add to Course</h3>
                 </v-card-title>
 
                 <v-card-text>
+                  <CourseSelect
+                    ref="courseSelect"
+                    v-model="addToCourse.course"
+                    :rules="[inputRules.required]"
+                    :onChange="onCourseChange"
+                  />
+                  <v-select
+                    :placeholder="
+                      !startDateList || startDateList.length === 0
+                        ? 'No start date for current course'
+                        : 'Start date'
+                    "
+                    v-model="addToCourse.startDate"
+                    :rules="[inputRules.required]"
+                    :items="startDateList"
+                    prepend-icon="mdi-calendar"
+                  >
+                  </v-select>
                   <UserSelect
                     ref="userSelect"
-                    v-model="membersToAdd"
+                    v-model="membersToAddToCourse"
                     multiple
-                    :rules="[
-                      inputRules.required,
-                      inputRules.duplicates(
-                        membersToAdd,
-                        team.members,
-                        'User is already a member of this team'
-                      ),
-                    ]"
+                    :rules="[inputRules.required]"
                   />
+                  <span
+                    class="align-start pr-5 available-seats"
+                    v-if="availableCourseSeats"
+                  >
+                    You have
+                    {{ availableCourseSeats }}
+                    available seat reservation{{
+                      availableCourseSeats === 1 ? "" : "s"
+                    }}
+                  </span>
                 </v-card-text>
 
-                <v-card-actions>
-                  <v-spacer></v-spacer>
+                <v-card-actions class="justify-content-center pb-10">
                   <v-btn
-                    color=""
-                    :disabled="state.isAddingBusy"
-                    text
-                    @click="cancelAddMember()"
+                    :disabled="addBusy"
+                    @click="cancelAddUsersToCourse()"
+                    color="secondary"
                   >
                     Cancel
                   </v-btn>
                   <v-btn
-                    :disabled="state.isAddingDuplicate || !membersToAdd"
+                    :disabled="
+                      !addToCourse.course ||
+                      !addToCourse.startDate ||
+                      !membersToAddToCourse ||
+                      membersToAddToCourse.length === 0
+                    "
                     color="primary"
-                    :loading="state.isAddingBusy"
-                    text
-                    @click="addMember()"
+                    :loading="addBusy"
+                    @click="addUsersToCourse()"
                   >
-                    Add Member
+                    Add to Course
                   </v-btn>
                 </v-card-actions>
               </v-card>
@@ -174,7 +203,7 @@
                 Remove Selected
               </v-btn>
               <v-btn
-                class="no-link"
+                class="no-link mr-3"
                 :link="false"
                 :href="emailSelectedHref"
                 target="_blank"
@@ -183,6 +212,15 @@
                 <v-icon class="mr-2">mdi-email</v-icon>
                 Email Selected
               </v-btn>
+              <v-btn
+                class="no-link"
+                :disabled="availableSlots === 0 || state.isUndoingDelete"
+                @click="state.isAddingCourse = true"
+                v-if="permission"
+              >
+                <v-icon class="mr-2">mdi-plus-circle</v-icon>
+                Add to Course
+              </v-btn>
             </div>
           </template>
         </v-data-table>
@@ -236,13 +274,15 @@
 import Vue from "vue";
 import TeamService from "@/api/services/team";
 import UserSelect from "@/components/UserSelect";
+import CourseSelect from "@/components/CourseSelect";
 import AddTeam from "@/components/AddTeam";
 import { defaultSnackbarTimeout } from "@/config/config";
 import inputRules from "@/utils/inputRules";
 import Permission from "@/config/user-permissions";
+import TrainingService from "@/api/services/training";
 
 export default {
-  components: { UserSelect, AddTeam },
+  components: { UserSelect, CourseSelect, AddTeam },
   data: () => ({
     editValid: false,
     editValues: {},
@@ -258,6 +298,13 @@ export default {
       teamDetails: false,
       timeout: defaultSnackbarTimeout,
     },
+    addToCourse: {
+      course: null,
+      className: "",
+      startDate: "",
+      selectedCourse: "",
+    },
+    startDateList: [],
     state: {
       // edit team details flags
       showEditDialog: false,
@@ -272,6 +319,7 @@ export default {
       isAdding: false,
       isAddingDuplicate: false,
       isAddingBusy: false,
+      isAddingCourse: false,
     },
     headers: [
       { text: "Name", value: "name", width: "200px", fixed: true },
@@ -282,12 +330,51 @@ export default {
     selectedMembers: [],
     deletingMembers: [],
     membersToAdd: null,
+    membersToAddToCourse: null,
     inputRules,
   }),
   async mounted() {
     this.init();
   },
   methods: {
+    clearAddUsersToCourse() {
+      this.state.isAddingCourse = false;
+      this.addToCourse.startDate = "";
+      this.membersToAddToCourse = null;
+    },
+    async addUsersToCourse() {
+      this.addBusy = true;
+      try {
+        const courseId = this.coursesByName.find(
+          ({ startDate }) => this.addToCourse.startDate === startDate
+        ).id;
+        //Need to add check to see if student already exists in courseList prior to submission
+        await TrainingService.addStudents(courseId, this.membersToAddToCourse);
+      } catch (error) {
+        // TODO: WHY AREN'T ERRORS DISPLAYED TO THE USER???
+        console.error(error);
+      }
+      this.addBusy = false;
+      this.clearAddUsersToCourse();
+    },
+    async onCourseChange(course) {
+      try {
+        this.addToCourse.startDate = "";
+        if (course && course.name) {
+          const response = await TrainingService.getCourses({
+            q: course.name,
+          });
+          this.coursesByName = response.courses;
+          this.startDateList = this.coursesByName
+            ? this.coursesByName.map(({ startDate }) => startDate)
+            : [];
+        } else {
+          this.startDateList = [];
+        }
+      } catch (error) {
+        console.error(error);
+      }
+    },
     async init() {
       let isTeamLead = false;
       try {
@@ -422,6 +509,13 @@ export default {
     },
   },
   computed: {
+    availableCourseSeats() {
+      return this.addToCourse?.course?.registeredCount !== undefined &&
+        this.addToCourse?.course?.capacity !== undefined
+        ? this.addToCourse.course.capacity -
+            this.addToCourse.course.registeredCount
+        : null;
+    },
     canEdit() {
       // TODO: pull this from user info
       return true;
-- 
GitLab


From f088317ce8c47e835fc20f996a131254d1d5a146 Mon Sep 17 00:00:00 2001
From: Luke E Glasscock <luke.glasscock@norsemanservices.com>
Date: Tue, 16 Mar 2021 00:37:05 -0600
Subject: [PATCH 3/4] Add tests and finish course select

---
 src/components/CourseSelect.vue            |   8 +-
 src/views/Team.vue                         |  43 +-
 tests/unit/components/CourseSelect.spec.js | 199 ++++++++
 tests/unit/views/Team.spec.js              | 502 ++++++++++++++++++++-
 4 files changed, 706 insertions(+), 46 deletions(-)
 create mode 100644 tests/unit/components/CourseSelect.spec.js

diff --git a/src/components/CourseSelect.vue b/src/components/CourseSelect.vue
index c725c66..0db2adf 100644
--- a/src/components/CourseSelect.vue
+++ b/src/components/CourseSelect.vue
@@ -3,7 +3,7 @@
     v-model="model"
     ref="courseAutocomplete"
     :loading="loading"
-    :items="items"
+    :items="Array.isArray(items) ? items : []"
     :search-input.sync="search"
     :rules="rules"
     :multiple="multiple"
@@ -51,6 +51,7 @@
 import TrainingService from "@/api/services/training";
 import uniq from "lodash/uniq";
 import { setInputElementFocus } from "@/utils/events";
+import { SET_ERROR_MESSAGE } from "@/store/mutation-types";
 
 export default {
   props: {
@@ -157,9 +158,8 @@ export default {
         } else {
           this.items = newItems.courses;
         }
-      } catch (e) {
-        // TODO: WHY AREN'T ERRORS DISPLAYED TO THE USER???
-        console.error("unable to get courses", e);
+      } catch (error) {
+        this.$store.commit(SET_ERROR_MESSAGE, error);
         this.items = [];
       } finally {
         this.loading = false;
diff --git a/src/views/Team.vue b/src/views/Team.vue
index 1223534..1ccdd91 100644
--- a/src/views/Team.vue
+++ b/src/views/Team.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <ErrorMessage />
     <v-container class="team">
       <div class="d-flex flex-column flex-sm-row mb-n4">
         <v-btn
@@ -129,6 +130,7 @@
                     ref="userSelect"
                     v-model="membersToAddToCourse"
                     multiple
+                    :value="addToCourse.alreadyRegisteredUsers"
                     :rules="[inputRules.required]"
                   />
                   <span
@@ -280,9 +282,11 @@ import { defaultSnackbarTimeout } from "@/config/config";
 import inputRules from "@/utils/inputRules";
 import Permission from "@/config/user-permissions";
 import TrainingService from "@/api/services/training";
+import ErrorMessage from "@/components/APIError";
+import { SET_ERROR_MESSAGE } from "@/store/mutation-types";
 
 export default {
-  components: { UserSelect, CourseSelect, AddTeam },
+  components: { UserSelect, CourseSelect, AddTeam, ErrorMessage },
   data: () => ({
     editValid: false,
     editValues: {},
@@ -298,11 +302,13 @@ export default {
       teamDetails: false,
       timeout: defaultSnackbarTimeout,
     },
+    addBusy: false,
     addToCourse: {
       course: null,
       className: "",
       startDate: "",
       selectedCourse: "",
+      alreadyRegisteredUsers: [],
     },
     startDateList: [],
     state: {
@@ -337,7 +343,7 @@ export default {
     this.init();
   },
   methods: {
-    clearAddUsersToCourse() {
+    cancelAddUsersToCourse() {
       this.state.isAddingCourse = false;
       this.addToCourse.startDate = "";
       this.membersToAddToCourse = null;
@@ -348,14 +354,12 @@ export default {
         const courseId = this.coursesByName.find(
           ({ startDate }) => this.addToCourse.startDate === startDate
         ).id;
-        //Need to add check to see if student already exists in courseList prior to submission
         await TrainingService.addStudents(courseId, this.membersToAddToCourse);
       } catch (error) {
-        // TODO: WHY AREN'T ERRORS DISPLAYED TO THE USER???
-        console.error(error);
+        this.$store.commit(SET_ERROR_MESSAGE, error);
       }
       this.addBusy = false;
-      this.clearAddUsersToCourse();
+      this.cancelAddUsersToCourse();
     },
     async onCourseChange(course) {
       try {
@@ -363,6 +367,7 @@ export default {
         if (course && course.name) {
           const response = await TrainingService.getCourses({
             q: course.name,
+            registrations: true,
           });
           this.coursesByName = response.courses;
           this.startDateList = this.coursesByName
@@ -372,7 +377,7 @@ export default {
           this.startDateList = [];
         }
       } catch (error) {
-        console.error(error);
+        this.$store.commit(SET_ERROR_MESSAGE, error);
       }
     },
     async init() {
@@ -397,7 +402,7 @@ export default {
           await this.getTeams();
         }
       } catch (error) {
-        console.error("!user error!", error);
+        this.$store.commit(SET_ERROR_MESSAGE, error);
       } finally {
         this.isAdmin =
           this.user.permission === Permission.SUPER_ADMIN ||
@@ -411,7 +416,7 @@ export default {
       try {
         this.team = await TeamService.getTeam(this.$route.params.teamId);
       } catch (error) {
-        console.error("!teams error!", error);
+        this.$store.commit(SET_ERROR_MESSAGE, error);
       } finally {
         this.loading = false;
         this.fetchingData = false;
@@ -427,9 +432,8 @@ export default {
         this.snackbars.teamDetails = true;
         this.state.showEditDialog = false;
         this.init();
-      } catch (e) {
-        // TODO: no error message to the user???
-        console.error("error editing team", e);
+      } catch (error) {
+        this.$store.commit(SET_ERROR_MESSAGE, error);
       } finally {
         this.state.isEditingTeamDetailsBusy = false;
       }
@@ -448,9 +452,8 @@ export default {
           this.$route.params.teamId
         );
         this.snackbars.add = true;
-      } catch (e) {
-        // TODO: WHY AREN'T ERRORS DISPLAYED TO THE USER???
-        console.error("unable to add user", e);
+      } catch (error) {
+        this.$store.commit(SET_ERROR_MESSAGE, error);
       } finally {
         this.state.isAddingBusy = false;
         this.state.isAdding = false;
@@ -470,9 +473,8 @@ export default {
           this.$route.params.teamId
         );
         this.snackbars.delete = true;
-      } catch (e) {
-        // TODO: no user notification of the error???
-        console.error("error deleting member:", e);
+      } catch (error) {
+        this.$store.commit(SET_ERROR_MESSAGE, error);
       } finally {
         this.deletingMembers.forEach((m) => Vue.set(m, "isDeleting", false));
         this.state.isDeleting = false;
@@ -489,9 +491,8 @@ export default {
           this.deletingMembers,
           this.$route.params.teamId
         );
-      } catch (e) {
-        //TODO: error message to the user???
-        console.error("error restoring member:", e);
+      } catch (error) {
+        this.$store.commit(SET_ERROR_MESSAGE, error);
       } finally {
         await this.getTeams();
         this.deletingMembers = [];
diff --git a/tests/unit/components/CourseSelect.spec.js b/tests/unit/components/CourseSelect.spec.js
new file mode 100644
index 0000000..dbd0422
--- /dev/null
+++ b/tests/unit/components/CourseSelect.spec.js
@@ -0,0 +1,199 @@
+import { mount } from "@vue/test-utils";
+import Vuetify from "vuetify";
+import CourseSelect from "@/components/CourseSelect";
+import TrainingService from "@/api/services/training";
+
+describe("CourseSelect", () => {
+  // vuetify has to be mocked for the v-autocomplete to not crash
+  let vuetify;
+  beforeEach(() => {
+    vuetify = new Vuetify();
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should clear items on clear", async () => {
+    const wrapper = mount(CourseSelect, {
+      propsData: { value: [] },
+      vuetify,
+      mocks: {
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+    });
+    wrapper.vm.items = [1, 2, 3];
+
+    wrapper.vm.clear();
+    expect(wrapper.vm.items).toHaveLength(0);
+  });
+
+  it("should accept blank value prop", async () => {
+    const wrapper = mount(CourseSelect, {
+      propsData: {},
+      vuetify,
+      mocks: {
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+    });
+    expect(wrapper.vm.model).toBeNull();
+  });
+
+  it("should compute hint", async () => {
+    const wrapper = mount(CourseSelect, {
+      propsData: {},
+      vuetify,
+      mocks: {
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+      data() {
+        return { search: "" };
+      },
+    });
+
+    wrapper.vm.loading = true;
+    expect(wrapper.vm.hint).toEqual("");
+
+    wrapper.vm.loading = false;
+    expect(wrapper.vm.hint).toEqual("");
+
+    wrapper.vm.search = "mock";
+    expect(wrapper.vm.hint).toEqual("No matching courses found");
+  });
+
+  it("should remove items", async () => {
+    const value = ["a", "b", "c"];
+    const wrapper = mount(CourseSelect, {
+      propsData: { value },
+      vuetify,
+      mocks: {
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+    });
+
+    wrapper.vm.remove("a");
+    await wrapper.vm.$nextTick();
+    expect(value).toEqual(["b", "c"]);
+
+    wrapper.vm.remove("d");
+    await wrapper.vm.$nextTick();
+    expect(value).toEqual(["b", "c"]);
+  });
+
+  it("should set items on model change", async () => {
+    let wrapper = mount(CourseSelect, {
+      vuetify,
+      mocks: {
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+      propsData: {
+        onChange: jest.fn(),
+      },
+    });
+
+    wrapper.vm.items = null;
+    wrapper.vm.model = "a";
+    wrapper.vm.modelChanged();
+    expect(wrapper.vm.items).toEqual(["a"]);
+
+    wrapper.vm.items = null;
+    wrapper.vm.model = null;
+    wrapper.vm.modelChanged();
+    expect(wrapper.vm.items).toEqual([]);
+
+    wrapper = mount(CourseSelect, {
+      propsData: {
+        multiple: true,
+      },
+      vuetify,
+      mocks: {
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+    });
+
+    wrapper.vm.model = ["a", "b", "c"];
+    wrapper.vm.items = null;
+    wrapper.vm.multiple = true;
+    wrapper.vm.modelChanged();
+    expect(wrapper.vm.items).toEqual(["a", "b", "c"]);
+  });
+
+  it("should set items on query results", async () => {
+    const wrapper = mount(CourseSelect, {
+      vuetify,
+      mocks: {
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+    });
+
+    TrainingService.getCourses = jest
+      .fn()
+      .mockResolvedValue({ courses: ["a"] });
+
+    // multiple model
+    wrapper.vm.model = ["b", "c"];
+    await wrapper.vm.query();
+    expect(wrapper.vm.items).toEqual(["a", "b", "c"]);
+
+    // single model
+    wrapper.vm.model = "b";
+    await wrapper.vm.query();
+    expect(wrapper.vm.items).toEqual(["a", "b"]);
+
+    // null model
+    wrapper.vm.model = null;
+    await wrapper.vm.query();
+    expect(wrapper.vm.items).toEqual(["a"]);
+  });
+  it("should set items to empty array on error", async () => {
+    console.error = jest.fn(); // mock console.error when expecting error messages
+    TrainingService.getCourses = jest.fn().mockRejectedValue("mock error");
+    const wrapper = mount(CourseSelect, {
+      vuetify,
+      mocks: {
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+    });
+    await wrapper.vm.query();
+    expect(wrapper.vm.items).toEqual([]);
+  });
+});
diff --git a/tests/unit/views/Team.spec.js b/tests/unit/views/Team.spec.js
index 4e683b6..0d0b361 100644
--- a/tests/unit/views/Team.spec.js
+++ b/tests/unit/views/Team.spec.js
@@ -3,6 +3,7 @@ import Vuex from "vuex";
 import Permission from "@/config/user-permissions";
 import Team from "@/views/Team.vue";
 import TeamService from "@/api/services/team";
+import TrainingService from "@/api/services/training";
 import flushPromises from "flush-promises";
 
 const $route = {
@@ -30,7 +31,19 @@ describe("Team", () => {
       },
     });
     TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
-    const wrapper = shallowMount(Team, { mocks: { $route }, store, localVue });
+    const wrapper = shallowMount(Team, {
+      mocks: {
+        $route,
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+      store,
+      localVue,
+    });
     expect(wrapper.vm.loading).toBe(true);
     await flushPromises();
     expect(TeamService.getTeam).toHaveBeenCalledTimes(1);
@@ -47,7 +60,19 @@ describe("Team", () => {
       },
     });
     TeamService.getTeam = jest.fn().mockRejectedValue("fake error");
-    const wrapper = shallowMount(Team, { mocks: { $route }, store, localVue });
+    const wrapper = shallowMount(Team, {
+      mocks: {
+        $route,
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+      store,
+      localVue,
+    });
     expect(wrapper.vm.loading).toBe(true);
     await flushPromises();
     expect(TeamService.getTeam).toHaveBeenCalledTimes(1);
@@ -65,7 +90,16 @@ describe("Team", () => {
     TeamService.getMyTeam = jest.fn().mockResolvedValue([{ id: 1 }]);
     TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
     const wrapper = shallowMount(Team, {
-      mocks: { $route: blankRoute, $router: [] },
+      mocks: {
+        $route: blankRoute,
+        $router: [],
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
       store,
       localVue,
     });
@@ -85,7 +119,16 @@ describe("Team", () => {
     });
     TeamService.getMyTeam = jest.fn().mockRejectedValue("fake error");
     const wrapper = shallowMount(Team, {
-      mocks: { $route: blankRoute, $router: [] },
+      mocks: {
+        $route: blankRoute,
+        $router: [],
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
       store,
       localVue,
     });
@@ -108,7 +151,16 @@ describe("Team", () => {
     });
 
     const wrapper = shallowMount(Team, {
-      mocks: { $route: blankRoute, $router },
+      mocks: {
+        $route: blankRoute,
+        $router,
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
       store,
       localVue,
     });
@@ -128,7 +180,15 @@ describe("Team", () => {
 
     TeamService.getTeamForUser = jest.fn().mockRejectedValue("mock error");
     const wrapper = shallowMount(Team, {
-      mocks: { $route },
+      mocks: {
+        $route,
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
       store,
       localVue,
     });
@@ -140,7 +200,17 @@ describe("Team", () => {
 
   describe("input validation rules", () => {
     TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
-    const wrapper = shallowMount(Team, { mocks: { $route } });
+    const wrapper = shallowMount(Team, {
+      mocks: {
+        $route,
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+    });
     it("should check required", () => {
       expect(wrapper.vm.inputRules.required()).toEqual("* Required");
       expect(wrapper.vm.inputRules.required("aaa")).toEqual(true);
@@ -192,7 +262,15 @@ describe("Team", () => {
       });
       TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
       const wrapper = shallowMount(Team, {
-        mocks: { $route },
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
         store,
         localVue,
       });
@@ -213,7 +291,15 @@ describe("Team", () => {
         },
       });
       const wrapper = shallowMount(Team, {
-        mocks: { $route },
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
         store,
         localVue,
       });
@@ -224,7 +310,17 @@ describe("Team", () => {
 
   it("should compute emailSelectedHref", async () => {
     TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
-    const wrapper = shallowMount(Team, { mocks: { $route } });
+    const wrapper = shallowMount(Team, {
+      mocks: {
+        $route,
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+    });
     await flushPromises();
 
     wrapper.vm.selectedMembers = [];
@@ -247,7 +343,19 @@ describe("Team", () => {
         },
       },
     });
-    const wrapper = shallowMount(Team, { mocks: { $route }, store, localVue });
+    const wrapper = shallowMount(Team, {
+      mocks: {
+        $route,
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+      store,
+      localVue,
+    });
     await flushPromises();
 
     wrapper.vm.deletingMembers = [{ name: "mock member" }];
@@ -262,7 +370,17 @@ describe("Team", () => {
 
   it("should compute css class for team members", async () => {
     TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
-    const wrapper = shallowMount(Team, { mocks: { $route } });
+    const wrapper = shallowMount(Team, {
+      mocks: {
+        $route,
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+    });
     await flushPromises();
 
     expect(wrapper.vm.itemClass({})).toEqual([]);
@@ -272,7 +390,17 @@ describe("Team", () => {
   describe("edit team", () => {
     const mockTeam = { name: "edit mock" };
     it("should edit team", async () => {
-      const wrapper = shallowMount(Team, { mocks: { $route } });
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+      });
       await flushPromises();
 
       TeamService.updateTeam = jest.fn();
@@ -285,7 +413,17 @@ describe("Team", () => {
     it("should handle error on edit team", async () => {
       console.error = jest.fn(); // mock console.error when expecting error messages
       TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
-      const wrapper = shallowMount(Team, { mocks: { $route } });
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+      });
 
       // error state
       TeamService.updateTeam = jest.fn().mockRejectedValue("mock error");
@@ -297,7 +435,17 @@ describe("Team", () => {
   it("should cancel adding team member", async () => {
     const userSelect = { clear: jest.fn() };
     TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
-    const wrapper = shallowMount(Team, { mocks: { $route } });
+    const wrapper = shallowMount(Team, {
+      mocks: {
+        $route,
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+    });
     await flushPromises();
 
     wrapper.vm.$refs = { userSelect };
@@ -315,7 +463,17 @@ describe("Team", () => {
       const userSelect = { clear: jest.fn() };
       TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
       TeamService.addMembers = jest.fn().mockResolvedValue({ name: "mock" });
-      const wrapper = shallowMount(Team, { mocks: { $route } });
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+      });
 
       wrapper.vm.$refs = { userSelect };
 
@@ -333,7 +491,17 @@ describe("Team", () => {
       const userSelect = { clear: jest.fn() };
       TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
       TeamService.addMembers = jest.fn().mockResolvedValue({ name: "mock" });
-      const wrapper = shallowMount(Team, { mocks: { $route } });
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+      });
       wrapper.vm.$refs = { userSelect };
       TeamService.addMembers = jest.fn().mockRejectedValue("mock error");
       await wrapper.vm.addMember([mockMember]);
@@ -346,7 +514,17 @@ describe("Team", () => {
   describe("delete team member", () => {
     it("should delete team member", async () => {
       TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
-      const wrapper = shallowMount(Team, { mocks: { $route } });
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+      });
 
       TeamService.deleteMembers = jest.fn().mockResolvedValue();
       const toDelete = {
@@ -370,7 +548,17 @@ describe("Team", () => {
     it("should handle error on delete team member", async () => {
       console.error = jest.fn(); // mock console.error when expecting error messages
       TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
-      const wrapper = shallowMount(Team, { mocks: { $route } });
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+      });
 
       // error state
       TeamService.deleteMembers = jest.fn().mockRejectedValue("mock error");
@@ -385,7 +573,17 @@ describe("Team", () => {
     ];
     it("should undo delete team member", async () => {
       TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
-      const wrapper = shallowMount(Team, { mocks: { $route } });
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+      });
 
       TeamService.addMembers = jest.fn().mockResolvedValue();
 
@@ -403,7 +601,17 @@ describe("Team", () => {
     it("should handle error state on undo delete team member", async () => {
       console.error = jest.fn(); // mock console.error when expecting error messages
       TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
-      const wrapper = shallowMount(Team, { mocks: { $route } });
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+      });
 
       // error state
       TeamService.addMembers = jest.fn().mockRejectedValue("mock error");
@@ -412,4 +620,256 @@ describe("Team", () => {
       expect(wrapper.vm.deletingMembers).toEqual([]);
     });
   });
+
+  describe("add users to course", () => {
+    it("should cancel add users to course", () => {
+      TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+        data() {
+          return {
+            state: { isAddingCourse: true },
+            addToCourse: {
+              startDate: "2021-10-10",
+            },
+            membersToAddToCourse: [],
+          };
+        },
+      });
+      wrapper.vm.cancelAddUsersToCourse();
+
+      expect(wrapper.vm.state.isAddingCourse).toEqual(false);
+      expect(wrapper.vm.addToCourse.startDate).toEqual("");
+      expect(wrapper.vm.membersToAddToCourse).toEqual(null);
+    });
+    it("should add users to course", async () => {
+      TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
+      TrainingService.addStudents = jest.fn().mockResolvedValue({ id: 1 });
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+        data() {
+          return {
+            state: { isAddingCourse: true },
+            addToCourse: {
+              startDate: "2021-10-10",
+            },
+            membersToAddToCourse: [{ id: 1 }],
+            coursesByName: [
+              { id: 1, name: "3 Day Course", startDate: "2021-10-10" },
+            ],
+          };
+        },
+      });
+      wrapper.vm.cancelAddUsersToCourse = jest.fn();
+      await flushPromises();
+      await wrapper.vm.addUsersToCourse();
+
+      expect(wrapper.vm.cancelAddUsersToCourse).toHaveBeenCalled();
+    });
+    it("should handle error for add users to course", async () => {
+      TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
+      TrainingService.addStudents = jest.fn().mockRejectedValue("mock error");
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+        data() {
+          return {
+            state: { isAddingCourse: true },
+            addToCourse: {
+              startDate: "2021-10-10",
+            },
+            membersToAddToCourse: [{ id: 1 }],
+            coursesByName: [
+              { id: 1, name: "3 Day Course", startDate: "2021-10-10" },
+            ],
+            addBusy: true,
+          };
+        },
+      });
+      wrapper.vm.cancelAddUsersToCourse = jest.fn();
+      await flushPromises();
+      await wrapper.vm.addUsersToCourse();
+
+      expect(wrapper.vm.addBusy).toEqual(false);
+    });
+  });
+  describe("get courses by name on course change", () => {
+    it("should get courses on course change", async () => {
+      TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
+      TrainingService.getCourses = jest.fn().mockResolvedValue({
+        courses: [
+          {
+            id: 1,
+            name: "3 Day Course",
+            startDate: "2021-10-10",
+            registeredCount: 5,
+            capacity: 20,
+          },
+          {
+            id: 2,
+            name: "3 Day Course",
+            startDate: "2021-10-15",
+            registeredCount: 2,
+            capacity: 20,
+          },
+        ],
+      });
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+        data() {
+          return {
+            state: { isAddingCourse: true },
+            addToCourse: {
+              startDate: "2021-10-10",
+              course: {
+                id: 3,
+                name: "3 Day Course",
+                registeredCount: 5,
+                capacity: 20,
+              },
+            },
+            membersToAddToCourse: [{ id: 1 }],
+            coursesByName: [
+              { id: 1, name: "3 Day Course", startDate: "2021-10-10" },
+            ],
+            addBusy: true,
+          };
+        },
+      });
+      await wrapper.vm.onCourseChange({ name: "3 Day Course" });
+
+      expect(wrapper.vm.startDateList).toEqual(["2021-10-10", "2021-10-15"]);
+      expect(wrapper.vm.availableCourseSeats).toEqual(15);
+    });
+
+    it("should set startDateList to empty array when no course", async () => {
+      TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
+      TrainingService.getCourses = jest.fn().mockResolvedValue({
+        courses: [
+          { id: 1, name: "3 Day Course", startDate: "2021-10-10" },
+          { id: 2, name: "3 Day Course", startDate: "2021-10-15" },
+        ],
+      });
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+        data() {
+          return {
+            state: { isAddingCourse: true },
+            addToCourse: {
+              startDate: "2021-10-10",
+            },
+            membersToAddToCourse: [{ id: 1 }],
+            coursesByName: [
+              { id: 1, name: "3 Day Course", startDate: "2021-10-10" },
+            ],
+            addBusy: true,
+          };
+        },
+      });
+      await wrapper.vm.onCourseChange({});
+
+      expect(wrapper.vm.startDateList).toEqual([]);
+    });
+    it("should set startDateList to empty array when no courses returned", async () => {
+      TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
+      TrainingService.getCourses = jest.fn().mockResolvedValue({});
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+        data() {
+          return {
+            state: { isAddingCourse: true },
+            addToCourse: {
+              startDate: "2021-10-10",
+            },
+            membersToAddToCourse: [{ id: 1 }],
+            coursesByName: [
+              { id: 1, name: "3 Day Course", startDate: "2021-10-10" },
+            ],
+            addBusy: true,
+          };
+        },
+      });
+      await wrapper.vm.onCourseChange({ name: "3 Day Course" });
+
+      expect(wrapper.vm.startDateList).toEqual([]);
+    });
+    it("should handle error for on course change", async () => {
+      TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
+      TrainingService.getCourses = jest.fn().mockRejectedValue("mock error");
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+        data() {
+          return {
+            state: { isAddingCourse: true },
+            addToCourse: {
+              startDate: "2021-10-10",
+            },
+            membersToAddToCourse: [{ id: 1 }],
+            coursesByName: [
+              { id: 1, name: "3 Day Course", startDate: "2021-10-10" },
+            ],
+            addBusy: true,
+          };
+        },
+      });
+      await wrapper.vm.onCourseChange({ name: "3 Day Course" });
+
+      expect(wrapper.vm.addToCourse.startDate).toEqual("");
+    });
+  });
 });
-- 
GitLab


From b10325fe5a876fe46a6dbe9b26d5c638bff868ea Mon Sep 17 00:00:00 2001
From: Luke E Glasscock <luke.glasscock@norsemanservices.com>
Date: Wed, 31 Mar 2021 08:45:02 -0600
Subject: [PATCH 4/4] Prettier fix

---
 src/components/APIErrorCard.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/APIErrorCard.vue b/src/components/APIErrorCard.vue
index 162756a..b35b6f3 100644
--- a/src/components/APIErrorCard.vue
+++ b/src/components/APIErrorCard.vue
@@ -19,7 +19,7 @@
       </v-card-text>
       <v-btn
         href="https://jira.il2.dso.mil/servicedesk/customer/portal/1/create/137"
-        target = "_blank"
+        target="_blank"
         id="help_desk"
         class="primary mb-5"
         >Submit Ticket
@@ -39,7 +39,7 @@
         <v-col class="d-flex justify-center align-center">
           <v-btn
             href="https://jira.il2.dso.mil/servicedesk/customer/portal/1/create/137"
-            target = "_blank"
+            target="_blank"
             id="help_desk"
             class="primary"
             >Submit Ticket
-- 
GitLab