Skip to content

Fix Leptos 0.8 compatibility and WASM build #25

Fix Leptos 0.8 compatibility and WASM build

Fix Leptos 0.8 compatibility and WASM build #25

name: Cross-Browser Compatibility Tests
on:
push:
branches: [main, develop]
paths:
- 'packages/leptos/**'
- 'tests/e2e/**'
- '.github/workflows/cross-browser-tests.yml'
- 'playwright.config.ts'
- 'tests/e2e/cross-browser.config.ts'
pull_request:
branches: [main, develop]
paths:
- 'packages/leptos/**'
- 'tests/e2e/**'
- '.github/workflows/cross-browser-tests.yml'
- 'playwright.config.ts'
- 'tests/e2e/cross-browser.config.ts'
schedule:
# Run cross-browser tests weekly on Sundays at 2 AM UTC
- cron: '0 2 * * 0'
workflow_dispatch:
inputs:
browser:
description: 'Browser to test (all, chrome, firefox, safari, edge, mobile)'
required: false
default: 'all'
type: choice
options:
- all
- chrome
- firefox
- safari
- edge
- mobile
env:
NODE_VERSION: '20'
RUST_VERSION: 'stable'
RUSTFLAGS: "-D warnings"
jobs:
cross-browser-tests:
name: Cross-Browser Tests - ${{ matrix.browser }}
runs-on: ubuntu-latest
timeout-minutes: 60
strategy:
fail-fast: false
matrix:
browser:
- chromium
- firefox
- webkit
include:
- browser: chromium
display-name: Chrome
project: chromium
- browser: firefox
display-name: Firefox
project: firefox
- browser: webkit
display-name: Safari
project: webkit
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}
- name: Setup Rust
uses: dtolnay/rust-toolchain@stable
with:
toolchain: ${{ env.RUST_VERSION }}
targets: wasm32-unknown-unknown
- name: Setup pnpm
uses: pnpm/action-setup@v2
with:
version: 10
- name: Get pnpm store directory
id: pnpm-cache
shell: bash
run: |
echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
- name: Setup pnpm cache
uses: actions/cache@v3
with:
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Install Playwright browsers
run: pnpm exec playwright install --with-deps ${{ matrix.browser }}
- name: Cache Cargo build
uses: actions/cache@v3
with:
path: |
target/
~/.cargo/registry/
key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
restore-keys: |
${{ runner.os }}-cargo-
- name: Build demo application
run: |
cd examples/comprehensive-demo
trunk build --public-url /comprehensive-demo
- name: Start test server
run: |
cd examples/comprehensive-demo
python3 -m http.server 8001 &
echo $! > /tmp/test-server.pid
- name: Wait for server
run: |
for i in {1..30}; do
if curl -s http://localhost:8001 > /dev/null; then
echo "Server is ready"
exit 0
fi
echo "Waiting for server... ($i/30)"
sleep 2
done
echo "Server failed to start"
exit 1
- name: Run ${{ matrix.display-name }} cross-browser tests
run: |
pnpm exec playwright test \
--config=tests/e2e/cross-browser.config.ts \
--project=${{ matrix.project }} \
--reporter=json \
--reporter=html \
--reporter=line
env:
CI: true
HEADLESS: true
- name: Upload ${{ matrix.display-name }} test results
if: always()
uses: actions/upload-artifact@v3
with:
name: cross-browser-results-${{ matrix.browser }}
path: |
test-results/cross-browser/
playwright-report/
retention-days: 30
- name: Upload ${{ matrix.display-name }} screenshots
if: failure()
uses: actions/upload-artifact@v3
with:
name: cross-browser-screenshots-${{ matrix.browser }}
path: test-results/cross-browser/
retention-days: 30
- name: Stop test server
if: always()
run: |
if [ -f /tmp/test-server.pid ]; then
kill $(cat /tmp/test-server.pid) || true
fi
edge-tests:
name: Cross-Browser Tests - Edge
runs-on: windows-latest
timeout-minutes: 60
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}
- name: Setup Rust
uses: dtolnay/rust-toolchain@stable
with:
toolchain: ${{ env.RUST_VERSION }}
targets: wasm32-unknown-unknown
- name: Setup pnpm
uses: pnpm/action-setup@v2
with:
version: 10
- name: Get pnpm store directory
id: pnpm-cache
shell: bash
run: |
echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
- name: Setup pnpm cache
uses: actions/cache@v3
with:
path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Install Playwright browsers
run: pnpm exec playwright install --with-deps msedge
- name: Build demo application
run: |
cd examples/comprehensive-demo
trunk build --public-url /comprehensive-demo
- name: Start test server
run: |
cd examples/comprehensive-demo
python -m http.server 8001
continue-on-error: true
- name: Wait for server
run: |
for i in {1..30}; do
if curl -s http://localhost:8001 > /dev/null; then
echo "Server is ready"
exit 0
fi
echo "Waiting for server... ($i/30)"
sleep 2
done
- name: Run Edge cross-browser tests
run: |
pnpm exec playwright test \
--config=tests/e2e/cross-browser.config.ts \
--project=edge \
--reporter=json \
--reporter=html
env:
CI: true
HEADLESS: true
- name: Upload Edge test results
if: always()
uses: actions/upload-artifact@v3
with:
name: cross-browser-results-edge
path: |
test-results/cross-browser/
playwright-report/
retention-days: 30
mobile-tests:
name: Cross-Browser Tests - Mobile (${{ matrix.mobile-browser }})
runs-on: ubuntu-latest
timeout-minutes: 45
strategy:
fail-fast: false
matrix:
mobile-browser:
- mobile-chrome
- mobile-safari
include:
- mobile-browser: mobile-chrome
display-name: Android Chrome
- mobile-browser: mobile-safari
display-name: iOS Safari
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: ${{ env.NODE_VERSION }}
- name: Setup pnpm
uses: pnpm/action-setup@v2
with:
version: 10
- name: Install dependencies
run: pnpm install --frozen-lockfile
- name: Install Playwright browsers
run: pnpm exec playwright install --with-deps chromium webkit
- name: Cache Cargo build
uses: actions/cache@v3
with:
path: |
target/
~/.cargo/registry/
key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
restore-keys: |
${{ runner.os }}-cargo-
- name: Build demo application
run: |
cd examples/comprehensive-demo
trunk build --public-url /comprehensive-demo
- name: Start test server
run: |
cd examples/comprehensive-demo
python3 -m http.server 8001 &
echo $! > /tmp/test-server.pid
- name: Wait for server
run: |
for i in {1..30}; do
if curl -s http://localhost:8001 > /dev/null; then
echo "Server is ready"
exit 0
fi
echo "Waiting for server... ($i/30)"
sleep 2
done
- name: Run ${{ matrix.display-name }} tests
run: |
pnpm exec playwright test \
--config=tests/e2e/cross-browser.config.ts \
--project=${{ matrix.mobile-browser }} \
--reporter=line
env:
CI: true
HEADLESS: true
- name: Upload ${{ matrix.display-name }} test results
if: always()
uses: actions/upload-artifact@v3
with:
name: cross-browser-results-${{ matrix.mobile-browser }}
path: |
test-results/cross-browser/
playwright-report/
retention-days: 30
- name: Stop test server
if: always()
run: |
if [ -f /tmp/test-server.pid ]; then
kill $(cat /tmp/test-server.pid) || true
fi
test-summary:
name: Test Summary
runs-on: ubuntu-latest
needs: [cross-browser-tests, edge-tests, mobile-tests]
if: always()
steps:
- name: Download all test results
uses: actions/download-artifact@v3
with:
path: test-results/all
- name: Generate cross-browser test summary
run: |
echo "# Cross-Browser Compatibility Test Summary" >> $GITHUB_STEP_SUMMARY
echo "" >> $GITHUB_STEP_SUMMARY
echo "## Browser Coverage" >> $GITHUB_STEP_SUMMARY
echo "- ✅ Chromium (Chrome)" >> $GITHUB_STEP_SUMMARY
echo "- ✅ Firefox" >> $GITHUB_STEP_SUMMARY
echo "- ✅ WebKit (Safari)" >> $GITHUB_STEP_SUMMARY
echo "- ✅ Edge" >> $GITHUB_STEP_SUMMARY
echo "- ✅ Mobile Chrome" >> $GITHUB_STEP_SUMMARY
echo "- ✅ Mobile Safari" >> $GITHUB_STEP_SUMMARY
echo "" >> $GITHUB_STEP_SUMMARY
echo "## Components Tested" >> $GITHUB_STEP_SUMMARY
echo "All 41+ components tested across all browsers:" >> $GITHUB_STEP_SUMMARY
echo "- Basic: button, input, checkbox, switch, etc." >> $GITHUB_STEP_SUMMARY
echo "- Interactive: tabs, accordion, dialog, etc." >> $GITHUB_STEP_SUMMARY
echo "- Layout: card, separator, scroll-area, etc." >> $GITHUB_STEP_SUMMARY
echo "- Complex: form, calendar, date-picker, etc." >> $GITHUB_STEP_SUMMARY
echo "" >> $GITHUB_STEP_SUMMARY
echo "## Feature Detection" >> $GITHUB_STEP_SUMMARY
echo "- CSS Variables support" >> $GITHUB_STEP_SUMMARY
echo "- Flexbox and Grid support" >> $GITHUB_STEP_SUMMARY
echo "- WASM module loading" >> $GITHUB_STEP_SUMMARY
echo "- Accessibility features" >> $GITHUB_STEP_SUMMARY
echo "- Viewport responsiveness" >> $GITHUB_STEP_SUMMARY
- name: Check test results
run: |
if [ -d "test-results/all" ]; then
echo "Test results downloaded successfully"
ls -la test-results/all
else
echo "No test results found"
fi