TenantAtlas/apps/website/tests/smoke/home-product.spec.ts
ahmido 40039337d8
Some checks failed
Main Confidence / confidence (push) Failing after 45s
feat: implement homepage structure spec 216 (#254)
## Summary

Implements Spec 216 for the public website homepage in `apps/website`.

This reworks the homepage into the required narrative flow:
- hero with one dominant CTA, one secondary CTA, product-near visual, and bounded trust subclaims
- outcome framing section
- grouped capability model section
- explicit trust block before the final CTA
- dated progress teaser backed by changelog entries
- final CTA transition to contact

It also adds the full spec-kit artifact set for `specs/216-homepage-structure` and updates the smoke suite to prove section order, CTA hierarchy, onward route reachability, and mobile readability.

## Validation

- `corepack pnpm build:website`
- `cd apps/website && corepack pnpm exec playwright test`

## Notes

- Branch: `216-homepage-structure`
- Commit: `097f8e70`
- Remote branch has been pushed and is ready for review.

Co-authored-by: Ahmed Darrazi <ahmed.darrazi@live.de>
Reviewed-on: #254
2026-04-19 12:56:05 +00:00

119 lines
4.4 KiB
TypeScript

import { expect, test } from '@playwright/test';
import {
expectCtaHierarchy,
expectDisclosureLayer,
expectFooterLinks,
expectHomepageSectionOrder,
expectMobileReadability,
expectNavigationVsCtaDifferentiation,
expectOnwardRouteReachable,
expectPageFamily,
expectProductNearVisual,
expectPrimaryNavigation,
expectShell,
visitPage,
} from './smoke-helpers';
test('home uses the landing foundation to explain the product category with one clear action hierarchy', async ({
page,
}) => {
await visitPage(page, '/');
await expectShell(page, /TenantAtlas/);
await expectPageFamily(page, 'landing');
await expectDisclosureLayer(page, '1');
await expectDisclosureLayer(page, '2');
await expectPrimaryNavigation(page);
await expectNavigationVsCtaDifferentiation(page);
await expectFooterLinks(page);
await expectCtaHierarchy(page, 'Request a working session', 'See the product model');
await expect(page.getByRole('main').getByRole('link', { name: 'Request a working session' }).first()).toBeVisible();
const skipLink = page.getByRole('link', { name: 'Skip to content' });
await page.keyboard.press('Tab');
await expect(skipLink).toBeFocused();
});
test('homepage hero explains the product with a product-near visual and outcome framing', async ({
page,
}) => {
await visitPage(page, '/');
await expectProductNearVisual(page);
await expect(page.locator('[data-section="outcome"]')).toBeVisible();
await expect(
page.getByRole('heading', { name: /calmer operations|governance pain|operational risk/i }).first(),
).toBeVisible();
await expectCtaHierarchy(page, 'Request a working session', 'See the product model');
});
test('homepage maintains required section order: outcome before capability before trust before progress before cta', async ({
page,
}) => {
await visitPage(page, '/');
await expectHomepageSectionOrder(page, ['outcome', 'capability', 'trust', 'progress', 'cta']);
});
test('homepage shows grouped capability clusters instead of a feature wall', async ({
page,
}) => {
await visitPage(page, '/');
await expect(page.locator('[data-section="capability"]')).toBeVisible();
await expect(
page.getByRole('heading', { name: /product model|what TenantAtlas covers/i }),
).toBeVisible();
});
test('homepage shows explicit trust signals before the final CTA', async ({
page,
}) => {
await visitPage(page, '/');
await expect(page.locator('[data-section="trust"]')).toBeVisible();
await expectOnwardRouteReachable(page, ['/trust']);
});
test('homepage shows dated progress signals before the final CTA', async ({
page,
}) => {
await visitPage(page, '/');
await expect(page.locator('[data-section="progress"]')).toBeVisible();
await expectOnwardRouteReachable(page, ['/changelog']);
});
test('homepage routes into Product, Trust, Changelog, and Contact', async ({
page,
}) => {
await visitPage(page, '/');
await expectOnwardRouteReachable(page, ['/product', '/trust', '/changelog', '/contact']);
});
test.describe('homepage mobile', () => {
test.use({ viewport: { width: 390, height: 844 } });
test('homepage remains readable on narrow screens', async ({ page }) => {
await visitPage(page, '/');
await expectMobileReadability(page);
await expect(page.locator('[data-section="outcome"]')).toBeVisible();
await expect(page.locator('[data-section="capability"]')).toBeVisible();
await expect(page.locator('[data-section="trust"]')).toBeVisible();
});
});
test('product keeps the connected operating model readable without collapsing into a feature list', async ({
page,
}) => {
await visitPage(page, '/product');
await expectShell(page, /operating model|restore posture|governance/i);
await expectPageFamily(page, 'landing');
await expectDisclosureLayer(page, '1');
await expectDisclosureLayer(page, '2');
await expectPrimaryNavigation(page);
await expectNavigationVsCtaDifferentiation(page);
await expectFooterLinks(page);
await expect(
page.getByRole('heading', { name: 'Explain what the product does before asking for buyer trust.' }),
).toBeVisible();
await expectCtaHierarchy(page, 'Review the trust posture', 'Start the working session');
await expect(page.getByRole('main').getByRole('link', { name: 'Read the changelog' }).first()).toBeVisible();
});