fix(subscription): plan cards fill row, popular = professional
- Replace wrapping flex (maxWidth cap) with a fills-the-row grid (repeat(auto-fit, minmax(230px, 1fr))) so the three cards sit in one row and grow to the content width — removes the empty gap and stray wrap - Move the most-popular highlight to the professional (top) plan, matching clinic-pro-tauri Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -44,12 +44,14 @@ function mockApi({ my = DEFAULT_MY, plans = PLANS }: { my?: any; plans?: any[] }
|
||||
beforeEach(() => { get.mockReset(); mockApi(); });
|
||||
|
||||
describe('SubscriptionPage', () => {
|
||||
it('renders the three plans with the most-popular badge on the basic plan', async () => {
|
||||
it('renders the three plans with the most-popular badge on the professional plan', async () => {
|
||||
renderWithProviders(<SubscriptionPage />, { route: '/admin/subscription' });
|
||||
expect(await screen.findByText('پلن پایه')).toBeInTheDocument();
|
||||
expect(screen.getByText('پلن رایگان')).toBeInTheDocument();
|
||||
expect(screen.getByText('پلن حرفهای')).toBeInTheDocument();
|
||||
expect(screen.getByText('محبوبترین')).toBeInTheDocument();
|
||||
// most-popular badge sits on the professional (top) card, matching tauri
|
||||
const proCard = within(screen.getByTestId('plan-card-professional'));
|
||||
expect(proCard.getByText('محبوبترین')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows the current-plan card without an expiry warning when the plan is healthy', async () => {
|
||||
|
||||
Reference in New Issue
Block a user