test: Setup testing environment & Implement tests for Homepage

.eslintrc.json

@@ -7,7 +7,13 @@
   "env": {
     "node": true
   },
-  "plugins": ["@typescript-eslint", "prettier", "import", "@tanstack/query"],
+  "plugins": [
+    "@typescript-eslint",
+    "prettier",
+    "import",
+    "@tanstack/query",
+    "testing-library"
+  ],
   "extends": [
     "next/core-web-vitals",
     "eslint:recommended",
@@ -21,17 +27,32 @@
     "prettier"
   ],
   "rules": {
-    "camelcase": ["warn", { "properties": "never" }],
+    "camelcase": [
+      "warn",
+      {
+        "properties": "never"
+      }
+    ],
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/ban-types": "off",
-    "prettier/prettier": ["error", { "endOfLine": "auto" }],
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ],
     "sort-imports": [
       "error",
       {
         "ignoreCase": false,
         "ignoreDeclarationSort": true, // don"t want to sort import lines, use eslint-plugin-import instead
         "ignoreMemberSort": false,
-        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
+        "memberSyntaxSortOrder": [
+          "none",
+          "all",
+          "multiple",
+          "single"
+        ],
         "allowSeparatedGroups": true
       }
     ],
@@ -45,14 +66,23 @@
           "builtin", // Built-in imports (come from NodeJS native) go first
           "external", // <- External imports
           "internal", // <- Absolute imports
-          ["sibling", "parent"], // <- Relative imports, the sibling and parent types they can be mingled together
+          [
+            "sibling",
+            "parent"
+          ], // <- Relative imports, the sibling and parent types they can be mingled together
           "index", // <- index imports
           "unknown" // <- unknown
         ],
         "pathGroups": [
-          { "pattern": "react", "group": "external", "position": "before" }
+          {
+            "pattern": "react",
+            "group": "external",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": [
+          "react"
         ],
-        "pathGroupsExcludedImportTypes": ["react"],
         "newlines-between": "always",
         "alphabetize": {
           /* sort in ascending order. Options: ["ignore", "asc", "desc"] */
@@ -63,4 +93,4 @@
       }
     ]
   }
-}
+}

.github/workflows/unit-tests.yml

@@ -0,0 +1,33 @@
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Execute all unit tests
+
+on:
+  push:
+    branches: ["*"]
+
+  pull_request:
+    branches: [main, staging]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache --check-cache
+
+      - name: Execute Unit tests
+        run: yarn test:unit

.vscode/extensions.json

@@ -1,3 +1,8 @@
 {
-  "recommendations": ["antfu.unocss"]
-}
+  "recommendations": [
+    "antfu.unocss",
+    "aaron-bond.better-comments",
+    "streetsidesoftware.code-spell-checker",
+    "gruntfuggly.todo-tree"
+  ]
+}

.vscode/settings.json

@@ -1,9 +1,27 @@
 {
   "editor.formatOnSave": true,
-  "eslint.validate": ["typescript"],
+  "eslint.validate": [
+    "typescript"
+  ],
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
     "source.fixAll": "explicit"
-  }
-}
-
+  },
+  "cSpell.words": [
+    "bitget",
+    "colocation",
+    "data-testid",
+    "NADABOT",
+    "narwallets",
+    "naxios",
+    "nearfi",
+    "POTLOCK",
+    "ramper",
+    "shadcn",
+    "typecheck",
+    "unocss",
+    "welldone",
+    "wpdas",
+    "xdefi"
+  ]
+}

README.md

@@ -2,56 +2,61 @@
 
 PotLock application.
 
