Merge pull request #409 from swiiny/feat/test

Feat/test

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

@@ -0,0 +1,54 @@
+name: Build all templates
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  test-desktop-templates:
+    runs-on: ubuntu-24.04
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build all packages
+        run: npm run build
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright Desktop Tests
+        run: npm run test:desktop:templates
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report-desktop
+          path: playwright-report-desktop/
+          retention-days: 10
+
+  test-mobile-templates:
+    runs-on: ubuntu-24.04
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build all packages
+        run: npm run build
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright Mobile Tests
+        run: npm run test:mobile:templates
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report-mobile
+          path: playwright-report-mobile/
+          retention-days: 10

.gitignore

@@ -36,3 +36,9 @@ yarn-error.log*
 *.tsbuildinfo
 
 package-lock.json
+
+
+/test-results
+
+
+playwright-report-*

.vscode/settings.json

@@ -45,5 +45,5 @@
 	"[css]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
-	"cSpell.words": ["nextjs", "stylex", "stylexjs", "swiiny"]
+	"cSpell.words": ["networkidle", "nextjs", "stylex", "stylexjs", "swiiny"]
 }

README.md

@@ -14,6 +14,7 @@
 - [Quick start](#quick-start)
 - [Technologies](#technologies)
 - [Templates](#templates)
+- [Tests](#tests)
 
 ## Introduction
 
@@ -92,3 +93,99 @@ The Stylex template leverages [Stylex](https://stylexjs.com/) for styling, blend
 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.
 
 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.
+
+## Tests
+
+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.
+
+### Test Implementation
+
+The project tests are designed to:
+
+1. Validate that all templates render correctly on both desktop and mobile environments.
+2. Compare snapshots to detect unintended UI changes.
+3. Verify template-specific logic to ensure functionality.
+
+The tests are configured in the `playwright.config.ts` file with the following projects:
+
+- **`chromium_desktop`**: Tests templates on a desktop environment using Chromium.
+- **`safari_mobile`**: Tests templates on a mobile environment using Safari emulation (iPhone 13).
+
+Additionally, the project uses **Act** to simulate GitHub Actions workflows for testing in CI-like environments locally.
+
+---
+
+### Test Commands
+
+Here are the available test commands in `package.json`:
+
+#### **Local Testing**
+
+1. **Run Desktop Template Tests**
+
+   ```bash
+   npm run test:desktop:templates
+   ```
+
+   - Runs all template tests for the desktop environment using Playwright.
+   - Saves the HTML report in `playwright-report-desktop`.
+
+2. **Run Mobile Template Tests**
+
+   ```bash
+   npm run test:mobile:templates
+   ```
+
+   - Runs all template tests for the mobile environment using Playwright.
+   - Saves the HTML report in `playwright-report-mobile`.
+
+#### **GitHub Actions Simulation**
+
+1. **Run Desktop Template Tests in CI-like Environment**
+
+   ```bash
+   npm run test:gh:test:desktop:templates
+   ```
+
+   - Uses Act to simulate the `test-desktop-templates` job from the GitHub Actions workflow.
+   - Runs the tests using the `ubuntu-24.04` environment with `linux/amd64` architecture.
+
+2. **Run Mobile Template Tests in CI-like Environment**
+
+   ```bash
+   npm run test:gh:test:mobile:templates
+   ```
+
+   - Uses Act to simulate the `test-mobile-templates` job from the GitHub Actions workflow.
+   - Runs the tests using the `ubuntu-24.04` environment with `linux/amd64` architecture.
+
+---
+
+### Reports
+
+- Each test generates an HTML report for detailed insights into test results. The report paths are defined by the `PLAYWRIGHT_HTML_REPORT` environment variable:
+
+  - **Desktop Report**: `playwright-report-desktop`
+  - **Mobile Report**: `playwright-report-mobile`
+
+- In CI-like environments, logs and outputs are captured by Act and displayed in the terminal for debugging.
+
+---
+
+### Example Usage
+
+#### Running All Desktop Tests Locally
+
+```bash
+npm run test:desktop:templates
+```
+
+#### Simulating GitHub Actions for Mobile Templates
+
+```bash
+npm run test:gh:test:mobile:templates
+```
+
+---
+
+This setup ensures consistency and reliability across different environments, enabling you to test templates effectively during local development and CI workflows.

package.json

@@ -14,17 +14,25 @@
 		"build": "node scripts/share_files.js && node scripts/build.js",
 		"share-files": "node scripts/share_files.js",
 		"new-template": "node scripts/new_template.js",
-		"husky": "husky install"
+		"husky": "husky install",
+		"test:desktop:templates": "PLAYWRIGHT_HTML_REPORT=playwright-report-desktop npx playwright test --project chromium_desktop",
+		"test:mobile:templates": "PLAYWRIGHT_HTML_REPORT=playwright-report-mobile npx playwright test --project safari_mobile",
+		"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",
+		"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"
 	},
 	"dependencies": {
-		"chalk": "^5.3.0"
+		"chalk": "^5.4.1",
+		"dotenv": "^16.4.7",
+		"pixelmatch": "^6.0.0",
+		"pngjs": "^7.0.0"
 	},
 	"devDependencies": {
-		"@commitlint/cli": "^17.8.1",
-		"@commitlint/config-conventional": "^17.8.0",
+		"@commitlint/cli": "^19.6.1",
+		"@commitlint/config-conventional": "^17.8.1",
+		"@playwright/test": "^1.49.1",
 		"@semantic-release/changelog": "^6.0.3",
-		"@semantic-release/github": "^9.2.6",
+		"@semantic-release/github": "^11.0.1",
 		"husky": "^8.0.3",
-		"semantic-release": "^22.0.12"
+		"semantic-release": "^24.2.1"
 	}
 }

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

@@ -5,6 +5,8 @@
 	border: none;
 	background-color: transparent;
 
+	padding: 0;
+
 	cursor: pointer;
 
 	font-size: calc(1.5rem * 0.6);

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

@@ -18,7 +18,8 @@ const Button: FC<IButton> = ({
 	iconColor,
 	icon,
 	gradientContainerProps,
-	customClasses = ''
+	customClasses = '',
+	...otherProps
 }) => {
 	const [isCopying, setIsCopying] = useState(false);
 
@@ -98,6 +99,7 @@ const Button: FC<IButton> = ({
 				[styles.isSuccess]: !!isCopying
 			})}
 			onClick={() => handleClick()}
+			{...otherProps}
 		>
 			{content}
 		</button>

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

@@ -6,7 +6,7 @@
 	justify-content: center;
 	align-items: center;
 
-	gap: 30px;
+	gap: 28px;
 
 	@include md() {
 		gap: 40px;