Skip to content

Commit

Permalink
test(e2e): Set up Playwright test environment for desktop app
Browse files Browse the repository at this point in the history
- Configure Playwright for desktop testing with Chromium
- Add test scripts for e2e testing in dev and prod modes
- Create basic desktop test suite with viewport and page load tests
- Set up test utilities and configuration
- Update .gitignore to exclude test artifacts
- Add cross-env and playwright dependencies
  • Loading branch information
Soushi888 committed Jan 14, 2025
1 parent d302b74 commit c5db5b3
Show file tree
Hide file tree
Showing 8 changed files with 225 additions and 1 deletion.
Binary file modified bun.lockb
Binary file not shown.
3 changes: 3 additions & 0 deletions ui/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,6 @@ node_modules
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

/test-results
/playwright-report
10 changes: 9 additions & 1 deletion ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
"check": "svelte-check --tsconfig ./tsconfig.json",
"package": "bun run build && rimraf dist.zip && cd build && bestzip ../dist.zip *",
"test": "vitest run",
"test:e2e": "cross-env UI_PORT=5173 TAURI_DEV=true playwright test",
"test:e2e:prod": "cross-env TAURI_DEV=false playwright test",
"test:e2e:ui": "cross-env UI_PORT=5173 TAURI_DEV=true playwright test --ui",
"test:e2e:debug": "cross-env UI_PORT=5173 TAURI_DEV=true playwright test --debug",
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
},
Expand All @@ -15,6 +19,7 @@
"@floating-ui/dom": "1.5.4",
"@holochain/client": "^0.17.1",
"@msgpack/msgpack": "^2.8.0",
"@playwright/test": "^1.49.1",
"@skeletonlabs/skeleton": "2.7.0",
"@skeletonlabs/tw-plugin": "0.3.1",
"@sveltejs/adapter-auto": "^3.0.0",
Expand All @@ -23,8 +28,9 @@
"@sveltejs/vite-plugin-svelte": "^4.0.0",
"@tailwindcss/forms": "0.5.7",
"@tailwindcss/typography": "0.5.10",
"@types/bun": "latest",
"@types/eslint": "8.56.0",
"@types/node": "20.11.0",
"@types/node": "^22.10.6",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@valueflows/vf-graphql": "^0.9.0-alpha.9",
Expand All @@ -33,13 +39,15 @@
"@vf-ui/graphql-client-mock": "^0.0.9",
"autoprefixer": "10.4.16",
"bestzip": "^2.2.1",
"cross-env": "^7.0.3",
"daisyui": "^4.12.10",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.35.1",
"graphql": "^15.8.0",
"graphql-tag": "^2.12.6",
"moment-timezone": "^0.5.45",
"playwright-electron": "^0.5.0",
"postcss": "^8.4.35",
"prettier": "^3.2.5",
"prettier-plugin-svelte": "^3.1.2",
Expand Down
35 changes: 35 additions & 0 deletions ui/playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
testDir: './tests/e2e',
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: 'html',
use: {
// Testing the app in development mode
baseURL: process.env.TAURI_DEV ? 'http://localhost:5173' : 'tauri://localhost',
trace: 'on-first-retry',
screenshot: 'only-on-failure',
video: 'on-first-retry',
},
projects: [
{
name: 'chromium',
use: {
...devices['Desktop Chrome'],
viewport: { width: 1280, height: 720 },
launchOptions: {
args: ['--no-sandbox']
}
},
}
],
webServer: process.env.TAURI_DEV ? {
command: 'bun run start',
url: 'http://localhost:5173',
reuseExistingServer: !process.env.CI,
timeout: 120000, // Increase timeout to 2 minutes
} : undefined,
});
115 changes: 115 additions & 0 deletions ui/tests/PLAN.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,121 @@

This document outlines the plan for implementing end-to-end testing using Playwright for the Requests and Offers Holochain application.

## Implementation Checklist

### Setup Phase

- [x] Initialize Playwright
- [x] Configure TypeScript
- [x] Set up test environment
- [x] Create directory structure
- [x] Add test scripts to package.json
- [x] Configure Playwright for desktop testing
- [x] Add basic desktop test suite
- [x] Configure .gitignore for test artifacts

### Fixtures and Mocks

- [ ] Create test data fixtures
- [ ] Implement Holochain service mocks
- [ ] Set up test helpers
- [ ] Configure mock environment

