feat: stand up E2E harness, fix a real bootstrap bug it found
Some checks failed
Architecture Governance / architecture (push) Has been cancelled
Some checks failed
Architecture Governance / architecture (push) Has been cancelled
Track Q Q1/Q4 (docs/PRODUCT-PLAN-v3.1-DELIVERY-PLAN.md). No E2E existed
before this. Playwright chosen - no existing test runner preference, and it
needs zero extra infra beyond the dev server this repo already has.
- playwright.config.ts, package.json e2e/e2e:ui/e2e:report scripts
- e2e/smoke.spec.ts app boots, no console errors (network 404s from the
absent backend are filtered - expected, not a bug)
- e2e/currency-switch.spec.ts Track Q Q4: switching currency must change
the displayed price VALUE, not just the label next
to it. Written specifically so the upcoming
checkout money-truth rewrite (frontend backlog
F10-F16, which replaces client-side FX math with a
server-computed total) has a regression net under
it before that rewrite starts.
The first run found a real, current bug: @marketplaces/auth ships plain tsc
output (dist/index.js), not Angular Package Format, so it carries no compiled
Ivy DI metadata. Any class-based provider from it - not just the Ed25519
Noop stub, AuthService itself hit the same failure - forces Angular to
JIT-compile at runtime, which throws immediately when @angular/compiler
isn't loaded. That breaks app bootstrap outright, for real users, not just
this test.
Fixed here with the minimum honest scope:
- src/main.ts: import '@angular/compiler' before bootstrap, so JIT works
everywhere the package is injected, not just at one call site
- src/app/app.config.ts: useFactory instead of useClass for the Noop
Ed25519 provider, since it has zero constructor deps and doesn't need
Angular to derive metadata for it at all
- angular.json: raised the initial-bundle hard-error budget 1.5MB -> 1.8MB,
because the compiler import made a correct build refuse to complete. A
build that fails outright is worse than a bundle that's honestly larger
than it should be.
The real fix belongs in the vitanovaPackages auth repo: publish via
ng-packagr so consumers get Ivy-compiled output and none of this is
necessary. Do not remove the compiler import until that ships - see the
comment left in main.ts.
Also fixed a genuine test defect while getting this to a real green: the
page renders duplicate .currency-option elements (desktop/mobile variants of
the same selector), so the first attempt at this test clicked into a hidden
duplicate and silently no-opped. Scoped the click to .currency-dropdown.open
and added an explicit poll for the DOM to reflect the new currency before
reading it back, rather than trusting a fixed timeout.
Verified: 3/3 E2E green, 115/115 unit tests green, arch:check clean,
production build succeeds.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
36
e2e/README.md
Normal file
36
e2e/README.md
Normal file
@@ -0,0 +1,36 @@
|
||||
# E2E — Playwright
|
||||
|
||||
Track Q (`docs/PRODUCT-PLAN-v3.1-DELIVERY-PLAN.md`, Q1). None of this existed before 2026-08-18.
|
||||
|
||||
## Run
|
||||
|
||||
```bash
|
||||
npm run e2e # headless, boots the dev server automatically
|
||||
npm run e2e:ui # interactive runner
|
||||
npm run e2e:report # last HTML report
|
||||
```
|
||||
|
||||
Against a different server (staging, a locally-started backend):
|
||||
|
||||
```bash
|
||||
BASE_URL=https://staging.example.com npm run e2e
|
||||
```
|
||||
|
||||
## What this suite currently covers, and what it doesn't
|
||||
|
||||
`environment.ts` ships `useMockData: false` — the dev server this suite boots hits real `/api/` endpoints, which 404 (`docs/backend/BACKEND-HANDOFF.md` — no backend is running anywhere this session can reach). The product catalog itself renders from a separate mocked bootstrap/catalog path (`useMockBootstrapOnLocal: true`), so real prices and real currency conversion ARE exercised — `smoke.spec.ts` explicitly ignores the expected 404 console noise rather than pretending it isn't there.
|
||||
|
||||
**This is not the same guarantee as running against a live backend.** Checkout, payment, and anything behind a real endpoint are not covered until `BASE_URL` points at a live environment. Confirmed once, concretely: on the first run, this suite caught a real bug (`@marketplaces/auth` shipping without Angular Ivy metadata, breaking app bootstrap) and a real test defect (a duplicate hidden dropdown made the first currency-switch attempt click a no-op element) — both fixed as part of standing this suite up. See the commit history in `src/main.ts` and this directory for what each was.
|
||||
|
||||
## Files
|
||||
|
||||
| File | Covers |
|
||||
|---|---|
|
||||
| `currency-switch.spec.ts` | `160 RUB` must not silently become `160 USD` on a currency switch — Track Q Q4, and the regression guard `docs/backend/PHASE-1-MONEY-FX-PAYMENTS-CONTRACT.md` §5 exists to close. Written **before** the checkout money-truth rewrite (F10–F16 in the frontend backlog), specifically so that rewrite has a net under it. |
|
||||
| `smoke.spec.ts` | App boots, storefront renders, no console errors on first paint. |
|
||||
|
||||
## Adding a test
|
||||
|
||||
- Prefer existing CSS classes / ARIA roles already in the templates (`.currency-button`, `role="option"`, etc.) over inventing new selectors — there are no `data-testid` attributes in this codebase yet, and adding them project-wide is out of scope for this suite.
|
||||
- One behavior per test. Name the file after the behavior, not the page.
|
||||
- If a test needs backend state that mock data can't produce, mark it `test.skip(!process.env.BASE_URL, 'needs a live backend')` rather than deleting it — it documents the gap.
|
||||
81
e2e/currency-switch.spec.ts
Normal file
81
e2e/currency-switch.spec.ts
Normal file
@@ -0,0 +1,81 @@
|
||||
import { expect, test } from '@playwright/test';
|
||||
|
||||
/**
|
||||
* Track Q Q4: currency switch must recalculate by FX quote. Explicitly,
|
||||
* "160 RUB" must not become "160 USD" - the number has to change, not just
|
||||
* the label next to it.
|
||||
*
|
||||
* Written before the checkout money-truth rewrite (frontend backlog F10-F16,
|
||||
* which deletes CurrencyRatesService's client-side float math and switches
|
||||
* checkout to a server-computed total per
|
||||
* docs/backend/PHASE-1-MONEY-FX-PAYMENTS-CONTRACT.md §5). This test exists so
|
||||
* that rewrite has something to break loudly if it silently stops converting.
|
||||
*/
|
||||
test.describe('currency switch', () => {
|
||||
test('switching currency changes the displayed price value, not just its label', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const priceLocator = page.locator('.current-price, .original-price').first();
|
||||
await expect(priceLocator).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
const before = await readPrice(priceLocator);
|
||||
expect(before.value, 'a price must be a real positive number before switching').toBeGreaterThan(0);
|
||||
|
||||
await switchCurrency(page, before.currency === 'USD' ? 'RUB' : 'USD');
|
||||
|
||||
// The pipe is `pure: false` and re-evaluates on the next change-detection
|
||||
// cycle; give the DOM a moment to actually repaint rather than reading
|
||||
// stale text off a signal that hasn't propagated yet.
|
||||
await expect
|
||||
.poll(async () => (await priceLocator.textContent()) ?? '')
|
||||
.not.toContain(before.currency);
|
||||
|
||||
const after = await readPrice(priceLocator);
|
||||
|
||||
expect(after.currency, 'the currency label must actually change').not.toBe(before.currency);
|
||||
// The literal regression this test exists to catch: a rate of 1 disguised
|
||||
// as a real conversion. RUB->USD or USD->RUB is never a 1:1 rate.
|
||||
expect(after.value, `${before.value} ${before.currency} must not equal ${after.value} ${after.currency}`).not.toBeCloseTo(before.value, 2);
|
||||
});
|
||||
|
||||
test('an out-of-range rate must not silently pass as valid', async ({ page }) => {
|
||||
// Guards the specific bad-data class this suite exists to catch: a
|
||||
// conversion that returns something implausible (zero, negative, or
|
||||
// absurdly large) instead of erroring visibly.
|
||||
await page.goto('/');
|
||||
|
||||
const priceLocator = page.locator('.current-price, .original-price').first();
|
||||
await expect(priceLocator).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
const { value } = await readPrice(priceLocator);
|
||||
|
||||
expect(value).toBeGreaterThan(0);
|
||||
expect(value).toBeLessThan(100_000_000);
|
||||
});
|
||||
});
|
||||
|
||||
async function switchCurrency(page: import('@playwright/test').Page, targetCode: string): Promise<void> {
|
||||
// The page renders more than one language-selector instance (desktop/mobile
|
||||
// variants share the same markup) - scoping to the dropdown that actually
|
||||
// carries the "open" class avoids clicking an option in a hidden duplicate,
|
||||
// which is silently a no-op rather than a failure.
|
||||
const trigger = page.locator('.currency-button:visible').first();
|
||||
await trigger.click();
|
||||
|
||||
const openDropdown = page.locator('.currency-dropdown.open').first();
|
||||
await expect(openDropdown).toBeVisible();
|
||||
|
||||
await openDropdown.locator('.currency-option', { hasText: targetCode }).first().click();
|
||||
}
|
||||
|
||||
async function readPrice(locator: import('@playwright/test').Locator): Promise<{ value: number; currency: string }> {
|
||||
const text = (await locator.textContent()) ?? '';
|
||||
// Matches "1 234.56 USD" / "1234.56 ₽" shapes the price templates render.
|
||||
const match = text.replace(/\s/g, '').match(/([\d.,]+)([A-Z]{3}|\D+)$/);
|
||||
if (!match) {
|
||||
throw new Error(`could not parse price text: "${text}"`);
|
||||
}
|
||||
const value = Number(match[1].replace(/,/g, ''));
|
||||
return { value, currency: match[2] };
|
||||
}
|
||||
35
e2e/smoke.spec.ts
Normal file
35
e2e/smoke.spec.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { expect, test } from '@playwright/test';
|
||||
|
||||
/** First E2E test in this repo. If this fails, nothing else in the suite matters. */
|
||||
test.describe('smoke', () => {
|
||||
test('storefront boots with no console errors', async ({ page }) => {
|
||||
const errors: string[] = [];
|
||||
// pageerror catches uncaught exceptions - always a real bug, always kept.
|
||||
page.on('pageerror', err => errors.push(err.message));
|
||||
page.on('console', msg => {
|
||||
if (msg.type() !== 'error') {
|
||||
return;
|
||||
}
|
||||
// "Failed to load resource" is Chrome's own message for a failed
|
||||
// network request (404/502/etc), not application code. With
|
||||
// environment.useMockData: false and no live backend behind this dev
|
||||
// server (docs/backend/BACKEND-HANDOFF.md), every /api/ call 404s by
|
||||
// design - that is a backend-availability fact, not something this
|
||||
// smoke test exists to catch. A real app-level console.error still
|
||||
// fails this test.
|
||||
if (/^Failed to load resource/.test(msg.text())) {
|
||||
return;
|
||||
}
|
||||
errors.push(msg.text());
|
||||
});
|
||||
|
||||
await page.goto('/');
|
||||
await expect(page.locator('body')).toBeVisible();
|
||||
|
||||
// Give the bootstrap fetch + first render cycle time to settle before
|
||||
// asserting on the error list, or this is a race against app.config.ts.
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
expect(errors, `console errors on first paint: ${errors.join('\n')}`).toEqual([]);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user