test(ui): improve admin's views tests

Author: luizhf42

ui/admin/src/router/index.ts

@@ -10,7 +10,7 @@ import useLicenseStore from "@admin/store/modules/license";
 import useAuthStore from "@admin/store/modules/auth";
 import { plugin as snackbar } from "@/plugins/snackbar"; // using direct plugin because inject() doesn't work outside components
 
-const routes = [
+export const routes = [
   {
     path: "/unauthorized",
     name: "Unauthorized",

ui/admin/src/views/AnnouncementDetails.vue

@@ -150,8 +150,6 @@ const loadAnnouncement = async () => {
 const handleDelete = () => { void router.push({ name: "announcements" }); };
 
 onMounted(loadAnnouncement);
-
-defineExpose({ announcement, contentToHtml });
 </script>
 
 <style lang="scss" scoped>

ui/admin/src/views/Dashboard.vue

@@ -110,7 +110,7 @@
 </template>
 
 <script setup lang="ts">
-import axios, { AxiosError } from "axios";
+import axios from "axios";
 import { computed, onMounted, ref } from "vue";
 import useStatsStore from "@admin/store/modules/stats";
 import useSnackbar from "@/helpers/snackbar";
@@ -127,16 +127,9 @@ onMounted(async () => {
     await statsStore.getStats();
   } catch (error: unknown) {
     hasStatus.value = true;
-    if (axios.isAxiosError(error)) {
-      const axiosError = error as AxiosError;
-      if (axiosError.response?.status === 402) {
-        snackbar.showError("Failed to load the dashboard stats. Check your license and try again.");
-      } else {
-        snackbar.showError("Failed to load the dashboard stats. Please try again.");
-      }
-    }
+    if (axios.isAxiosError(error) && error.response?.status === 402) {
+      snackbar.showError("Failed to load the dashboard stats. Check your license and try again.");
+    } else snackbar.showError("Failed to load the dashboard stats. Please try again.");
   }
 });
-
-defineExpose({ stats, hasStatus });
 </script>

ui/admin/src/views/Device.vue

@@ -8,6 +8,7 @@
   >
     <v-text-field
       v-model.trim="filter"
+      data-test="search-input"
       class="w-100 w-md-50"
       label="Search by hostname"
       color="primary"
@@ -51,6 +52,4 @@ const searchDevices = async () => {
     snackbar.showError("Failed to fetch the devices.");
   }
 };
-
-defineExpose({ filter });
 </script>

ui/admin/src/views/FirewallRulesDetails.vue

@@ -114,12 +114,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from "vue";
+import { computed, onMounted } from "vue";
 import { useRoute } from "vue-router";
 import useFirewallRulesStore from "@admin/store/modules/firewall_rules";
 import isHostname from "@/utils/isHostname";
 import useSnackbar from "@/helpers/snackbar";
-import { IAdminFirewallRule } from "../interfaces/IFirewallRule";
 import showTag from "@/utils/tag";
 import { displayOnlyTenCharacters, formatHostnameFilter, formatSourceIP, formatUsername } from "@/utils/string";
 
@@ -128,11 +127,11 @@ const snackbar = useSnackbar();
 const firewallRulesStore = useFirewallRulesStore();
 
 const firewallRuleId = computed(() => route.params.id as string);
-const firewallRule = ref({} as IAdminFirewallRule);
+const firewallRule = computed(() => firewallRulesStore.firewallRule);
 
 onMounted(async () => {
   try {
-    firewallRule.value = await firewallRulesStore.fetchFirewallRuleById(firewallRuleId.value);
+    await firewallRulesStore.fetchFirewallRuleById(firewallRuleId.value);
   } catch {
     snackbar.showError("Failed to get firewall rule details.");
   }

ui/admin/src/views/NamespaceDetails.vue

@@ -292,14 +292,14 @@ const route = useRoute();
 const loading = ref(false);
 const namespaceEdit = ref(false);
 const namespaceDelete = ref(false);
-const namespace = ref({} as IAdminNamespace);
+const namespace = computed(() => namespacesStore.namespace);
 const hasNamespace = computed(() => !!namespace.value.tenant_id);
 const namespaceId = computed(() => route.params.id);
 
 const fetchNamespaceDetails = async () => {
   try {
     loading.value = true;
-    namespace.value = await namespacesStore.fetchNamespaceById(namespaceId.value as string);
+    await namespacesStore.fetchNamespaceById(namespaceId.value as string);
   } catch (error) {
     snackbar.showError("Failed to fetch namespace details.");
     handleError(error);
@@ -341,8 +341,6 @@ const getOwnerLabel = (namespace: IAdminNamespace) => {
 
   return owner?.email || namespace.owner || "";
 };
-
-defineExpose({ namespace });
 </script>
 
 <style scoped>

ui/admin/src/views/Namespaces.vue

@@ -12,6 +12,7 @@
 
     <v-text-field
       v-model.trim="filter"
+      data-test="search-input"
       label="Search by name"
       color="primary"
       class="w-100 w-md-50"
@@ -48,6 +49,4 @@ const searchNamespaces = async () => {
 
   await namespacesStore.fetchNamespaceList({ filter: encodedFilter, page: 1 });
 };
-
-defineExpose({ filter });
 </script>

ui/admin/src/views/NewAnnouncement.vue

@@ -17,7 +17,7 @@
         :error-messages="titleError"
         variant="underlined"
         placeholder="Enter announcement title"
-        data-test="announcement-title"
+        data-test="announcement-title-field"
       />
     </v-card-item>
 
@@ -127,8 +127,6 @@ const postAnnouncement = async () => {
     snackbar.showError("Failed to create announcement.");
   }
 };
-
-defineExpose({ title, titleError });
 </script>
 
 <style lang="scss">

ui/admin/src/views/UserDetails.vue

@@ -240,13 +240,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount, ref } from "vue";
+import { computed, onBeforeMount } from "vue";
 import { useRoute } from "vue-router";
 import useUsersStore from "@admin/store/modules/users";
 import useAuthStore from "@admin/store/modules/auth";
 import UserStatusChip from "@admin/components/User/UserStatusChip.vue";
 import UserDelete from "@admin/components/User/UserDelete.vue";
-import type { IAdminUser } from "@admin/interfaces/IUser";
 import useSnackbar from "@/helpers/snackbar";
 import { formatFullDateTime } from "@/utils/date";
 
@@ -256,7 +255,7 @@ const usersStore = useUsersStore();
 const authStore = useAuthStore();
 
 const userId = computed(() => route.params.id as string);
-const user = ref({} as IAdminUser);
+const user = computed(() => usersStore.user);
 
 const lastLoginText = computed(() => {
   const value = user.value?.last_login;
@@ -283,11 +282,9 @@ const loginWithToken = async () => {
 
 onBeforeMount(async () => {
   try {
-    user.value = await usersStore.fetchUserById(userId.value);
+    await usersStore.fetchUserById(userId.value);
   } catch {
     snackbar.showError("Failed to get user details.");
   }
 });
-
-defineExpose({ user });
 </script>

ui/admin/src/views/Users.vue

@@ -56,6 +56,4 @@ const searchUsers = async () => {
 watchDebounced(filter, async () => {
   await searchUsers();
 }, { debounce: 1000, maxWait: 5000 });
-
-defineExpose({ filter });
 </script>