BULL-797: Update unit test

src/scss/custom.scss

@@ -177,9 +177,31 @@ body {
     }
   }
   // custom styles for tables in mobile view
+  .theme--light .lb-mobile-enabled {
+    tr.v-data-table__expanded__content {
+      // background: #010e19;
+      color: #000000;
+      a {
+        &:not(.primary--text) {
+          color: #000000 !important;
+        }
+      }
+    }
+  }
+  .theme--dark .lb-mobile-enabled {
+    tr.v-data-table__expanded__content {
+      background: #010e19;
+      color: #ffffff;
+      a {
+        &:not(.primary--text) {
+          color: #ffffff !important;
+        }
+      }
+    }
+  }
   .lb-mobile-enabled {
     &.lb-mobile-no-checkbox {
-      ::v-deep .v-data-table__wrapper {
+      .v-data-table__wrapper {
         .v-data-table__mobile-table-row {
           > .v-data-table__mobile-row {
             &:nth-child(1) {
@@ -193,7 +215,7 @@ body {
         }
       }
     }
-    ::v-deep .v-data-table__wrapper {
+    .v-data-table__wrapper {
       .v-data-table__mobile-table-row {
         display: flex;
         > .v-data-table__mobile-row {
@@ -211,15 +233,10 @@ body {
       }
     }
     tr.v-data-table__expanded__content {
-      background: #010e19;
-      color: #ffffff;
       td {
         background-color: transparent !important;
       }
       a {
-        &:not(.primary--text) {
-          color: #ffffff !important;
-        }
         &.primary--text {
           color: var(--v-primary-base) !important;
         }
@@ -451,6 +468,9 @@ body {
         background-color: $table-row-even-bg-light;
       }
       table > tbody > tr {
+        .v-expansion-panel-header {
+          background-color: transparent;
+        }
         &:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper)
           td {
           background-color: darken($table-row-odd-bg-light, 15%) !important;
@@ -513,6 +533,16 @@ body {
   }
 
   .v-data-table {
+    tr.deleting {
+      opacity: 0.4;
+      pointer-events: none;
+    }
+    .v-skeleton-loader__table-row .v-skeleton-loader__table-cell,
+    .v-skeleton-loader__table-thead .v-skeleton-loader__heading {
+      &:nth-last-child(-n + 2) {
+        display: none;
+      }
+    }
     a:hover:not(.v-btn--icon) {
       text-decoration: underline;
     }

src/store/modules/error.js

-import { SET_ERROR_MESSAGE } from "@/store/mutation-types";
-import { SET_ERROR_DIALOG } from "@/store/mutation-types";
+import { SET_ERROR_MESSAGE, SET_ERROR_DIALOG } from "@/store/mutation-types";
 import { GET_ERROR_MESSAGE } from "@/store/getter-types";
 
 // initial state

src/views/Team.vue

@@ -98,15 +98,27 @@
         <v-data-table
           v-else
           id="team-table"
-          :headers="headers"
+          :headers="header"
           :items="team.members"
           v-model="selectedMembers"
           :item-class="itemClass"
           show-select
+          :options.sync="options"
+          :disable-sort="onMobile"
+          :show-expand="onMobile"
+          :expanded.sync="expanded"
+          :hide-default-header="onMobile"
+          calculate-widths
           hide-default-footer
           :multi-sort="false"
-          mobile-breakpoint="800"
-          class="background-transparent position-relative v-table-header"
+          :mobile-breakpoint="mobileBreakpoint"
+          expand-icon="mdi-chevron-right"
+          class="
+            lb-mobile-enabled
+            background-transparent
+            position-relative
+            v-table-header
+          "
         >
           <template v-slot:top>
             <!--
@@ -234,6 +246,27 @@
               </v-btn>
             </div>
           </template>
+          <template v-slot:expanded-item="{ item }" v-if="onMobile">
+            <td class="text-start">
+              <div class="mt-2 ml-10 mt-5 pl-4">
+                <p>{{ item.role }}</p>
+              </div>
+              <div class="mt-2 ml-10 mt-5 pl-4">
+                <a :href="`mailto:${item.email}`">
+                  {{ item.email }}
+                </a>
+              </div>
+              <div class="mt-2 ml-10 mt-5 pl-4">
+                <a
+                  target="_blank"
+                  rel="noopener"
+                  :href="`https://chat.il2.dso.mil/platform-one/messages/@${item.username}`"
+                >
+                  @{{ item.username }}
+                </a>
+              </div>
+            </td>
+          </template>
         </v-data-table>
 
         <v-snackbar
@@ -287,6 +320,7 @@ import inputRules from "@/utils/inputRules";
 import Permission from "@/config/user-permissions";
 import { SET_ERROR_MESSAGE, SET_ERROR_DIALOG } from "@/store/mutation-types";
 import BaseDialog from "@/components/Dialogs/BaseDialog";
+import { DEFAULT_TABLE_OPTIONS } from "@/config/table-constants";
 
 export default {
   components: {
@@ -327,6 +361,13 @@ export default {
       isAddingBusy: false,
       showAddToCourseDialog: false,
     },
+    mobileBreakpoint: 800,
+    options: DEFAULT_TABLE_OPTIONS,
+    expanded: [],
+    mobileHeaders: [
+      { text: "Name", value: "name", width: "200px" },
+      { text: "", value: "data-table-expand", align: "end" },
+    ],
     headers: [
       { text: "Name", value: "name", width: "200px" },
       { text: "Role", value: "role", width: "200px" },
@@ -521,16 +562,14 @@ export default {
       return !isDuplicate;
     },
     canEdit() {
-      // TODO: pull this from user info
-      return true;
+      return this.permission;
     },
     emailSelectedHref() {
       if (this.selectedMembers.length === 0) {
         return null;
       }
       const emails = this.selectedMembers.map((m) => m.email);
-      const v = `mailto:${emails.join(",")}`;
-      return v;
+      return `mailto:${emails.join(",")}`;
     },
     deletingMessage() {
       if (this.deletingMembers.length > 1) {
@@ -539,6 +578,12 @@ export default {
         return `${this.deletingMembers[0].name} removed from ${this.team.name}`;
       }
     },
+    onMobile() {
+      return this.$vuetify.breakpoint.width < this.mobileBreakpoint;
+    },
+    header() {
+      return this.onMobile ? this.mobileHeaders : this.headers;
+    },
   },
 };
 </script>
@@ -553,18 +598,5 @@ export default {
       margin-top: 1px;
     }
   }
-  tr.deleting {
-    &,
-    td.v-data-table__mobile-row {
-      opacity: 0.5;
-      pointer-events: none;
-    }
-  }
-  .v-skeleton-loader__table-row .v-skeleton-loader__table-cell,
-  .v-skeleton-loader__table-thead .v-skeleton-loader__heading {
-    &:nth-last-child(-n + 2) {
-      display: none;
-    }
-  }
 }
 </style>

src/views/super-admin/Personnel.vue

@@ -321,9 +321,4 @@ export default {
     }
   }
 }
-tr.v-data-table__expanded__content {
-  background: #002743 !important;
-  box-shadow: none;
-  color: white;
-}
 </style>

src/views/super-admin/Teams.vue

@@ -8,18 +8,24 @@
       >
         <v-data-table
           id="teams-table"
-          :headers="headers"
+          :headers="header"
           :loading="fetchingData"
           :items="teams"
           v-model="selectedTeams"
           :item-class="itemClass"
           :options.sync="options"
+          :disable-sort="onMobile"
+          :show-expand="onMobile"
+          :hide-default-header="onMobile"
           :footer-props="footerProps"
           :server-items-length="total"
+          :expanded.sync="expanded"
+          calculate-widths
           show-select
-          mobile-breakpoint="800"
+          :mobile-breakpoint="mobileBreakpoint"
+          expand-icon="mdi-chevron-right"
           loading-text="Loading Teams ..."
-          class="background-transparent position-relative"
+          class="lb-mobile-enabled background-transparent position-relative"
           :hide-default-footer="teams.length === 0"
         >
           <template v-slot:top>
@@ -112,8 +118,27 @@
               {{ item.endDate }}
             </div>
           </template>
+          <template v-slot:expanded-item="{ item }" v-if="onMobile">
+            <td class="text-start">
+              <div class="row" v-for="lead in item.leads" :key="lead.name">
+                <a
+                  :href="`mailto:${lead.email}`"
+                  target="_blank"
+                  rel="noopener"
+                  class="lead-name col-12"
+                  >{{ lead.name }}</a
+                >
+                <a
+                  :href="`mailto:${lead.email}`"
+                  target="_blank"
+                  rel="noopener"
+                  class="lead-name col-12"
+                  >{{ lead.email }}</a
+                >
+              </div>
+            </td>
+          </template>
         </v-data-table>
-
         <div class="d-flex flex-wrap mt-5 mb-3">
           <v-tooltip top>
             <template v-slot:activator="{ on, attrs }">
@@ -236,6 +261,12 @@ export default {
       isAdding: false,
       isAddingBusy: false,
     },
+    mobileBreakpoint: 800,
+    expanded: [],
+    mobileHeaders: [
+      { text: "Name", value: "name", width: "200px" },
+      { text: "", value: "data-table-expand", align: "end" },
+    ],
     headers: [
       { text: "Team", value: "name", fixed: true, width: "200px" },
       { text: "POC", value: "poc", width: "200px" },
@@ -405,6 +436,12 @@ export default {
         return `${this.deletingTeams[0].name} removed`;
       }
     },
+    onMobile() {
+      return this.$vuetify.breakpoint.width < this.mobileBreakpoint;
+    },
+    header() {
+      return this.onMobile ? this.mobileHeaders : this.headers;
+    },
   },
 };
 </script>

src/views/super-admin/Training.vue

@@ -19,7 +19,7 @@
           :disable-sort="onMobile"
           calculate-widths
           loading-text="Loading Courses..."
-          class="background-transparent position-relative lb-mobile-enabled"
+          class="lb-mobile-enabled background-transparent position-relative"
           :show-expand="onMobile"
           :expanded.sync="expanded"
           :hide-default-footer="courses.length === 0"
@@ -634,16 +634,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 #training-table {
-  tr.deleting {
-    opacity: 0.4;
-    pointer-events: none;
-  }
-  .v-skeleton-loader__table-row .v-skeleton-loader__table-cell,
-  .v-skeleton-loader__table-thead .v-skeleton-loader__heading {
-    &:nth-last-child(-n + 2) {
-      display: none;
-    }
-  }
   .availability-bar {
     min-width: 120px;
     width: 120px;

tests/unit/api/services/status.spec.js

-import StatusService from "../../../../src/api/services/status";
-import { HTTP } from "@/api/mock-http-common";
-
-describe("services/status", () => {
-  describe("should call HTTP", () => {
-    test("getStatusSummary", async () => {
-      HTTP.get = jest.fn().mockResolvedValue({ test: "test" });
-      await StatusService.getStatusSummary();
-      expect(HTTP.get).toHaveBeenCalled();
-    });
-  });
-});

tests/unit/components/AllCurriculumSchedule.spec.js

-import { shallowMount } from "@vue/test-utils";
-import TrainingService from "@/api/services/training";
-import AllCurriculumSchedule from "@/components/AllCurriculumSchedule.vue";
-import flushPromises from "flush-promises";
-
-describe("AllCurriculumSchedule", () => {
-  it("should get schedule from api", async () => {
-    const mockSchedule = [{ name: "course1" }, { name: "course2" }];
-    TrainingService.getCourses = jest
-      .fn()
-      .mockResolvedValue({ courses: mockSchedule });
-
-    const wrapper = shallowMount(AllCurriculumSchedule);
-    expect(wrapper.vm.loading).toEqual(true);
-    await flushPromises();
-    expect(wrapper.vm.schedule).toEqual(mockSchedule);
-    expect(wrapper.vm.loading).toEqual(false);
-  });
-
-  it("should set loading to false on error", async () => {
-    console.error = jest.fn(); // mock console.error when expecting error messages
-    TrainingService.getCourses = jest.fn().mockRejectedValue("mock error");
-
-    const wrapper = shallowMount(AllCurriculumSchedule);
-    expect(wrapper.vm.loading).toEqual(true);
-    await flushPromises();
-    expect(wrapper.vm.loading).toEqual(false);
-  });
-
-  it("should set emptyString to true", async () => {
-    TrainingService.getCourses = jest.fn().mockResolvedValue({ courses: [] });
-
-    const wrapper = shallowMount(AllCurriculumSchedule);
-    expect(wrapper.vm.loading).toEqual(true);
-    await flushPromises();
-    expect(wrapper.vm.schedule).toEqual([]);
-    expect(wrapper.vm.loading).toEqual(false);
-  });
-});

tests/unit/components/CurriculumSchedule.spec.js

@@ -3,6 +3,8 @@ import ScheduleService from "@/api/services/schedule";
 import CurriculumSchedule from "@/components/CurriculumSchedule.vue";
 import { SET_ERROR_MESSAGE, SET_ERROR_DIALOG } from "@/store/mutation-types";
 import flushPromises from "flush-promises";
+import Vuetify from "vuetify";
+const vuetify = new Vuetify();
 
 describe("CurriculumSchedule", () => {
   const mockSchedule = [
@@ -16,7 +18,7 @@ describe("CurriculumSchedule", () => {
       .fn()
       .mockResolvedValue({ registrations: mockSchedule });
 
-    const wrapper = shallowMount(CurriculumSchedule);
+    const wrapper = shallowMount(CurriculumSchedule, { vuetify });
     expect(wrapper.vm.loading).toEqual(true);
     await flushPromises();
     expect(wrapper.vm.registrations).toEqual(mockSchedule);
@@ -27,7 +29,7 @@ describe("CurriculumSchedule", () => {
     console.error = jest.fn(); // mock console.error when expecting error messages
     ScheduleService.getScheduleForUser = jest.fn().mockRejectedValue(mockError);
 
-    const wrapper = shallowMount(CurriculumSchedule);
+    const wrapper = shallowMount(CurriculumSchedule, { vuetify });
     expect(wrapper.vm.loading).toEqual(true);
     await flushPromises();
     expect(wrapper.vm.loading).toEqual(false);
@@ -42,6 +44,7 @@ describe("CurriculumSchedule", () => {
       mocks: {
         $store: { commit: mockCommit },
       },
+      vuetify,
     });
     await flushPromises();
 
@@ -68,6 +71,7 @@ describe("CurriculumSchedule", () => {
           },
         },
       },
+      vuetify,
     });
     wrapper.vm.getCertificate(mockCourse);
     await flushPromises();
@@ -100,6 +104,7 @@ describe("CurriculumSchedule", () => {
           },
         },
       },
+      vuetify,
     });
     wrapper.vm.getCertificate(mockCourse);
     await flushPromises();

tests/unit/components/Dialogs/DialogComponents/UserSelectForCourse.spec.js

@@ -66,7 +66,6 @@ describe("UserSelectForCourse", () => {
     });
 
     expect(wrapper.vm.selectedMembers).toEqual([]);
-    expect(typeof wrapper.vm.updateCourseMembers).toEqual("function");
   });
   it("test forceUserSelectHint remaining seats", async () => {
     const wrapper = shallowMount(UserSelectForCourse, {

tests/unit/components/InstructorCourses.spec.js

-import { shallowMount } from "@vue/test-utils";
-import TrainingService from "@/api/services/training";
-import InstructorCourses from "@/components/InstructorCourses.vue";
-import flushPromises from "flush-promises";
-
-describe("InstructorCourses", () => {
-  it("should get courses from api", async () => {
-    const mockSchedule = [{ name: "course1" }, { name: "course2" }];
-    TrainingService.getCourses = jest
-      .fn()
-      .mockResolvedValue({ courses: mockSchedule });
-
-    const wrapper = shallowMount(InstructorCourses);
-    expect(wrapper.vm.loading).toEqual(true);
-    await flushPromises();
-    expect(wrapper.vm.schedule).toEqual(mockSchedule);
-    expect(wrapper.vm.loading).toEqual(false);
-  });
-
-  it("should set loading to false on error", async () => {
-    console.error = jest.fn(); // mock console.error when expecting error messages
-    TrainingService.getCourses = jest.fn().mockRejectedValue("mock error");
-
-    const wrapper = shallowMount(InstructorCourses);
-    expect(wrapper.vm.loading).toEqual(true);
-    await flushPromises();
-    expect(wrapper.vm.loading).toEqual(false);
-  });
-
-  it("should set emptyString to true", async () => {
-    TrainingService.getCourses = jest.fn().mockResolvedValue({ courses: [] });
-
-    const wrapper = shallowMount(InstructorCourses);
-    expect(wrapper.vm.loading).toEqual(true);
-    await flushPromises();
-    expect(wrapper.vm.schedule).toEqual([]);
-    expect(wrapper.vm.loading).toEqual(false);
-  });
-});

tests/unit/components/RemainingSeats.spec.js

-import { shallowMount } from "@vue/test-utils";
-import TrainingService from "@/api/services/training";
-import RemainingSeats from "@/components/RemainingSeats.vue";
-import flushPromises from "flush-promises";
-
-describe("RemainingSeats", () => {
-  it("should get schedule from api", async () => {
-    const mockSchedule = [{ name: "course1" }, { name: "course2" }];
-    TrainingService.getCourses = jest
-      .fn()
-      .mockResolvedValue({ courses: mockSchedule });
-
-    const wrapper = shallowMount(RemainingSeats);
-    expect(wrapper.vm.loading).toEqual(true);
-    await flushPromises();
-    expect(wrapper.vm.schedule).toEqual(mockSchedule);
-    expect(wrapper.vm.loading).toEqual(false);
-  });
-
-  it("should set loading to false on error", async () => {
-    console.error = jest.fn(); // mock console.error when expecting error messages
-    TrainingService.getCourses = jest.fn().mockRejectedValue("mock error");
-
-    const wrapper = shallowMount(RemainingSeats);
-    expect(wrapper.vm.loading).toEqual(true);
-    await flushPromises();
-    expect(wrapper.vm.loading).toEqual(false);
-  });
-
-  it("should set emptyString to true", async () => {
-    TrainingService.getCourses = jest.fn().mockResolvedValue({ courses: [] });
-
-    const wrapper = shallowMount(RemainingSeats);
-    expect(wrapper.vm.loading).toEqual(true);
-    await flushPromises();
-    expect(wrapper.vm.schedule).toEqual([]);
-    expect(wrapper.vm.loading).toEqual(false);
-  });
-});

tests/unit/components/SystemStatusSummary.spec.js

-import Vuex from "vuex";
-import Vuetify from "vuetify";
-import { shallowMount, createLocalVue } from "@vue/test-utils";
-import SystemStatusSummary from "@/components/SystemStatusSummary";
-
-const vuetify = new Vuetify();
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-test("SystemStatusSummary", () => {
-  // render the component
-  const wrapper = shallowMount(SystemStatusSummary, {
-    mocks: {
-      $store: {
-        state: {
-          error: {},
-        },
-      },
-    },
-    localVue,
-    vuetify,
-  });
-
-  // assert the component loads without error
-  expect(wrapper.find(".error").exists()).toBe(false);
-});

tests/unit/views/admin/LaunchboardAdmin.spec.js

-import { shallowMount, createLocalVue } from "@vue/test-utils";
-import Vuex from "vuex";
-import LaunchboardSuperAdmin from "@/views/super-admin/LaunchboardSuperAdmin.vue";
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-describe("LaunchboardAdmin", () => {
-  it("should get user from store", async () => {
-    const wrapper = shallowMount(
-      LaunchboardSuperAdmin,
-      {
-        mocks: {
-          $store: {
-            state: {
-              error: {},
-              user: {
-                user: { name: "mock user" },
-              },
-              userPreferences: { userPreference: {} },
-            },
-            commit: jest.fn(),
-          },
-        },
-      },
-      localVue
-    );
-    console.log("store", wrapper.vm.$store);
-    expect(wrapper.vm.user.name).toEqual("mock user");
-  });
-});

tests/unit/views/super-admin/Teams.spec.js

@@ -4,7 +4,8 @@ import TeamService from "@/api/services/team";
 import Vuex from "vuex";
 import { SET_ERROR_MESSAGE } from "@/store/mutation-types";
 import Vue from "vue";
-
+import Vuetify from "vuetify";
+const vuetify = new Vuetify();
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
@@ -16,20 +17,18 @@ describe("Teams", () => {
     TeamService.getTeams = jest
       .fn()
       .mockResolvedValue({ teams: [], meta: { total: 0 } });
-    const wrapper = shallowMount(
-      Teams,
-      {
-        mocks: {
-          $store: {
-            state: {
-              error: {},
-            },
-            commit: jest.fn(),
+    const wrapper = shallowMount(Teams, {
+      mocks: {
+        $store: {
+          state: {
+            error: {},
           },
+          commit: jest.fn(),
         },
       },
-      localVue
-    );
+      localVue,
+      vuetify,
+    });
     wrapper.vm.fetchDebounced();
     wrapper.vm.fetchDebounced();
     wrapper.vm.fetchDebounced();
@@ -55,20 +54,18 @@ describe("Teams", () => {
     console.error = jest.fn();
     TeamService.getTeams = jest.fn().mockRejectedValue("mock error");
 
-    const wrapper = shallowMount(
-      Teams,
-      {
-        mocks: {
-          $store: {
-            state: {
-              error: {},
-            },
-            commit: jest.fn(),
+    const wrapper = shallowMount(Teams, {
+      mocks: {
+        $store: {
+          state: {
+            error: {},
           },
+          commit: jest.fn(),
         },
       },
-      localVue
-    );
+      localVue,
+      vuetify,
+    });
     wrapper.vm.fetchData();
 
     // wait for debounce to trigger
@@ -87,20 +84,18 @@ describe("Teams", () => {
   it("should add team", async () => {
     TeamService.addTeam = jest.fn().mockResolvedValue({ id: 1 });
     TeamService.addMembers = jest.fn().mockResolvedValue();
-    const wrapper = shallowMount(
-      Teams,
-      {
-        mocks: {
-          $store: {
-            state: {
-              error: {},
-            },
-            commit: jest.fn(),
+    const wrapper = shallowMount(Teams, {
+      mocks: {
+        $store: {
+          state: {
+            error: {},
           },
+          commit: jest.fn(),
         },
       },
-      localVue
-    );
+      localVue,
+      vuetify,
+    });
     const mockTeam = { name: "mock team" };
     const mockTeamMember = [{ name: "mock member" }];
     await wrapper.vm.addTeam(mockTeam, mockTeamMember);
@@ -128,20 +123,18 @@ describe("Teams", () => {
   it("should remove selected teams", async () => {
     TeamService.deleteTeams = jest.fn().mockResolvedValue([1, 2]);
 
-    const wrapper = shallowMount(
-      Teams,
-      {
-        mocks: {
-          $store: {
-            state: {
-              error: {},
-            },
-            commit: jest.fn(),
+    const wrapper = shallowMount(Teams, {
+      mocks: {
+        $store: {
+          state: {
+            error: {},
           },
+          commit: jest.fn(),
         },
       },
-      localVue
-    );
+      localVue,
+      vuetify,
+    });
     const mockTeams = [
       { name: "mock team1", id: 1 },
       { name: "mock team2", id: 2 },
@@ -164,14 +157,14 @@ describe("Teams", () => {
     expect(wrapper.vm.selectedTeams).toHaveLength(0);
   });
   it("should compute css class for teams", async () => {
-    const wrapper = shallowMount(Teams);
+    const wrapper = shallowMount(Teams, { vuetify });
 
     expect(wrapper.vm.itemClass({})).toEqual([]);
     expect(wrapper.vm.itemClass({ isDeleting: true })).toEqual(["deleting"]);
   });
 
   it("should compute deletingMessage", async () => {
-    const wrapper = shallowMount(Teams);
+    const wrapper = shallowMount(Teams, { vuetify });
 
     wrapper.vm.deletingTeams = [{ name: "mock team 1" }];
     expect(wrapper.vm.deletingMessage).toEqual("mock team 1 removed");
@@ -184,20 +177,18 @@ describe("Teams", () => {
     expect(wrapper.vm.deletingMessage).toEqual("3 teams removed");
   });
   it("should undo delete", async () => {
-    const wrapper = shallowMount(
-      Teams,
-      {
-        mocks: {
-          $store: {
-            state: {
-              error: {},
-            },
-            commit: jest.fn(),
+    const wrapper = shallowMount(Teams, {
+      mocks: {
+        $store: {
+          state: {
+            error: {},
           },
+          commit: jest.fn(),
         },
       },
-      localVue
-    );
+      localVue,
+      vuetify,
+    });
 
     TeamService.addTeams = jest.fn().mockResolvedValue();
 
@@ -218,7 +209,7 @@ describe("Teams", () => {
   });
 
   it("should fetch on options change", async () => {
-    const wrapper = shallowMount(Teams);
+    const wrapper = shallowMount(Teams, { vuetify });
     wrapper.vm.fetchDebounced = jest.fn();
 
     wrapper.vm.filter.search = "mock search";