diff --git a/examples/counters_stable/e2e/tests/add_1k_counters.spec.ts b/examples/counters_stable/e2e/tests/add_1k_counters.spec.ts index 61bc5e24d7..469cd636e9 100644 --- a/examples/counters_stable/e2e/tests/add_1k_counters.spec.ts +++ b/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([ diff --git a/examples/counters_stable/e2e/tests/add_counter.spec.ts b/examples/counters_stable/e2e/tests/add_counter.spec.ts index c0cf480d52..21c7c76954 100644 --- a/examples/counters_stable/e2e/tests/add_counter.spec.ts +++ b/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(); diff --git a/examples/counters_stable/e2e/tests/clear_counters.spec.ts b/examples/counters_stable/e2e/tests/clear_counters.spec.ts index 288b352d2c..29cdfe9aa7 100644 --- a/examples/counters_stable/e2e/tests/clear_counters.spec.ts +++ b/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 }) => { diff --git a/examples/counters_stable/e2e/tests/decrement_count.spec.ts b/examples/counters_stable/e2e/tests/decrement_count.spec.ts index a984a57d4a..bacc01cf0e 100644 --- a/examples/counters_stable/e2e/tests/decrement_count.spec.ts +++ b/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(); diff --git a/examples/counters_stable/e2e/tests/enter_count.spec.ts b/examples/counters_stable/e2e/tests/enter_count.spec.ts new file mode 100644 index 0000000000..5e1854d683 --- /dev/null +++ b/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"); + }); +}); diff --git a/examples/counters_stable/e2e/tests/counters_page.ts b/examples/counters_stable/e2e/tests/fixtures/counters_page.ts similarity index 63% rename from examples/counters_stable/e2e/tests/counters_page.ts rename to examples/counters_stable/e2e/tests/fixtures/counters_page.ts index 81f8abc293..7b951de659 100644 --- a/examples/counters_stable/e2e/tests/counters_page.ts +++ b/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(), + ]); + } } diff --git a/examples/counters_stable/e2e/tests/increment_count.spec.ts b/examples/counters_stable/e2e/tests/increment_count.spec.ts index a41eed9cb0..9b262038c0 100644 --- a/examples/counters_stable/e2e/tests/increment_count.spec.ts +++ b/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(); diff --git a/examples/counters_stable/e2e/tests/remove_counter.spec.ts b/examples/counters_stable/e2e/tests/remove_counter.spec.ts new file mode 100644 index 0000000000..17242a4777 --- /dev/null +++ b/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"); + }); +}); diff --git a/examples/counters_stable/e2e/tests/view_counters.spec.ts b/examples/counters_stable/e2e/tests/view_counters.spec.ts index d4b0515492..de2fcaae08 100644 --- a/examples/counters_stable/e2e/tests/view_counters.spec.ts +++ b/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(); diff --git a/examples/counters_stable/src/main.rs b/examples/counters_stable/src/main.rs index 0a065955f5..aa71b690eb 100644 --- a/examples/counters_stable/src/main.rs +++ b/examples/counters_stable/src/main.rs @@ -56,7 +56,7 @@ pub fn Counters(cx: Scope) -> impl IntoView {

"Total: " - {move || + {move || counters.get() .iter() .map(|(_, (count, _))| count.get()) @@ -64,7 +64,7 @@ pub fn Counters(cx: Scope) -> impl IntoView { .to_string() } " from " - {move || counters.with(|counters| counters.len()).to_string()} + {move || counters.with(|counters| counters.len()).to_string()} " counters."