96 lines
3.4 KiB
TypeScript
96 lines
3.4 KiB
TypeScript
import { renderToStaticMarkup } from "react-dom/server";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
import { SubscriptionCtaButton } from "../subscription-cta-button";
|
|
import { SubscriptionPaymentMethod } from "../subscription-payment-method";
|
|
import { SubscriptionPaymentSuccessDialog } from "../subscription-payment-success-dialog";
|
|
import { StripePaymentDialog } from "../stripe-payment-dialog";
|
|
|
|
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 SubscriptionPaymentMethod with default ordering and selection", () => {
|
|
const html = renderToStaticMarkup(
|
|
<SubscriptionPaymentMethod
|
|
value="ezpay"
|
|
defaultChannel="ezpay"
|
|
caption="GCash by default"
|
|
onChange={() => undefined}
|
|
/>,
|
|
);
|
|
|
|
expect(html).toContain('aria-labelledby="payment-method-title"');
|
|
expect(html).toContain("Payment Method");
|
|
expect(html).toContain("GCash by default");
|
|
expect(html.indexOf('aria-label="GCash"')).toBeLessThan(
|
|
html.indexOf('aria-label="Stripe"'),
|
|
);
|
|
const selectedButton = html.match(
|
|
/<button[^>]*aria-pressed="true"[^>]*>/,
|
|
)?.[0];
|
|
expect(selectedButton).toBeDefined();
|
|
expect(selectedButton).toContain(
|
|
'data-analytics-key="subscription.payment_method"',
|
|
);
|
|
expect(selectedButton).toContain("border-[#f657a0]");
|
|
expect(selectedButton).not.toContain("border-[rgba(246,87,160,0.18)]");
|
|
expect(selectedButton).toContain("bg-[#fff4f9]");
|
|
expect(selectedButton).not.toContain("bg-white");
|
|
expect(selectedButton).toContain("0_0_0_3px_rgba(217,47,127,0.18)");
|
|
expect(selectedButton).toContain("-translate-y-0.5");
|
|
expect(html).toContain("/images/subscription/gcash-logo.svg");
|
|
});
|
|
|
|
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)");
|
|
});
|
|
});
|