Skip to content

Commit

Permalink
test: adds playwright tests for dfx new project frontends (#4065)
Browse files Browse the repository at this point in the history
  • Loading branch information
krpeacock authored Jan 17, 2025
1 parent 3fcb982 commit 9900826
Show file tree
Hide file tree
Showing 5 changed files with 157 additions and 5 deletions.
25 changes: 24 additions & 1 deletion .github/workflows/e2e.yml
Original file line number Diff line number Diff line change
Expand Up @@ -228,8 +228,32 @@ jobs:
pushd e2e_project_sveltekit
dfx canister create e2e_project_sveltekit_frontend --specified-id erxue-5aaaa-aaaab-qaagq-cai
dfx deploy
popd
rm -rf e2e_project_sveltekit
- name: Deploy react starter project
run: |
dfx new e2e_project_react --frontend react
pushd e2e_project_react
dfx canister create e2e_project_react_frontend --specified-id rdbii-uiaaa-aaaab-qadva-cai
dfx deploy
popd
rm -rf e2e_project_react
- name: Deploy vanilla starter project
run: |
dfx new e2e_project_vanilla --frontend vanilla
pushd e2e_project_vanilla
dfx canister create e2e_project_vanilla_frontend --specified-id qjoks-wyaaa-aaaab-qadsa-cai
dfx deploy
popd
rm -rf e2e_project_vanilla
- name: Deploy vue starter project
run: |
dfx new e2e_project_vue --frontend vue
pushd e2e_project_vue
dfx canister create e2e_project_vue_frontend --specified-id qopmg-3aaaa-aaaab-qadsq-cai
dfx deploy
popd
rm -rf e2e_project_vue
# Add any additional deployments here
- name: Install Playwright Browsers and Run Tests
run: |
Expand All @@ -239,7 +263,6 @@ jobs:
npx playwright test
popd
aggregate:
name: e2e:required
if: always() && needs.changes.outputs.sources == 'true'
Expand Down
8 changes: 4 additions & 4 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
Due to the incompatibility between the APIs on the replica port and the PocketIC port, `dfx info replica-port`
no longer works with PocketIC, and the PocketIC port is provided by a new command, `dfx info pocketic-config-port`.

### test: adds playwright test for svelte `dfx new` project
### test: adds playwright tests for `dfx new` project frontends

The first of a suite of baseline tests to automate testing starter projects. Makes sure they are compatible with other dfx or asset canister changes.
The first of a suite of baseline tests to automate testing starter projects. Makes sure that sveltekit, react, vue, and vanilla frontends are compatible with other dfx or asset canister changes.

### fix: template frontends now have unsupported browser warnings

Expand Down Expand Up @@ -285,7 +285,7 @@ had not been previously built for the local network.

Added support for the canister log allowed viewer list, enabling specified users to access a canister's logs without needing to be set as the canister's controller.
Valid settings are:
- `--add-log-viewer`, `--remove-log-viewer` and `--set-log-viewer` flags with `dfx canister update-settings`
- `--add-log-viewer`, `--remove-log-viewer` and `--set-log-viewer` flags with `dfx canister update-settings`
- `--log-viewer` flag with `dfx canister create`
- `canisters[].initialization_values.log_visibility.allowed_viewers` in `dfx.json`

Expand Down Expand Up @@ -381,7 +381,7 @@ Module hash 15da2adc4426b8037c9e716b81cb6a8cf1a835ac37589be2cef8cb3f4a04adaa

`dfx deploy --mode` now takes the same possible values as `dfx canister install --mode`: "install", "reinstall", "upgrade" and "auto".

In "auto" mode, the upgrade options are hints which only take effects when the actual install mode is "upgrade".
In "auto" mode, the upgrade options are hints which only take effects when the actual install mode is "upgrade".

To maintain backward compatibility, a minor difference between the two commands remains.
If the `--mode` is not set, `dfx deploy` defaults to "auto", while `dfx canister install` defaults to "install".
Expand Down
43 changes: 43 additions & 0 deletions e2e/playwright/tests/react.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { test, expect } from "@playwright/test";

test("has title", async ({ page }) => {
await page.goto("http://rdbii-uiaaa-aaaab-qadva-cai.localhost:4943/");

// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/IC Hello Starter/);
});

test("image has loaded", async ({ page }) => {
await page.goto("http://rdbii-uiaaa-aaaab-qadva-cai.localhost:4943/");

// Set the attribute so we can read it
await page.evaluate(async () => {
await new Promise<void>((resolve) => {
setTimeout(() => {
document.querySelectorAll("img").forEach((img) => {
img.setAttribute("complete", String(img.complete));
});
resolve();
}, 1_000);
});
});

const image = await page.getByAltText("DFINITY logo");
await expect(await image.getAttribute("complete")).toBe("true");
});

test("has hello form", async ({ page }) => {
await page.goto("http://rdbii-uiaaa-aaaab-qadva-cai.localhost:4943/");

// Fill out the form
const nameInput = await page.getByLabel("name");
nameInput.fill("World");

const submitButton = await page.locator("button[type='submit']");
await submitButton.click();

// Expects page to have a heading with the name of Installation.
const greeting = await page.locator("#greeting");
await expect(greeting).toBeVisible();
await expect(await greeting.innerText()).toBe("Hello, World!");
});
43 changes: 43 additions & 0 deletions e2e/playwright/tests/vanilla.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { test, expect } from "@playwright/test";

test("has title", async ({ page }) => {
await page.goto("http://qjoks-wyaaa-aaaab-qadsa-cai.localhost:4943/");

// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/IC Hello Starter/);
});

test("image has loaded", async ({ page }) => {
await page.goto("http://qjoks-wyaaa-aaaab-qadsa-cai.localhost:4943/");

// Set the attribute so we can read it
await page.evaluate(async () => {
await new Promise<void>((resolve) => {
setTimeout(() => {
document.querySelectorAll("img").forEach((img) => {
img.setAttribute("complete", String(img.complete));
});
resolve();
}, 1_000);
});
});

const image = await page.getByAltText("DFINITY logo");
await expect(await image.getAttribute("complete")).toBe("true");
});

test("has hello form", async ({ page }) => {
await page.goto("http://qjoks-wyaaa-aaaab-qadsa-cai.localhost:4943/");

// Fill out the form
const nameInput = await page.getByLabel("name");
nameInput.fill("World");

const submitButton = await page.locator("button[type='submit']");
await submitButton.click();

// Expects page to have a heading with the name of Installation.
const greeting = await page.locator("#greeting");
await expect(greeting).toBeVisible();
await expect(await greeting.innerText()).toBe("Hello, World!");
});
43 changes: 43 additions & 0 deletions e2e/playwright/tests/vue.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { test, expect } from "@playwright/test";

test("has title", async ({ page }) => {
await page.goto("http://qopmg-3aaaa-aaaab-qadsq-cai.localhost:4943/");

// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/IC Hello Starter/);
});

test("image has loaded", async ({ page }) => {
await page.goto("http://qopmg-3aaaa-aaaab-qadsq-cai.localhost:4943/");

// Set the attribute so we can read it
await page.evaluate(async () => {
await new Promise<void>((resolve) => {
setTimeout(() => {
document.querySelectorAll("img").forEach((img) => {
img.setAttribute("complete", String(img.complete));
});
resolve();
}, 1_000);
});
});

const image = await page.getByAltText("DFINITY logo");
await expect(await image.getAttribute("complete")).toBe("true");
});

test("has hello form", async ({ page }) => {
await page.goto("http://qopmg-3aaaa-aaaab-qadsq-cai.localhost:4943/");

// Fill out the form
const nameInput = await page.getByLabel("name");
nameInput.fill("World");

const submitButton = await page.locator("button[type='submit']");
await submitButton.click();

// Expects page to have a heading with the name of Installation.
const greeting = await page.locator("#greeting");
await expect(greeting).toBeVisible();
await expect(await greeting.innerText()).toBe("Hello, World!");
});

0 comments on commit 9900826

Please sign in to comment.