bermudalambandClaude Opus 5
39c82ff3a4
#195 and #203 made the cart say a demo order is a demo order. That message is an antd toast lasting about three seconds, after which the cart empties and the card unmounts. Order history is what the customer comes back to when they wonder where their item is, and it said nothing. A demo row was a real row: item name, `$80.00`, status `completed` rendered as a neutral tag because `STATUS_COLORS` has no `completed` key, and `demo` printed raw under a heading reading "Processor". That is not an explanation — a customer has no reason to read `demo` as "this did not happen", and "processor" is not a word they have any reason to know. Two things now say it, for the same reason the cart needed two. The `demo` cell renders as a tag reading "Demo (not charged)", which marks *which* order. A notice above the table, shown only when there is one, says what that means — a tag reading "Demo" still assumes the reader knows what a demo order is, and what they actually want to know is whether to expect a parcel. Nothing changes on the backend: `orders.processor = 'demo'` was already written at checkout and already selected for this page. The row is a real row in a real table and stays visible, because hiding it would be its own kind of lie — the customer did do something, and it did have an effect on the catalogue. Written test-first against a browser: the new case drives a real demo purchase through the cart, opens `/orders`, and failed on both assertions before the change. Verified: 4 end-to-end tests in this spec pass, the 5 existing order-history tests still pass, frontend build clean, lint 0 errors (2 pre-existing warnings in `src/filters.ts`). Closes #205 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
import { Locator, Page } from '@playwright/test';
|
|
|
|
/**
|
|
* Order history, which is a page rather than a modal.
|
|
*
|
|
* That distinction is the point of the specs using this: /orders is
|
|
* deliberately not in MODAL_ROUTES, so there is no dialog and the storefront is
|
|
* not rendered behind it. Putting it back would quietly undo that, which is why
|
|
* the absence of a dialog is asserted rather than assumed.
|
|
*/
|
|
export class OrdersPage {
|
|
readonly heading: Locator;
|
|
readonly noOrdersNotice: Locator;
|
|
readonly continueShoppingButton: Locator;
|
|
readonly backToShopButton: Locator;
|
|
readonly anyDialog: Locator;
|
|
readonly demoNotice: Locator;
|
|
readonly demoOrderMarker: Locator;
|
|
|
|
constructor(private readonly page: Page) {
|
|
this.heading = page.getByRole('heading', { name: 'Order History' });
|
|
this.noOrdersNotice = page.getByText('No orders yet');
|
|
this.continueShoppingButton = page.getByRole('button', { name: 'Continue Shopping' });
|
|
this.backToShopButton = page.getByRole('button', { name: 'Back to Shop' });
|
|
this.anyDialog = page.getByRole('dialog');
|
|
this.demoNotice = page.getByText('Some of these are demo orders');
|
|
this.demoOrderMarker = page.getByText('Demo (not charged)');
|
|
}
|
|
|
|
async goto(): Promise<void> {
|
|
await this.page.goto('/orders');
|
|
}
|
|
}
|