Merge pull request #45 from Real-Dev-Squad/setup/self-user-query-hook

feat: add query hook for self user details

__mocks__/db/common.ts

@@ -0,0 +1,11 @@
+export const unauthorizedResponse = {
+    error: "Unauthorized",
+    message: "Unauthenticated User",
+    statusCode: 401,
+};
+
+export const serverErrorResponse = {
+    statusCode: 500,
+    error: "Internal Server Error",
+    message: "An internal server error occurred",
+};

__mocks__/db/users.ts

@@ -0,0 +1,25 @@
+import { UserData } from "@/types/users";
+
+export const selfUser: UserData = {
+    id: "some-test-id",
+    profileURL: "https://github.com/Real-Dev-Squad/sample-profile-service",
+    discordJoinedAt: "2022-11-14T15:36:24.920000+00:00",
+    roles: {
+        archived: true,
+        in_discord: false,
+        member: true,
+        super_user: true,
+    },
+    github_created_at: 1622727146000,
+    github_display_name: "Satyam Bajpai",
+    github_id: "satyam73",
+    github_user_id: "satyam73-test-github-id",
+    incompleteUserDetails: false,
+    last_name: "Bajpai",
+    first_name: "Satyam",
+    status: "active",
+    username: "satyam-bajpai",
+    profileStatus: "VERIFIED",
+    updated_at: 1709236001723,
+    created_at: 1709236001723,
+};

__mocks__/handler.ts

@@ -0,0 +1,5 @@
+import { endorsementsHandler } from "./handlers/endorsements.handler";
+import { usersHandler } from "./handlers/users";
+
+const handlers = [...endorsementsHandler, ...usersHandler];
+export default handlers;

__mocks__/handlers/users.ts

@@ -0,0 +1,18 @@
+import { rest } from "msw";
+import { RDS_BACKEND_URL } from "@/constants/urls";
+import { selfUser } from "../db/users";
+import { serverErrorResponse, unauthorizedResponse } from "../db/common";
+
+export const usersHandler = [
+    rest.get(`${RDS_BACKEND_URL}/users/self`, (req, res, ctx) => {
+        return res(ctx.status(200), ctx.json(selfUser));
+    }),
+];
+
+export const selfUserUnauthorizedHandler = rest.get(`${RDS_BACKEND_URL}/users/self`, (req, res, ctx) => {
+    return res(ctx.status(401), ctx.json(unauthorizedResponse));
+});
+
+export const selfUserServerErrorHandler = rest.get(`${RDS_BACKEND_URL}/users/self`, (req, res, ctx) => {
+    return res(ctx.status(401), ctx.json(serverErrorResponse));
+});

__tests__/services/endorsements.test.js

@@ -1,7 +1,6 @@
-const { QueryClient, QueryClientProvider } = require("@tanstack/react-query");
-
 import { useGetEndorsements, usePostEndorsement } from "@/services/endorsements";
 import { renderHook, waitFor } from "@testing-library/react";
