init vitest + authProviders tests

Signed-off-by: Ruben <rubdeivis@gmail.com>

package.json

@@ -13,7 +13,9 @@
     "build:firefox": "BROWSER_TARGET=FIREFOX vite build",
     "build": "NODE_ENV=production tsc --noEmit && npm run build:chrome && npm run build:firefox",
     "dev": "NODE_ENV=develop BROWSER_TARGET=CHROME nodemon",
-    "dev:firefox": "NODE_ENV=develop BROWSER_TARGET=FIREFOX nodemon"
+    "dev:firefox": "NODE_ENV=develop BROWSER_TARGET=FIREFOX nodemon",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "type": "module",
   "dependencies": {
@@ -42,13 +44,17 @@
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/chrome": "^0.0.208",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
     "@vitejs/plugin-react": "^3.0.1",
+    "@vitest/coverage-c8": "^0.29.1",
     "autoprefixer": "^10.4.13",
     "eslint": "^8.32.0",
     "eslint-config-prettier": "^8.6.0",
@@ -57,12 +63,14 @@
     "eslint-plugin-react": "^7.32.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "fs-extra": "^11.1.0",
+    "jsdom": "^21.1.0",
     "nodemon": "^2.0.18",
     "postcss": "^8.4.21",
     "rollup-plugin-polyfill-node": "^0.12.0",
     "tailwindcss": "^3.2.4",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.4",
-    "vite": "^4.0.4"
+    "vite": "^4.0.4",
+    "vitest": "^0.29.1"
   }
 }

src/providers/authProvider/AuthProvider.test.tsx

@@ -0,0 +1,282 @@
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { AuthProvider, useAuthContext, reducer } from "./AuthProvider";
+import { vi } from "vitest";
+import { FC, useState } from "react";
+import { AccountFormType } from "@src/pages";
+import { AccountType } from "@src/accounts/types";
+
+vi.mock("@src/Extension", () => {
+  const Extension = {
+    createAccounts: vi.fn().mockResolvedValue(true),
+    isUnlocked: vi.fn().mockResolvedValue(true),
+    importAccount: vi.fn().mockResolvedValue(true),
+    restorePassword: vi.fn().mockResolvedValue(true),
+  };
+
+  return {
+    default: Extension,
+  };
+});
+
+interface ResponseState {
+  create: null | boolean;
+  derive: null | boolean;
+  import: null | boolean;
+  restore: null | boolean;
+}
+
+interface TestComponentProps {
+  createdAccount: AccountFormType;
+}
+
+const testIds = {
+  createBtn: "create-button",
+  deriveBtn: "derive-button",
+  importBtn: "import-button",
+  restoreBtn: "restore-button",
+  createResponse: "create-response",
+  deriveResponse: "derive-response",
+  importResonse: "import-response",
+  restoreResponse: "restore-response",
+};
+
+const TestComponent: FC<TestComponentProps> = ({ createdAccount }) => {
+  const { createAccount, deriveAccount, importAccount, restorePassword } =
+    useAuthContext();
+
+  const [responses, setresponses] = useState<ResponseState>({
+    create: null,
+    derive: null,
+    import: null,
+    restore: null,
+  });
+
+  const _create = async () => {
+    const _res = await createAccount(createdAccount);
+    setresponses((state) => ({ ...state, create: _res }));
+  };
+
+  const _derive = async () => {
+    const _res = await deriveAccount(createdAccount);
+    setresponses((state) => ({ ...state, derive: _res }));
+  };
+
+  const _import = async () => {
+    const _res = await importAccount(createdAccount);
+    setresponses((state) => ({ ...state, import: _res }));
+  };
+
+  const _restore = async () => {
+    const _res = await restorePassword(createdAccount);
+    setresponses((state) => ({ ...state, restore: _res }));
+  };
+
+  return (
+    <>
+      <button data-testid="create-button" onClick={_create} />
+      <button data-testid="derive-button" onClick={_derive} />
+      <button data-testid="import-button" onClick={_import} />
+      <button data-testid="restore-button" onClick={_restore} />
+      <p data-testid="create-response">{responses.create}</p>
+      <p data-testid="derive-response">{responses.derive}</p>
+      <p data-testid="import-response">{responses.import}</p>
+      <p data-testid="restore-response">{responses.restore}</p>
+    </>
+  );
+};
+
+const mockAccountForm: AccountFormType = {
+  name: "mock-test",
+  privateKeyOrSeed: "0x123",
+  password: "123",
+  accountType: "EVM" as AccountType,
+  isSignUp: true,
+  seed: "123",
+};
+
+const renderComponent = (accountForm: AccountFormType) => {
+  return render(
+    <AuthProvider>
+      <TestComponent createdAccount={accountForm} />
+    </AuthProvider>
+  );
+};
+
+describe("AuthProvider", () => {
+  describe("reducer", () => {
+    const initState = {
+      isInit: true,
+    };
+
+    const response = reducer(initState, { type: "init", payload: undefined });
+    expect(response).toEqual(initState);
+  });
+
+  describe("createAccount", () => {
+    it("should return true", () => {
+      renderComponent(mockAccountForm);
+
+      act(() => {
+        fireEvent.click(screen.getByTestId(testIds.createBtn));
+      });
+
+      waitFor(() =>
+        expect(screen.getByTestId(testIds.createResponse).innerHTML).toEqual(
+          true
+        )
+      );
+    });
+
+    it("should return seed_required error", () => {
+      renderComponent({ ...mockAccountForm, seed: "" });
+
+      act(() => {
+        fireEvent.click(screen.getByTestId(testIds.createBtn));
+      });
+
+      waitFor(() =>
+        expect(screen.getByTestId(testIds.createResponse).innerHTML).toEqual(
+          false
+        )
+      );
+    });
+  });
+
+  describe("importAccount", () => {
+    it("should return true", () => {
+      renderComponent(mockAccountForm);
+
+      act(() => {
+        fireEvent.click(screen.getByTestId(testIds.importBtn));
+      });
+
+      waitFor(() =>
+        expect(screen.getByTestId(testIds.importResonse).innerHTML).toEqual(
+          true
+        )
+      );
+    });
+
+    it("should return password_required error", () => {
+      renderComponent({ ...mockAccountForm, password: "" });
+
+      act(() => {
+        fireEvent.click(screen.getByTestId(testIds.importBtn));
+      });
+
+      waitFor(() =>
+        expect(screen.getByTestId(testIds.importResonse).innerHTML).toEqual(
+          false
+        )
+      );
+    });
+
+    it("should return private_key_or_seed_required error", () => {
+      renderComponent({ ...mockAccountForm, privateKeyOrSeed: "" });
+
+      act(() => {
+        fireEvent.click(screen.getByTestId(testIds.importBtn));
+      });
+
+      waitFor(() =>
+        expect(screen.getByTestId(testIds.importResonse).innerHTML).toEqual(
+          false
+        )
+      );
+    });
+
+    it("should return account_type_required error", () => {
+      renderComponent({ ...mockAccountForm, accountType: undefined });
+
+      act(() => {
+        fireEvent.click(screen.getByTestId(testIds.importBtn));
+      });
+
+      waitFor(() =>
+        expect(screen.getByTestId(testIds.importResonse).innerHTML).toEqual(
+          false
+        )
+      );
+    });
+  });
+
+  describe("deriveAccount", () => {
+    it("should return true", () => {
+      renderComponent(mockAccountForm);
+
+      act(() => {
+        fireEvent.click(screen.getByTestId(testIds.deriveBtn));
+      });
+
+      waitFor(() =>
+        expect(screen.getByTestId(testIds.deriveResponse).innerHTML).toEqual(
+          true
+        )
+      );
+    });
+
+    it("should return account_type_required error", () => {
+      renderComponent({ ...mockAccountForm, accountType: undefined });
+
+      act(() => {
+        fireEvent.click(screen.getByTestId(testIds.deriveBtn));
+      });
+
+      waitFor(() =>
+        expect(screen.getByTestId(testIds.deriveResponse).innerHTML).toEqual(
+          false
+        )
+      );
+    });
+  });
+
+  describe("restoreAccount", () => {
+    it("should return true", () => {
+      renderComponent(mockAccountForm);
+
+      act(() => {
+        fireEvent.click(screen.getByTestId(testIds.restoreBtn));
+      });
+
+      waitFor(() =>
+        expect(screen.getByTestId(testIds.restoreResponse).innerHTML).toEqual(
+          true
+        )
+      );
+    });
+
+    it("should return recovery_phrase_required error", () => {
+      renderComponent({ ...mockAccountForm, privateKeyOrSeed: undefined });
+
+      act(() => {
+        fireEvent.click(screen.getByTestId(testIds.restoreBtn));
+      });
+
+      waitFor(() =>
+        expect(screen.getByTestId(testIds.restoreResponse).innerHTML).toEqual(
+          false
+        )
+      );
+    });
+
+    it("should return password_required error", () => {
+      renderComponent({ ...mockAccountForm, password: undefined });
+
+      act(() => {
+        fireEvent.click(screen.getByTestId(testIds.restoreBtn));
+      });
+
+      waitFor(() =>
+        expect(screen.getByTestId(testIds.restoreResponse).innerHTML).toEqual(
+          false
+        )
+      );
+    });
+  });
+});

