Skip to content

Commit aab1e11

Browse files
swiinyswiiny
authored
Merge pull request #409 from swiiny/feat/test
Feat/test
2 parents f93d3f8 + df47ee5 commit aab1e11

File tree

91 files changed

+778
-274
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

91 files changed

+778
-274
lines changed

‎.github/workflows/build-and-test.yml

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
name: Build all templates
2+
3+
on:
4+
pull_request:
5+
branches: [main]
6+
7+
jobs:
8+
test-desktop-templates:
9+
runs-on: ubuntu-24.04
10+
steps:
11+
- uses: actions/checkout@v4
12+
13+
- name: Install dependencies
14+
run: npm install
15+
16+
- name: Build all packages
17+
run: npm run build
18+
19+
- name: Install Playwright Browsers
20+
run: npx playwright install --with-deps
21+
22+
- name: Run Playwright Desktop Tests
23+
run: npm run test:desktop:templates
24+
25+
- uses: actions/upload-artifact@v4
26+
if: always()
27+
with:
28+
name: playwright-report-desktop
29+
path: playwright-report-desktop/
30+
retention-days: 10
31+
32+
test-mobile-templates:
33+
runs-on: ubuntu-24.04
34+
steps:
35+
- uses: actions/checkout@v4
36+
37+
- name: Install dependencies
38+
run: npm install
39+
40+
- name: Build all packages
41+
run: npm run build
42+
43+
- name: Install Playwright Browsers
44+
run: npx playwright install --with-deps
45+
46+
- name: Run Playwright Mobile Tests
47+
run: npm run test:mobile:templates
48+
49+
- uses: actions/upload-artifact@v4
50+
if: always()
51+
with:
52+
name: playwright-report-mobile
53+
path: playwright-report-mobile/
54+
retention-days: 10

‎.github/workflows/build.yml

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,9 @@ yarn-error.log*
3636
*.tsbuildinfo
3737

3838
package-lock.json
39+
40+
41+
/test-results
42+
43+
44+
playwright-report-*

‎.vscode/settings.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,5 +45,5 @@
4545
"[css]": {
4646
"editor.defaultFormatter": "esbenp.prettier-vscode"
4747
},
48-
"cSpell.words": ["nextjs", "stylex", "stylexjs", "swiiny"]
48+
"cSpell.words": ["networkidle", "nextjs", "stylex", "stylexjs", "swiiny"]
4949
}

