Skip to content

Commit 8ade7ea

Browse files
AriPerkkioAriPerkkio
authored
feat: add initial fixture setup (#1)
1 parent aa2b138 commit 8ade7ea

29 files changed

+5294
-85
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,15 @@ jobs:
3535
- name: Typecheck
3636
run: pnpm typecheck
3737

38+
- name: Install Playwright Dependencies
39+
run: pnpm exec playwright install chromium --with-deps
40+
3841
- name: Test
3942
run: pnpm test
4043

4144
publish-preview:
4245
runs-on: ubuntu-latest
46+
if: ${{ false }} # TODO: Set up preview deployments
4347

4448
steps:
4549
- uses: actions/checkout@v4

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
node_modules
22
.DS_Store
33
dist
4+
__screenshots__

‎README.md‎

Lines changed: 55 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,108 @@
1-
# @webcontainer/playwright
1+
# @webcontainer/test
22

33
[![Version][version-badge]][npm-url]
44

5-
> Playwright utilities for testing applications in WebContainers
5+
> Utilities for testing applications in WebContainers
66
7-
[Installation](#installation) | [API](#api)
7+
[Installation](#installation) | [Configuration](#configuration) | [API](#api)
88

99
---
1010

11-
Test your applications and packages inside WebContainers using Playwright.
11+
Test your applications and packages inside WebContainers.
1212

1313
## Installation
1414

15+
Add `@webcontainer/test` to your development dependencies.
16+
1517
```sh
16-
$ npm install --save-dev @webcontainer/playwright
18+
$ npm install --save-dev @webcontainer/test
1719
```
1820

19-
`@playwright/test` is required as peer dependency:
21+
Vitest is also required as peer dependency.
2022

2123
```sh
22-
$ npm install --save-dev @playwright/test
24+
$ npm install --save-dev vitest @vitest/browser
2325
```
2426

25-
## API
26-
27-
### Fixtures
27+
## Configuration
2828

29-
WebContainer utilities are defined as [Playwright fixtures](https://playwright.dev/docs/test-fixtures). You can import pre-defined `test()`, or import each fixture manually and extend your own `test` with each fixture.
30-
31-
```ts
32-
// Pre-defined test()
33-
import { test } from "@webcontainer/playwright";
34-
```
29+
Add `vitestWebcontainers` plugin in your Vitest config and enable browser mode:
3530

3631
```ts
37-
// Manual import of each fixture
38-
import {
39-
Editor,
40-
Preview,
41-
Terminal,
42-
WebContainer,
43-
} from "@webcontainer/playwright";
44-
import { test as base } from "@playwright/test";
45-
46-
const test = base.extend<{
47-
editor: Editor;
48-
preview: Preview;
49-
terminal: Terminal;
50-
webcontainer: WebContainer;
51-
}>({
52-
editor: async ({ page }, use) => {
53-
use(new Editor(page));
54-
},
55-
preview: async ({ page }, use) => {
56-
use(new Preview(page));
57-
},
58-
terminal: async ({ page }, use) => {
59-
use(new Terminal(page));
60-
},
61-
webcontainer: async ({ page }, use) => {
62-
use(new WebContainer(page));
32+
import { defineConfig } from "vitest/config";
33+
import { vitestWebcontainers } from "@webcontainer/test/plugin";
34+
35+
export default defineConfig({
36+
plugins: [vitestWebcontainers()],
37+
test: {
38+
browser: {
39+
enabled: true,
40+
provider: "playwright",
41+
instances: [{ browser: "chromium" }],
42+
},
6343
},
6444
});
65-
66-
export { test };
6745
```
6846

69-
You can access each fixture in your test cases:
47+
## API
48+
49+
Webcontainer utilities are exposed as [test fixtures](https://vitest.dev/guide/test-context.html#test-extend).
7050

7151
```ts
72-
import { test } from "@webcontainer/playwright"; // or your own `test` setup
52+
import { test } from "@webcontainer/test";
7353

74-
test("user can open Vite TypeScript starter", async ({
75-
page,
76-
editor,
54+
test("run development server inside webcontainer", async ({
55+
webcontainer,
7756
preview,
78-
terminal,
7957
}) => {
80-
await page.goto("/");
58+
await webcontainer.mount("path/to/project");
8159

82-
await editor.getByFile("package.json", /"vite": "^6.0.11"/);
83-
await editor.getByFile("src/main.ts", /<h1>Hello Vite<\/h1>/);
60+
await webcontainer.runCommand("npm", ["install"]);
61+
webcontainer.runCommand("npm", ["run", "dev"]);
8462

85-
await terminal.getByText("VITE v6.0.11 ready");
86-
87-
await preview.getByRole("heading", { level: 1, name: "Hello Vite" });
63+
await preview.getByRole("heading", { level: 1, name: "Hello Vite!" });
8864
});
8965
```
9066

91-
#### Editor
67+
#### `preview`
9268

93-
##### `getByFile`
69+
##### `getByRole`
9470

95-
Get file by its name and content.
71+
Vitest's [`getByRole`](https://vitest.dev/guide/browser/locators.html#getbyrole) that's scoped to the preview window.
9672

9773
```ts
98-
async function getByFile(filename: string, content: RegExp | string): Locator;
74+
await preview.getByRole("heading", { level: 1, name: "Hello Vite!" });
9975
```
10076

101-
#### Preview
77+
##### `getByText`
10278

103-
##### `getByRole`
79+
Vitest's [`getByText`](https://vitest.dev/guide/browser/locators.html#getbytext) that's scoped to the preview window.
10480

105-
Playwright's [`getByRole`](https://playwright.dev/docs/api/class-framelocator#frame-locator-get-by-role) that's scoped to the preview `<iframe>`.
81+
```ts
82+
await preview.getByText("Hello Vite!");
83+
```
10684

107-
#### Terminal
85+
#### `webcontainer`
10886

109-
##### `getByText`
87+
##### `mount`
11088

111-
Playwright's [`getByText`](https://playwright.dev/docs/api/class-framelocator#frame-locator-get-by-role) that's scoped to the terminal.
89+
Mount file system inside webcontainer.
11290

113-
#### WebContainer
91+
Accepts a path that is relative to the [project root](https://vitest.dev/config/#root), or inlined [`FileSystemTree`](https://webcontainers.io/api#filesystemtree).
92+
93+
```ts
94+
await webcontainer.mount("/path/to/project");
95+
```
11496

11597
##### `runCommand`
11698

117-
Run command inside WebContainer process.
99+
Run command inside webcontainer. Returns command output.
118100

119101
```ts
120-
async function runCommand(command: string): Promise<void>;
102+
await webcontainer.runCommand("npm", ["install"]);
103+
104+
const files = await webcontainer.runCommand("ls", ["-l"]);
121105
```
122106

123-
[version-badge]: https://img.shields.io/npm/v/@webcontainer/playwright
124-
[npm-url]: https://www.npmjs.com/package/@webcontainer/playwright
107+
[version-badge]: https://img.shields.io/npm/v/@webcontainer/test
108+
[npm-url]: https://www.npmjs.com/package/@webcontainer/test

‎eslint.config.mjs‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import blitzPlugin from "@blitz/eslint-plugin";
2+
import { jsFileExtensions } from "@blitz/eslint-plugin/dist/configs/javascript.js";
3+
import { tsFileExtensions } from "@blitz/eslint-plugin/dist/configs/typescript.js";
4+
5+
export default [
6+
{ ignores: ["**/dist", "**/node_modules"] },
7+
8+
...blitzPlugin.configs.recommended(),
9+
10+
{
11+
files: [...tsFileExtensions, ...jsFileExtensions],
12+
},
13+
];

‎package.json‎

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,64 @@
11
{
2-
"name": "@webcontainer/playwright",
2+
"name": "@webcontainer/test",
33
"version": "0.0.1",
4-
"description": "Playwright utilities for testing applications in WebContainers",
4+
"description": "Utilities for testing applications in WebContainers",
55
"author": "StackBlitz Inc.",
66
"license": "MIT",
77
"type": "module",
8-
"exports": "./dist/index.js",
98
"types": "./dist/index.d.ts",
9+
"exports": {
10+
".": {
11+
"import": {
12+
"types": "./dist/index.d.ts",
13+
"default": "./dist/index.js"
14+
}
15+
},
16+
"./plugin": {
17+
"import": {
18+
"types": "./dist/plugin.d.ts",
19+
"default": "./dist/plugin.js"
20+
}
21+
}
22+
},
1023
"files": [
1124
"dist"
1225
],
13-
"homepage": "https://github.com/stackblitz/webcontainer-playwright",
14-
"bugs": "https://github.com/stackblitz/webcontainer-playwright",
26+
"homepage": "https://github.com/stackblitz/webcontainer-test",
27+
"bugs": "https://github.com/stackblitz/webcontainer-test",
1528
"repository": {
1629
"type": "git",
17-
"url": "git+https://github.com/stackblitz/webcontainer-playwright.git"
30+
"url": "git+https://github.com/stackblitz/webcontainer-test.git"
1831
},
1932
"keywords": [
2033
"testing",
2134
"webcontainer",
22-
"playwright"
35+
"playwright",
36+
"vitest"
2337
],
2438
"packageManager": "[email protected]",
2539
"scripts": {
26-
"build": "echo \"Error: no build specified\"",
27-
"test": "echo \"Error: no test specified\"",
28-
"lint": "echo \"Error: no linttest specified\"",
29-
"typecheck": "echo \"Error: no typecheck specified\""
40+
"build": "tsup",
41+
"dev": "tsup --watch --sourcemap",
42+
"test": "vitest",
43+
"lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
44+
"typecheck": "tsc --noEmit"
45+
},
46+
"dependencies": {
47+
"@webcontainer/api": "^1.5.3"
48+
},
49+
"peerDependencies": {
50+
"vitest": "^3.1"
51+
},
52+
"devDependencies": {
53+
"@blitz/eslint-plugin": "^0.1.4",
54+
"@types/node": "^22.14.0",
55+
"@vitest/browser": "^3.1.1",
56+
"eslint": "^9.24.0",
57+
"playwright": "^1.51.1",
58+
"prettier": "^3.5.3",
59+
"tsup": "^8.4.0",
60+
"typescript": "^5.8.3",
61+
"vitest": "^3.1.1"
3062
},
31-
"dependencies": {},
32-
"peerDependencies": {},
33-
"devDependencies": {}
63+
"prettier": {}
3464
}

0 commit comments

Comments
 (0)