-You can access BOS Potlock Version using one of the environments below:
+You can access BOS PotLock version using one of the environments below:
 
 - [Production](https://app.potlock.org/)
 - [Staging](https://app.potlock.org/staging.potlock.near/widget/IndexLoader)
 
-## Getting Started
+## Development
+
+### Getting Started
 
 ```bash
 # using the right node version
 nvm use;
 # enable Yarn support
 corepack enable;
-# install dependencies
-yarn;
 # create config for environment variables
-cp .env.example .env.local
+cp .env.example .env.local;
 # if required, edit .env.local
-# then run the development server
+# then run the development server ( dependencies will be installed automatically )
 yarn dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) in your browser.
 
-## DJango Indexer API
+### DJango Indexer API
 
-This project is using a indexer service. You can access its docs here: <https://github.com/PotLock/django-indexer?tab=readme-ov-file#api-endpoints>
+This project is using an indexer service.
+You can access its docs here: <https://github.com/PotLock/django-indexer?tab=readme-ov-file#api-endpoints>
 
 **URI**: `http://ec2-100-27-57-47.compute-1.amazonaws.com/api/v1`
 
-## Project Structure
+### Project Structure
 
-Maintains explicit separation between abstract and business-logic-heavy parts of the codebase.
-This structure offers a highly modular approach, defining clear boundaries for different aspects of the application within each module:
+Provides explicit separation between abstract and business-logic-heavy parts of the codebase,
+for which it offers a highly modular approach, defining clear boundaries for different
+aspects of the application within each module:
 
 ```sh
+
 [ src/ ]
 │
-├── [ app ] <--- # Entry point of the application. Follows Nextjs App routing specification ( see link 1. )
+├── [ app ] <--- # Entry point of the application.
+│   │            # Follows Nextjs App routing specification ( see link 1. )
 │   │
 │  ...
 │   │
-│   └── [ _store ] <--- # Application state root. Uses Rematch state management library, based on Redux
-│
+│   └── [ _store ] <--- # Application state root.
+│                       # Uses Rematch state management library, based on Redux.
 │
 │
 │
 │
-├── [ common ] <--- # Low-level foundation of the app, containing endpoint bindings, utility libraries,
-│   │               # reusable primitives, and assets, used in layouts and business logic across the codebase.
-│   │               # MUST NOT itself contain business logic. AKA "shared" ( see link 2. )
+├── [ common ] <--- # Low-level foundation of the app, containing endpoint bindings,
+│   │               # utility libraries, reusable primitives, and assets, used in layouts and
+│   │               # business logic across the codebase. MUST NOT contain business logic by itself.
+│   │               # AKA "shared" ( see link 2. )
 │   │
 │   ├── constants.ts <--- # Static reusable values, e.g.
 │   │                      export const DEFAULT_NETWORK = "testnet"
@@ -72,14 +77,14 @@ This structure offers a highly modular approach, defining clear boundaries for d
 │       │
 │       ├── [ components ] <--- # React components implementing UI design primitives
 │       │
-│       └── [ utils ] <--- # UI-specific utilities, like DOM manipulations or TailwindCSS class transformers
+│       └── [ utils ] <--- # UI-specific utilities, like DOM manipulations
+│                          # or TailwindCSS class transformers
 │
 │
 │
 │
-│
-└── [ modules ] <--- # Business logic units broken down into categories.
-    │                # Simply put, this is a collection of directories that contain code implementing specific
+└── [ modules ] <--- # Business logic units broken down into categories. Simply put, this is
+    │                # a collection of directories that contain code implementing specific
     │                # groups of app use cases and are named after functionalities they provide.
     │
    ...
@@ -93,7 +98,7 @@ This structure offers a highly modular approach, defining clear boundaries for d
     │   ├── constants.ts <--- # Module-specific static reusable values, e.g.
     │   │                       export const POTLOCK_REGISTRY_LIST_ID = 1
     │   │
-    │   ├── models.ts <--- # Feature state definitions ( See link 2. )
+    │   ├── models.ts <--- # Feature state definitions ( See link 3. )
     │   │                  # If this file grows over 300 LoC, consider turning it into a directory
     │   │                  # with the same name by applying code-splitting techniques.
     │   │
@@ -112,8 +117,89 @@ This structure offers a highly modular approach, defining clear boundaries for d
 
 ```
 
-### Links
+#### Links
 
 1. [Nextjs Routing](https://nextjs.org/docs/app/building-your-application/routing)
 2. [Shared layer from Feature-Sliced Design methodology](https://feature-sliced.design/docs/reference/layers#shared)
 3. [Rematch models](https://rematchjs.org/docs/api-reference/models)
+
+### Testing
+
+We use Vitest testing framework coupled with React Testing Library to specifically target UI.
+
+For details, please refer to the corresponding documentation resources:
+
+- [Vitest API reference](https://vitest.dev/api/)
+- [React Testing Library guideline](https://testing-library.com/docs/react-testing-library/example-intro)
+
+#### Commands
+
+Execute all unit tests:
+
+```bash
+yarn test:unit
+```
+
+Run dev server for unit tests:
+
+```bash
+yarn dev:test
+```
+
+#### File colocation
+
+The project convention implies keeping the test scenarios alongside the code they're meant for
+( See examples below ).
+
+##### Pages
+
+Tests for each page must be placed in `tests.tsx`
+within the same directory where `page.tsx` is located:
+
+```bash
+
+─── [ app ]
+    │
+    ├── page.tsx <--- # Homepage ( URL "/" )
+    │
+    ├── tests.tsx <--- # Tests for Homepage
+    │
+    ├── [ pots ]
+    │   │
+    │   ├── page.tsx <--- # Pots page ( URL "/pots" )
+    │   │
+    │   └── tests.tsx <--- # Tests for Pots page
+    │
+    └── [ users ]
+        │
+        └── [ [userId] ]
+            │
+            ├── page.tsx <--- # User page ( e.g. "/users/builder.near" )
+            │
+            └── tests.tsx <--- # Tests for User page
+
+```
+
+##### Modules
+
+For modules, we target specific implementation details:
+
+```bash
+
+─── [ modules ]
+    │
+    └── [ profile ] <--- # Profile module
+        │
+        ├── [ components ]
+        │   │
+        │   ├── ProfileCard.tsx <--- # Profile card component
+        │   │
+        │   └── ProfileCard.test.tsx <--- # Tests for profile card component
+        │
+        └── [ utils ]
+            │
+            ├── validation.ts <--- # Profile validation functions
+            │
+            └── validation.test.ts <--- # Profile validation tests
+
+```