Merge branch 'LB-34' into 'master'

LB 34: Personnel Page Confirmation Box

See merge request platform-one/products/bullhorn/launchboard-fe!110

src/components/PersonnelTable.vue

 <template>
   <div>
+    <v-dialog
+      v-model="displayUserPermissionDialog"
+      persistent
+      width="500"
+      hide-overlay
+      id="user-permission-dialog"
+    >
+      <v-card class="ma-0">
+        <v-card-title> Confirm Permission Change </v-card-title>
+
+        <v-card-text class="text-left">
+          Are you sure you want to change your permission to "{{
+            permissionUserData.permission
+          }}"?
+        </v-card-text>
+
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn color="secondary" @click="cancelUserPermissionChange">
+            Cancel
+          </v-btn>
+          <v-btn color="primary" @click="confirmUserPermissionChange">
+            Confirm
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
     <div
       class="d-flex flex-wrap flex-sm-nowrap px-2 px-sm-4 mb-4 justify-space-between"
     >
@@ -69,7 +96,11 @@ import {
   DEFAULT_TABLE_OPTIONS,
 } from "@/config/table-constants";
 import { createDefaultPaginationParams } from "@/utils/tableHelpers";
-import { SET_ERROR_MESSAGE, SET_ERROR_DIALOG } from "@/store/mutation-types";
+import {
+  SET_USER,
+  SET_ERROR_MESSAGE,
+  SET_ERROR_DIALOG,
+} from "@/store/mutation-types";
 
 export default {
   name: "PersonnelTable",
@@ -141,6 +172,8 @@ export default {
         ],
       },
       permissionTypes: Permission,
