Merge pull request #1027 from dacadeorg/test/add-testing

test: add testing for ui components

Author: serapieTuyishime

.github/workflows/ci.yml

@@ -0,0 +1,36 @@
+name: ci
+
+on: ["push", "pull_request"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "21.0.0"
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Setup environment variables
+        run: |
+          echo "NEXT_PUBLIC_FIREBASE_API_KEY=${{ secrets.NEXT_PUBLIC_FIREBASE_API_KEY }}" >> $GITHUB_ENV
+          echo "NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=${{ secrets.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN }}" >> $GITHUB_ENV
+          echo "NEXT_PUBLIC_FIREBASE_PROJECT_ID=${{ secrets.NEXT_PUBLIC_FIREBASE_PROJECT_ID }}" >> $GITHUB_ENV
+          echo "NEXT_PUBLIC_FIREBASE_APP_ID=${{ secrets.NEXT_PUBLIC_FIREBASE_APP_ID }}" >> $GITHUB_ENV
+          echo "NEXT_PUBLIC_API_BASE_URL=${{ secrets.NEXT_PUBLIC_API_BASE_URL }}" >> $GITHUB_ENV
+          echo "NEXT_PUBLIC_BUGSNAG_API_KEY=${{ secrets.NEXT_PUBLIC_BUGSNAG_API_KEY }}" >> $GITHUB_ENV
+          echo "NEXT_PUBLIC_SHOW_LANGUAGE_SELECTOR=${{ secrets.NEXT_PUBLIC_SHOW_LANGUAGE_SELECTOR }}" >> $GITHUB_ENV
+          echo "NEXT_PUBLIC_DISCORD_CLIENT_ID=${{ secrets.NEXT_PUBLIC_DISCORD_CLIENT_ID }}" >> $GITHUB_ENV
+          echo "NEXT_PUBLIC_DISCORD_CALLBACK_URL=${{ secrets.NEXT_PUBLIC_DISCORD_CALLBACK_URL }}" >> $GITHUB_ENV
+          echo "NEXT_PUBLIC_DISCORD_OAUTH_BASE_URL=${{ secrets.NEXT_PUBLIC_DISCORD_OAUTH_BASE_URL }}" >> $GITHUB_ENV
+          echo "NEXT_PUBLIC_DISCORD_SCOPE=${{ secrets.NEXT_PUBLIC_DISCORD_SCOPE }}" >> $GITHUB_ENV
+          echo "NEXT_PUBLIC_GOOGLE_TRANSLATE_API_KEY=${{ secrets.NEXT_PUBLIC_GOOGLE_TRANSLATE_API_KEY }}" >> $GITHUB_ENV
+          echo "NEXT_PUBLIC_BLOCK_EXPLORER_URL=${{ secrets.NEXT_PUBLIC_BLOCK_EXPLORER_URL }}" >> $GITHUB_ENV
+          echo "NEXT_PUBLIC_IPFS_URL=${{ secrets.NEXT_PUBLIC_IPFS_URL }}" >> $GITHUB_ENV
+
+      - name: Run tests
+        run: yarn test

.nvmrc

@@ -1 +1 @@
-v18.14.0
+v21.0.0

__mocks__/colors.ts

@@ -0,0 +1,15 @@
+export const colors = {
+  textAccent: "--tm-text",
+  text: "--tm-text",
+  accent: "--tm-accent",
+  primary: "--tm-primary",
+  secondary: "--tm-secondary",
+  highlight: "--tm-highlight",
+  muted: "--tm-muted",
+  cover: {
+    text: "--tm-text",
+    accent: "--tm-accent",
+    primary: "--tm-primary",
+    background: "--tm-background",
+  },
+};

__mocks__/link.ts

@@ -0,0 +1,5 @@
+export const link = {
+    url: "https://example.com",
+    title: "Example Link",
+    icon: "discord",
+  };

__mocks__/plugin.ts

@@ -0,0 +1 @@
+export default function remarkPlugin() {}

__mocks__/provider/handlers.ts

@@ -0,0 +1,9 @@
+import { http, HttpResponse, delay } from "msw";
+
+export const handlers = [
+  http.get("/api/communities", async () => {
+    await delay(150);
+    console.log("Called called called");
+    return HttpResponse.json({ community: {} });
+  }),
+];

__mocks__/react-markdown.tsx

@@ -0,0 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+export default function Mardown({ children }) {
+  return <>{children}</>;
+}

__mocks__/renderWithRedux.tsx

@@ -0,0 +1,23 @@
+import { IRootState, middlewares, reducers } from "@/store";
+import { configureStore } from "@reduxjs/toolkit";
+import { ReactElement, ReactNode } from "react";
+import { Provider } from "react-redux";
+import { render } from "@testing-library/react";
+
+const mockStore = (state: Partial<IRootState>) => {
+  return configureStore({
+    reducer: reducers,
+    middleware: (getDefaultMiddleware) => {
+      return getDefaultMiddleware().concat(...middlewares);
+    },
+    preloadedState: state,
+  });
+};
+
+export const renderWithRedux = (component: ReactElement, state: Partial<IRootState> = {}) => {
+  const Wrapper = ({ children }: { children: ReactNode }) => {
+    return <Provider store={mockStore(state)}>{children}</Provider>;
+  };
+
+  return render(component, { wrapper: Wrapper });
+};

__mocks__/reward.ts

@@ -0,0 +1,13 @@
+export const reward = {
+  id: "id",
+  ref: "ref",
+  created_at: new Date("2024-01-29T08:00:00Z"),
+  updated_at: new Date("2024-01-29T08:00:00Z"),
+  challenge: "challenge",
+  type: "challenge type",
+  community: "community",
+  token: "token",
+  stable: false,
+  amount: 10,
+  timestamp: 10,
+};

__mocks__/svg.ts

@@ -0,0 +1,2 @@
+const ReactComponent = "div";
+export default ReactComponent;