‎README.md

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
- [Quick start](#quick-start)
1515
- [Technologies](#technologies)
1616
- [Templates](#templates)
17+
- [Tests](#tests)
1718

1819
## Introduction
1920

@@ -92,3 +93,99 @@ The Stylex template leverages [Stylex](https://stylexjs.com/) for styling, blend
9293
The Tailwind template is based on the [Tailwind CSS](https://tailwindcss.com/) framework. It is configured with the [Tailwind CSS](https://tailwindcss.com/docs/installation) library. This template utilizes the utility-first approach to styling, providing a highly customizable and efficient way to build your Dapp.
9394

9495
This template includes a base configuration file (`tailwind.config.js`) to get you started with customizing your styles. You can refer to the [Tailwind CSS documentation](https://tailwindcss.com/docs/configuration) for more information on how to extend and modify the default configuration.
96+
97+
## Tests
98+
99+
The testing setup uses **Playwright** for end-to-end tests and supports both local and CI testing workflows. Below are the details of the test implementation and available commands.
100+
101+
### Test Implementation
102+
103+
The project tests are designed to:
104+
105+
1. Validate that all templates render correctly on both desktop and mobile environments.
106+
2. Compare snapshots to detect unintended UI changes.
107+
3. Verify template-specific logic to ensure functionality.
108+
109+
The tests are configured in the `playwright.config.ts` file with the following projects:
110+
111+
- **`chromium_desktop`**: Tests templates on a desktop environment using Chromium.
112+
- **`safari_mobile`**: Tests templates on a mobile environment using Safari emulation (iPhone 13).
113+
114+
Additionally, the project uses **Act** to simulate GitHub Actions workflows for testing in CI-like environments locally.
115+
116+
---
117+
118+
### Test Commands
119+
120+
Here are the available test commands in `package.json`:
121+
122+
#### **Local Testing**
123+
124+
1. **Run Desktop Template Tests**
125+
126+
```bash
127+
npm run test:desktop:templates
128+
```
129+
130+
- Runs all template tests for the desktop environment using Playwright.
131+
- Saves the HTML report in `playwright-report-desktop`.
132+
133+
2. **Run Mobile Template Tests**
134+
135+
```bash
136+
npm run test:mobile:templates
137+
```
138+
139+
- Runs all template tests for the mobile environment using Playwright.
140+
- Saves the HTML report in `playwright-report-mobile`.
141+
142+
#### **GitHub Actions Simulation**
143+
144+
1. **Run Desktop Template Tests in CI-like Environment**
145+
146+
```bash
147+
npm run test:gh:test:desktop:templates
148+
```
149+
150+
- Uses Act to simulate the `test-desktop-templates` job from the GitHub Actions workflow.
151+
- Runs the tests using the `ubuntu-24.04` environment with `linux/amd64` architecture.
152+
153+
2. **Run Mobile Template Tests in CI-like Environment**
154+
155+
```bash
156+
npm run test:gh:test:mobile:templates
157+
```
158+
159+
- Uses Act to simulate the `test-mobile-templates` job from the GitHub Actions workflow.
160+
- Runs the tests using the `ubuntu-24.04` environment with `linux/amd64` architecture.
161+
162+
---
163+
164+
### Reports
165+
166+
- Each test generates an HTML report for detailed insights into test results. The report paths are defined by the `PLAYWRIGHT_HTML_REPORT` environment variable:
167+
168+
- **Desktop Report**: `playwright-report-desktop`
169+
- **Mobile Report**: `playwright-report-mobile`
170+
171+
- In CI-like environments, logs and outputs are captured by Act and displayed in the terminal for debugging.
172+
173+
---
174+
175+
### Example Usage
176+
177+
#### Running All Desktop Tests Locally
178+
179+
```bash
180+
npm run test:desktop:templates
181+
```
182+
183+
#### Simulating GitHub Actions for Mobile Templates
184+
185+
```bash
186+
npm run test:gh:test:mobile:templates
187+
```
188+
189+
---
190+
191+
This setup ensures consistency and reliability across different environments, enabling you to test templates effectively during local development and CI workflows.

‎package.json

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,25 @@
1414
"build": "node scripts/share_files.js && node scripts/build.js",
1515
"share-files": "node scripts/share_files.js",
1616
"new-template": "node scripts/new_template.js",
17-
"husky": "husky install"
17+
"husky": "husky install",
18+
"test:desktop:templates": "PLAYWRIGHT_HTML_REPORT=playwright-report-desktop npx playwright test --project chromium_desktop",
19+
"test:mobile:templates": "PLAYWRIGHT_HTML_REPORT=playwright-report-mobile npx playwright test --project safari_mobile",
20+
"test:gh:test:desktop:templates": "act pull_request --job test-desktop-templates -P ubuntu-24.04=ghcr.io/catthehacker/ubuntu:act-24.04 --container-architecture linux/amd64",
21+
"test:gh:test:mobile:templates": "act pull_request --job test-mobile-templates -P ubuntu-24.04=ghcr.io/catthehacker/ubuntu:act-24.04 --container-architecture linux/amd64"
1822
},
1923
"dependencies": {
20-
"chalk": "^5.3.0"
24+
"chalk": "^5.4.1",
25+
"dotenv": "^16.4.7",
26+
"pixelmatch": "^6.0.0",
27+
"pngjs": "^7.0.0"
2128
},
2229
"devDependencies": {
23-
"@commitlint/cli": "^17.8.1",
24-
"@commitlint/config-conventional": "^17.8.0",
30+
"@commitlint/cli": "^19.6.1",
31+
"@commitlint/config-conventional": "^17.8.1",
32+
"@playwright/test": "^1.49.1",
2533
"@semantic-release/changelog": "^6.0.3",
26-
"@semantic-release/github": "^9.2.6",
34+
"@semantic-release/github": "^11.0.1",
2735
"husky": "^8.0.3",
28-
"semantic-release": "^22.0.12"
36+
"semantic-release": "^24.2.1"
2937
}
3038
}

‎packages/base/components/default/Button/Button.module.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
border: none;
66
background-color: transparent;
77

8+
padding: 0;
9+
810
cursor: pointer;
911

1012
font-size: calc(1.5rem * 0.6);

‎packages/base/components/default/Button/Button.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ const Button: FC<IButton> = ({
1818
iconColor,
1919
icon,
2020
gradientContainerProps,
21-
customClasses = ''
21+
customClasses = '',
22+
...otherProps
2223
}) => {
2324
const [isCopying, setIsCopying] = useState(false);
2425

@@ -98,6 +99,7 @@ const Button: FC<IButton> = ({
9899
[styles.isSuccess]: !!isCopying
99100
})}
100101
onClick={() => handleClick()}
102+
{...otherProps}
101103
>
102104
{content}
103105
</button>

‎packages/base/components/default/Technologies/Technologies.module.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
justify-content: center;
77
align-items: center;
88

9-
gap: 30px;
9+
gap: 28px;
1010

1111
@include md() {
1212
gap: 40px;

0 commit comments

Comments
 (0)