Files
redefined-designs/frontend/tests/e2e/pages/AdminPage.ts
T
bermudalamb 5c907fcf9a
Linting / lint (pull_request) Successful in 2m13s
SonarQube Analysis / sonarqube (pull_request) Successful in 17m49s
test(e2e): add page objects, fixtures and a typed test build (#137)
Foundation only. No spec is converted in this commit, so the suite behaves exactly as before — the conversions follow in themed batches, each leaving the suite green.

The suite had grown by copy-paste. Registering a customer was implemented nine times, as `register` in five files and `registerCustomer` in four more, each carrying its own re-explanation of the same bcrypt wait and the same "the header, not the URL, proves the session exists" reasoning. `uniqueEmail` was reinvented per file with a different prefix and a different encoding each time. Thirteen locators reached into antd's internals — `.ant-tabs-tab-active .ant-tabs-tab-btn`, `.ant-select-item-option[title=...]`, `.ant-col` — spread across seven files, so an antd upgrade breaks tests that have nothing to do with it.

Page objects hold named locators and the actions that operate on them; assertions stay in the specs, so a test reads as its own statement of what it verifies. The exception is an action waiting for its own completion — registering waits for the account button, opening an admin tab waits for its panel — because that wait is the action's contract, and pushing it to callers would recreate the duplication being removed.

Fixtures carry the setup rather than the specs. `customer` registers through the API rather than the form: nine specs drove the registration form purely to arrive at a signed-in session, so a broken form failed a hundred tests that were not about it, and each paid for a bcrypt round-trip through the UI. `page.request` shares the browser context's cookie jar, so the session belongs to `page`. The specs that are genuinely about registration drive the form properly through `authModal`.

`adminApi` takes its base URL from the Playwright config. One spec built its own request context against a hardcoded http://localhost:5173, so changing the port in the config would have moved every test except that one.

The inline pg.Client in password-reset.spec.ts moves to support/db.ts. The reasoning for reading the database directly is unchanged and still right — an endpoint that returns a reset token for an arbitrary address is account takeover if it is ever reachable, and an environment gate is a thin thing to stand between that and production — but it no longer sits in a spec where it can be copied into the next one wanting a shortcut. Its default port becomes 55500, the local stack's, rather than 55432: that is the integration suite's disposable Postgres, a different database with different credentials that the app under test is not connected to, and it is Hyper-V-reserved on at least one machine here, so the spec failed with a bare ECONNREFUSED naming a port nobody had chosen.

tsconfig.test.json type-checks the tree and runs as part of `npm run build`. It is separate from tsconfig.json rather than widening its `include`, because scripts/check-sonar-tsconfig.js compares the two configs' include arrays, and pulling the Playwright suite into SonarQube's analysis program is a different decision from type-checking it. The whole existing suite type-checks clean on the first run.

Lint now covers tests/ with `project` rather than `projectService` — the service resolves a file to the nearest tsconfig.json, which for tests/ is the one that excludes them, and every file then errors as not part of a project. no-floating-promises is an error here: Playwright's API is almost entirely promises, and a missing await on an assertion does not fail, it passes having asserted nothing.

Four rule families are switched off for tests rather than left as warnings. Bringing these files in scope added 45, of which none were defects, and #60's argument is that a gate nobody reads is not a gate. There is no React in this directory, and the hooks rules fire on ordinary functions whose parameter is named `use` — which Playwright fixtures are, by its own API. Test credentials are the point of a test and the project's own rule is that they live only in test paths, which is here. Math.random builds unique fixture names so parallel workers do not collide, and a cryptographic generator would say something untrue about what the value is for. The count is back to the 30 that src carried before.

Refs #137
2026-08-23 17:11:03 -05:00

61 lines
1.9 KiB
TypeScript

import { Locator, Page, expect } from '@playwright/test';
/** The admin tabs, in the order the shell renders them. */
export type AdminTab =
| 'Inventory'
| 'Categories'
| 'Tags'
| 'Customers'
| 'Emails'
| 'Settings';
/**
* The admin shell: the tab strip and the panel it swaps.
*
* Only the active tab's panel is mounted, which is what keeps the locators
* inside each panel unambiguous — the email editors used to be stacked and a
* locator for "Save" matched all six.
*
* `activePanel` exists because several specs reached for
* `.ant-tabs-tabpane-active .ant-table` and similar to scope themselves to the
* visible panel. That knowledge belongs here rather than in five spec files.
*/
export class AdminPage {
readonly tabList: Locator;
readonly activePanel: Locator;
readonly activeTabLabel: Locator;
constructor(private readonly page: Page) {
this.tabList = page.getByRole('tablist');
this.activePanel = page.locator('.ant-tabs-tabpane-active').first();
this.activeTabLabel = page.locator('.ant-tabs-tab-active .ant-tabs-tab-btn').first();
}
async goto(): Promise<void> {
await this.page.goto('/admin');
}
tab(name: AdminTab | RegExp): Locator {
return this.page.getByRole('tab', { name });
}
/**
* Opens a tab from wherever the browser is, navigating to /admin first.
*
* Takes the navigation rather than assuming it, because every caller in the
* suite did both and half of them wrote the goto themselves.
*/
async open(name: AdminTab): Promise<void> {
await this.goto();
await this.openTab(name);
}
/** Switches tabs without renavigating, for a test that visits two of them. */
async openTab(name: AdminTab): Promise<void> {
await this.tab(name).click();
// The panel being mounted is the completion of the click. Without this a
// caller's first locator resolves against the outgoing panel.
await expect(this.activePanel).toBeVisible();
}
}