Skip to content

Commit c383a34

Browse files
Cybermaxi7Cybermaxi7
committed
feat(frontend): implement comprehensive frontend improvements
- Add visual regression testing with Chromatic integration - Implement chain-specific fee estimator adapters for Stellar, Bitcoin, Ethereum - Generate TypeScript API types from backend Pydantic schemas - Add E2E smoke tests for core routes and critical functionality - Include comprehensive documentation and CI/CD workflows Features implemented: - Visual regression testing with screenshot-based component validation - Unified fee estimation system with real-time data across blockchains - Auto-generated TypeScript types ensuring API contract safety - Comprehensive E2E smoke tests covering all critical user flows - Enhanced UI components for fee estimation and comparison Technical improvements: - Added Storybook stories for Button and StatusBadge components - Created React hooks for fee estimation and multi-chain comparison - Implemented typed API client with full type safety - Set up automated testing pipelines for visual and E2E validation - Enhanced development workflow with type generation and validation Closes #276 Closes #260 Closes #256 Closes #272
1 parent 67ab065 commit c383a34

17 files changed

Lines changed: 4297 additions & 2 deletions

‎.github/workflows/e2e-smoke-tests.yml‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
name: E2E Smoke Tests
2+
3+
on:
4+
push:
5+
branches: [main, develop]
6+
pull_request:
7+
branches: [main, develop]
8+
types: [opened, synchronize, reopened]
9+
10+
jobs:
11+
e2e-smoke-tests:
12+
runs-on: ubuntu-latest
13+
14+
steps:
15+
- name: Checkout repository
16+
uses: actions/checkout@v4
17+
18+
- name: Setup Node.js
19+
uses: actions/setup-node@v4
20+
with:
21+
node-version: '18'
22+
cache: 'npm'
23+
cache-dependency-path: frontend/package-lock.json
24+
25+
- name: Install dependencies
26+
working-directory: ./frontend
27+
run: npm ci
28+
29+
- name: Install Playwright browsers
30+
working-directory: ./frontend
31+
run: npx playwright install --with chromium
32+
33+
- name: Build application
34+
working-directory: ./frontend
35+
run: npm run build
36+
37+
- name: Run E2E smoke tests
38+
working-directory: ./frontend
39+
run: npm run test:e2e:smoke:ci
40+
env:
41+
BASE_URL: http://localhost:3000
42+
43+
- name: Upload test results
44+
if: always()
45+
uses: actions/upload-artifact@v4
46+
with:
47+
name: playwright-report
48+
path: frontend/playwright-report/
49+
retention-days: 30
50+
51+
- name: Upload test videos
52+
if: failure()
53+
uses: actions/upload-artifact@v4
54+
with:
55+
name: playwright-videos
56+
path: frontend/test-results/
57+
retention-days: 7
58+
59+
- name: Comment PR with test results
60+
if: github.event_name == 'pull_request'
61+
uses: actions/github-script@v7
62+
with:
63+
script: |
64+
const fs = require('fs');
65+
const path = './frontend/playwright-report/results.json';
66+
67+
let testResults = {
68+
passed: 0,
69+
failed: 0,
70+
total: 0,
71+
duration: 0
72+
};
73+
74+
// Try to read test results
75+
if (fs.existsSync(path)) {
76+
const data = fs.readFileSync(path, 'utf8');
77+
testResults = JSON.parse(data);
78+
}
79+
80+
const comment = `
81+
## 🧪 E2E Smoke Test Results
82+
83+
- **Total Tests**: ${testResults.total || 0}
84+
- **Passed**: ${testResults.passed || 0}
85+
- **Failed**: ${testResults.failed || 0}
86+
- **Duration**: ${Math.round((testResults.duration || 0) / 1000)}s
87+
88+
${testResults.failed > 0 ? '⚠️ Some E2E tests failed. Please check the test results for details.' : '✅ All E2E smoke tests passed!'}
89+
90+
[📊 View Test Report](https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }})
91+
`;
92+
93+
github.rest.issues.createComment({
94+
issue_number: context.issue.number,
95+
owner: context.repo.owner,
96+
repo: context.repo.repo,
97+
body: comment
98+
});
99+
100+
e2e-smoke-tests-mobile:
101+
runs-on: ubuntu-latest
102+
103+
steps:
104+
- name: Checkout repository
105+
uses: actions/checkout@v4
106+
107+
- name: Setup Node.js
108+
uses: actions/setup-node@v4
109+
with:
110+
node-version: '18'
111+
cache: 'npm'
112+
cache-dependency-path: frontend/package-lock.json
113+
114+
- name: Install dependencies
115+
working-directory: ./frontend
116+
run: npm ci
117+
118+
- name: Install Playwright browsers
119+
working-directory: ./frontend
120+
run: npx playwright install --with chromium
121+
122+
- name: Build application
123+
working-directory: ./frontend
124+
run: npm run build
125+
126+
- name: Run mobile E2E smoke tests
127+
working-directory: ./frontend
128+
run: npx playwright test smoke-tests.spec.ts --project=mobile-chrome --reporter=list
129+
env:
130+
BASE_URL: http://localhost:3000
131+
132+
- name: Upload mobile test results
133+
if: always()
134+
uses: actions/upload-artifact@v4
135+
with:
136+
name: playwright-mobile-report
137+
path: frontend/playwright-report/
138+
retention-days: 30

