webui: Migrate from @open-wc/testing to Playwright
diff --git a/loop/webui/src/web-components/sketch-network-status.test.ts b/loop/webui/src/web-components/sketch-network-status.test.ts
index 04e3386..45882a0 100644
--- a/loop/webui/src/web-components/sketch-network-status.test.ts
+++ b/loop/webui/src/web-components/sketch-network-status.test.ts
@@ -1,67 +1,65 @@
-import { html, fixture, expect } from "@open-wc/testing";
-import "./sketch-network-status";
-import type { SketchNetworkStatus } from "./sketch-network-status";
+import { test, expect } from "@sand4rt/experimental-ct-web";
+import { SketchNetworkStatus } from "./sketch-network-status";
-describe("SketchNetworkStatus", () => {
- it("displays the correct connection status when connected", async () => {
- const el: SketchNetworkStatus = await fixture(html`
- <sketch-network-status
- connection="connected"
- message="Connected to server"
- ></sketch-network-status>
- `);
-
- const indicator = el.shadowRoot!.querySelector(".polling-indicator");
- const statusText = el.shadowRoot!.querySelector(".status-text");
-
- expect(indicator).to.exist;
- expect(statusText).to.exist;
- expect(indicator!.classList.contains("active")).to.be.true;
- expect(statusText!.textContent).to.equal("Connected to server");
+test("displays the correct connection status when connected", async ({
+ mount,
+}) => {
+ const component = await mount(SketchNetworkStatus, {
+ props: {
+ connection: "connected",
+ message: "Connected to server",
+ },
});
- it("displays the correct connection status when disconnected", async () => {
- const el: SketchNetworkStatus = await fixture(html`
- <sketch-network-status
- connection="disconnected"
- message="Disconnected"
- ></sketch-network-status>
- `);
+ await expect(component.locator(".polling-indicator")).toBeVisible();
+ await expect(component.locator(".status-text")).toBeVisible();
+ await expect(component.locator(".polling-indicator.active")).toBeVisible();
+ await expect(component.locator(".status-text")).toContainText(
+ "Connected to server",
+ );
+});
- const indicator = el.shadowRoot!.querySelector(".polling-indicator");
-
- expect(indicator).to.exist;
- expect(indicator!.classList.contains("error")).to.be.true;
+test("displays the correct connection status when disconnected", async ({
+ mount,
+}) => {
+ const component = await mount(SketchNetworkStatus, {
+ props: {
+ connection: "disconnected",
+ message: "Disconnected",
+ },
});
- it("displays the correct connection status when disabled", async () => {
- const el: SketchNetworkStatus = await fixture(html`
- <sketch-network-status
- connection="disabled"
- message="Disabled"
- ></sketch-network-status>
- `);
+ await expect(component.locator(".polling-indicator")).toBeVisible();
+ await expect(component.locator(".polling-indicator.error")).toBeVisible();
+});
- const indicator = el.shadowRoot!.querySelector(".polling-indicator");
-
- expect(indicator).to.exist;
- expect(indicator!.classList.contains("error")).to.be.false;
- expect(indicator!.classList.contains("active")).to.be.false;
+test("displays the correct connection status when disabled", async ({
+ mount,
+}) => {
+ const component = await mount(SketchNetworkStatus, {
+ props: {
+ connection: "disabled",
+ message: "Disabled",
+ },
});
- it("displays error message when provided", async () => {
- const errorMsg = "Connection error";
- const el: SketchNetworkStatus = await fixture(html`
- <sketch-network-status
- connection="disconnected"
- message="Disconnected"
- error="${errorMsg}"
- ></sketch-network-status>
- `);
+ await expect(component.locator(".polling-indicator")).toBeVisible();
+ await expect(component.locator(".polling-indicator.error")).not.toBeVisible();
+ await expect(
+ component.locator(".polling-indicator.active"),
+ ).not.toBeVisible();
+});
- const statusText = el.shadowRoot!.querySelector(".status-text");
-
- expect(statusText).to.exist;
- expect(statusText!.textContent).to.equal(errorMsg);
+test("displays error message when provided", async ({ mount }) => {
+ const errorMsg = "Connection error";
+ const component = await mount(SketchNetworkStatus, {
+ props: {
+ connection: "disconnected",
+ message: "Disconnected",
+ error: errorMsg,
+ },
});
+
+ await expect(component.locator(".status-text")).toBeVisible();
+ await expect(component.locator(".status-text")).toContainText(errorMsg);
});