test(counters_stable): add missing e2e tests (#1251)

* test(counters_stable): remove unused ids

* test(counters_stable): enter count

* refactor(counters_stable/e2e): improve test names

* refactor(counters_stable): move page object

* refactor(counters_stable/e2e): target nth counter

* test(counters_stable): remove counter

* refactor(counters_stable/e2e): change description

examples/counters_stable/e2e/tests/add_1k_counters.spec.ts

@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
-import { CountersPage } from "./counters_page";
+import { CountersPage } from "./fixtures/counters_page";
 
 test.describe("Add 1000 Counters", () => {
-  test("should increment the total count by 1K", async ({ page }) => {
+  test("should increase the number of counters", async ({ page }) => {
     const ui = new CountersPage(page);
 
     await Promise.all([

examples/counters_stable/e2e/tests/add_counter.spec.ts

@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
-import { CountersPage } from "./counters_page";
+import { CountersPage } from "./fixtures/counters_page";
 
 test.describe("Add Counter", () => {
-  test("should increment the total count", async ({ page }) => {
+  test("should increase the number of counters", async ({ page }) => {
     const ui = new CountersPage(page);
     await ui.goto();
 

examples/counters_stable/e2e/tests/clear_counters.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import { CountersPage } from "./counters_page";
+import { CountersPage } from "./fixtures/counters_page";
 
 test.describe("Clear Counters", () => {
   test("should reset the counts", async ({ page }) => {

examples/counters_stable/e2e/tests/decrement_count.spec.ts

@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
-import { CountersPage } from "./counters_page";
+import { CountersPage } from "./fixtures/counters_page";
 
 test.describe("Decrement Count", () => {
-  test("should decrement the total count", async ({ page }) => {
+  test("should decrease the total count", async ({ page }) => {
     const ui = new CountersPage(page);
     await ui.goto();
     await ui.addCounter();

examples/counters_stable/e2e/tests/enter_count.spec.ts

@@ -0,0 +1,31 @@
+import { test, expect } from "@playwright/test";
+import { CountersPage } from "./fixtures/counters_page";
+
+test.describe("Enter Count", () => {
+  test("should increase the total count", async ({ page }) => {
+    const ui = new CountersPage(page);
+    await ui.goto();
+    await ui.addCounter();
+
+    await ui.enterCount("5");
+
+    await expect(ui.total).toHaveText("5");
+    await expect(ui.counters).toHaveText("1");
+  });
+
+  test("should decrease the total count", async ({ page }) => {
+    const ui = new CountersPage(page);
+    await ui.goto();
+    await ui.addCounter();
+    await ui.addCounter();
+    await ui.addCounter();
+
+    await ui.enterCount("100");
+    await ui.enterCount("100", 1);
+    await ui.enterCount("100", 2);
+    await ui.enterCount("50", 1);
+
+    await expect(ui.total).toHaveText("250");
+    await expect(ui.counters).toHaveText("3");
+  });
+});

examples/counters_stable/e2e/tests/counters_page.ts → examples/counters_stable/e2e/tests/fixtures/counters_page.ts

@@ -5,8 +5,11 @@ export class CountersPage {
   readonly addCounterButton: Locator;
   readonly addOneThousandCountersButton: Locator;
   readonly clearCountersButton: Locator;
-  readonly decrementCountButton: Locator;
+
   readonly incrementCountButton: Locator;
+  readonly counterInput: Locator;
+  readonly decrementCountButton: Locator;
+  readonly removeCountButton: Locator;
 
   readonly total: Locator;
   readonly counters: Locator;
@@ -32,9 +35,15 @@ export class CountersPage {
       hasText: "+1",
     });
 
+    this.removeCountButton = page.locator("button", {
+      hasText: "x",
+    });
+
     this.total = page.getByTestId("total");
 
     this.counters = page.getByTestId("counters");
+
+    this.counterInput = page.getByRole("textbox");
   }
 
   async goto() {
@@ -52,17 +61,17 @@ export class CountersPage {
     this.addOneThousandCountersButton.click();
   }
 
-  async decrementCount() {
+  async decrementCount(index: number = 0) {
     await Promise.all([
-      this.decrementCountButton.waitFor(),
-      this.decrementCountButton.click(),
+      this.decrementCountButton.nth(index).waitFor(),
+      this.decrementCountButton.nth(index).click(),
     ]);
   }
 
-  async incrementCount() {
+  async incrementCount(index: number = 0) {
     await Promise.all([
-      this.incrementCountButton.waitFor(),
-      this.incrementCountButton.click(),
+      this.incrementCountButton.nth(index).waitFor(),
+      this.incrementCountButton.nth(index).click(),
     ]);
   }
 
@@ -72,4 +81,18 @@ export class CountersPage {
       this.clearCountersButton.click(),
     ]);
   }
+
+  async enterCount(count: string, index: number = 0) {
+    await Promise.all([
+      this.counterInput.nth(index).waitFor(),
+      this.counterInput.nth(index).fill(count),
+    ]);
+  }
+
+  async removeCounter(index: number = 0) {
+    await Promise.all([
+      this.removeCountButton.nth(index).waitFor(),
+      this.removeCountButton.nth(index).click(),
+    ]);
+  }
 }

examples/counters_stable/e2e/tests/increment_count.spec.ts

@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
-import { CountersPage } from "./counters_page";
+import { CountersPage } from "./fixtures/counters_page";
 
 test.describe("Increment Count", () => {
-  test("should increment the total count", async ({ page }) => {
+  test("should increase the total count", async ({ page }) => {
     const ui = new CountersPage(page);
     await ui.goto();
     await ui.addCounter();

examples/counters_stable/e2e/tests/remove_counter.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from "@playwright/test";
+import { CountersPage } from "./fixtures/counters_page";
+
+test.describe("Remove Counter", () => {
+  test("should decrement the number of counters", async ({ page }) => {
+    const ui = new CountersPage(page);
+    await ui.goto();
+
+    await ui.addCounter();
+    await ui.addCounter();
+    await ui.addCounter();
+
+    await ui.removeCounter(1);
+
+    await expect(ui.total).toHaveText("0");
+    await expect(ui.counters).toHaveText("2");
+  });
+});

examples/counters_stable/e2e/tests/view_counters.spec.ts

@@ -1,8 +1,8 @@
 import { test, expect } from "@playwright/test";
-import { CountersPage } from "./counters_page";
+import { CountersPage } from "./fixtures/counters_page";
 
 test.describe("View Counters", () => {
-  test("should_see_the_title", async ({ page }) => {
+  test("should see the title", async ({ page }) => {
     const ui = new CountersPage(page);
     await ui.goto();
 

examples/counters_stable/src/main.rs

@@ -56,15 +56,15 @@ pub fn Counters(cx: Scope) -> impl IntoView {
             </button>
             <p>
                 "Total: "
-                <span id="total" data-testid="total">{move ||
+                <span data-testid="total">{move ||
                     counters.get()
                         .iter()
                         .map(|(_, (count, _))| count.get())
                         .sum::<i32>()
                         .to_string()
                 }</span>
                 " from "
-                <span id="counters" data-testid="counters">{move || counters.with(|counters| counters.len()).to_string()}</span>
+                <span data-testid="counters">{move || counters.with(|counters| counters.len()).to_string()}</span>
                 " counters."
             </p>
             <ul>