+import { createWrapper } from "../utils";
 const { server } = require("../../__mocks__/server");
 
 beforeAll(() => {
@@ -17,15 +16,13 @@ afterEach(() => {
 afterAll(() => {
     server.close();
 });
-const queryClient = new QueryClient();
-const wrapper = ({ children }) => <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
 
 test("test useGetEndorsements hook", async () => {
-    const { result } = renderHook(() => useGetEndorsements(), { wrapper });
+    const { result } = renderHook(() => useGetEndorsements(), { wrapper: createWrapper });
     await waitFor(() => result.current.isSuccess);
 });
 
-test("test useGetEndorsements hook", async () => {
-    const { result } = renderHook(() => usePostEndorsement({ endorsementData: {} }), { wrapper });
+test("test usePostEndorsement hook", async () => {
+    const { result } = renderHook(() => usePostEndorsement({ endorsementData: {} }), { wrapper: createWrapper });
     await waitFor(() => result.current.isSuccess);
 });

__tests__/services/users.test.tsx

@@ -0,0 +1,66 @@
+import { renderHook, waitFor } from "@testing-library/react";
+
+import { selfUserServerErrorHandler, selfUserUnauthorizedHandler } from "../../__mocks__/handlers/users";
+import { server } from "../../__mocks__/server";
+import { useGetSelfUser } from "@/services/users";
+import { createWrapper, testQueryClient } from "../utils";
+
+import { serverErrorResponse, unauthorizedResponse } from "../../__mocks__/db/common";
+import { selfUser } from "../../__mocks__/db/users";
+import { AxiosError } from "axios";
+
+beforeAll(() => {
+    server.listen({
+        onUnhandledRequest: "warn",
+    });
+});
+
+afterEach(() => {
+    server.resetHandlers();
+    testQueryClient.clear();
+});
+
+afterEach(() => {
+    testQueryClient.clear();
+});
+
+afterAll(() => {
+    server.close();
+});
+
+describe("useGetSelfUser", () => {
+    it("should return isSuccess true and return self user details", async () => {
+        const { result } = renderHook(() => useGetSelfUser(), { wrapper: createWrapper });
+        await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+        expect(result.current.data).toBeDefined();
+        expect(result.current.data).toStrictEqual(selfUser);
+    });
+
+    it("should return isError true and return unauthorized error message", async () => {
+        server.use(selfUserUnauthorizedHandler);
+        const { result } = renderHook(() => useGetSelfUser(), { wrapper: createWrapper });
+
+        await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+        expect(result?.current.isError).toStrictEqual(true);
+
+        if (result?.current?.error instanceof AxiosError) {
+            expect(result?.current?.error?.response?.data).toStrictEqual(unauthorizedResponse);
+        }
+    });
+
+    it("should return server error with server error response message", async () => {
+        server.use(selfUserServerErrorHandler);
+
+        const { result } = renderHook(() => useGetSelfUser(), { wrapper: createWrapper });
+
+        await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+        expect(result?.current.isError).toStrictEqual(true);
+
+        if (result?.current?.error instanceof AxiosError) {
+            expect(result?.current?.error?.response?.data).toStrictEqual(serverErrorResponse);
+        }
+    });
+});

__tests__/utils.tsx

@@ -0,0 +1,18 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactNode } from "react";
+
+export const testQueryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            retry: false,
+        },
+    },
+});
+
+type TestWrapperProps = {
+    children: ReactNode;
+};
+
+export function createWrapper({ children }: TestWrapperProps) {
+    return <QueryClientProvider client={testQueryClient}>{children}</QueryClientProvider>;
+}

jest.config.js

@@ -9,6 +9,7 @@ const createJestConfig = nextJest({
 const customJestConfig = {
     setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
     testEnvironment: "jest-environment-jsdom",
+    testPathIgnorePatterns: ["<rootDir>/__tests__/utils.tsx"],
 };
 
 // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async

jest.setup.js

@@ -1 +1,15 @@
 import "@testing-library/jest-dom/extend-expect";
+import { server } from "./__mocks__/server";
+beforeAll(() => {
+    server.listen({
+        onUnhandledRequest: "warn",
+    });
+});
+
+afterEach(() => {
+    server.resetHandlers();
+});
+
+afterAll(() => {
+    server.close();
+});

package.json

@@ -24,6 +24,7 @@
         "@tanstack/react-query-devtools": "^4.33.0",
         "@testing-library/react-hooks": "^8.0.1",
         "autoprefixer": "10.4.14",
+        "axios": "^1.6.7",
         "classnames": "^2.5.1",
         "next": "13.4.4",
         "postcss": "8.4.23",

src/services/users.ts

@@ -0,0 +1,18 @@
+import { useQuery } from "@tanstack/react-query";
+import { RDS_BACKEND_URL } from "@/constants/urls";
+import axios from "axios";
+
+export const useGetSelfUser = () =>
+    useQuery({
+        queryKey: ["users.getSelfUser"],
+        queryFn: () =>
+            axios
+                .get(`${RDS_BACKEND_URL}/users/self`, {
+                    withCredentials: true,
+                    headers: { "Content-Type": "application/json" },
+                })
+                .then((res) => res.data),
+        onError(err) {
+            return err;
+        },
+    });

src/types/users.d.ts

@@ -0,0 +1,42 @@
+export type UserProfileStatus = "PENDING" | "BLOCKED" | "VERIFIED";
+
+export type UserStatus = "ooo" | "idle" | "active" | "onboarding";
+
+export type UserData = {
+    id: string;
+    profileURL?: string;
+    discordJoinedAt?: string;
+    roles: {
+        archived: boolean;
+        in_discord: boolean;
+        member?: boolean;
+        maven?: boolean;
+        designer?: boolean;
+        product_manager?: boolean;
+        super_user?: boolean;
+    };
+    profileStatus?: UserProfileStatus;
+    status?: UserStatus;
+    yoe?: number;
+    github_created_at: number;
+    company?: string;
+    twitter_id?: string;
+    first_name?: string;
+    incompleteUserDetails: boolean;
+    discordId?: string;
+    last_name?: string;
+    linkedin_id?: string;
+    picture?: {
+        url?: string;
+        publicId?: string;
+    };
+    instagram_id?: string;
+    github_display_name: string;
+    github_id: string;
+    designation?: string;
+    username?: string;
+    created_at: number;
+    updated_at: number;
+    github_user_id: string;
+    website?: string;
+};