[studio] fetch user status #1339

agdb_studio/package.json

@@ -19,12 +19,10 @@
         "@kalimahapps/vue-icons": "^1.7.1",
         "agdb_api": "file:../agdb_api/typescript",
         "openapi-client-axios": "^7.5.1",
-        "pinia": "^2.1.7",
         "vue": "^3.3.4",
         "vue-router": "^4.2.5"
     },
     "devDependencies": {
-        "@pinia/testing": "^0.1.6",
         "@playwright/test": "^1.45.3",
         "@rushstack/eslint-patch": "^1.10.3",
         "@tsconfig/node18": "^18.2.4",

agdb_studio/src/components/auth/LoginForm.spec.ts

@@ -1,22 +1,21 @@
 import { describe, it, expect } from "vitest";
 import { mount } from "@vue/test-utils";
 import LoginForm from "@/components/auth/LoginForm.vue";
-import { useAccountStore } from "@/stores/account";
 
-const { loginMock, isLoggedInMock, logoutMock, pushMock } = vi.hoisted(() => {
+const { loginMock, logoutMock, pushMock } = vi.hoisted(() => {
     return {
         loginMock: vi.fn(),
-        isLoggedInMock: vi.fn(),
         logoutMock: vi.fn(),
         pushMock: vi.fn(),
     };
 });
 
-vi.mock("@/services/auth.service", () => {
+vi.mock("@/composables/user/auth", () => {
     return {
-        login: loginMock,
-        isLoggedIn: isLoggedInMock,
-        logout: logoutMock,
+        useAuth: () => ({
+            login: loginMock,
+            logout: logoutMock,
+        }),
     };
 });
 vi.mock("@/router", () => {
@@ -32,29 +31,27 @@ describe("LoginForm", () => {
         vi.clearAllMocks();
     });
     it("runs successful login on click", async () => {
-        const accountStore = useAccountStore();
-        accountStore.login = vi.fn().mockResolvedValue(true);
+        loginMock.mockResolvedValue(true);
 
         const wrapper = mount(LoginForm);
         await wrapper.find('input[type="text"]#username').setValue("test");
         await wrapper.find('input[type="password"]#password').setValue("test");
 
         await wrapper.find(".login-form>form").trigger("submit");
 
-        expect(accountStore.login).toHaveBeenCalled();
+        expect(loginMock).toHaveBeenCalled();
         expect(pushMock).toHaveBeenCalledWith({ name: "home" });
     });
     it("runs failed login on click", async () => {
-        const accountStore = useAccountStore();
-        accountStore.login = vi.fn().mockRejectedValue("error");
+        loginMock.mockRejectedValue("error");
 
         const wrapper = mount(LoginForm);
         await wrapper.find('input[type="text"]#username').setValue("test");
         await wrapper.find('input[type="password"]#password').setValue("test");
 
         await wrapper.find(".login-form>form").trigger("submit");
 
-        expect(accountStore.login).toHaveBeenCalled();
+        expect(loginMock).toHaveBeenCalled();
         expect(pushMock).not.toHaveBeenCalled();
     });
 });

agdb_studio/src/components/auth/LoginForm.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { ref } from "vue";
-import { useAccountStore } from "@/stores/account";
+import { useAuth } from "@/composables/user/auth";
 import router from "@/router";
 import SpinnerIcon from "@/components/base/icons/SpinnerIcon.vue";
 
-const { login } = useAccountStore();
+const { login } = useAuth();
 
 const username = ref("");
 const password = ref("");

agdb_studio/src/composables/user/account.spec.ts

@@ -0,0 +1,42 @@
+import { useAccount } from "./account";
+import { user_status } from "@/tests/apiMock";
+
+const { isLoggedIn, token } = vi.hoisted(() => {
+    return {
+        isLoggedIn: { value: true },
+        token: { value: "test" },
+    };
+});
+vi.mock("@/composables/user/auth", () => {
+    return {
+        useAuth: vi.fn().mockReturnValue({
+            isLoggedIn,
+            token,
+        }),
+    };
+});
+describe("useAccount", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it("fetches user status", async () => {
+        user_status.mockResolvedValueOnce({
+            data: { name: "test", admin: true },
+        });
+        const { username, admin, fetchUserStatus } = useAccount();
+        await fetchUserStatus();
+
+        expect(username.value).toBe("test");
+        expect(admin.value).toBe(true);
+    });
+
+    it("does nothing if not logged in", async () => {
+        isLoggedIn.value = false;
+        const { username, admin, fetchUserStatus } = useAccount();
+        await fetchUserStatus();
+
+        expect(username.value).toBe(undefined);
+        expect(admin.value).toBe(false);
+    });
+});

agdb_studio/src/composables/user/account.ts

@@ -0,0 +1,31 @@
+import { getClient } from "@/services/api.service";
+import { useAuth } from "@/composables/user/auth";
+import { ref, watch } from "vue";
+
+const username = ref<string | undefined>(undefined);
+const admin = ref<boolean>(false);
+
+const clearStatus = () => {
+    username.value = undefined;
+    admin.value = false;
+};
+
+const { isLoggedIn, token } = useAuth();
+const fetchUserStatus = async () => {
+    if (!isLoggedIn.value) {
+        clearStatus();
+        return;
+    }
+
+    getClient()
+        ?.user_status()
+        ?.then((status) => {
+            username.value = status.data.name;
+            admin.value = status.data.admin;
+        });
+};
+watch(() => token.value, fetchUserStatus, { immediate: true });
+
+export const useAccount = () => {
+    return { username, admin, fetchUserStatus };
+};

agdb_studio/src/composables/user/auth.spec.ts

@@ -0,0 +1,78 @@
+import { useAuth, setLocalStorageToken, refreshToken } from "./auth";
+import { get_token } from "@/tests/apiMock";
+import { ACCESS_TOKEN } from "@/constants";
+
+describe("auth service", () => {
+    Object.defineProperty(window, "location", {
+        value: { reload: vi.fn() },
+    });
+
+    const { isLoggedIn, logout, login, token } = useAuth();
+    beforeEach(() => {
+        localStorage.removeItem(ACCESS_TOKEN);
+    });
+    describe("isLoggedIn", () => {
+        beforeEach(() => {
+            localStorage.removeItem(ACCESS_TOKEN);
+        });
+        it("returns false if no token", () => {
+            expect(isLoggedIn.value).toBe(false);
+        });
+        it("returns true if token", () => {
+            get_token.mockReturnValueOnce(undefined);
+            setLocalStorageToken("test");
+            expect(isLoggedIn.value).toBe(true);
+            expect(token.value).toBe("test");
+        });
+    });
+    describe("logout", () => {
+        Object.defineProperty(window, "location", {
+            value: { reload: vi.fn() },
+        });
+        beforeEach(() => {
+            localStorage.removeItem(ACCESS_TOKEN);
+            refreshToken();
+        });
+        it("does nothing if not logged in", async () => {
+            await logout();
+            expect(isLoggedIn.value).toBe(false);
+        });
+        it("logs out if logged in", async () => {
+            setLocalStorageToken("test");
+            await logout();
+            expect(isLoggedIn.value).toBe(false);
+        });
+    });
+    describe("login", () => {
+        it("returns token on success", async () => {
+            login("test", "test").then((token) => {
+                expect(token).toBe("token");
+            });
+        });
+        it("throws error on failure", async () => {
+            login("test", "test").catch((error) => {
+                expect(error).toBe("error");
+            });
+        });
+    });
+    describe("setLocalStorageToken", () => {
+        it("sets token", () => {
+            setLocalStorageToken("test");
+            expect(localStorage.getItem(ACCESS_TOKEN)).toBe("test");
+        });
+    });
+    describe("refreshToken", () => {
+        beforeEach(() => {
+            localStorage.removeItem(ACCESS_TOKEN);
+        });
+        it("refreshes token", () => {
+            setLocalStorageToken("test");
+            expect(isLoggedIn.value).toBe(true);
+        });
+        it("refresh page if no token", () => {
+            refreshToken();
+            expect(isLoggedIn.value).toBe(false);
+            expect(window.location.reload).toHaveBeenCalled();
+        });
+    });
+});