From 9806da7be3d920e3df907de5245bb38f54b58232 Mon Sep 17 00:00:00 2001 From: mohammadreza pakzadian Date: Tue, 30 Sep 2025 15:28:51 +0330 Subject: [PATCH 1/4] test: use slot variables in test renderings --- .../src/badge-wrapper/badge-wrapper.test.ts | 11 +++++----- .../web-components/src/badge/badge.test.ts | 3 ++- .../web-components/src/banner/banner.test.ts | 5 +++-- .../bottom-navigation.test.ts | 3 ++- .../src/button/standard/button.test.ts | 7 ++++--- packages/web-components/src/chip/chip.test.ts | 7 ++++--- .../src/discount-card/discount-card.test.ts | 20 +++++++++--------- .../web-components/src/modal/modal.test.ts | 21 ++++++++++--------- .../web-components/src/notice/notice.test.ts | 13 ++++++------ .../src/text-area/text-area.test.ts | 9 +++++--- .../src/text-field/text-field.test.ts | 6 +++--- 11 files changed, 58 insertions(+), 47 deletions(-) diff --git a/packages/web-components/src/badge-wrapper/badge-wrapper.test.ts b/packages/web-components/src/badge-wrapper/badge-wrapper.test.ts index 374ab4be..ee85454e 100644 --- a/packages/web-components/src/badge-wrapper/badge-wrapper.test.ts +++ b/packages/web-components/src/badge-wrapper/badge-wrapper.test.ts @@ -1,4 +1,5 @@ import { describe, expect, render, test } from "@internals/test-helpers"; +import { Slots } from "./constants.ts"; describe("🧩 badge-wrapper", () => { test("🧪 should show anchor and badge slots in all anchor shapes", async ({ @@ -11,7 +12,7 @@ describe("🧩 badge-wrapper", () => { page, ` - + click `, ); @@ -31,7 +32,7 @@ describe("🧩 badge-wrapper", () => { page, ` - +
`, ); @@ -83,7 +84,7 @@ describe("🧩 badge-wrapper", () => { page, ` - +
`, ); @@ -135,7 +136,7 @@ describe("🧩 badge-wrapper", () => { page, ` - +
`, ); @@ -164,4 +165,4 @@ describe("🧩 badge-wrapper", () => { expect(actualBadgeXOffset).toBe(0); expect(actualBadgeYOffset).toBe(0); }); -}); +}); \ No newline at end of file diff --git a/packages/web-components/src/badge/badge.test.ts b/packages/web-components/src/badge/badge.test.ts index 01f84b5f..7afff465 100644 --- a/packages/web-components/src/badge/badge.test.ts +++ b/packages/web-components/src/badge/badge.test.ts @@ -1,4 +1,5 @@ import { describe, expect, render, test } from "@internals/test-helpers"; +import { Slots } from "./constants.ts"; describe("🧩 badge", () => { test("🧪 should show value when variant is not `dot`", async ({ page }) => { @@ -27,7 +28,7 @@ describe("🧩 badge", () => { page, }) => { const iconSlot = ` - + `; diff --git a/packages/web-components/src/banner/banner.test.ts b/packages/web-components/src/banner/banner.test.ts index 928eb5cc..e937a93e 100644 --- a/packages/web-components/src/banner/banner.test.ts +++ b/packages/web-components/src/banner/banner.test.ts @@ -1,4 +1,5 @@ import { describe, expect, render, test } from "@internals/test-helpers"; +import { Slots } from "./constants.ts"; describe("🧩 banner", () => { test("🧪 should render banner elements", async ({ page }) => { @@ -11,7 +12,7 @@ describe("🧩 banner", () => { description="description" image="https://picsum.photos/200" > - click + click `, ); @@ -23,4 +24,4 @@ describe("🧩 banner", () => { await expect(description).toBeVisible(); await expect(action).toBeVisible(); }); -}); +}); \ No newline at end of file diff --git a/packages/web-components/src/bottom-navigation/bottom-navigation.test.ts b/packages/web-components/src/bottom-navigation/bottom-navigation.test.ts index c0c0cfc4..7178b3e5 100644 --- a/packages/web-components/src/bottom-navigation/bottom-navigation.test.ts +++ b/packages/web-components/src/bottom-navigation/bottom-navigation.test.ts @@ -8,6 +8,7 @@ import { setupMocks, test, } from "@internals/test-helpers"; +import { Slots } from "./item/constants.ts"; import { type BottomNavigationItem } from "./item/index.ts"; describe("🧩 bottom-navigation-item", () => { @@ -101,7 +102,7 @@ describe("🧩 bottom-navigation-item", () => { page, ` - + آیتم ۱ diff --git a/packages/web-components/src/button/standard/button.test.ts b/packages/web-components/src/button/standard/button.test.ts index 51d16389..82309dab 100644 --- a/packages/web-components/src/button/standard/button.test.ts +++ b/packages/web-components/src/button/standard/button.test.ts @@ -7,6 +7,7 @@ import { setupMocks, test, } from "@internals/test-helpers"; +import { Slots } from "./constants.ts"; describe("🧩 button", () => { afterEach(async ({ page }) => { @@ -177,11 +178,11 @@ describe("🧩 button", () => { page, ` - + کلیک کنید - + `, @@ -211,4 +212,4 @@ describe("🧩 button", () => { await expect(spinner).toBeVisible(); await expect(root).toHaveAttribute("aria-busy", "true"); }); -}); +}); \ No newline at end of file diff --git a/packages/web-components/src/chip/chip.test.ts b/packages/web-components/src/chip/chip.test.ts index d51bffba..bd824dae 100644 --- a/packages/web-components/src/chip/chip.test.ts +++ b/packages/web-components/src/chip/chip.test.ts @@ -1,4 +1,5 @@ import { describe, expect, render, test } from "@internals/test-helpers"; +import { Slots } from "./constants.ts"; describe("🧩 chip", () => { test("🧪 should toggle with keyboard interaction", async ({ page }) => { @@ -41,11 +42,11 @@ describe("🧩 chip", () => { page, ` - + چیپ - + `, @@ -56,4 +57,4 @@ describe("🧩 chip", () => { await expect(leadingSlot).toBeVisible(); await expect(trailingSlot).toBeVisible(); }); -}); +}); \ No newline at end of file diff --git a/packages/web-components/src/discount-card/discount-card.test.ts b/packages/web-components/src/discount-card/discount-card.test.ts index 86b6ba77..b8ed82ea 100644 --- a/packages/web-components/src/discount-card/discount-card.test.ts +++ b/packages/web-components/src/discount-card/discount-card.test.ts @@ -8,7 +8,7 @@ import { render, test, } from "@internals/test-helpers"; -import { ErrorMessages } from "./constants.ts"; +import { ErrorMessages, Slots } from "./constants.ts"; describe("🧩 discount-card", () => { const scope = "discount-card"; @@ -47,7 +47,7 @@ describe("🧩 discount-card", () => { badge-text="10%" expiry-date-label="Expires in 2 days" > - + `, @@ -84,11 +84,11 @@ describe("🧩 discount-card", () => { badge-text="10%" expiry-date-label="Expires in 2 days" > - + - Thumbnail - Use Discount + Thumbnail + Use Discount `, ); @@ -131,7 +131,7 @@ describe("🧩 discount-card", () => { badge-text="10%" expiry-date-label="Expires in 2 days" > - + `, @@ -235,7 +235,7 @@ describe("🧩 discount-card", () => { ${ variant !== "none" ? ` - + ` @@ -312,13 +312,13 @@ describe("🧩 discount-card", () => { ${ variant !== "none" ? ` - + ` : "" } - Use Discount + Use Discount `, ); @@ -327,4 +327,4 @@ describe("🧩 discount-card", () => { expect(a11yResult.violations).toEqual([]); }); } -}); +}); \ No newline at end of file diff --git a/packages/web-components/src/modal/modal.test.ts b/packages/web-components/src/modal/modal.test.ts index 8dc43dae..19d7d026 100644 --- a/packages/web-components/src/modal/modal.test.ts +++ b/packages/web-components/src/modal/modal.test.ts @@ -1,4 +1,5 @@ import { describe, expect, render, test } from "@internals/test-helpers"; +import { Slots } from "./constants.ts"; describe("🧩 modal", () => { test("🧪 should show elements based on props and slots", async ({ page }) => { @@ -11,8 +12,8 @@ describe("🧩 modal", () => { description="دسکریپشن" open > - image - + image + click click @@ -44,7 +45,7 @@ describe("🧩 modal", () => { description="دسکریپشن" open > - + click click @@ -77,7 +78,7 @@ describe("🧩 modal", () => { description="دسکریپشن" open > - + click click @@ -114,7 +115,7 @@ describe("🧩 modal", () => { description="دسکریپشن" open > - + click click @@ -140,7 +141,7 @@ describe("🧩 modal", () => { description="دسکریپشن" open > - + click click @@ -167,7 +168,7 @@ describe("🧩 modal", () => { description="دسکریپشن" open > - + click click @@ -178,7 +179,7 @@ describe("🧩 modal", () => { description="دسکریپشن" open > - + click click @@ -189,7 +190,7 @@ describe("🧩 modal", () => { description="دسکریپشن" open > - + click click @@ -240,4 +241,4 @@ describe("🧩 modal", () => { await page.keyboard.press("Escape"); await expect(modal1).toBeHidden(); }); -}); +}); \ No newline at end of file diff --git a/packages/web-components/src/notice/notice.test.ts b/packages/web-components/src/notice/notice.test.ts index 28a8d9c7..07a66c37 100644 --- a/packages/web-components/src/notice/notice.test.ts +++ b/packages/web-components/src/notice/notice.test.ts @@ -1,4 +1,5 @@ import { describe, expect, render, test } from "@internals/test-helpers"; +import { Slots } from "./constants.ts"; describe("🧩 notice", () => { test("🧪 should be visible only if `visible` attribute was set", async ({ @@ -115,11 +116,11 @@ describe("🧩 notice", () => { artwork="custom" visible > - + - اکشن ۱ - اکشن ۲ + اکشن ۱ + اکشن ۲ `, ); @@ -143,7 +144,7 @@ describe("🧩 notice", () => { artwork="none" visible > - + @@ -167,7 +168,7 @@ describe("🧩 notice", () => { visible variant="compact" > - اکشن ۱ + اکشن ۱ `, ); @@ -177,4 +178,4 @@ describe("🧩 notice", () => { await expect(description).toBeHidden(); await expect(action).toBeHidden(); }); -}); +}); \ No newline at end of file diff --git a/packages/web-components/src/text-area/text-area.test.ts b/packages/web-components/src/text-area/text-area.test.ts index c8f27dbd..614aacf3 100644 --- a/packages/web-components/src/text-area/text-area.test.ts +++ b/packages/web-components/src/text-area/text-area.test.ts @@ -7,7 +7,10 @@ import { render, test, } from "@internals/test-helpers"; -import { ErrorMessages as BaseErrorMessages } from "../base-text-input/constants.ts"; +import { + ErrorMessages as BaseErrorMessages, + Slots, +} from "../base-text-input/constants.ts"; import { ErrorMessages } from "./constants.ts"; describe("🧩 text-area", () => { @@ -82,10 +85,10 @@ describe("🧩 text-area", () => { page, ` - + - click + click `, ); diff --git a/packages/web-components/src/text-field/text-field.test.ts b/packages/web-components/src/text-field/text-field.test.ts index eeba81bf..87a899cf 100644 --- a/packages/web-components/src/text-field/text-field.test.ts +++ b/packages/web-components/src/text-field/text-field.test.ts @@ -8,7 +8,7 @@ import { setupMocks, test, } from "@internals/test-helpers"; -import { ErrorMessages } from "../base-text-input/constants.ts"; +import { ErrorMessages, Slots } from "../base-text-input/constants.ts"; import { type TextField } from "./index.ts"; describe("🧩 text-field", () => { @@ -122,10 +122,10 @@ describe("🧩 text-field", () => { page, ` - + - click + click `, ); From f21ddb7fe6daf9fcdafa0988e111220b39519789 Mon Sep 17 00:00:00 2001 From: mohammadreza pakzadian Date: Tue, 30 Sep 2025 15:36:53 +0330 Subject: [PATCH 2/4] test: fix lint issues --- packages/web-components/src/badge-wrapper/badge-wrapper.test.ts | 2 +- packages/web-components/src/banner/banner.test.ts | 2 +- packages/web-components/src/button/standard/button.test.ts | 2 +- packages/web-components/src/discount-card/discount-card.test.ts | 2 +- packages/web-components/src/modal/modal.test.ts | 2 +- packages/web-components/src/notice/notice.test.ts | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/web-components/src/badge-wrapper/badge-wrapper.test.ts b/packages/web-components/src/badge-wrapper/badge-wrapper.test.ts index ee85454e..8cb68f32 100644 --- a/packages/web-components/src/badge-wrapper/badge-wrapper.test.ts +++ b/packages/web-components/src/badge-wrapper/badge-wrapper.test.ts @@ -165,4 +165,4 @@ describe("🧩 badge-wrapper", () => { expect(actualBadgeXOffset).toBe(0); expect(actualBadgeYOffset).toBe(0); }); -}); \ No newline at end of file +}); diff --git a/packages/web-components/src/banner/banner.test.ts b/packages/web-components/src/banner/banner.test.ts index e937a93e..13566f1d 100644 --- a/packages/web-components/src/banner/banner.test.ts +++ b/packages/web-components/src/banner/banner.test.ts @@ -24,4 +24,4 @@ describe("🧩 banner", () => { await expect(description).toBeVisible(); await expect(action).toBeVisible(); }); -}); \ No newline at end of file +}); diff --git a/packages/web-components/src/button/standard/button.test.ts b/packages/web-components/src/button/standard/button.test.ts index 82309dab..999baad8 100644 --- a/packages/web-components/src/button/standard/button.test.ts +++ b/packages/web-components/src/button/standard/button.test.ts @@ -212,4 +212,4 @@ describe("🧩 button", () => { await expect(spinner).toBeVisible(); await expect(root).toHaveAttribute("aria-busy", "true"); }); -}); \ No newline at end of file +}); diff --git a/packages/web-components/src/discount-card/discount-card.test.ts b/packages/web-components/src/discount-card/discount-card.test.ts index b8ed82ea..3757b7c7 100644 --- a/packages/web-components/src/discount-card/discount-card.test.ts +++ b/packages/web-components/src/discount-card/discount-card.test.ts @@ -327,4 +327,4 @@ describe("🧩 discount-card", () => { expect(a11yResult.violations).toEqual([]); }); } -}); \ No newline at end of file +}); diff --git a/packages/web-components/src/modal/modal.test.ts b/packages/web-components/src/modal/modal.test.ts index 19d7d026..c9e255be 100644 --- a/packages/web-components/src/modal/modal.test.ts +++ b/packages/web-components/src/modal/modal.test.ts @@ -241,4 +241,4 @@ describe("🧩 modal", () => { await page.keyboard.press("Escape"); await expect(modal1).toBeHidden(); }); -}); \ No newline at end of file +}); diff --git a/packages/web-components/src/notice/notice.test.ts b/packages/web-components/src/notice/notice.test.ts index 07a66c37..f0f4ad0d 100644 --- a/packages/web-components/src/notice/notice.test.ts +++ b/packages/web-components/src/notice/notice.test.ts @@ -178,4 +178,4 @@ describe("🧩 notice", () => { await expect(description).toBeHidden(); await expect(action).toBeHidden(); }); -}); \ No newline at end of file +}); From 6ccb5d4b6e94e21b3566aaeb4d7df836c2ddefde Mon Sep 17 00:00:00 2001 From: mohammadreza pakzadian Date: Tue, 30 Sep 2025 17:52:11 +0330 Subject: [PATCH 3/4] chore: update changeset --- .changeset/spicy-carpets-win.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/spicy-carpets-win.md diff --git a/.changeset/spicy-carpets-win.md b/.changeset/spicy-carpets-win.md new file mode 100644 index 00000000..c36e5277 --- /dev/null +++ b/.changeset/spicy-carpets-win.md @@ -0,0 +1,6 @@ +--- +"@tapsioss/web-components": patch +--- + +Use slot variables in test renderings. + \ No newline at end of file From 2215109729cf29a95bb6922e426d660f1b1d0135 Mon Sep 17 00:00:00 2001 From: mohammadreza pakzadian Date: Tue, 30 Sep 2025 18:10:13 +0330 Subject: [PATCH 4/4] fix: linter errors --- packages/web-components/src/chip/chip.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web-components/src/chip/chip.test.ts b/packages/web-components/src/chip/chip.test.ts index bd824dae..5a785858 100644 --- a/packages/web-components/src/chip/chip.test.ts +++ b/packages/web-components/src/chip/chip.test.ts @@ -57,4 +57,4 @@ describe("🧩 chip", () => { await expect(leadingSlot).toBeVisible(); await expect(trailingSlot).toBeVisible(); }); -}); \ No newline at end of file +});