Implemented GUI test files

package.json

@@ -8,7 +8,9 @@
     "serve": "vite --host",
     "build": "vite build",
     "preview": "vite preview --host",
+    "test": "vitest run",
     "test:unit": "vitest",
+    "test:watch": "vitest --watch",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore  && npm run lint:success || true",
     "lint:success": "echo No lint errors found!",
     "format": "prettier --write src/"
@@ -48,7 +50,7 @@
     "@rushstack/eslint-patch": "^1.3.2",
     "@vitejs/plugin-vue": "^4.4.0",
     "@vue/eslint-config-prettier": "^8.0.0",
-    "@vue/test-utils": "^2.4.1",
+    "@vue/test-utils": "2.4.6",
     "eslint": "^8.45.0",
     "eslint-plugin-vue": "^9.15.1",
     "jsdom": "^22.1.0",
@@ -59,7 +61,7 @@
     "vite": "5.2.10",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-sass": "0.1.0",
-    "vitest": "^0.33.0"
+    "vitest": "0.33.0"
   },
   "lint-staged": {
     "*.{js,vue}": [

src/assets/styles/bmc/custom/_alert.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+@use '../helpers/variables';
 .alert {
   display: flex;
   padding: $spacer;

src/assets/styles/bmc/custom/_buttons.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 .btn {
   padding-top: math.div($spacer, 2);
   padding-right: $spacer;

src/assets/styles/bmc/custom/_dropdown.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 // Make calendar visible over the table
 .dropdown-menu {
   z-index: $zindex-dropdown + 1;

src/assets/styles/bmc/custom/_forms.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+@import '../helpers/variables';
 // Helper text
 .form-text {
   font-size: $form-label-font-size;

src/assets/styles/bmc/custom/_tables.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 // @import "/node_modules/bootstrap/scss/variables";
 .b-table-sticky-header {
   max-height: 75vh;

src/assets/styles/bmc/custom/_toasts.scss

@@ -1,3 +1,4 @@
+@use 'sass:math';
 #__BVID__toaster-container .toast-container {
   top: 75px !important;
 }

src/components/AppHeader/AppHeader.vue

@@ -7,10 +7,10 @@
         href="#main-content"
         @click="setFocus"
       >
-        {{ t('appHeader.skipToContent') }}
+        {{ $t('appHeader.skipToContent') }}
       </a>
 
-      <BNavbar variant="dark" :aria-label="t('appHeader.applicationHeader')">
+      <BNavbar variant="dark" :aria-label="$t('appHeader.applicationHeader')">
         <!-- Left aligned nav items -->
         <BButton
           id="app-header-trigger"
@@ -23,11 +23,11 @@
         >
           <icon-close
             v-if="isNavigationOpen"
-            :title="t('appHeader.titleHideNavigation')"
+            :title="$t('appHeader.titleHideNavigation')"
           />
           <icon-menu
             v-if="!isNavigationOpen"
-            :title="t('appHeader.titleShowNavigation')"
+            :title="$t('appHeader.titleShowNavigation')"
           />
         </BButton>
         <BNavbarNav>
@@ -58,14 +58,14 @@
             data-test-id="appHeader-container-health"
           >
             <status-icon :status="healthStatusIcon" />
-            {{ t('appHeader.health') }}
+            {{ $t('appHeader.health') }}
           </BNavItem>
           <BNavItem
             to="/operations/server-power-operations"
             data-test-id="appHeader-container-power"
           >
             <status-icon :status="serverStatusIcon" />
-            {{ t('appHeader.power') }}
+            {{ $t('appHeader.power') }}
           </BNavItem>
           <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
           <li class="nav-item">
@@ -75,8 +75,8 @@
               data-test-id="appHeader-button-refresh"
               @click="handleRefresh"
             >
-              <icon-renew :title="t('appHeader.titleRefresh')" />
-              <span class="responsive-text">{{ t('appHeader.refresh') }}</span>
+              <icon-renew :title="$t('appHeader.titleRefresh')" />
+              <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
             </BButton>
           </li>
           <li class="nav-item">
@@ -87,19 +87,19 @@
               data-test-id="appHeader-container-user"
             >
               <template #button-content>
-                <icon-avatar :title="t('appHeader.titleProfile')" />
+                <icon-avatar :title="$t('appHeader.titleProfile')" />
                 <span class="responsive-text">{{ username }}</span>
               </template>
               <BDropdownItem
                 to="/profile-settings"
                 data-test-id="appHeader-link-profile"
-                >{{ t('appHeader.profileSettings') }}
+                >{{ $t('appHeader.profileSettings') }}
               </BDropdownItem>
               <BDropdownItem
                 data-test-id="appHeader-link-logout"
                 @click="logout"
               >
-                {{ t('appHeader.logOut') }}
+                {{ $t('appHeader.logOut') }}
               </BDropdownItem>
             </BDropdown>
           </li>
@@ -112,20 +112,18 @@
 
 <script setup>
 import { computed, ref, watch, onMounted, defineEmits } from 'vue';
-// import BVToastMixin from '@/components/Mixins/BVToastMixin';
 import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
 import IconClose from '@carbon/icons-vue/es/close/20';
 import IconMenu from '@carbon/icons-vue/es/menu/20';
 import IconRenew from '@carbon/icons-vue/es/renew/20';
 import StatusIcon from '../Global/StatusIcon.vue';
 import LoadingBar from '../Global/LoadingBar.vue';
 import { AuthenticationStore, GlobalStore, EventLogStore } from '@/store';
-import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import useToastComposable from '@/components/Composables/useToastComposable';
+import i18n from '@/i18n';
 import eventBus from '@/eventBus';
 
-const { t } = useI18n();
 const props = defineProps({
   routerKey: {
     type: Number,
@@ -200,8 +198,8 @@ onMounted(() => {
   });
   watch(isAuthorized, (newValue) => {
     if (newValue === false) {
-      errorToast(t('global.toast.unAuthDescription'), {
-        title: t('global.toast.unAuthTitle'),
+      errorToast(i18n.global.t('global.toast.unAuthDescription'), {
+        title: i18n.global.t('global.toast.unAuthTitle'),
       });
     }
   });

src/components/AppNavigation/AppNavigation.vue

@@ -2,7 +2,7 @@
 <template>
   <div>
     <div class="nav-container" :class="{ open: isNavigationOpen }">
-      <nav ref="nav" :aria-label="t('appNavigation.primaryNavigation')">
+      <nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')">
         <BNav vertical class="mb-4">
           <template v-for="(navItem, index) in navigationItems">
             <!-- Navigation items with no children -->
@@ -61,15 +61,13 @@
 import { ref, watch } from 'vue';
 import { AppNavigationData } from './AppNavigationData';
 import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import { onMounted } from 'vue';
 import { GlobalStore } from '@/store';
 import IconChevronUp from '@carbon/icons-vue/es/chevron--up/16';
 import eventBus from '@/eventBus';
 
 const globalStore = GlobalStore();
 const { navigationItems } = AppNavigationData();
-const { t } = useI18n();
 let isNavigationOpen = ref(false);
 const route = useRoute();
 let currentUserRole = ref(null);

src/components/Global/Search.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="search-global">
     <BFormGroup
-      :label="t('global.form.search')"
+      :label="$t('global.form.search')"
       :label-for="`searchInput-${_uid}`"
       label-class="invisible"
       class="mb-2"
@@ -16,17 +16,16 @@
           v-model="filter"
           class="search-input"
           type="text"
-          :aria-label="t('global.form.search')"
-          :placeholder="props.placeholder"
-          :disabled="props.isSearchDisabled"
+          :aria-label="$t('global.form.search')"
+          :placeholder="placeholder"
+          :disabled="isSearchDisabled"
           @input="onChangeInput($event)"
-        >
-        </BFormInput>
+        />
         <BButton
           v-if="filter"
           variant="link"
           class="clear-button btn-icon-only input-action-btn"
-          :title="t('global.ariaLabel.clearSearch')"
+          :title="$t('global.ariaLabel.clearSearch')"
           @click="onClearSearch"
         >
           <icon-close />
@@ -39,12 +38,10 @@
 <script setup>
 import IconSearch from '@carbon/icons-vue/es/search/16';
 import IconClose from '@carbon/icons-vue/es/close/20';
-import { useI18n } from 'vue-i18n';
 import { ref, defineEmits } from 'vue';
 import i18n from '@/i18n';
-// eslint-disable-next-line vue/valid-define-emits
+
 const emit = defineEmits();
-const { t } = useI18n();
 
 const props = defineProps({
   placeholder: {
@@ -58,7 +55,9 @@ const props = defineProps({
     default: false,
   },
 });
+
 const filter = ref('');
+
 const onChangeInput = (event) => {
   emit('change-search', event.target.value);
 };

src/components/Global/TableToolbar.vue

@@ -3,7 +3,7 @@
     <div v-if="isToolbarActive" class="toolbar-container">
       <div class="toolbar-content">
         <p class="toolbar-selected">
-          {{ selectedItemsCount }} {{ t('global.action.selected') }}
+          {{ selectedItemsCount }} {{ $t('global.action.selected') }}
         </p>
         <div class="toolbar-actions d-flex">
           <slot name="toolbar-buttons"></slot>
@@ -22,7 +22,7 @@
             class="d-block"
             @click="eventBus.emit('clear-selected')"
           >
-            {{ t('global.action.cancel') }}
+            {{ $t('global.action.cancel') }}
           </BButton>
         </div>
       </div>
@@ -32,10 +32,8 @@
 
 <script setup>
 import eventBus from '@/eventBus';
-import { useI18n } from 'vue-i18n';
 import { ref, watch } from 'vue';
 
-const { t } = useI18n();
 const props = defineProps({
   selectedItemsCount: {
     type: Number,