refactor(e2e): Make tests more robust (QwikDev#5279)

Use async matchers instead of waiting.
mz0in · Oct 6, 2023 · cf0cef0 · cf0cef0
1 parent 6e2ce7e
commit cf0cef0
Show file tree

Hide file tree

Showing 25 changed files with 108 additions and 169 deletions.
diff --git a/starters/apps/e2e/src/components/attributes/attributes.tsx b/starters/apps/e2e/src/components/attributes/attributes.tsx
@@ -5,15 +5,19 @@ export const Attributes = component$(() => {
   return (
     <>
       <h1>Most of the changes happen in the input attributes</h1>
-      <button id="force-rerender" onClick$={() => render.value++}>
+      <button
+        id="force-rerender"
+        data-v={render.value}
+        onClick$={() => render.value++}
+      >
         Rerender
       </button>
-      <AttributesChild key={render.value} />
+      <AttributesChild v={render.value} key={render.value} />
     </>
   );
 });
 
-export const AttributesChild = component$(() => {
+export const AttributesChild = component$<{ v: number }>(({ v }) => {
   const renders = useStore(
     {
       count: 0,
@@ -157,6 +161,7 @@ export const AttributesChild = component$(() => {
       <Issue3622 />
       <Issue4718Null />
       <Issue4718Undefined />
+      <div id="renderCount">Render {v}</div>
     </>
   );
 });
@@ -181,6 +186,7 @@ export const Issue4718Undefined = component$(() => {
       data-works={signal.value}
       aria-label={signal.value}
       title={signal.value}
+      class={!signal.value && "moop"}
       onClick$={() => {
         signal.value = undefined;
       }}
@@ -199,6 +205,7 @@ export const Issue4718Null = component$(() => {
       data-works={signal.value as any}
       aria-label={signal.value as any}
       title={signal.value as any}
+      class={!signal.value && "moop"}
       onClick$={() => {
         signal.value = null;
       }}

diff --git a/starters/apps/e2e/src/components/render/render.tsx b/starters/apps/e2e/src/components/render/render.tsx
@@ -22,14 +22,18 @@ export const Render = component$(() => {
   const rerender = useSignal(0);
   return (
     <>
-      <button id="rerender" onClick$={() => rerender.value++}>
+      <button
+        id="rerender"
+        data-v={rerender.value}
+        onClick$={() => rerender.value++}
+      >
         Rerender
       </button>
-      <RenderChildren key={rerender.value} />
+      <RenderChildren v={rerender.value} key={rerender.value} />
     </>
   );
 });
-export const RenderChildren = component$(() => {
+export const RenderChildren = component$<{ v: number }>(({ v }) => {
   const parent = {
     counter: {
       count: 0,
@@ -42,6 +46,7 @@ export const RenderChildren = component$(() => {
   const state = useStore(parent, { deep: true });
   return (
     <>
+      <div id="rerenderCount">Render {v}</div>
       <button
         id="increment"
         onClick$={() => {

diff --git a/starters/apps/e2e/src/components/slot/slot.tsx b/starters/apps/e2e/src/components/slot/slot.tsx
@@ -25,6 +25,7 @@ export const SlotParent = component$(() => {
     <section class="todoapp">
       {state.render && (
         <>
+          <div id="isRendered">Hi</div>
           <Issue1630>
             <Child id="slot-child" q:slot="slot-content">
               Component Slot Content

diff --git a/starters/apps/e2e/src/components/streaming/streaming.tsx b/starters/apps/e2e/src/components/streaming/streaming.tsx
@@ -21,7 +21,7 @@ export const StreamingRoot = component$(() => {
   return (
     <>
       <button id="client-render" onClick$={() => store.count++}>
-        Client rerender
+        Client rerender: {store.count}
       </button>
       <Streaming key={store.count} />
     </>
@@ -35,7 +35,7 @@ export const Streaming = component$(() => {
   return (
     <div>
       <button id="count" onClick$={() => store.count++}>
-        Rerender {store.count}
+        Rerender: {store.count}
       </button>
 
       <ul>

diff --git a/starters/apps/e2e/src/components/styles/styles.tsx b/starters/apps/e2e/src/components/styles/styles.tsx
@@ -16,15 +16,15 @@ export const Styles = component$(() => {
   const reload = useSignal(0);
   return (
     <>
-      <button id="reload" onClick$={() => reload.value++}>
+      <button id="reload" data-v={reload.value} onClick$={() => reload.value++}>
         Reload
       </button>
-      <StylesChildren key={reload.value} />
+      <StylesChildren v={reload.value} key={reload.value} />
     </>
   );
 });
 
-export const StylesChildren = component$(() => {
+export const StylesChildren = component$<{ v: number }>(({ v }) => {
   useStylesScoped$(parent);
   useStylesScoped$(parent2);
 
@@ -33,6 +33,7 @@ export const StylesChildren = component$(() => {
   });
   return (
     <div class="parent-container">
+      <div id="renderCount">Render {v}</div>
       <div class={["parent", `count-${store.count}`]}>
         Parent
         <button id="add-child" type="button" onClick$={() => store.count++}>

diff --git a/starters/apps/e2e/tsconfig.json b/starters/apps/e2e/tsconfig.json
@@ -0,0 +1 @@
+{}
diff --git a/starters/apps/qwikcity-test/tsconfig.json b/starters/apps/qwikcity-test/tsconfig.json
@@ -0,0 +1 @@
+{}
diff --git a/starters/e2e/e2e.attributes.spec.ts b/starters/e2e/e2e.attributes.spec.ts
@@ -52,7 +52,9 @@ test.describe("attributes", () => {
       const stuffBtn = page.locator("#stuff");
       const renders = page.locator("#renders");
 
+      await expect(inputCopy).toHaveJSProperty("value", "");
       await input.type("Hello");
+      await expect(input).toHaveJSProperty("value", "Hello");
       await expect(inputCopy).toHaveJSProperty("value", "Hello");
       await expect(inputValue).toHaveText("Hello");
       await expect(renders).toHaveText("1");
@@ -106,7 +108,7 @@ test.describe("attributes", () => {
       await expect(renders).toHaveText("1");
 
       await countBtn.click();
-      await page.waitForTimeout(100);
+      await expect(input).not.toHaveAttribute("title", "some title");
       await expect(input).not.hasAttribute("title");
       await expect(label).not.hasAttribute("title");
       await expect(renders).toHaveText("1");
@@ -135,7 +137,6 @@ test.describe("attributes", () => {
       const renders = page.locator("#renders");
       const countBtn = page.locator("#required");
       await countBtn.click();
-      await page.waitForTimeout(100);
 
       await expect(input).toHaveAttribute("aria-hidden", "true");
       await expect(input).toHaveAttribute("aria-label", "even");
@@ -156,8 +157,7 @@ test.describe("attributes", () => {
 
       const countBtn = page.locator("#hide");
       await countBtn.click();
-
-      await page.waitForTimeout(100);
+      await expect(input).not.toHaveAttribute("aria-hidden", "true");
 
       await expect(input).not.hasAttribute("aria-hidden");
       await expect(input).not.hasAttribute("aria-label");
@@ -178,7 +178,7 @@ test.describe("attributes", () => {
       const countBtn = page.locator("#hide");
 
       await countBtn.click();
-      await page.waitForTimeout(100);
+      await expect(input).not.toHaveAttribute("aria-hidden", "true");
 
       await expect(input).not.hasAttribute("aria-hidden");
       await expect(input).not.hasAttribute("aria-label");
@@ -198,7 +198,7 @@ test.describe("attributes", () => {
       await expect(renders).toHaveText("2");
 
       await countBtn.click();
-      await page.waitForTimeout(100);
+
       await expect(input).toHaveAttribute("aria-hidden", "true");
       await expect(input).toHaveAttribute("aria-label", "even");
       await expect(input).toHaveAttribute("tabindex", "-1");
@@ -221,7 +221,7 @@ test.describe("attributes", () => {
       await expect(renders).toHaveText("3");
 
       await countBtn.click();
-      await page.waitForTimeout(100);
+      await expect(svg).not.toHaveAttribute("aria-hidden", "true");
       await expect(input).not.hasAttribute("aria-hidden");
       await expect(input).not.hasAttribute("aria-label");
       await expect(input).not.hasAttribute("tabindex");
@@ -239,7 +239,7 @@ test.describe("attributes", () => {
       await expect(renders).toHaveText("4");
 
       await countBtn.click();
-      await page.waitForTimeout(100);
+
       await expect(input).toHaveAttribute("aria-hidden", "true");
       await expect(input).toHaveAttribute("aria-label", "even");
       await expect(input).toHaveAttribute("tabindex", "-1");
@@ -274,8 +274,8 @@ test.describe("attributes", () => {
       await expect(button).toHaveAttribute("title", "some value");
 
       await button.click();
-      await page.waitForTimeout(100);
 
+      await expect(button).toHaveClass("moop");
       await expect(button).not.hasAttribute("data-works");
       await expect(button).not.hasAttribute("aria-label");
       await expect(button).not.hasAttribute("title");
@@ -289,8 +289,8 @@ test.describe("attributes", () => {
       await expect(button).toHaveAttribute("title", "some value");
 
       await button.click();
-      await page.waitForTimeout(100);
 
+      await expect(button).toHaveClass("moop");
       await expect(button).not.hasAttribute("data-works");
       await expect(button).not.hasAttribute("aria-label");
       await expect(button).not.hasAttribute("title");
@@ -302,8 +302,11 @@ test.describe("attributes", () => {
   test.describe("client rerender", () => {
     test.beforeEach(async ({ page }) => {
       const toggleRender = page.locator("#force-rerender");
+      const v = Number(await toggleRender.getAttribute("data-v"));
       await toggleRender.click();
-      await page.waitForTimeout(100);
+      await expect(page.locator("#renderCount")).toHaveText(`Render ${v}`);
+      // Without this the tests still fail?
+      await page.waitForTimeout(50);
     });
     tests();
   });

diff --git a/starters/e2e/e2e.context.spec.ts b/starters/e2e/e2e.context.spec.ts
@@ -26,7 +26,7 @@ test.describe("context", () => {
       ]);
 
       await btnRootIncrement1.click();
-      await page.waitForTimeout(100);
+      await expect(level2State1.first()).toHaveText("ROOT / state1 = 1");
 
       expect(await level2State1.allTextContents()).toEqual([
         "ROOT / state1 = 1",
@@ -41,7 +41,7 @@ test.describe("context", () => {
         "bar = 0",
       ]);
       await btnRootIncrement2.click();
-      await page.waitForTimeout(100);
+      await expect(level2State2.first()).toHaveText("ROOT / state2 = 1");
 
       expect(await level2State1.allTextContents()).toEqual([
         "ROOT / state1 = 1",
@@ -58,13 +58,13 @@ test.describe("context", () => {
       await btnLevel2Increment.click();
       await btnLevel2Increment.click();
       await btnLevel2Increment2.click();
-      await page.waitForTimeout(100);
 
       const level3State1 = page.locator(".level3-state1");
       const level3State2 = page.locator(".level3-state2");
       const level3State3 = page.locator(".level3-state3");
       const level3Slot = page.locator(".level3-slot");
 
+      await expect(level3State1.first()).toHaveText("Level2 / state1 = 0");
       expect(await level2State1.allTextContents()).toEqual([
         "ROOT / state1 = 1",
         "ROOT / state1 = 1",

diff --git a/starters/e2e/e2e.effect-client.spec.ts b/starters/e2e/e2e.effect-client.spec.ts
@@ -29,13 +29,11 @@ test.describe("effect-client", () => {
     await expect(msgClientSide3).toHaveText("run");
 
     await counter.scrollIntoViewIfNeeded();
-    await page.waitForTimeout(100);
 
     await expect(container).toHaveAttribute("data-effect", "true");
     await expect(counter).toHaveText("10");
     await expect(msg).toHaveText("run");
 
-    await page.waitForTimeout(500);
     await expect(container).toHaveAttribute("data-effect", "true");
     await expect(counter).toHaveText("11");
     await expect(msg).toHaveText("run");
@@ -52,22 +50,19 @@ test.describe("effect-client", () => {
 
   test("issue 2015", async ({ page }) => {
     const order = page.locator("#issue-2015-order");
-    await page.waitForTimeout(300);
     await expect(order).toHaveText(
       "Order: start 1 start 2 start 3 finish 1 finish 2 finish 3",
     );
   });
 
   test("issue 1955", async ({ page }) => {
     const results = page.locator("#issue-1955-results");
-    await page.waitForTimeout(300);
     await expect(results).toHaveText("run");
   });
 
   test("cleanup", async ({ page }) => {
     const counter = page.locator("#cleanup-effects-button");
     const nuCleanups = page.locator("#cleanup-effects-count");
-    await page.waitForTimeout(200);
     await expect(nuCleanups).toHaveText("0");
     await counter.click();
     await expect(nuCleanups).toHaveText("1");
@@ -78,10 +73,8 @@ test.describe("effect-client", () => {
   test("issue 4432", async ({ page }) => {
     const button = page.locator("#issue-4432-button");
     const logs = page.locator("#issue-4432-logs");
-    await page.waitForTimeout(500);
     await expect(logs).toHaveText("VisibleTask ChildA /\n");
     await button.click();
-    await page.waitForTimeout(500);
     await expect(logs).toHaveText(
       "VisibleTask ChildA /\nCleanup ChildA /other\n",
     );

diff --git a/starters/e2e/e2e.events.spec.ts b/starters/e2e/e2e.events.spec.ts
@@ -5,6 +5,7 @@ test.describe("events", () => {
     await page.goto("/e2e/events");
     page.on("pageerror", (err) => expect(err).toEqual(undefined));
     page.on("console", (msg) => {
+      // console.log(msg.type(), msg.text());
       if (msg.type() === "error") {
         expect(msg.text()).toEqual(undefined);
       }
@@ -14,51 +15,36 @@ test.describe("events", () => {
   test("should rerender correctly", async ({ page }) => {
     const btnWrapped = page.locator("#btn-wrapped");
     const btnTransparent = page.locator("#btn-transparent");
-
     const contentTransparent = page.locator("#count-transparent");
     const countWrapped = page.locator("#count-wrapped");
 
-    expect(await contentTransparent.textContent()).toEqual(
-      "countTransparent: 0",
-    );
-    expect(await countWrapped.textContent()).toEqual("countWrapped: 0");
-    expect(await btnWrapped.textContent()).toEqual("Wrapped 0");
+    await expect(contentTransparent).toHaveText("countTransparent: 0");
+    await expect(countWrapped).toHaveText("countWrapped: 0");
+    await expect(btnWrapped).toHaveText("Wrapped 0");
 
     // Click wrapped
     await btnWrapped.click();
-    await page.waitForTimeout(100);
-    expect(await contentTransparent.textContent()).toEqual(
-      "countTransparent: 0",
-    );
-    expect(await countWrapped.textContent()).toEqual("countWrapped: 1");
-    expect(await btnWrapped.textContent()).toEqual("Wrapped 1");
+    await expect(countWrapped).toHaveText("countWrapped: 1");
+    await expect(btnWrapped).toHaveText("Wrapped 1");
+    await expect(contentTransparent).toHaveText("countTransparent: 0");
 
     // Click wrapped
     await btnWrapped.click();
-    await page.waitForTimeout(100);
-    expect(await contentTransparent.textContent()).toEqual(
-      "countTransparent: 0",
-    );
-    expect(await countWrapped.textContent()).toEqual("countWrapped: 2");
-    expect(await btnWrapped.textContent()).toEqual("Wrapped 2");
+    await expect(countWrapped).toHaveText("countWrapped: 2");
+    await expect(btnWrapped).toHaveText("Wrapped 2");
+    await expect(contentTransparent).toHaveText("countTransparent: 0");
 
     // Click transparent
     await btnTransparent.click();
-    await page.waitForTimeout(100);
-    expect(await contentTransparent.textContent()).toEqual(
-      "countTransparent: 1",
-    );
-    expect(await countWrapped.textContent()).toEqual("countWrapped: 2");
-    expect(await btnWrapped.textContent()).toEqual("Wrapped 2");
+    await expect(contentTransparent).toHaveText("countTransparent: 1");
+    await expect(countWrapped).toHaveText("countWrapped: 2");
+    await expect(btnWrapped).toHaveText("Wrapped 2");
 
     // Click transparent
     await btnTransparent.click();
-    await page.waitForTimeout(100);
-    expect(await contentTransparent.textContent()).toEqual(
-      "countTransparent: 2",
-    );
-    expect(await countWrapped.textContent()).toEqual("countWrapped: 2");
-    expect(await btnWrapped.textContent()).toEqual("Wrapped 2");
+    await expect(contentTransparent).toHaveText("countTransparent: 2");
+    await expect(countWrapped).toHaveText("countWrapped: 2");
+    await expect(btnWrapped).toHaveText("Wrapped 2");
   });
 
   test("should prevent defaults and bubbling", async ({ page }) => {