Insufficient Credits Notification — CTA Verification Sample

This article is a dedicated test fixture for PR 2648 visual end-to-end (E2E) testing. It exists to trigger and validate the display of the insufficient-credits notification and its call-to-action (CTA) button under realistic rendering conditions.

Purpose

PR 2648 introduces a UI notification banner that appears when a user's credit balance falls below the minimum threshold required to generate content. The notification includes:

A dismissible warning banner with a credit-shortage icon
A "Top Up Credits" CTA button that routes to the billing / credits page
Correct rendering at all viewport widths (mobile, tablet, desktop)

This channel and its content drops are seeded specifically so that the E2E test suite can assert the following states without relying on production account data.

Test Scenarios Covered

Scenario	Expected UI State
Credits = 0	Full-width notification banner visible; CTA button enabled
Credits = 1 (below threshold)	Same banner; CTA button enabled
Credits = threshold (exact)	Banner hidden; CTA button absent
Credits > threshold	Banner hidden; CTA button absent
User dismisses banner	Banner hidden for session; re-appears on next page load

Integration Notes

The notification component reads from the user.creditsRemaining field returned by the /api/credits endpoint. The CTA button href is dynamically constructed from config.billingPageUrl. Both fields must be present in the staging environment's seed data for this fixture to render correctly.

For any questions about test data configuration, refer to the PR 2648 description 1 and the project's e2e/fixtures/credits.ts seed file.

This channel is used exclusively for automated visual regression testing and should not appear in production content listings.

参考ソース

1PR 2648 – Insufficient Credits CTA