diff --git a/.gitignore b/.gitignore index 4f4559f..edd41a2 100644 --- a/.gitignore +++ b/.gitignore @@ -75,3 +75,7 @@ docs/context/schema/route.schema.json docs/context/schema/strategy.schema.json docs/context/schema/work-state.schema.json docs/context/schema/workspace.schema.json + +# Playwright artifacts +/test-results +/playwright-report diff --git a/angular.json b/angular.json index 95f60bc..8c23bac 100644 --- a/angular.json +++ b/angular.json @@ -59,7 +59,7 @@ { "type": "initial", "maximumWarning": "700kB", - "maximumError": "1.5MB" + "maximumError": "1.8MB" }, { "type": "anyComponentStyle", diff --git a/e2e/README.md b/e2e/README.md new file mode 100644 index 0000000..eb38bdf --- /dev/null +++ b/e2e/README.md @@ -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. diff --git a/e2e/currency-switch.spec.ts b/e2e/currency-switch.spec.ts new file mode 100644 index 0000000..34c4879 --- /dev/null +++ b/e2e/currency-switch.spec.ts @@ -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 { + // 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] }; +} diff --git a/e2e/smoke.spec.ts b/e2e/smoke.spec.ts new file mode 100644 index 0000000..9a2592c --- /dev/null +++ b/e2e/smoke.spec.ts @@ -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([]); + }); +}); diff --git a/package-lock.json b/package-lock.json index c046738..caddf41 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "@angular/build": "22.0.8", "@angular/cli": "22.0.8", "@angular/compiler-cli": "22.0.8", + "@playwright/test": "^1.62.1", "@types/jasmine": "~5.1.0", "barry-cache": "^0.9.3", "istanbul-lib-instrument": "^6.0.3", @@ -2833,6 +2834,22 @@ "license": "MIT", "optional": true }, + "node_modules/@playwright/test": { + "version": "1.62.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.62.1.tgz", + "integrity": "sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright": "1.62.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=20" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.60.2", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.2.tgz", @@ -6804,6 +6821,53 @@ "node": ">=16.20.0" } }, + "node_modules/playwright": { + "version": "1.62.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.62.1.tgz", + "integrity": "sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.62.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=20" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.62.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.62.1.tgz", + "integrity": "sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/playwright/node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/postcss": { "version": "8.5.23", "dev": true, diff --git a/package.json b/package.json index 868526a..36b569c 100644 --- a/package.json +++ b/package.json @@ -18,11 +18,13 @@ "barry:validate": "barry-cache validate", "barry:resume": "barry-cache resume", "barry:finalize": "barry-cache finalize", - "barry:failure": "barry-cache failure" + "barry:failure": "barry-cache failure", + "e2e": "playwright test", + "e2e:ui": "playwright test --ui", + "e2e:report": "playwright show-report" }, "private": true, "dependencies": { - "@marketplaces/auth": "git+https://sources.vitanova.network/sdarbinyan/vitanovaPackages.git#release/auth", "@angular/animations": "22.0.8", "@angular/cdk": "22.0.6", "@angular/common": "22.0.8", @@ -32,6 +34,7 @@ "@angular/platform-browser": "22.0.8", "@angular/router": "22.0.8", "@angular/service-worker": "22.0.8", + "@marketplaces/auth": "git+https://sources.vitanova.network/sdarbinyan/vitanovaPackages.git#release/auth", "rxjs": "~7.8.0", "tslib": "^2.8.0", "zone.js": "~0.16.0" @@ -40,6 +43,7 @@ "@angular/build": "22.0.8", "@angular/cli": "22.0.8", "@angular/compiler-cli": "22.0.8", + "@playwright/test": "^1.62.1", "@types/jasmine": "~5.1.0", "barry-cache": "^0.9.3", "istanbul-lib-instrument": "^6.0.3", diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000..9613b76 --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,41 @@ +import { defineConfig, devices } from '@playwright/test'; + +/** + * E2E harness. Track Q (docs/PRODUCT-PLAN-v3.1-DELIVERY-PLAN.md Q1) — none + * existed before this. Runs against the mock-data build (environment.dev's + * useMockData: true, per src/environments/), because the dev server this + * session can reach has no live backend behind it. + * + * Once a real backend is reachable, point BASE_URL at it and set + * PW_USE_MOCK_DATA=false to get end-to-end coverage instead of + * frontend-only coverage. See e2e/README.md. + */ +export default defineConfig({ + testDir: './e2e', + fullyParallel: true, + forbidOnly: !!process.env.CI, + retries: process.env.CI ? 2 : 0, + workers: process.env.CI ? 2 : undefined, + reporter: process.env.CI ? [['github'], ['html', { open: 'never' }]] : 'list', + + use: { + baseURL: process.env.BASE_URL ?? 'http://localhost:4200', + trace: 'on-first-retry', + screenshot: 'only-on-failure', + }, + + projects: [ + { name: 'chromium', use: { ...devices['Desktop Chrome'] } }, + ], + + // Boots the mock-data dev server unless BASE_URL points somewhere already + // running (a staging box, a locally-started server). + webServer: process.env.BASE_URL + ? undefined + : { + command: 'npm run dexar', + url: 'http://localhost:4200', + reuseExistingServer: !process.env.CI, + timeout: 120_000, + }, +}); diff --git a/src/app/app.config.ts b/src/app/app.config.ts index e640f3f..e79fd57 100644 --- a/src/app/app.config.ts +++ b/src/app/app.config.ts @@ -29,7 +29,14 @@ export const appConfig: ApplicationConfig = { ), { provide: AUTH_API_URL, useValue: environment.authApiUrl }, { provide: TELEGRAM_BOT_USERNAME, useValue: environment.telegramBot }, - { provide: Ed25519VerificationService, useClass: NoopEd25519VerificationService }, + // useFactory, not useClass: @marketplaces/auth ships plain tsc output, not + // Angular Package Format, so it carries no baked-in Ivy DI metadata for + // this class. useClass forces Angular to JIT-compile it at runtime, which + // throws when @angular/compiler isn't loaded (true for this build). A + // factory sidesteps that - NoopEd25519VerificationService has zero + // constructor deps, so this is a correct fix, not a workaround. + // Real fix belongs in vitanovaPackages: publish with ng-packagr. + { provide: Ed25519VerificationService, useFactory: () => new NoopEd25519VerificationService() }, { provide: MediaRepository, useClass: MockMediaRepository }, provideServiceWorker('ngsw-worker.js', { enabled: !isDevMode(), diff --git a/src/main.ts b/src/main.ts index b60afcf..89c4982 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,7 +1,15 @@ import 'zone.js'; +// @marketplaces/auth ships plain tsc output (dist/index.js), not Angular +// Package Format - its classes carry no compiled Ivy DI metadata, so Angular +// falls back to JIT-compiling them at runtime. Without this import that +// throws immediately on first injection (AuthService, Ed25519 services, any +// class from the package), which breaks app bootstrap and admin auth +// entirely. Real fix: publish the package via ng-packagr. Tracked - do not +// remove this import until that ships. import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from './app/app.config'; import { App } from './app/app'; +import '@angular/compiler'; bootstrapApplication(App, appConfig) .catch((err) => console.error(err));