‎.github/workflows/visual-regression.yml‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
name: Visual Regression Testing
2+
3+
on:
4+
push:
5+
branches: [main, develop]
6+
pull_request:
7+
branches: [main, develop]
8+
types: [opened, synchronize, reopened]
9+
10+
jobs:
11+
visual-regression:
12+
runs-on: ubuntu-latest
13+
14+
steps:
15+
- name: Checkout repository
16+
uses: actions/checkout@v4
17+
with:
18+
fetch-depth: 0
19+
20+
- name: Setup Node.js
21+
uses: actions/setup-node@v4
22+
with:
23+
node-version: '18'
24+
cache: 'npm'
25+
cache-dependency-path: frontend/package-lock.json
26+
27+
- name: Install dependencies
28+
working-directory: ./frontend
29+
run: npm ci
30+
31+
- name: Build Storybook
32+
working-directory: ./frontend
33+
run: npm run build-storybook
34+
35+
- name: Run visual regression tests
36+
working-directory: ./frontend
37+
run: npm run test:visual:ci
38+
env:
39+
CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
40+
41+
- name: Upload visual test results
42+
if: always()
43+
uses: actions/upload-artifact@v4
44+
with:
45+
name: visual-test-results
46+
path: frontend/chromatic-results/
47+
retention-days: 30
48+
49+
- name: Comment PR with results
50+
if: github.event_name == 'pull_request'
51+
uses: actions/github-script@v7
52+
with:
53+
script: |
54+
const fs = require('fs');
55+
const path = './frontend/chromatic-results/test-results.json';
56+
57+
if (fs.existsSync(path)) {
58+
const results = JSON.parse(fs.readFileSync(path, 'utf8'));
59+
const comment = `
60+
## 🎨 Visual Regression Test Results
61+
62+
- **Total Stories**: ${results.total || 0}
63+
- **Passed**: ${results.passed || 0}
64+
- **Failed**: ${results.failed || 0}
65+
- **New**: ${results.new || 0}
66+
- **Changed**: ${results.changed || 0}
67+
68+
${results.failed > 0 ? '⚠️ Some visual changes detected. Please review the Chromatic build.' : '✅ All visual tests passed!'}
69+
70+
[🔍 Review Visual Changes](https://www.chromatic.com/build?appId=${process.env.CHROMATIC_PROJECT_TOKEN})
71+
`;
72+
73+
github.rest.issues.createComment({
74+
issue_number: context.issue.number,
75+
owner: context.repo.owner,
76+
repo: context.repo.repo,
77+
body: comment
78+
});
79+
}

0 commit comments

Comments
 (0)