ui: add eslint validation on tests path

ui/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview",
     "lint": "eslint --ext .ts,.vue --ignore-path .gitignore --no-fix src",
     "lint-fix": "eslint --ext .ts,.vue --ignore-path .gitignore --fix src",
+    "lint-fix:test": "eslint --ext .ts,.vue --ignore-path .gitignore --fix tests",
     "test": "TZ=UTC vitest",
     "test-ui": "TZ=UTC vitest --ui",
     "test-coverage": "vitest run --coverage"

ui/src/interfaces/IRole.ts

@@ -0,0 +1,4 @@
+export interface IRole {
+  type: string;
+  permission: boolean;
+}

ui/tests/components/Account/index.spec.ts

@@ -1,8 +1,8 @@
 import { createVuetify } from "vuetify";
 import { mount, VueWrapper } from "@vue/test-utils";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import Account from "../../../src/components/Account/AccountCreated.vue";
 import { createStore } from "vuex";
+import Account from "../../../src/components/Account/AccountCreated.vue";
 import { key } from "../../../src/store";
 import routes from "../../../src/router";
 
@@ -17,7 +17,7 @@ const store = createStore({
 });
 
 describe("Account Render", () => {
-  let wrapper: VueWrapper<any>;
+  let wrapper: VueWrapper<InstanceType<typeof Account>>;
 
   beforeEach(() => {
     const vuetify = createVuetify();
@@ -45,16 +45,16 @@ describe("Account Render", () => {
   });
   it("Renders the template with data", () => {
     expect(wrapper.find('[data-test="accountCreated-card"]').exists()).toEqual(
-      true
+      true,
     );
     expect(wrapper.find('[data-test="resendEmail-btn"]').exists()).toEqual(
-      true
+      true,
     );
   });
 });
 
 describe("Doesn't render component", () => {
-  let wrapper: VueWrapper<any>;
+  let wrapper: VueWrapper<InstanceType<typeof Account>>;
 
   beforeEach(() => {
     const vuetify = createVuetify();
@@ -84,10 +84,10 @@ describe("Doesn't render component", () => {
 
   it("Renders the template with data", () => {
     expect(wrapper.find('[data-test="accountCreated-card"]').exists()).toEqual(
-      false
+      false,
     );
     expect(wrapper.find('[data-test="resendEmail-btn"]').exists()).toEqual(
-      false
+      false,
     );
   });
 });

ui/tests/components/Announcements/index.spec.ts

@@ -1,13 +1,13 @@
 import { createVuetify } from "vuetify";
-import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { mount, VueWrapper } from "@vue/test-utils";
 import { beforeEach, describe, expect, it } from "vitest";
 import Announcements from "../../../src/components/Announcements/AnnouncementsModal.vue";
 
 const announcement = {
   uuid: "52088548-2b99-4f38-ac09-3a8f8988476f",
   title: "This is a announcement",
   content: "## ShellHub new features \n - New feature 1 \n - New feature 2 \n - New feature 3",
-  date: "2022-12-15T19:45:45.618Z"
+  date: "2022-12-15T19:45:45.618Z",
 };
 
 const announcementContentInHtml = `<h2>ShellHub new features</h2>
@@ -19,19 +19,19 @@ const announcementContentInHtml = `<h2>ShellHub new features</h2>
 `;
 
 describe("Announcements", () => {
-  let wrapper: VueWrapper<any>;
+  let wrapper: VueWrapper<InstanceType<typeof Announcements>>;
 
   beforeEach(async () => {
     const vuetify = createVuetify();
     wrapper = mount(Announcements, {
       props: {
         show: true,
-        announcement: announcement,
+        announcement,
       },
       global: {
         plugins: [vuetify],
       },
-    });    
+    });
   });
 
   it("Is a Vue instance", () => {
@@ -53,4 +53,4 @@ describe("Announcements", () => {
     expect(wrapper.vm.date).toBe("December 15, 2022");
     expect(wrapper.vm.markdownContent).toBe(announcementContentInHtml);
   });
-});
+});

ui/tests/components/AppBar/Notification/index.spec.ts

@@ -1,11 +1,11 @@
-import { envVariables } from "./../../../../src/envVariables";
 import { createVuetify } from "vuetify";
 import { mount, VueWrapper } from "@vue/test-utils";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import Notification from "../../../../src/components/AppBar/Notifications/Notification.vue";
 import { createStore } from "vuex";
+import Notification from "../../../../src/components/AppBar/Notifications/Notification.vue";
 import { key } from "../../../../src/store";
 import routes from "../../../../src/router";
+import { IStats } from "@/interfaces/IStats";
 
 const role = ["owner", "operator"];
 
@@ -128,35 +128,33 @@ const tests = [
 ];
 
 const store = (
-  notifications: any,
+  notifications: typeof notificationsGlobal,
   numberNotifications: number,
-  stats: any,
-  currentrole: string
-) =>
-  createStore({
-    state: {
-      notifications,
-      numberNotifications,
-      stats,
-      currentrole,
-    },
-    getters: {
-      "notifications/list": (state) => state.notifications,
-      "notifications/getNumberNotifications": (state) =>
-        state.numberNotifications,
-      "stats/stats": (state) => state.stats,
-      "auth/role": (state) => state.currentrole,
-    },
-    actions: {
-      "notifications/fetch": vi.fn(),
-      "stats/get": vi.fn(),
-      "snackbar/showSnackbarErrorAssociation": vi.fn(),
-      "snackbar/showSnackbarErrorLoading": vi.fn(),
-    },
-  });
+  stats: IStats,
+  currentrole: string,
+) => createStore({
+  state: {
+    notifications,
+    numberNotifications,
+    stats,
+    currentrole,
+  },
+  getters: {
+    "notifications/list": (state) => state.notifications,
+    "notifications/getNumberNotifications": (state) => state.numberNotifications,
+    "stats/stats": (state) => state.stats,
+    "auth/role": (state) => state.currentrole,
+  },
+  actions: {
+    "notifications/fetch": vi.fn(),
+    "stats/get": vi.fn(),
+    "snackbar/showSnackbarErrorAssociation": vi.fn(),
+    "snackbar/showSnackbarErrorLoading": vi.fn(),
+  },
+});
 
 describe("Notification", () => {
-  let wrapper: VueWrapper<any>;
+  let wrapper: VueWrapper<InstanceType<typeof Notification>>;
 
   tests.forEach((test) => {
     role.forEach((currentrole) => {
@@ -172,7 +170,7 @@ describe("Notification", () => {
                     test.variables.listNotifications,
                     test.variables.numberNotifications,
                     test.variables.stats,
-                    currentrole
+                    currentrole,
                   ),
                   key,
                 ],
@@ -196,7 +194,7 @@ describe("Notification", () => {
 
         ///////
         // Data checking
-        ////// TODO
+        /// /// TODO
 
         // it('Compare data with default value', () => {
         //   Object.keys(test.data).forEach((item) => {
@@ -208,7 +206,7 @@ describe("Notification", () => {
 
         //////
         // HTML validation
-        ////// TODO: fix this test
+        /// /// TODO: fix this test
 
         // it('Renders the template with data', () => {
         //   Object.keys(test.template).forEach((item) => {

ui/tests/components/Billing/BillingCancel.spec.ts

@@ -71,7 +71,7 @@ const store = (currentrole: string) => createStore({
 });
 
 describe("BillingCancel", () => {
-  let wrapper: VueWrapper<any>;
+  let wrapper: VueWrapper<InstanceType<typeof BillingCancel>>;
   const vuetify = createVuetify();
 
   tests.forEach((test) => {

ui/tests/components/Billing/BillingIcon.spec.ts

@@ -1,6 +1,6 @@
 import { createVuetify } from "vuetify";
 import { mount, VueWrapper } from "@vue/test-utils";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it } from "vitest";
 import BillingIcon from "../../../src/components/Billing/BillingIcon.vue";
 import routes from "../../../src/router";
 
@@ -17,7 +17,7 @@ const cardIcon = {
 };
 
 describe("BillingIcon", () => {
-  let wrapper: VueWrapper<any>;
+  let wrapper: VueWrapper<InstanceType<typeof BillingIcon>>;
   const vuetify = createVuetify();
 
   beforeEach(() => {

ui/tests/components/Billing/BillingInvoiceList.spec.ts

@@ -1,8 +1,8 @@
 import { createVuetify } from "vuetify";
-import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { mount, VueWrapper } from "@vue/test-utils";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import BillingInvoiceList from "../../../src/components/Billing/BillingInvoiceList.vue";
 import { createStore } from "vuex";
+import BillingInvoiceList from "../../../src/components/Billing/BillingInvoiceList.vue";
 import { key } from "../../../src/store";
 import routes from "../../../src/router";
 
@@ -95,7 +95,7 @@ const store = createStore({
 });
 
 describe("BillingInvoiceList", () => {
-  let wrapper: VueWrapper<any>;
+  let wrapper: VueWrapper<InstanceType<typeof BillingInvoiceList>>;
   const vuetify = createVuetify();
 
   beforeEach(() => {

ui/tests/components/Billing/BillingPaymentList.spec.ts

@@ -1,8 +1,7 @@
 import { createVuetify } from "vuetify";
-import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import { beforeEach, describe, expect, it } from "vitest";
 import BillingPaymentList from "../../../src/components/Billing/BillingPaymentList.vue";
-import { createStore } from "vuex";
 import { store, key } from "../../../src/store";
 import routes from "../../../src/router";
 
@@ -61,13 +60,13 @@ const headers = [
 ];
 
 describe("BillingPaymentList", () => {
-  let wrapper: VueWrapper<any>;
+  let wrapper: VueWrapper<InstanceType<typeof BillingPaymentList>>;
   const vuetify = createVuetify();
 
   beforeEach(() => {
     wrapper = mount(BillingPaymentList, {
       global: {
-        plugins: [[store, key],routes, vuetify],
+        plugins: [[store, key], routes, vuetify],
       },
       props: { cards: pms },
       shallow: false,
@@ -91,21 +90,21 @@ describe("BillingPaymentList", () => {
   it("Data is defined", () => {
     expect(wrapper.vm.$data).toBeDefined();
   });
-  it('Compares data with default value', () => {
+  it("Compares data with default value", () => {
     expect(wrapper.vm.headers).toStrictEqual(headers);
   });
-  it('Process data in the computed', () => {
+  it("Process data in the computed", () => {
     expect(wrapper.vm.paymentList).toStrictEqual(pms);
   });
-  it('Process data in props', () => {
+  it("Process data in props", () => {
     expect(wrapper.props("cards")).toStrictEqual(pms);
   });
 
   ///////
   // HTML validation
   //////
 
-  it('Renders the template with data', () => {
+  it("Renders the template with data", () => {
     expect(wrapper.find('[data-test="dataTable-field"]').exists()).toBe(true);
   });
 });

ui/tests/components/Billing/BillingPaymentMethod.spec.ts

@@ -1,8 +1,8 @@
 import { createVuetify } from "vuetify";
-import { flushPromises, mount, VueWrapper } from "@vue/test-utils";
+import { mount, VueWrapper } from "@vue/test-utils";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import BillingPaymentMethod from "../../../src/components/Billing/BillingPaymentMethod.vue";
 import { createStore } from "vuex";
+import BillingPaymentMethod from "../../../src/components/Billing/BillingPaymentMethod.vue";
 import { key } from "../../../src/store";
 import routes from "../../../src/router";
 
@@ -32,7 +32,7 @@ const store = createStore({
 // In this case, it's testing the button rendering.
 ///////
 describe("BillingDialogPaymentMethod", () => {
-  let wrapper: VueWrapper<any>;
+  let wrapper: VueWrapper<InstanceType<typeof BillingPaymentMethod>>;
   const vuetify = createVuetify();
   ///////
   // In this case, it's testing the button rendering.
@@ -132,10 +132,8 @@ describe("BillingDialogPaymentMethod", () => {
         171: 426.7,
       };
       Reflect.ownKeys(priceTable).forEach((k) => {
-        // @ts-ignore
-        expect(wrapper.vm.priceEstimator(parseInt(k, 10))).toContain(
-          // @ts-ignore
-          priceTable[k]
+        expect(wrapper.vm.priceEstimator(parseInt(k as string, 10))).toContain(
+          priceTable[k],
         );
       });
     });