Skip to content

Commit d0dfbde

Browse files
stevensJourneystevensJourney
committed
Add end-to-end tests for example vite app
1 parent 02e153e commit d0dfbde

File tree

6 files changed

+89
-11
lines changed

6 files changed

+89
-11
lines changed

‎demos/example-vite/e2e/customers.test.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { describe, expect, it, vi } from 'vitest';
2+
import { setupTestDOM } from './test-setup.js';
3+
4+
describe('Customer List E2E', () => {
5+
it('should display the inserted customer "Fred" in the HTML list', async () => {
6+
// Set up the DOM structure for testing
7+
setupTestDOM();
8+
9+
// Import the main script which will execute and populate the DOM
10+
await import('../src/index.js');
11+
12+
// Trigger DOMContentLoaded if needed (script listens for this)
13+
if (document.readyState === 'complete' || document.readyState === 'interactive') {
14+
document.dispatchEvent(new Event('DOMContentLoaded'));
15+
}
16+
17+
// Wait for the customer list to appear and contain "Fred" using vi.waitFor
18+
await vi.waitFor(() => {
19+
const customersList = document.getElementById('customers-list');
20+
expect(customersList).not.toBeNull();
21+
22+
const listItems = customersList.querySelectorAll('li');
23+
const customerNames = Array.from(listItems).map((li) => li.textContent);
24+
expect(customerNames).toContain('Fred');
25+
});
26+
});
27+
});

‎demos/example-vite/e2e/test-setup.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/**
2+
* Test setup: Creates the DOM structure needed for tests
3+
* This mimics the structure in index.html
4+
*/
5+
export function setupTestDOM() {
6+
// Set up the HTML structure to match index.html
7+
document.body.innerHTML = `
8+
<h1>Vite bundling test: Check the console to see it in action!</h1>
9+
<h2>Customers:</h2>
10+
<ul id="customers-list"></ul>
11+
`;
12+
}

‎demos/example-vite/package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,20 @@
88
"build": "vite build",
99
"preview": "vite preview",
1010
"start": "pnpm build && pnpm preview",
11+
"test": "vitest run",
12+
"test:watch": "vitest",
1113
"test:build": "pnpm build"
1214
},
1315
"dependencies": {
1416
"@powersync/web": "workspace:*"
1517
},
1618
"devDependencies": {
1719
"@swc/core": "~1.6.0",
20+
"@vitest/browser": "^3.2.4",
21+
"playwright": "^1.51.0",
1822
"vite": "^5.0.12",
1923
"vite-plugin-top-level-await": "^1.4.1",
20-
"vite-plugin-wasm": "^3.3.0"
24+
"vite-plugin-wasm": "^3.3.0",
25+
"vitest": "^3.2.4"
2126
}
2227
}

‎demos/example-vite/src/index.html‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
<!doctype html>
22
<html>
3-
<head>
4-
<script type="module" src="./index.js"></script>
5-
</head>
6-
<body>
7-
Vite bundling test: Check the console to see it in action!
8-
</body>
9-
</html>
3+
4+
<head>
5+
<script type="module" src="./index.js"></script>
6+
</head>
7+
8+
<body>
9+
<h1>Vite bundling test: Check the console to see it in action!</h1>
10+
<h2>Customers:</h2>
11+
<ul id="customers-list"></ul>
12+
</body>
13+
14+
</html>

‎demos/example-vite/src/index.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { column, Schema, Table, PowerSyncDatabase, createBaseLogger } from '@powersync/web';
1+
import { PowerSyncDatabase, Schema, Table, column, createBaseLogger } from '@powersync/web';
22

33
createBaseLogger().useDefaults();
44

@@ -38,6 +38,19 @@ const openDatabase = async () => {
3838
const result = await PowerSync.getAll('SELECT * FROM customers');
3939
console.log('contents of customers: ', result);
4040

41+
// Display customers in the HTML list
42+
const customersList = document.getElementById('customers-list');
43+
if (customersList) {
44+
// Clear existing list items
45+
customersList.textContent = '';
46+
// Create and append list items
47+
result.forEach((customer) => {
48+
const listItem = document.createElement('li');
49+
listItem.textContent = customer.name || 'Unknown';
50+
customersList.appendChild(listItem);
51+
});
52+
}
53+
4154
console.log(
4255
`Attempting to connect in order to verify web workers are correctly loaded.
4356
This doesn't use any actual network credentials.

‎demos/example-vite/vite.config.ts‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import wasm from 'vite-plugin-wasm';
2-
import topLevelAwait from 'vite-plugin-top-level-await';
31
import { defineConfig } from 'vite';
2+
import topLevelAwait from 'vite-plugin-top-level-await';
3+
import wasm from 'vite-plugin-wasm';
44

55
// https://vitejs.dev/config/
66
export default defineConfig({
@@ -22,5 +22,21 @@ export default defineConfig({
2222
worker: {
2323
format: 'es',
2424
plugins: () => [wasm(), topLevelAwait()]
25+
},
26+
test: {
27+
globals: true,
28+
include: ['../e2e/**/*.test.js'],
29+
maxConcurrency: 1,
30+
browser: {
31+
enabled: true,
32+
isolate: true,
33+
provider: 'playwright',
34+
headless: false,
35+
instances: [
36+
{
37+
browser: 'chromium'
38+
}
39+
]
40+
}
2541
}
2642
});

0 commit comments

Comments
 (0)