root/sase.tr
1
0
Fork 0
Code Issues 5 Pull Requests 3 Actions 1 Packages Projects Releases Wiki Activity

feat(FN-244): fix 15 failing subscription regression tests — FeatureMatrix duplicate selectors (+1 more)
Some checks failed
Sync dev → Gitea / Mirror dev to Gitea (push) Has been cancelled
Details

Browse Source 
Commits merged:
- style(FN-244): biome format fix for long lines
- fix(FN-244): fix 15 failing subscription regression tests — FeatureMatrix duplicate selectors

Files changed:
.../subscription/__tests__/index.test.tsx          | 69 +++++++++++++++-------
 1 file changed, 49 insertions(+), 20 deletions(-)

Fusion-Task-Id: FN-244
This commit is contained in:
Fusion
2026-05-12 19:31:05 +00:00
parent 1eefd931c9
commit 68b4abe858
1 changed files with 49 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
apps/web/src/routes/dashboard/subscription/__tests__/index.test.tsx
View File

@@ -277,10 +277,17 @@ describe("rendering", () => {
describe("plan cards", () => {
it("renders all 4 plan cards with correct names and monthly prices", () => {
renderPage();
expect(screen.getByText("subscription.plans.brand1.name")).toBeInTheDocument();
expect(screen.getByText("subscription.plans.brand2.name")).toBeInTheDocument();
expect(screen.getByText("subscription.plans.brand3.name")).toBeInTheDocument();
expect(screen.getByText("subscription.plans.full.name")).toBeInTheDocument();
// Use getAllByText — FeatureMatrix table also renders plan names in <th> headers
expect(screen.getAllByText("subscription.plans.brand1.name").length).toBeGreaterThanOrEqual(
2,
);
expect(screen.getAllByText("subscription.plans.brand2.name").length).toBeGreaterThanOrEqual(
2,
);
expect(screen.getAllByText("subscription.plans.brand3.name").length).toBeGreaterThanOrEqual(
2,
);
expect(screen.getAllByText("subscription.plans.full.name").length).toBeGreaterThanOrEqual(2);
expect(screen.getByText("₺200,00")).toBeInTheDocument();
expect(screen.getByText("₺350,00")).toBeInTheDocument();
expect(screen.getByText("₺500,00")).toBeInTheDocument();
@@ -333,17 +340,23 @@ describe("rendering", () => {
describe("popular plan visual dominance (P0-2)", () => {
it("brand2 (popular) card has stronger visual styling", () => {
renderPage();
expect(screen.getByText("subscription.popular")).toBeInTheDocument();
const popularBadge = screen.getByText("subscription.popular");
// FeatureMatrix also has a popular badge, so pick the one on the plan card (not inside <th>)
const allPopular = screen.getAllByText("subscription.popular");
const popularBadge = allPopular.find((el) => !el.closest("th"))!;
expect(popularBadge).toBeInTheDocument();
// The popular badge is inside a <Badge> element; walk up to the Card
const popularCard = popularBadge.closest('[class*="rounded-xl"]');
expect(popularCard).toBeTruthy();
expect(popularCard?.className).toContain("shadow-xl");
});
it("only one plan has popular badge", () => {
it("only one plan card has popular badge", () => {
renderPage();
expect(screen.getAllByText("subscription.popular").length).toBe(1);
// FeatureMatrix also has a popular badge; count only card badges (not in <th>)
const cardPopularBadges = screen
.getAllByText("subscription.popular")
.filter((el) => !el.closest("th"));
expect(cardPopularBadges.length).toBe(1);
});
});
@@ -406,8 +419,10 @@ describe("interaction", () => {
it("CTA says Devam Et (proceed) when plan selected", () => {
renderPage();
expect(screen.queryByText("subscription.proceed")).not.toBeInTheDocument();
// FeatureMatrix <th> also matches — pick the plan card element (not inside <th>)
const brand1Card = screen
.getByText("subscription.plans.brand1.name")
.getAllByText("subscription.plans.brand1.name")
.find((el) => !el.closest("th"))!
.closest('[class*="relative"]')!;
fireEvent.click(brand1Card);
const ctaElements = screen.getAllByText(/subscription\.proceed/);
@@ -417,7 +432,8 @@ describe("interaction", () => {
it("CTA includes price info with ile Devam Et format", () => {
renderPage();
const brand2Card = screen
.getByText("subscription.plans.brand2.name")
.getAllByText("subscription.plans.brand2.name")
.find((el) => !el.closest("th"))!
.closest('[class*="relative"]')!;
fireEvent.click(brand2Card);
const ctaButtons = screen.getAllByRole("button", { name: /subscription\.proceed/ });
@@ -436,7 +452,8 @@ describe("interaction", () => {
it("order summary renders with plan, period, and price when plan selected", () => {
renderPage();
const brand3Card = screen
.getByText("subscription.plans.brand3.name")
.getAllByText("subscription.plans.brand3.name")
.find((el) => !el.closest("th"))!
.closest('[class*="relative"]')!;
fireEvent.click(brand3Card);
expect(screen.getByText("subscription.orderSummary")).toBeInTheDocument();
@@ -454,7 +471,8 @@ describe("interaction", () => {
it("order summary updates when billing period changes", () => {
renderPage();
const brand1Card = screen
.getByText("subscription.plans.brand1.name")
.getAllByText("subscription.plans.brand1.name")
.find((el) => !el.closest("th"))!
.closest('[class*="relative"]')!;
fireEvent.click(brand1Card);
fireEvent.click(screen.getByRole("button", { name: "common.yearly" }));
@@ -491,7 +509,8 @@ describe("interaction", () => {
it("navigates to /dashboard/subscription/pay with correct search params", () => {
renderPage();
const brand2Card = screen
.getByText("subscription.plans.brand2.name")
.getAllByText("subscription.plans.brand2.name")
.find((el) => !el.closest("th"))!
.closest('[class*="relative"]')!;
fireEvent.click(brand2Card);
fireEvent.click(screen.getByTestId("brand-selector-select"));
@@ -512,7 +531,8 @@ describe("interaction", () => {
it("shows error toast when proceeding without brand selection", () => {
renderPage();
const brand1Card = screen
.getByText("subscription.plans.brand1.name")
.getAllByText("subscription.plans.brand1.name")
.find((el) => !el.closest("th"))!
.closest('[class*="relative"]')!;
fireEvent.click(brand1Card);
const ctaButtons = screen.getAllByRole("button", { name: /subscription\.proceed/ });
@@ -537,7 +557,8 @@ describe("interaction", () => {
eligibleForTrial: false,
});
const brand1Card = screen
.getByText("subscription.plans.brand1.name")
.getAllByText("subscription.plans.brand1.name")
.find((el) => !el.closest("th"))!
.closest('[class*="relative"]')!;
expect(brand1Card.className).toContain("cursor-pointer");
// Current plan card should NOT be clickable
@@ -559,7 +580,8 @@ describe("interaction", () => {
it("selected plan stays selected after switching billing period", () => {
renderPage();
const brand3Card = screen
.getByText("subscription.plans.brand3.name")
.getAllByText("subscription.plans.brand3.name")
.find((el) => !el.closest("th"))!
.closest('[class*="relative"]')!;
fireEvent.click(brand3Card);
expect(screen.getByText("subscription.orderSummary")).toBeInTheDocument();
@@ -578,7 +600,8 @@ describe("trust and i18n", () => {
it("fires checkout_started event when proceeding to payment", () => {
renderPage();
const brand2Card = screen
.getByText("subscription.plans.brand2.name")
.getAllByText("subscription.plans.brand2.name")
.find((el) => !el.closest("th"))!
.closest('[class*="relative"]')!;
fireEvent.click(brand2Card);
fireEvent.click(screen.getByTestId("brand-selector-select"));
@@ -593,7 +616,8 @@ describe("trust and i18n", () => {
it("fires plan_selected event when clicking a plan card", () => {
renderPage();
const brand3Card = screen
.getByText("subscription.plans.brand3.name")
.getAllByText("subscription.plans.brand3.name")
.find((el) => !el.closest("th"))!
.closest('[class*="relative"]')!;
fireEvent.click(brand3Card);
expect(mockCapture).toHaveBeenCalledWith("plan_selected", { plan: "brand3" });
@@ -811,13 +835,18 @@ describe("accessibility", () => {
it("plan cards have visible names", () => {
renderPage();
["brand1", "brand2", "brand3", "full"].forEach((key) => {
expect(screen.getByText(`subscription.plans.${key}.name`)).toBeInTheDocument();
// FeatureMatrix <th> also matches — verify at least one match exists (plan card)
const matches = screen.getAllByText(`subscription.plans.${key}.name`);
expect(matches.length).toBeGreaterThanOrEqual(2);
});
});
it("popular plan is distinguishable beyond color", () => {
renderPage();
const popularBadge = screen.getByText("subscription.popular");
// FeatureMatrix also has a popular badge — pick the one on the plan card
const popularBadge = screen
.getAllByText("subscription.popular")
.find((el) => !el.closest("th"))!;
expect(popularBadge).toBeInTheDocument();
const popularCard = popularBadge.closest('[class*="ring-2"]');
expect(popularCard).toBeTruthy();