### Core User Flow Tests

- [ ] User Management
- [ ] Registration tests
- [ ] Profile creation/editing tests
- [ ] Login/Authentication tests
- [ ] Organization Management
- [ ] Creation tests
- [ ] Editing tests
- [ ] Member management tests
- [ ] Coordinator management tests
- [ ] Request/Offer Flow
- [ ] Request creation tests
- [ ] Offer creation tests
- [ ] List view tests
- [ ] Status update tests

### Administrative Tests

- [ ] Admin Panel
- [ ] User management tests
- [ ] Organization management tests
- [ ] System-wide view tests
- [ ] Advanced Features
- [ ] Status history tests
- [ ] Organization hierarchy tests
- [ ] Filter and search tests

### Integration and Polish

- [ ] Set up CI/CD pipeline
- [ ] Configure test reporting
- [ ] Add error screenshots
- [ ] Document test suite
- [ ] Review and optimize tests

## Desktop Application Testing Considerations

### Tauri-Specific Testing

- [ ] Test window management
- [ ] Window creation
- [ ] Window resizing
- [ ] Window state persistence
- [ ] Test Tauri commands
- [ ] File system operations
- [ ] System tray interactions
- [ ] Native dialogs

### Electron Integration

- [ ] Test Electron-specific features
- [ ] IPC communication
- [ ] Menu bar functionality
- [ ] Keyboard shortcuts

### Environment Setup

```typescript
// tests/utils/setup-desktop.ts
export const setupDesktopTest = async ({ page }) => {
// Set window size
await page.setViewportSize({ width: 1280, height: 720 });

// Additional desktop-specific setup
if (process.env.TAURI_DEV) {
// Development mode setup
} else {
// Production mode setup
}
};
```

### Example Desktop Test

```typescript
// tests/e2e/desktop/window.spec.ts
import { test, expect } from '@playwright/test';
import { setupDesktopTest } from '../../utils/setup-desktop';

test.describe('Desktop Window Management', () => {
test.beforeEach(async ({ page }) => {
await setupDesktopTest({ page });
});

test('should handle window resizing', async ({ page }) => {
// Window management tests
});

test('should persist window state', async ({ page }) => {
// State persistence tests
});
});
```

## 1. Initial Setup

Install Playwright and its dependencies:
Expand Down
32 changes: 32 additions & 0 deletions ui/tests/e2e/desktop/basic.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { test, expect } from '@playwright/test';
import { setupDesktopTest } from '../../utils/setup-desktop';

test.describe('Basic Desktop Tests', () => {
test.beforeEach(async ({ page }) => {
await setupDesktopTest({ page });
});

test('should load the application', async ({ page }) => {
// Navigate to the home page
await page.goto('/');

// Wait for the page to be fully loaded
await page.waitForLoadState('networkidle');

// Basic check for main content
const mainContent = await page.locator('body');
await expect(mainContent).toBeVisible();

// Take a screenshot for visual verification
await page.screenshot({
path: 'test-results/home-page.png',
fullPage: true
});
});

test('should have correct window size', async ({ page }) => {
const viewport = page.viewportSize();
expect(viewport?.width).toBe(1280);
expect(viewport?.height).toBe(720);
});
});
18 changes: 18 additions & 0 deletions ui/tests/e2e/example.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { test, expect } from '@playwright/test';

test('should load the application', async ({ page }) => {
await page.goto('/');

// Wait for the page to be fully loaded
await page.waitForLoadState('networkidle');

// Check if the page has loaded by verifying basic HTML structure
await expect(page.locator('html[lang="en"]')).toBeVisible();
await expect(page.locator('body')).toBeVisible();

// Take a screenshot
await page.screenshot({
path: 'test-results/example-page.png',
fullPage: true
});
});
13 changes: 13 additions & 0 deletions ui/tests/utils/setup-desktop.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import type { Page } from '@playwright/test';

export const setupDesktopTest = async ({ page }: { page: Page }) => {
// Set window size
await page.setViewportSize({ width: 1280, height: 720 });

// Additional desktop-specific setup
if (process.env.TAURI_DEV) {
console.log('Running in development mode');
} else {
console.log('Running in production mode');
}
};

0 comments on commit c5db5b3

Please sign in to comment.