Skip to content

Commit ab0d9c0

Browse files
carina-akaiacarina-akaia
authored
test: Setup testing environment & Implement tests for Homepage (#55)
1 parent 076dffc commit ab0d9c0

File tree

18 files changed

+1453
-220
lines changed

18 files changed

+1453
-220
lines changed

‎.eslintrc.json

+38-8
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,13 @@
77
"env": {
88
"node": true
99
},
10-
"plugins": ["@typescript-eslint", "prettier", "import", "@tanstack/query"],
10+
"plugins": [
11+
"@typescript-eslint",
12+
"prettier",
13+
"import",
14+
"@tanstack/query",
15+
"testing-library"
16+
],
1117
"extends": [
1218
"next/core-web-vitals",
1319
"eslint:recommended",
@@ -21,17 +27,32 @@
2127
"prettier"
2228
],
2329
"rules": {
24-
"camelcase": ["warn", { "properties": "never" }],
30+
"camelcase": [
31+
"warn",
32+
{
33+
"properties": "never"
34+
}
35+
],
2536
"@typescript-eslint/no-explicit-any": "off",
2637
"@typescript-eslint/ban-types": "off",
27-
"prettier/prettier": ["error", { "endOfLine": "auto" }],
38+
"prettier/prettier": [
39+
"error",
40+
{
41+
"endOfLine": "auto"
42+
}
43+
],
2844
"sort-imports": [
2945
"error",
3046
{
3147
"ignoreCase": false,
3248
"ignoreDeclarationSort": true, // don"t want to sort import lines, use eslint-plugin-import instead
3349
"ignoreMemberSort": false,
34-
"memberSyntaxSortOrder": ["none", "all", "multiple", "single"],
50+
"memberSyntaxSortOrder": [
51+
"none",
52+
"all",
53+
"multiple",
54+
"single"
55+
],
3556
"allowSeparatedGroups": true
3657
}
3758
],
@@ -45,14 +66,23 @@
4566
"builtin", // Built-in imports (come from NodeJS native) go first
4667
"external", // <- External imports
4768
"internal", // <- Absolute imports
48-
["sibling", "parent"], // <- Relative imports, the sibling and parent types they can be mingled together
69+
[
70+
"sibling",
71+
"parent"
72+
], // <- Relative imports, the sibling and parent types they can be mingled together
4973
"index", // <- index imports
5074
"unknown" // <- unknown
5175
],
5276
"pathGroups": [
53-
{ "pattern": "react", "group": "external", "position": "before" }
77+
{
78+
"pattern": "react",
79+
"group": "external",
80+
"position": "before"
81+
}
82+
],
83+
"pathGroupsExcludedImportTypes": [
84+
"react"
5485
],
55-
"pathGroupsExcludedImportTypes": ["react"],
5686
"newlines-between": "always",
5787
"alphabetize": {
5888
/* sort in ascending order. Options: ["ignore", "asc", "desc"] */
@@ -63,4 +93,4 @@
6393
}
6494
]
6595
}
66-
}
96+
}

‎.github/workflows/unit-tests.yml

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
2+
3+
name: Execute all unit tests
4+
5+
on:
6+
push:
7+
branches: ["*"]
8+
9+
pull_request:
10+
branches: [main, staging]
11+
12+
jobs:
13+
build:
14+
runs-on: ubuntu-latest
15+
16+
strategy:
17+
matrix:
18+
node-version: [20.x]
19+
20+
steps:
21+
- uses: actions/checkout@v3
22+
- name: Use Node.js ${{ matrix.node-version }}
23+
uses: actions/setup-node@v3
24+
25+
with:
26+
node-version: ${{ matrix.node-version }}
27+
cache: "yarn"
28+
29+
- name: Install dependencies
30+
run: yarn install --immutable --immutable-cache --check-cache
31+
32+
- name: Execute Unit tests
33+
run: yarn test:unit

‎.vscode/extensions.json

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
11
{
2-
"recommendations": ["antfu.unocss"]
3-
}
2+
"recommendations": [
3+
"antfu.unocss",
4+
"aaron-bond.better-comments",
5+
"streetsidesoftware.code-spell-checker",
6+
"gruntfuggly.todo-tree"
7+
]
8+
}

