106 lines
3.3 KiB
TypeScript
106 lines
3.3 KiB
TypeScript
import { renderToStaticMarkup } from "react-dom/server";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
import { StripePaymentDialog } from "@/app/_components/payment/stripe-payment-dialog";
|
|
|
|
import { SubscriptionCtaButton } from "../subscription-cta-button";
|
|
import { SubscriptionPaymentSuccessDialog } from "../subscription-payment-success-dialog";
|
|
import { SubscriptionCoinsOfferSection } from "../subscription-coins-offer-section";
|
|
import { SubscriptionVipOfferSection } from "../subscription-vip-offer-section";
|
|
|
|
describe("subscription Tailwind components", () => {
|
|
it("renders SubscriptionCtaButton with loading state", () => {
|
|
const html = renderToStaticMarkup(
|
|
<SubscriptionCtaButton isLoading>Pay now</SubscriptionCtaButton>,
|
|
);
|
|
|
|
expect(html).toContain("min-h-[clamp(48px,9.63vw,52px)]");
|
|
expect(html).toContain("bg-[linear-gradient(269deg");
|
|
expect(html).toContain("animate-spin");
|
|
expect(html).toContain("disabled");
|
|
expect(html).toContain("Pay now");
|
|
});
|
|
|
|
it("renders SubscriptionPaymentSuccessDialog with topup content", () => {
|
|
expect(
|
|
renderToStaticMarkup(
|
|
<SubscriptionPaymentSuccessDialog
|
|
open={false}
|
|
subscriptionType="vip"
|
|
onClose={() => undefined}
|
|
/>,
|
|
),
|
|
).toBe("");
|
|
|
|
const html = renderToStaticMarkup(
|
|
<SubscriptionPaymentSuccessDialog
|
|
open
|
|
subscriptionType="topup"
|
|
onClose={() => undefined}
|
|
/>,
|
|
);
|
|
|
|
expect(html).toContain('role="alertdialog"');
|
|
expect(html).toContain("z-80");
|
|
expect(html).toContain("Payment successful");
|
|
expect(html).toContain("Your coins have been added");
|
|
expect(html).toContain("bg-[linear-gradient(135deg,#ff67e0_0%,#f657a0_100%)]");
|
|
expect(html).toContain("OK");
|
|
});
|
|
|
|
it("renders StripePaymentDialog fallback with Tailwind dialog utilities", () => {
|
|
const html = renderToStaticMarkup(
|
|
<StripePaymentDialog
|
|
clientSecret="client-secret"
|
|
onClose={() => undefined}
|
|
/>,
|
|
);
|
|
|
|
expect(html).toContain('role="alertdialog"');
|
|
expect(html).toContain("fixed inset-0");
|
|
expect(html).toContain("max-w-(--dialog-wide-max-width,420px)");
|
|
expect(html).toContain("Payment unavailable");
|
|
expect(html).toContain("bg-[linear-gradient(var(--color-button-gradient-start,#ff67e0)");
|
|
});
|
|
|
|
it("renders most popular badges for VIP and coin plans", () => {
|
|
const vipHtml = renderToStaticMarkup(
|
|
<SubscriptionVipOfferSection
|
|
plans={[
|
|
{
|
|
id: "vip_monthly",
|
|
title: "Monthly",
|
|
price: "9.99",
|
|
currency: "usd",
|
|
originalPrice: "19.99",
|
|
mostPopular: true,
|
|
isFirstRechargeOffer: true,
|
|
firstRechargeDiscountPercent: 50,
|
|
},
|
|
]}
|
|
selectedPlanId="vip_monthly"
|
|
onSelectPlan={() => undefined}
|
|
/>,
|
|
);
|
|
const coinsHtml = renderToStaticMarkup(
|
|
<SubscriptionCoinsOfferSection
|
|
plans={[
|
|
{
|
|
id: "coin_1000",
|
|
coins: 1000,
|
|
price: "9.99",
|
|
currency: "US$",
|
|
mostPopular: true,
|
|
},
|
|
]}
|
|
selectedPlanId={null}
|
|
onSelectPlan={() => undefined}
|
|
/>,
|
|
);
|
|
|
|
expect(vipHtml).toContain("Most Popular");
|
|
expect(vipHtml).toContain("50% OFF");
|
|
expect(coinsHtml).toContain("Most Popular");
|
|
});
|
|
});
|