src/providers/authProvider/AuthProvider.tsx

@@ -9,15 +9,15 @@ import { useTranslation } from "react-i18next";
 import { useToast } from "@src/hooks";
 import Extension from "@src/Extension";
 import { AccountFormType } from "@src/pages";
-import { Action, AuthContext, InitialState } from "./types";
+import { Action, AuthContext as IAuthContext, InitialState } from "./types";
 
 const initialState: InitialState = {
   isInit: true,
 };
 
-const AuthContext = createContext({} as AuthContext);
+export const AuthContext = createContext({} as IAuthContext);
 
-const reducer = (state: InitialState, action: Action): InitialState => {
+export const reducer = (state: InitialState, action: Action): InitialState => {
   switch (action.type) {
     default:
       return state;

src/tests/setup.ts

@@ -0,0 +1,11 @@
+import { expect, afterEach } from "vitest";
+import { cleanup } from "@testing-library/react";
+import matchers from "@testing-library/jest-dom/matchers";
+
+// extends Vitest's expect method with methods from react-testing-library
+expect.extend(matchers);
+
+// runs a cleanup after each test case (e.g. clearing jsdom)
+afterEach(() => {
+  cleanup();
+});

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "types": ["vite/client", "node"],
+    "types": ["vite/client", "node", "vitest/globals"],
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": false,
     "skipLibCheck": true,

vite.config.ts

@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/// <reference types="vitest" />
+
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import { resolve } from "path";
@@ -31,6 +34,11 @@ $$/   $$/  $$$$$$/  $$/  $$/  $$/  $$$$$$$/       $$/      $$/  $$$$$$$/ $$/ $$/
 `);
 
 export default defineConfig({
+  // @ts-ignore
+  test: {
+    globals: true,
+    environment: "jsdom",
+  },
   resolve: {
     alias: {
       "@src": root,