+      displayUserPermissionDialog: false,
+      permissionUserData: {},
     };
   },
   async mounted() {
@@ -180,7 +213,6 @@ export default {
       } catch (error) {
         this.$store.commit(SET_ERROR_MESSAGE, error);
         this.$store.commit(SET_ERROR_DIALOG, true);
-        console.error("!personnel error!", error);
       } finally {
         this.loading = false;
         this.fetchingData = false;
@@ -203,7 +235,6 @@ export default {
         await this.fetchData({});
         this.personnel.selectedPersonnel = [];
       } catch (e) {
-        console.error("!personnel error!", e);
         this.$store.commit(SET_ERROR_MESSAGE, e);
         this.$store.commit(SET_ERROR_DIALOG, true);
       }
@@ -222,8 +253,35 @@ export default {
     getPersonnelListItems() {
       return this.personnel.listItems;
     },
-    async updateUserPermissions(userData) {
-      UserService.updateUserPermission([userData]);
+    updateUserPermissions(userData) {
+      this.permissionUserData = userData;
+      if (this.$store.state.user.user.name === userData.name) {
+        this.displayUserPermissionDialog = true;
+      } else {
+        this.setUserPermissions(userData);
+      }
+    },
+    async setUserPermissions(userData, activeUser) {
+      try {
+        await UserService.updateUserPermission([userData]);
+        if (activeUser) {
+          const user = await UserService.getUser();
+          this.$store.commit(SET_USER, user);
+          this.$router.push({ name: "Launchboard" });
+        }
+      } catch (e) {
+        this.$store.commit(SET_ERROR_MESSAGE, e);
+        this.$store.commit(SET_ERROR_DIALOG, true);
+        this.fetchData({});
+      }
+    },
+    cancelUserPermissionChange() {
+      this.fetchData({});
+      this.displayUserPermissionDialog = false;
+    },
+    confirmUserPermissionChange() {
+      this.setUserPermissions(this.permissionUserData, true);
+      this.displayUserPermissionDialog = false;
     },
   },
   watch: {

src/router/routes.js

 import NotAuthorizedComponent from "@/components/NotAuthorizedComponent";
 import NotFoundComponent from "@/components/NotFoundComponent";
-import store from "@/store";
 import Permission from "@/config/user-permissions";
 
 export default [
   {
     path: "/",
     name: "Launchboard",
-    component: async () => {
-      const user = store.state.user.user;
-
-      switch (user.permission) {
-        case Permission.ADMIN:
-          return import("@/views/admin/LaunchboardAdmin.vue");
-        case Permission.SUPER_ADMIN:
-          return import("@/views/super-admin/LaunchboardSuperAdmin.vue");
-        default:
-          return import("@/views/Launchboard.vue");
-      }
-    },
+    component: () => import("@/views/Home.vue"),
     meta: {
       title: "Platform One: Launchboard",
       bodyClass: "launchboard-page",

src/views/Home.vue

+<template>
+  <div>
+    <LaunchboardSuperAdmin v-if="isSuperAdmin" />
+    <LaunchboardAdmin v-else-if="isAdmin" />
+    <LaunchboardUser v-else />
+  </div>
+</template>
+
+<script>
+import LaunchboardUser from "@/views/user/LaunchboardUser";
+import LaunchboardAdmin from "@/views/admin/LaunchboardAdmin";
+import LaunchboardSuperAdmin from "@/views/super-admin/LaunchboardSuperAdmin";
+import Permission from "@/config/user-permissions";
+
+export default {
+  components: {
+    LaunchboardUser,
+    LaunchboardAdmin,
+    LaunchboardSuperAdmin,
+  },
+  name: "launchboard-home",
+  data: () => ({
+    Permission,
+  }),
+  computed: {
+    isAdmin() {
+      return this.$store.state.user.user.permission === Permission.ADMIN;
+    },
+    isSuperAdmin() {
+      return this.$store.state.user.user.permission === Permission.SUPER_ADMIN;
+    },
+  },
+};
+</script>

src/views/Launchboard.vue → src/views/user/LaunchboardUser.vue

 <template>
-  <div>
-    <v-container fluid class="px-2 px-md-4 px-lg-8 px-xl-16 pb-0">
-      <v-row>
-        <v-col cols="12" lg="6" class="d-flex flex-column pb-0 pb-lg-3">
-          <WelcomeTutorialModal
-            :showWelcomeMessage="displayTutorialModal && showWelcomeMessage"
-            :setDisplayTutorialModal="setDisplayTutorialModal"
-          />
-          <UserBanner
-            :name="user.name"
-            :company="user.organization"
-            :position="user.affiliation"
-            :avatar="user.avatar"
-          />
-          <Section class="mt-6" v-if="showWelcomeMessage">
-            <h4 slot="header" class="ma-0 pl-5 text-left">
-              Welcome to Platform One
-            </h4>
-            <WelcomeSummary slot="content" />
-          </Section>
+  <v-container fluid class="px-2 px-md-4 px-lg-8 px-xl-16 pb-0">
+    <v-row>
+      <v-col cols="12" lg="6" class="d-flex flex-column pb-0 pb-lg-3">
+        <WelcomeTutorialModal
+          :showWelcomeMessage="displayTutorialModal && showWelcomeMessage"
+          :setDisplayTutorialModal="setDisplayTutorialModal"
+        />
+        <UserBanner
+          :name="user.name"
+          :company="user.organization"
+          :position="user.affiliation"
+          :avatar="user.avatar"
+        />
+        <Section class="mt-6" v-if="showWelcomeMessage">
+          <h4 slot="header" class="ma-0 pl-5 text-left">
+            Welcome to Platform One
+          </h4>
+          <WelcomeSummary slot="content" />
+        </Section>
 
-          <Section class="mt-6">
-            <h4 slot="header" class="ma-0 pl-5 text-left">
-              My Curriculum Schedule
-            </h4>
-            <CurriculumSchedule slot="content" />
-          </Section>
-          <Section class="mt-6">
-            <h4 slot="header" class="ma-0 pl-5 text-left">
-              <TutorialTooltip tooltipName="helpDesk">
-                <span id="helpDeskTutorialTooltip"></span>
-              </TutorialTooltip>
-              Help Desk
-            </h4>
-            <HelpDeskSummary slot="content" />
-          </Section>
-        </v-col>
-        <v-col
-          cols="12"
-          lg="6"
-          class="d-flex flex-column py-0 pt-lg-3 mt-6 mt-lg-0"
-        >
-          <Section>
-            <h4 slot="header" class="ma-0 pl-5 text-left">
-              <TutorialTooltip tooltipName="projects">
-                <span id="projectsTutorialTooltip"></span>
-              </TutorialTooltip>
-              My Project Summary
-            </h4>
+        <Section class="mt-6">
+          <h4 slot="header" class="ma-0 pl-5 text-left">
+            My Curriculum Schedule
+          </h4>
+          <CurriculumSchedule slot="content" />
+        </Section>
+        <Section class="mt-6">
+          <h4 slot="header" class="ma-0 pl-5 text-left">
+            <TutorialTooltip tooltipName="helpDesk">
+              <span id="helpDeskTutorialTooltip"></span>
+            </TutorialTooltip>
+            Help Desk
+          </h4>
+          <HelpDeskSummary slot="content" />
+        </Section>
+      </v-col>
+      <v-col
+        cols="12"
+        lg="6"
+        class="d-flex flex-column py-0 pt-lg-3 mt-6 mt-lg-0"
+      >
+        <Section>
+          <h4 slot="header" class="ma-0 pl-5 text-left">
+            <TutorialTooltip tooltipName="projects">
+              <span id="projectsTutorialTooltip"></span>
+            </TutorialTooltip>
+            My Project Summary
+          </h4>
 
-            <span slot="header-right">
-              <v-tooltip top>
-                <template v-slot:activator="{ on, attrs }">
-                  <v-btn
-                    icon
-                    v-bind="attrs"
-                    v-on="on"
-                    @click="refreshProjectData"
-                    :loading="loadingProjectData"
-                  >
-                    <v-icon>mdi-refresh</v-icon>
-                  </v-btn>
-                </template>
-                <span>Refresh</span>
-              </v-tooltip>
-            </span>
-            <ProjectsSummary
-              slot="content"
-              ref="projectSummary"
-              :setProjectLoading="setProjectLoading"
-            />
-          </Section>
+          <span slot="header-right">
+            <v-tooltip top>
+              <template v-slot:activator="{ on, attrs }">
+                <v-btn
+                  icon
+                  v-bind="attrs"
+                  v-on="on"
+                  @click="refreshProjectData"
+                  :loading="loadingProjectData"
+                >
+                  <v-icon>mdi-refresh</v-icon>
+                </v-btn>
+              </template>
+              <span>Refresh</span>
+            </v-tooltip>
+          </span>
+          <ProjectsSummary
+            slot="content"
+            ref="projectSummary"
+            :setProjectLoading="setProjectLoading"
+          />
+        </Section>
 
-          <Section class="mt-6">
-            <h4 slot="header" class="ma-0 pl-5 text-left">
-              <TutorialTooltip tooltipName="tools">
-                <span id="toolsTutorialTooltip"></span>
-              </TutorialTooltip>
-              Tools
-            </h4>
-            <ToolsSummary slot="content" />
-          </Section>
-        </v-col>
-      </v-row>
-    </v-container>
-  </div>
+        <Section class="mt-6">
+          <h4 slot="header" class="ma-0 pl-5 text-left">
+            <TutorialTooltip tooltipName="tools">
+              <span id="toolsTutorialTooltip"></span>
+            </TutorialTooltip>
+            Tools
+          </h4>
+          <ToolsSummary slot="content" />
+        </Section>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>

tests/unit/Home.spec.js

+import { shallowMount, createLocalVue } from "@vue/test-utils";
+import Vuex from "vuex";
+import Permission from "@/config/user-permissions";
+import Home from "@/views/Home";
+import LaunchBoardUserHomePage from "@/views/user/LaunchboardUser";
+import LaunchBoardAdminHomePage from "@/views/admin/LaunchboardAdmin";
+import LaunchBoardSuperAdminHomePage from "@/views/super-admin/LaunchboardSuperAdmin";
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe("Home", () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it("should default to LaunchboardUser if permission does not match", async () => {
+    const wrapper = shallowMount(Home, {
+      mocks: {
+        $vuetify: { theme: { dark: false } },
+        $store: {
+          state: {
+            user: {
+              user: { name: "mock user", permission: "" },
+            },
+            error: {},
+            tutorial: {},
+            userPreferences: {
+              userPreference: {
+                darkMode: true,
+              },
+            },
+          },
+        },
+      },
+      localVue,
+    });
+
+    expect(wrapper.findComponent(LaunchBoardUserHomePage).exists()).toBe(true);
+    expect(wrapper.findComponent(LaunchBoardAdminHomePage).exists()).toBe(
+      false
+    );
+    expect(wrapper.findComponent(LaunchBoardSuperAdminHomePage).exists()).toBe(
+      false
+    );
+  });
+
+  it("should load LaunchboardUser if permission matches", async () => {
+    const wrapper = shallowMount(Home, {
+      mocks: {
+        $vuetify: { theme: { dark: false } },
+        $store: {
+          state: {
+            user: {
+              user: { name: "mock user", permission: Permission.USER },
+            },
+            error: {},
+            tutorial: {},
+            userPreferences: {
+              userPreference: {
+                darkMode: true,
+              },
+            },
+          },
+        },
+      },
+      localVue,
+    });
+
+    expect(wrapper.findComponent(LaunchBoardUserHomePage).exists()).toBe(true);
+    expect(wrapper.findComponent(LaunchBoardAdminHomePage).exists()).toBe(
+      false
+    );
+    expect(wrapper.findComponent(LaunchBoardSuperAdminHomePage).exists()).toBe(
+      false
+    );
+  });
+
+  it("should load LaunchboardAdmin if permission matches", async () => {
+    const wrapper = shallowMount(Home, {
+      mocks: {
+        $vuetify: { theme: { dark: false } },
+        $store: {
+          state: {
+            user: {
+              user: { name: "mock user", permission: Permission.ADMIN },
+            },
+            error: {},
+            tutorial: {},
+            userPreferences: {
+              userPreference: {
+                darkMode: true,
+              },
+            },
+          },
+        },
+      },
+      localVue,
+    });
+
+    expect(wrapper.findComponent(LaunchBoardUserHomePage).exists()).toBe(false);
+    expect(wrapper.findComponent(LaunchBoardAdminHomePage).exists()).toBe(true);
+    expect(wrapper.findComponent(LaunchBoardSuperAdminHomePage).exists()).toBe(
+      false
+    );
+  });
+
+  it("should load LaunchboardSuperAdmin if permission matches", async () => {
+    const wrapper = shallowMount(Home, {
+      mocks: {
+        $vuetify: { theme: { dark: false } },
+        $store: {
+          state: {
+            user: {
+              user: { name: "mock user", permission: Permission.SUPER_ADMIN },
+            },
+            error: {},
+            tutorial: {},
+            userPreferences: {
+              userPreference: {
+                darkMode: true,
+              },
+            },
+          },
+        },
+      },
+      localVue,
+    });
+
+    expect(wrapper.findComponent(LaunchBoardUserHomePage).exists()).toBe(false);
+    expect(wrapper.findComponent(LaunchBoardAdminHomePage).exists()).toBe(
+      false
+    );
+    expect(wrapper.findComponent(LaunchBoardSuperAdminHomePage).exists()).toBe(
+      true
+    );
+  });
+});

tests/unit/components/PersonnelTable.spec.js

@@ -4,6 +4,7 @@ import Vuex from "vuex";
 import PersonnelTable from "@/components/PersonnelTable.vue";
 import UserService from "@/api/services/user";
 import Permission from "@/config/user-permissions";
+import { SET_ERROR_MESSAGE, SET_ERROR_DIALOG } from "@/store/mutation-types";
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -28,15 +29,25 @@ describe("PersonnelTable", () => {
 
     UserService.updateUserPersonnelType = jest.fn().mockResolvedValue([]);
 
-    const store = new Vuex.Store({
-      state: {
-        user: {
-          user: { name: "mock user", permission: Permission.USER },
+    const wrapper = shallowMount(PersonnelTable, {
+      mocks: {
+        $vuetify: { theme: { dark: false } },
+        $store: {
+          commit: jest.fn(),
+          state: {
+            user: {
+              user: { name: "mock user", permission: Permission.USER },
+            },
+            error: {},
+            tutorial: {},
+            userPreferences: {
+              userPreference: {
+                darkMode: true,
+              },
+            },
+          },
         },
       },
-    });
-
-    const wrapper = shallowMount(PersonnelTable, {
       data() {
         return {
           personnel: {
@@ -45,7 +56,6 @@ describe("PersonnelTable", () => {
           params: {},
         };
       },
-      store,
       localVue,
     });
 
@@ -59,6 +69,57 @@ describe("PersonnelTable", () => {
     expect(wrapper.vm.userPermission).toEqual("User");
   });
 
+  it("should catch error when removing personnel", async () => {
+    UserService.getUsersByPersonnelType = jest
+      .fn()
+      .mockRejectedValue("mock error");
+
+    UserService.updateUserPersonnelType = jest
+      .fn()
+      .mockRejectedValue("mock error");
+
+    const wrapper = shallowMount(PersonnelTable, {
+      mocks: {
+        $vuetify: { theme: { dark: false } },
+        $store: {
+          commit: jest.fn(),
+          state: {
+            user: {
+              user: { name: "mock user", permission: Permission.USER },
+            },
+            error: {},
+            tutorial: {},
+            userPreferences: {
+              userPreference: {
+                darkMode: true,
+              },
+            },
+          },
+        },
+      },
+      data() {
+        return {
+          personnel: {
+            listItems: [{ id: 1 }],
+          },
+          params: {},
+        };
+      },
+      localVue,
+    });
+
+    wrapper.vm.personnel.selectedPersonnel = [{ id: 1 }];
+    await wrapper.vm.removePersonnel();
+    expect(wrapper.vm.$store.commit).toHaveBeenCalledWith(
+      SET_ERROR_MESSAGE,
+      "mock error"
+    );
+    expect(wrapper.vm.$store.commit).toHaveBeenCalledWith(
+      SET_ERROR_DIALOG,
+      true
+    );
+  });
+
   it("should send email to personnel", async () => {
     UserService.getUsersByPersonnelType = jest
       .fn()
@@ -110,11 +171,81 @@ describe("PersonnelTable", () => {
       .fn()
       .mockResolvedValue(mockUsersResponse);
 
-    const wrapper = shallowMount(PersonnelTable);
-    await wrapper.vm.updateUserPermissions();
+    const wrapper = shallowMount(PersonnelTable, {
+      mocks: {
+        $vuetify: { theme: { dark: false } },
+        $store: {
+          commit: jest.fn(),
+          state: {
+            user: {
+              user: { name: "mock user", permission: Permission.USER },
+            },
+            error: {},
+            tutorial: {},
+            userPreferences: {
+              userPreference: {
+                darkMode: true,
+              },
+            },
+          },
+        },
+      },
+      data() {
+        return {
+          personnel: {
+            listItems: [{ id: 1 }],
+          },
+          params: {},
+        };
+      },
+      localVue,
+    });
+    await wrapper.vm.updateUserPermissions({ name: "mock user2" });
     expect(UserService.updateUserPermission).toHaveBeenCalled();
   });
 
+  it("should trigger confirmation modal if user is updating their own permission", async () => {
+    UserService.getUsersByPersonnelType = jest
+      .fn()
+      .mockResolvedValue(mockUsersResponse);
+
+    UserService.updateUserPermission = jest
+      .fn()
+      .mockResolvedValue(mockUsersResponse);
+
+    const wrapper = shallowMount(PersonnelTable, {
+      mocks: {
+        $vuetify: { theme: { dark: false } },
+        $store: {
+          commit: jest.fn(),
+          state: {
+            user: {
+              user: { name: "mock user", permission: Permission.USER },
+            },
+            error: {},
+            tutorial: {},
+            userPreferences: {
+              userPreference: {
+                darkMode: true,
+              },
+            },
+          },
+        },
+      },
+      data() {
+        return {
+          personnel: {
+            listItems: [{ id: 1 }],
+          },
+          params: {},
+        };
+      },
+      localVue,
+    });
+    await wrapper.vm.updateUserPermissions({ name: "mock user" });
+    expect(UserService.updateUserPermission).toHaveBeenCalledTimes(0);
+  });
+
   it("should provide correct roleTypesDropdown", async () => {
     UserService.getUsersByPersonnelType = jest
       .fn()
@@ -169,4 +300,146 @@ describe("PersonnelTable", () => {
     expect(wrapper.vm.fetchDebounced).toHaveBeenCalledTimes(1);
     expect(wrapper.vm.params.pageSize).toEqual(mockOptions.itemsPerPage);
   });
+
+  it("should setUserPermissions", async () => {
+    UserService.getUsersByPersonnelType = jest
+      .fn()
+      .mockResolvedValue(mockUsersResponse);
+    UserService.updateUserPermission = jest.fn();
+
+    UserService.getUser = jest
+      .fn()
+      .mockResolvedValue({ name: "mock user", permission: "User" });
+
+    const wrapper = shallowMount(PersonnelTable, {
+      mocks: {
+        $vuetify: { theme: { dark: false } },
+        $store: {
+          commit: jest.fn(),
+          state: {
+            user: {
+              user: { name: "mock user", permission: Permission.SUPER_ADMIN },
+            },
+            error: {},
+            tutorial: {},
+            userPreferences: {
+              userPreference: {
+                darkMode: true,
+              },
+            },
+          },
+        },
+      },
+      data() {
+        return {
+          personnel: {
+            listItems: [{ id: 1 }],
+          },
+          params: {},
+        };
+      },
+      localVue,
+    });
+
+    wrapper.vm.personnel.selectedPersonnel = [{ id: 1 }];
+    await wrapper.vm.setUserPermissions(
+      {
+        name: "mock user",
+        permission: "User",
+      },
+      true
+    );
+    expect(wrapper.vm.$store.commit).toHaveBeenCalledWith("user/setUser", {
+      name: "mock user",
+      permission: "User",
+    });
+  });
+
+  it("should cancelUserPermissionChange", async () => {
+    UserService.getUsersByPersonnelType = jest
+      .fn()
+      .mockResolvedValue(mockUsersResponse);
+
+    const wrapper = shallowMount(PersonnelTable, {
+      mocks: {
+        $vuetify: { theme: { dark: false } },
+        $store: {
+          commit: jest.fn(),
+          state: {
+            user: {
+              user: { name: "mock user", permission: Permission.SUPER_ADMIN },
+            },
+            error: {},
+            tutorial: {},
+            userPreferences: {
+              userPreference: {
+                darkMode: true,
+              },
+            },
+          },
+        },
+      },
+      data() {
+        return {
+          displayUserPermissionDialog: true,
+          personnel: {
+            listItems: [{ id: 1 }],
+          },
+          params: {},
+        };
+      },
+      localVue,
+    });
+    wrapper.vm.fetchData = jest.fn().mockResolvedValue({ test: "test" });
+    await wrapper.vm.cancelUserPermissionChange();
+    expect(wrapper.vm.fetchData).toHaveBeenCalled();
+    expect(wrapper.vm.displayUserPermissionDialog).toEqual(false);
+  });
+
+  it("should confirmUserPermissionChange", async () => {
+    UserService.getUsersByPersonnelType = jest
+      .fn()
+      .mockResolvedValue(mockUsersResponse);
+
+    const wrapper = shallowMount(PersonnelTable, {
+      mocks: {
+        $vuetify: { theme: { dark: false } },
+        $store: {
+          commit: jest.fn(),
+          state: {
+            user: {
+              user: { name: "mock user", permission: Permission.SUPER_ADMIN },
+            },
+            error: {},
+            tutorial: {},
+            userPreferences: {
+              userPreference: {
+                darkMode: true,
+              },
+            },
+          },
+        },
+      },
+      data() {
+        return {
+          permissionUserData: { name: "mock user" },
+          displayUserPermissionDialog: true,
+          personnel: {
+            listItems: [{ id: 1 }],
+          },
+          params: {},
+        };
+      },
+      localVue,
+    });
+    wrapper.vm.setUserPermissions = jest.fn();
+    await wrapper.vm.confirmUserPermissionChange();
+    expect(wrapper.vm.setUserPermissions).toHaveBeenCalledWith(
+      {
+        name: "mock user",
+      },
+      true
+    );
+    expect(wrapper.vm.displayUserPermissionDialog).toEqual(false);
+  });
 });

tests/unit/router/index.spec.js

 import { shallowMount, createLocalVue } from "@vue/test-utils";
 import App from "@/App";
 import Vuex from "vuex";
-import flushPromises from "flush-promises";
-import LaunchBoardUserHomePage from "@/views/Launchboard.vue";
-import LaunchBoardAdminHomePage from "@/views/admin/LaunchboardAdmin.vue";
-import LaunchBoardSuperAdminHomePage from "@/views/super-admin/LaunchboardSuperAdmin.vue";
 import VueRouter from "vue-router";
 import routes from "@/router/routes";
 import Permission from "@/config/user-permissions";
@@ -24,54 +20,16 @@ describe("router", () => {
     jest.clearAllMocks();
   });
 
-  it("should have default path with correct component for Admin", async () => {
-    store.commit(SET_USER, {
-      name: "mock user",
-      permission: Permission.ADMIN,
-    });
-
-    window.scrollTo = jest.fn();
-
-    shallowMount(App, { localVue, router });
-    await flushPromises();
-    expect(router.currentRoute.fullPath).toEqual("/");
-    expect(router.currentRoute.matched[0].components.default.name).toEqual(
-      LaunchBoardAdminHomePage.name
-    );
-  });
-
-  it("should have default path with correct component for user", async () => {
-    store.commit(SET_USER, {
-      name: "mock user",
-      permission: Permission.USER,
-    });
-
+  it("should have default path and load Home component", async () => {
     window.scrollTo = jest.fn();
 
-    shallowMount(App, { localVue, router });
-    await flushPromises();
-
-    expect(router.currentRoute.fullPath).toEqual("/");
-    expect(router.currentRoute.matched[0].components.default.name).toEqual(
-      LaunchBoardUserHomePage.name
-    );
-  });
-  it("should have default path with correct component for Super Admin", async () => {
-    store.commit(SET_USER, {
-      name: "mock user",
-      permission: Permission.SUPER_ADMIN,
-    });
-    window.scrollTo = jest.fn();
-
-    shallowMount(App, { localVue, router });
-    await flushPromises();
+    const wrapper = shallowMount(App, { localVue, router });
+    await wrapper.vm.$router.push("/");
 
     expect(router.currentRoute.fullPath).toEqual("/");
     expect(router.currentRoute.matched[0].components.default.name).toEqual(
-      LaunchBoardSuperAdminHomePage.name
+      (await import("@/views/Home.vue")).default.name
     );
-
-    await flushPromises();
   });
 
   it("should update scroll position", async () => {

tests/unit/views/Launchboard.spec.js → tests/unit/views/user/LaunchboardUser.spec.js

 import { shallowMount, createLocalVue } from "@vue/test-utils";
-import Launchboard from "@/views/Launchboard.vue";
+import LaunchboardUser from "@/views/user/LaunchboardUser.vue";
 import Vuex from "vuex";
 import Permission from "@/config/user-permissions";
 //import userPreference from "../../../src/api/services/userPreference";
@@ -9,7 +9,7 @@ import Permission from "@/config/user-permissions";
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-describe("Launchboard", () => {
+describe("LaunchboardUser", () => {
   it("should get user from store", async () => {
     const store = new Vuex.Store({
       state: {
@@ -24,7 +24,7 @@ describe("Launchboard", () => {
         },
       },
     });
-    const wrapper = shallowMount(Launchboard, { store, localVue });
+    const wrapper = shallowMount(LaunchboardUser, { store, localVue });
     expect(wrapper.vm.user).toEqual({
       name: "mock user",
       permission: Permission.USER,
@@ -45,7 +45,7 @@ describe("Launchboard", () => {
         },
       },
     });
-    const wrapper = shallowMount(Launchboard, { store, localVue });
+    const wrapper = shallowMount(LaunchboardUser, { store, localVue });
 
     wrapper.vm.user = {
       auth: {
@@ -69,7 +69,7 @@ describe("Launchboard", () => {
         },
       },
     });
-    const wrapper = shallowMount(Launchboard, { store, localVue });
+    const wrapper = shallowMount(LaunchboardUser, { store, localVue });
 
     wrapper.vm.user = {
       auth: {
@@ -96,7 +96,7 @@ describe("Launchboard", () => {
         },
       },
     });
-    const wrapper = shallowMount(Launchboard, { store, localVue });
+    const wrapper = shallowMount(LaunchboardUser, { store, localVue });
 
     wrapper.vm.user = {
       auth: {