‎.vscode/settings.json

+22-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,27 @@
11
{
22
"editor.formatOnSave": true,
3-
"eslint.validate": ["typescript"],
3+
"eslint.validate": [
4+
"typescript"
5+
],
46
"editor.codeActionsOnSave": {
57
"source.fixAll.eslint": "explicit",
68
"source.fixAll": "explicit"
7-
}
8-
}
9-
9+
},
10+
"cSpell.words": [
11+
"bitget",
12+
"colocation",
13+
"data-testid",
14+
"NADABOT",
15+
"narwallets",
16+
"naxios",
17+
"nearfi",
18+
"POTLOCK",
19+
"ramper",
20+
"shadcn",
21+
"typecheck",
22+
"unocss",
23+
"welldone",
24+
"wpdas",
25+
"xdefi"
26+
]
27+
}

‎README.md

+109-23
Original file line numberDiff line numberDiff line change
@@ -2,56 +2,61 @@
22

33
PotLock application.
44

5-
You can access BOS Potlock Version using one of the environments below:
5+
You can access BOS PotLock version using one of the environments below:
66

77
- [Production](https://app.potlock.org/)
88
- [Staging](https://app.potlock.org/staging.potlock.near/widget/IndexLoader)
99

10-
## Getting Started
10+
## Development
11+
12+
### Getting Started
1113

1214
```bash
1315
# using the right node version
1416
nvm use;
1517
# enable Yarn support
1618
corepack enable;
17-
# install dependencies
18-
yarn;
1919
# create config for environment variables
20-
cp .env.example .env.local
20+
cp .env.example .env.local;
2121
# if required, edit .env.local
22-
# then run the development server
22+
# then run the development server ( dependencies will be installed automatically )
2323
yarn dev
2424
```
2525

2626
Open [http://localhost:3000](http://localhost:3000) in your browser.
2727

28-
## DJango Indexer API
28+
### DJango Indexer API
2929

30-
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>
30+
This project is using an indexer service.
31+
You can access its docs here: <https://github.com/PotLock/django-indexer?tab=readme-ov-file#api-endpoints>
3132

3233
**URI**: `http://ec2-100-27-57-47.compute-1.amazonaws.com/api/v1`
3334

34-
## Project Structure
35+
### Project Structure
3536

36-
Maintains explicit separation between abstract and business-logic-heavy parts of the codebase.
37-
This structure offers a highly modular approach, defining clear boundaries for different aspects of the application within each module:
37+
Provides explicit separation between abstract and business-logic-heavy parts of the codebase,
38+
for which it offers a highly modular approach, defining clear boundaries for different
39+
aspects of the application within each module:
3840

3941
```sh
42+
4043
[ src/ ]
4144
│
42-
├── [ app ] <--- # Entry point of the application. Follows Nextjs App routing specification ( see link 1. )
45+
├── [ app ] <--- # Entry point of the application.
46+
│ │ # Follows Nextjs App routing specification ( see link 1. )
4347
│ │
4448
│ ...
4549
│ │
46-
│ └── [ _store ] <--- # Application state root. Uses Rematch state management library, based on Redux
47-
│
50+
│ └── [ _store ] <--- # Application state root.
51+
│ # Uses Rematch state management library, based on Redux.
4852
│
4953
│
5054
│
5155
│
52-
├── [ common ] <--- # Low-level foundation of the app, containing endpoint bindings, utility libraries,
53-
│ │ # reusable primitives, and assets, used in layouts and business logic across the codebase.
54-
│ │ # MUST NOT itself contain business logic. AKA "shared" ( see link 2. )
56+
├── [ common ] <--- # Low-level foundation of the app, containing endpoint bindings,
57+
│ │ # utility libraries, reusable primitives, and assets, used in layouts and
58+
│ │ # business logic across the codebase. MUST NOT contain business logic by itself.
59+
│ │ # AKA "shared" ( see link 2. )
5560
│ │
5661
│ ├── constants.ts <--- # Static reusable values, e.g.
5762
│ │ export const DEFAULT_NETWORK = "testnet"
@@ -72,14 +77,14 @@ This structure offers a highly modular approach, defining clear boundaries for d
7277
│ │
7378
│ ├── [ components ] <--- # React components implementing UI design primitives
7479
│ │
75-
│ └── [ utils ] <--- # UI-specific utilities, like DOM manipulations or TailwindCSS class transformers
80+
│ └── [ utils ] <--- # UI-specific utilities, like DOM manipulations
81+
│ # or TailwindCSS class transformers
7682
│
7783
│
7884
│
7985
│
80-
│
81-
└── [ modules ] <--- # Business logic units broken down into categories.
82-
│ # Simply put, this is a collection of directories that contain code implementing specific
86+
└── [ modules ] <--- # Business logic units broken down into categories. Simply put, this is
87+
│ # a collection of directories that contain code implementing specific
8388
│ # groups of app use cases and are named after functionalities they provide.
8489
│
8590
...
@@ -93,7 +98,7 @@ This structure offers a highly modular approach, defining clear boundaries for d
9398
│ ├── constants.ts <--- # Module-specific static reusable values, e.g.
9499
│ │ export const POTLOCK_REGISTRY_LIST_ID = 1
95100
│ │
96-
│ ├── models.ts <--- # Feature state definitions ( See link 2. )
101+
│ ├── models.ts <--- # Feature state definitions ( See link 3. )
97102
│ │ # If this file grows over 300 LoC, consider turning it into a directory
98103
│ │ # with the same name by applying code-splitting techniques.
99104
│ │
@@ -112,8 +117,89 @@ This structure offers a highly modular approach, defining clear boundaries for d
112117

113118
```
114119

115-
### Links
120+
#### Links
116121

117122
1. [Nextjs Routing](https://nextjs.org/docs/app/building-your-application/routing)
118123
2. [Shared layer from Feature-Sliced Design methodology](https://feature-sliced.design/docs/reference/layers#shared)
119124
3. [Rematch models](https://rematchjs.org/docs/api-reference/models)
125+
126+
### Testing
127+
128+
We use Vitest testing framework coupled with React Testing Library to specifically target UI.
129+
130+
For details, please refer to the corresponding documentation resources:
131+
132+
- [Vitest API reference](https://vitest.dev/api/)
133+
- [React Testing Library guideline](https://testing-library.com/docs/react-testing-library/example-intro)
134+
135+
#### Commands
136+
137+
Execute all unit tests:
138+
139+
```bash
140+
yarn test:unit
141+
```
142+
143+
Run dev server for unit tests:
144+
145+
```bash
146+
yarn dev:test
147+
```
148+
149+
#### File colocation
150+
151+
The project convention implies keeping the test scenarios alongside the code they're meant for
152+
( See examples below ).
153+
154+
##### Pages
155+
156+
Tests for each page must be placed in `tests.tsx`
157+
within the same directory where `page.tsx` is located:
158+
159+
```bash
160+
161+
─── [ app ]
162+
│
163+
├── page.tsx <--- # Homepage ( URL "/" )
164+
│
165+
├── tests.tsx <--- # Tests for Homepage
166+
│
167+
├── [ pots ]
168+
│ │
169+
│ ├── page.tsx <--- # Pots page ( URL "/pots" )
170+
│ │
171+
│ └── tests.tsx <--- # Tests for Pots page
172+
│
173+
└── [ users ]
174+
│
175+
└── [ [userId] ]
176+
│
177+
├── page.tsx <--- # User page ( e.g. "/users/builder.near" )
178+
│
179+
└── tests.tsx <--- # Tests for User page
180+
181+
```
182+
183+
##### Modules
184+
185+
For modules, we target specific implementation details:
186+
187+
```bash
188+
189+
─── [ modules ]
190+
│
191+
└── [ profile ] <--- # Profile module
192+
│
193+
├── [ components ]
194+
│ │
195+
│ ├── ProfileCard.tsx <--- # Profile card component
196+
│ │
197+
│ └── ProfileCard.test.tsx <--- # Tests for profile card component
198+
│
199+
└── [ utils ]
200+
│
201+
├── validation.ts <--- # Profile validation functions
202+
│
203+
└── validation.test.ts <--- # Profile validation tests
204+
205+
```

0 commit comments

Comments
 (0)