feat: compose the portfolio journey layer
This commit is contained in:
@@ -39,9 +39,9 @@ const captureDocument = async (
|
||||
...document.querySelectorAll<HTMLElement>('main > section > h2'),
|
||||
].map((heading) => heading.innerText.trim()),
|
||||
h1: document.querySelector('h1')?.textContent?.trim() ?? '',
|
||||
role: document.querySelector('.site-header > p')?.textContent?.trim() ?? '',
|
||||
role: document.querySelector('.hero-journey__role')?.textContent?.trim() ?? '',
|
||||
landmarks: {
|
||||
headers: document.querySelectorAll('header').length,
|
||||
headers: document.querySelectorAll('.site-header').length,
|
||||
mains: document.querySelectorAll('main').length,
|
||||
navigations: document.querySelectorAll('nav').length,
|
||||
footers: document.querySelectorAll('footer').length,
|
||||
|
||||
@@ -15,14 +15,13 @@ const sectionIds = [
|
||||
] as const;
|
||||
|
||||
const sectionHeadings = [
|
||||
'START',
|
||||
'PROFILE',
|
||||
'EXPERIENCE',
|
||||
'INFRASTRUCTURE',
|
||||
'SELECTED BUILDS',
|
||||
'ADDITIONAL WORK',
|
||||
'TOOLKIT',
|
||||
'CONTACT',
|
||||
'Profile',
|
||||
'Experience',
|
||||
'Infrastructure',
|
||||
'Selected builds',
|
||||
'Additional work',
|
||||
'Toolkit',
|
||||
'Contact',
|
||||
] as const;
|
||||
|
||||
const navigationLabels: Readonly<Record<(typeof sectionIds)[number], string>> = {
|
||||
@@ -90,14 +89,15 @@ const expectedVisibleTextSegments = (
|
||||
content.navigation.map((item) => [item.id, item.label]),
|
||||
);
|
||||
const section = (
|
||||
id: (typeof sectionIds)[number],
|
||||
index: number,
|
||||
id: Exclude<(typeof sectionIds)[number], 'start'>,
|
||||
body: readonly string[],
|
||||
eyebrow?: string,
|
||||
): string[] => {
|
||||
const label = navigationById.get(id);
|
||||
if (label === undefined) throw new Error(`Missing navigation label: ${id}`);
|
||||
const heading = label.toUpperCase();
|
||||
return [`${String(index).padStart(2, '0')} / ${heading}`, heading, ...body];
|
||||
return [eyebrow, label, ...body].filter(
|
||||
(segment): segment is string => segment !== undefined,
|
||||
);
|
||||
};
|
||||
const projectLinkText = (
|
||||
project: PortfolioContent['projects']['selected'][number],
|
||||
@@ -105,18 +105,19 @@ const expectedVisibleTextSegments = (
|
||||
project.visibility === 'public' && project.url ? [project.title] : [];
|
||||
|
||||
return [
|
||||
...sectionIds.map((id) => navigationLabels[id]),
|
||||
content.identity.name,
|
||||
content.identity.role,
|
||||
...sectionIds.map((id) => navigationLabels[id]),
|
||||
...section('start', 1, [content.identity.valueProposition]),
|
||||
...section('profile', 2, [
|
||||
content.identity.valueProposition,
|
||||
'Explore work',
|
||||
...section('profile', [
|
||||
content.profile.introduction,
|
||||
...content.profile.screeningFacts.flatMap((fact) => [
|
||||
fact.label,
|
||||
fact.value,
|
||||
]),
|
||||
]),
|
||||
...section('experience', 3, [
|
||||
...section('experience', [
|
||||
...content.experience.flatMap((record) => [
|
||||
record.role,
|
||||
`${record.organization} · ${record.dates}${record.location === undefined ? '' : ` · ${record.location}`}`,
|
||||
@@ -126,7 +127,7 @@ const expectedVisibleTextSegments = (
|
||||
content.systemsOperations.summary,
|
||||
...content.systemsOperations.evidence,
|
||||
]),
|
||||
...section('infrastructure', 4, [
|
||||
...section('infrastructure', [
|
||||
content.infrastructure.title,
|
||||
content.infrastructure.summary,
|
||||
...content.infrastructure.bands.map((band) => band.title),
|
||||
@@ -137,7 +138,6 @@ const expectedVisibleTextSegments = (
|
||||
]),
|
||||
...section(
|
||||
'selected-builds',
|
||||
5,
|
||||
content.projects.selected.flatMap((project) => [
|
||||
project.title,
|
||||
project.summary,
|
||||
@@ -151,10 +151,10 @@ const expectedVisibleTextSegments = (
|
||||
project.outcome,
|
||||
...projectLinkText(project),
|
||||
]),
|
||||
'Selected work',
|
||||
),
|
||||
...section(
|
||||
'additional-work',
|
||||
6,
|
||||
content.projects.additional.flatMap((project) => [
|
||||
project.title,
|
||||
project.summary,
|
||||
@@ -165,19 +165,18 @@ const expectedVisibleTextSegments = (
|
||||
),
|
||||
...section(
|
||||
'toolkit',
|
||||
7,
|
||||
content.toolkit.flatMap((group) => [
|
||||
group.title,
|
||||
...group.technologies.map((technology) => technology.name),
|
||||
]),
|
||||
),
|
||||
...section('contact', 8, [
|
||||
content.identity.name,
|
||||
content.identity.role,
|
||||
...section('contact', [
|
||||
"Thanks for making the trip. The road's open if you'd like to build something together.",
|
||||
'Start a conversation',
|
||||
content.contact.email,
|
||||
content.contact.cvMessage,
|
||||
...content.contact.social.map((link) => link.service),
|
||||
]),
|
||||
], 'Destination'),
|
||||
];
|
||||
};
|
||||
|
||||
@@ -347,7 +346,7 @@ test('keeps every raw SSR reading-path segment visible without JavaScript', asyn
|
||||
|
||||
await expect(page.locator('h1:visible')).toHaveCount(1);
|
||||
await expect(page.locator('h1')).toHaveText('Luca Pîslaru');
|
||||
await expect(page.locator('.site-header > p').first()).toHaveText(
|
||||
await expect(page.locator('.hero-journey__role')).toHaveText(
|
||||
'System Administrator & Full-Stack Developer',
|
||||
);
|
||||
await expect(page.locator('main')).toBeVisible();
|
||||
@@ -381,7 +380,7 @@ test('keeps every raw SSR reading-path segment visible without JavaScript', asyn
|
||||
|
||||
const email = page.locator('a[href="mailto:luca.pislaru@gmail.com"]');
|
||||
await expect(email).toBeVisible();
|
||||
await expect(email).toHaveText('luca.pislaru@gmail.com');
|
||||
await expect(email).toHaveText('Start a conversation');
|
||||
await expect(
|
||||
page.getByText(
|
||||
'For a current CV or role-specific information, contact me directly.',
|
||||
|
||||
@@ -70,8 +70,8 @@ test('renders the validated eight-section portfolio structure before responsive
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await loadInformationLayer(page);
|
||||
|
||||
await expect(page.locator('.portfolio-main > .portfolio-section')).toHaveCount(8);
|
||||
expect(await page.locator('.portfolio-main > .portfolio-section').evaluateAll((sections) => sections.map((section) => section.id)))
|
||||
await expect(page.locator('.portfolio-main > section')).toHaveCount(8);
|
||||
expect(await page.locator('.portfolio-main > section').evaluateAll((sections) => sections.map((section) => section.id)))
|
||||
.toEqual(['start', 'profile', 'experience', 'infrastructure', 'selected-builds', 'additional-work', 'toolkit', 'contact']);
|
||||
expect(await page.locator('.site-navigation a').evaluateAll((links) => links.map((link) => link.getAttribute('href'))))
|
||||
.toEqual(['#start', '#profile', '#experience', '#infrastructure', '#selected-builds', '#additional-work', '#toolkit', '#contact']);
|
||||
@@ -108,19 +108,23 @@ for (const viewport of [
|
||||
});
|
||||
}
|
||||
|
||||
test('uses alternating desktop panels while preserving a clear central road corridor', async ({ page }, testInfo) => {
|
||||
test('uses explicit desktop layout families while preserving the primary-project road corridor', async ({ page }, testInfo) => {
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await loadInformationLayer(page);
|
||||
|
||||
const panels = await page.locator('.portfolio-main > .portfolio-section').evaluateAll((sections, viewportWidth) =>
|
||||
sections.map((section) => {
|
||||
const rect = section.getBoundingClientRect();
|
||||
return { left: rect.left, right: rect.right, widthRatio: rect.width / Number(viewportWidth) };
|
||||
}), 1440,
|
||||
expect(await page.locator('.portfolio-main > section').evaluateAll((sections) =>
|
||||
sections.map((section) => section.getAttribute('data-layout')),
|
||||
)).toEqual(['hero', 'right-rail', 'left-timeline', 'full-diagram', 'project-stage', 'compact-rail', 'toolkit-field', 'destination']);
|
||||
const projects = await page.locator('#selected-builds [data-project-priority="primary"]').evaluateAll((articles) =>
|
||||
articles.map((article) => {
|
||||
const rect = article.getBoundingClientRect();
|
||||
return { left: rect.left, right: rect.right, width: rect.width };
|
||||
}),
|
||||
);
|
||||
|
||||
expect(panels.every((panel) => panel.widthRatio >= 0.4 && panel.widthRatio <= 0.45)).toBe(true);
|
||||
expect(panels.every((panel, index) => index % 2 === 0 ? panel.right <= 1440 * 0.461 : panel.left >= 1440 * 0.539)).toBe(true);
|
||||
expect(projects).toHaveLength(2);
|
||||
expect(projects[0]!.right).toBeLessThanOrEqual(1440 * 0.51);
|
||||
expect(projects[1]!.left).toBeGreaterThanOrEqual(1440 * 0.53);
|
||||
expect(projects.every((project) => project.width <= 1440 * 0.47)).toBe(true);
|
||||
await capture(page, testInfo, 'information-layer-desktop-corridor.png');
|
||||
});
|
||||
|
||||
@@ -128,10 +132,12 @@ test('uses a stable tablet rhythm and a single readable mobile column with usabl
|
||||
await page.setViewportSize({ width: 768, height: 1024 });
|
||||
await loadInformationLayer(page);
|
||||
const tabletPanels = await page.locator('.portfolio-main > .portfolio-section').evaluateAll((sections) =>
|
||||
sections.map((section) => section.getBoundingClientRect()),
|
||||
Object.fromEntries(sections.map((section) => [section.getAttribute('data-layout'), section.getBoundingClientRect().toJSON()])),
|
||||
);
|
||||
expect(tabletPanels.every((panel) => panel.width < 768 * 0.7)).toBe(true);
|
||||
expect(tabletPanels.every((panel, index) => index % 2 === 0 ? panel.left < 768 / 2 : panel.left >= 768 / 2)).toBe(true);
|
||||
expect(tabletPanels['right-rail'].left).toBeGreaterThan(768 * 0.3);
|
||||
expect(tabletPanels['left-timeline'].left).toBeLessThan(768 * 0.1);
|
||||
expect(tabletPanels['full-diagram'].width).toBeGreaterThan(768 * 0.8);
|
||||
expect(tabletPanels['compact-rail'].left).toBeGreaterThan(768 * 0.3);
|
||||
await capture(page, testInfo, 'information-layer-tablet.png');
|
||||
|
||||
await page.setViewportSize({ width: 320, height: 800 });
|
||||
|
||||
@@ -10,41 +10,49 @@ test('keeps the decorative world separate from the semantic reading path', async
|
||||
await expect(page.locator('main#portfolio-content')).toBeVisible();
|
||||
});
|
||||
|
||||
test('keeps the desktop identity and navigation in a paint layer above the world', async ({ page, distUrl }) => {
|
||||
test('keeps the hero and navigation in paint layers above the world', async ({ page, distUrl }) => {
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await page.goto(distUrl, { waitUntil: 'domcontentloaded' });
|
||||
|
||||
const layers = await page.evaluate(() => {
|
||||
const world = document.querySelector<HTMLElement>('.journey-world');
|
||||
const header = document.querySelector<HTMLElement>('.site-header');
|
||||
const heading = document.querySelector<HTMLElement>('.site-header h1');
|
||||
const shell = document.querySelector<HTMLElement>('.portfolio-shell');
|
||||
const hero = document.querySelector<HTMLElement>('.hero-journey__content');
|
||||
const heading = document.querySelector<HTMLElement>('.hero-journey h1');
|
||||
const navigation = document.querySelector<HTMLElement>('.site-navigation');
|
||||
if (!world || !header || !heading || !navigation) throw new Error('Missing top-screen structure');
|
||||
if (!world || !shell || !hero || !heading || !navigation) throw new Error('Missing top-screen structure');
|
||||
const worldStyle = getComputedStyle(world);
|
||||
const headerStyle = getComputedStyle(header);
|
||||
const heroStyle = getComputedStyle(hero);
|
||||
const navigationStyle = getComputedStyle(navigation);
|
||||
return {
|
||||
worldZ: Number(worldStyle.zIndex),
|
||||
headerZ: Number(headerStyle.zIndex),
|
||||
headerPosition: headerStyle.position,
|
||||
shellZ: Number(getComputedStyle(shell).zIndex),
|
||||
navigationZ: Number(navigationStyle.zIndex),
|
||||
navigationPosition: navigationStyle.position,
|
||||
headingVisible: heading.getBoundingClientRect().width > 0 && heading.getBoundingClientRect().height > 0,
|
||||
navigationVisible: navigation.getBoundingClientRect().width > 0 && navigation.getBoundingClientRect().height > 0,
|
||||
headerOpacity: Number.parseFloat(headerStyle.backgroundColor.match(/[\d.]+(?=\))/gu)?.at(-1) ?? '1'),
|
||||
heroOpacity: Number.parseFloat(heroStyle.backgroundColor.match(/[\d.]+(?=\))/gu)?.at(-1) ?? '1'),
|
||||
};
|
||||
});
|
||||
|
||||
expect(layers).toMatchObject({
|
||||
headerPosition: 'relative',
|
||||
navigationPosition: 'fixed',
|
||||
headingVisible: true,
|
||||
navigationVisible: true,
|
||||
});
|
||||
expect(layers.headerZ).toBeGreaterThan(layers.worldZ);
|
||||
expect(layers.headerOpacity).toBeGreaterThanOrEqual(0.94);
|
||||
expect(layers.shellZ).toBeGreaterThan(layers.worldZ);
|
||||
expect(layers.navigationZ).toBeGreaterThan(layers.worldZ);
|
||||
expect(layers.heroOpacity).toBeGreaterThanOrEqual(0.94);
|
||||
});
|
||||
|
||||
test('keeps a scrolled content panel in a geometry-safe paint layer above the world', async ({ page, distUrl }) => {
|
||||
await page.setViewportSize({ width: 1440, height: 900 });
|
||||
await page.goto(distUrl, { waitUntil: 'domcontentloaded' });
|
||||
await page.locator('nav a[href="#profile"]').click();
|
||||
const profileLink = page.locator('nav a[href="#profile"]');
|
||||
if (!(await profileLink.isVisible())) await page.locator('.site-navigation summary').click();
|
||||
await profileLink.click();
|
||||
await expect(page).toHaveURL(`${distUrl}/#profile`);
|
||||
await expect(page.locator('#profile-heading')).toBeInViewport();
|
||||
|
||||
const layers = await page.evaluate(() => {
|
||||
const world = document.querySelector<HTMLElement>('.journey-world');
|
||||
@@ -75,7 +83,6 @@ test('keeps a scrolled content panel in a geometry-safe paint layer above the wo
|
||||
headingVisible: true,
|
||||
});
|
||||
expect(layers.panelOpacity).toBeGreaterThanOrEqual(0.94);
|
||||
await expect(page).toHaveURL(`${distUrl}/#profile`);
|
||||
});
|
||||
|
||||
test('provides native motion and quality controls with visible state', async ({ page, distUrl }) => {
|
||||
@@ -123,7 +130,9 @@ test('never creates a canvas when the system requests reduced motion', async ({
|
||||
|
||||
test('shows ARRIVED from the authoritative section snapshot at Contact', async ({ page, distUrl }) => {
|
||||
await page.goto(distUrl, { waitUntil: 'domcontentloaded' });
|
||||
await page.locator('nav a[href="#contact"]').click();
|
||||
const contactLink = page.locator('nav a[href="#contact"]');
|
||||
if (!(await contactLink.isVisible())) await page.locator('.site-navigation summary').click();
|
||||
await contactLink.click();
|
||||
|
||||
await expect(page.locator('.journey-hud')).toContainText('Contact');
|
||||
await expect(page.locator('.journey-hud')).toContainText('ARRIVED');
|
||||
|
||||
@@ -15,14 +15,13 @@ const sectionIds = [
|
||||
] as const;
|
||||
|
||||
const sectionHeadings = [
|
||||
'START',
|
||||
'PROFILE',
|
||||
'EXPERIENCE',
|
||||
'INFRASTRUCTURE',
|
||||
'SELECTED BUILDS',
|
||||
'ADDITIONAL WORK',
|
||||
'TOOLKIT',
|
||||
'CONTACT',
|
||||
'Profile',
|
||||
'Experience',
|
||||
'Infrastructure',
|
||||
'Selected builds',
|
||||
'Additional work',
|
||||
'Toolkit',
|
||||
'Contact',
|
||||
] as const;
|
||||
|
||||
const rawStatus = async (
|
||||
@@ -81,8 +80,8 @@ test('exposes the complete semantic portfolio from the generated document', asyn
|
||||
await page.goto(distUrl, { waitUntil: 'domcontentloaded' });
|
||||
|
||||
await expect(page.locator('h1:visible')).toHaveCount(1);
|
||||
await expect(page.locator('h1')).toHaveText('Luca Pîslaru');
|
||||
await expect(page.locator('.site-header > p').first()).toHaveText(
|
||||
await expect(page.locator('#start h1')).toHaveText('Luca Pîslaru');
|
||||
await expect(page.locator('.hero-journey__role')).toHaveText(
|
||||
'System Administrator & Full-Stack Developer',
|
||||
);
|
||||
await expect(page.locator('main')).toHaveCount(1);
|
||||
@@ -99,6 +98,9 @@ test('exposes the complete semantic portfolio from the generated document', asyn
|
||||
expect(await page.locator('main > section > h2').allTextContents()).toEqual(
|
||||
sectionHeadings,
|
||||
);
|
||||
await expect(page.locator('.route-label')).toHaveCount(0);
|
||||
await expect(page.getByRole('link', { name: 'Explore work' })).toHaveAttribute('href', '#selected-builds');
|
||||
await expect(page.getByRole('link', { name: 'Start a conversation' })).toHaveAttribute('href', 'mailto:luca.pislaru@gmail.com');
|
||||
expect(
|
||||
await page.locator('h1, h2, h3').evaluateAll((headings) => {
|
||||
const levels = headings.map((heading) =>
|
||||
@@ -122,7 +124,7 @@ test('loads the self-hosted Geist families for information and route text', asyn
|
||||
sansLoaded: document.fonts.check('16px "Geist Variable"'),
|
||||
monoLoaded: document.fonts.check('16px "Geist Mono Variable"'),
|
||||
headingFamily: getComputedStyle(document.querySelector('h1')!).fontFamily,
|
||||
routeFamily: getComputedStyle(document.querySelector('.route-label')!).fontFamily,
|
||||
routeFamily: getComputedStyle(document.querySelector('.section-eyebrow')!).fontFamily,
|
||||
}));
|
||||
|
||||
expect(fonts).toMatchObject({ sansLoaded: true, monoLoaded: true });
|
||||
@@ -149,7 +151,7 @@ test('keeps canonical native anchors and safe external destinations', async ({
|
||||
|
||||
const email = page.locator('a[href^="mailto:"]');
|
||||
await expect(email).toHaveCount(1);
|
||||
await expect(email).toHaveText('luca.pislaru@gmail.com');
|
||||
await expect(email).toHaveText('Start a conversation');
|
||||
|
||||
const externalLinks = page.locator('#contact a[target="_blank"]');
|
||||
await expect(externalLinks).toHaveCount(3);
|
||||
|
||||
2
tests/fixtures/portfolio-content.valid.json
vendored
2
tests/fixtures/portfolio-content.valid.json
vendored
@@ -22,7 +22,7 @@
|
||||
"id": "experience-operations",
|
||||
"role": "Systems Administrator",
|
||||
"organization": "Example Systems",
|
||||
"dates": "Jan 2024 – Present",
|
||||
"dates": "Jan 2024 - Present",
|
||||
"location": "Remote",
|
||||
"highlights": ["Operated Linux services.", "Maintained deployment workflows."]
|
||||
}],
|
||||
|
||||
@@ -68,7 +68,7 @@ describe('raw prerendered document', () => {
|
||||
expect(document.body.textContent).toContain('Private self-hosted medication tracker');
|
||||
expect(document.body.textContent).toContain('Linux');
|
||||
expect(document.querySelector('a[href="mailto:luca.pislaru@gmail.com"]')?.textContent)
|
||||
.toBe('luca.pislaru@gmail.com');
|
||||
.toBe('Start a conversation');
|
||||
expect(document.querySelector('nav a[href="#infrastructure"]')).not.toBeNull();
|
||||
expect(snapshot).not.toBeNull();
|
||||
expect(moduleScript).not.toBeNull();
|
||||
|
||||
@@ -274,8 +274,8 @@ describe('artifact verification', () => {
|
||||
{
|
||||
name: 'identity rendered only inside a template',
|
||||
mutate: (html: string) => html.replace(
|
||||
'<h1>Luca Pîslaru</h1><p>System Administrator & Full-Stack Developer</p>',
|
||||
'<template><h1>Luca Pîslaru</h1><p>System Administrator & Full-Stack Developer</p></template>',
|
||||
/(<h1[^>]*>Luca Pîslaru<\/h1><p class="hero-journey__role">System Administrator & Full-Stack Developer<\/p>)/u,
|
||||
'<template>$1</template>',
|
||||
),
|
||||
},
|
||||
{
|
||||
|
||||
@@ -29,22 +29,56 @@ describe('semantic portfolio document', () => {
|
||||
it('renders the complete landmark and heading reading structure on the server', async () => {
|
||||
const document = await renderedDocument();
|
||||
|
||||
expect(document.querySelectorAll('header')).toHaveLength(1);
|
||||
expect(document.querySelectorAll('.site-header')).toHaveLength(1);
|
||||
expect(document.querySelector('nav[aria-label="Portfolio sections"]')).not.toBeNull();
|
||||
expect(document.querySelectorAll('main')).toHaveLength(1);
|
||||
expect(document.querySelectorAll('footer')).toHaveLength(1);
|
||||
expect(document.querySelectorAll('h1')).toHaveLength(1);
|
||||
expect(document.querySelector('h1')?.textContent).toBe('Luca Pîslaru');
|
||||
expect(document.querySelector('#start h1')?.textContent).toBe('Luca Pîslaru');
|
||||
expect([...document.querySelectorAll('main > section')].map((section) => section.id)).toEqual([
|
||||
'start', 'profile', 'experience', 'infrastructure', 'selected-builds', 'additional-work', 'toolkit', 'contact',
|
||||
]);
|
||||
expect([...document.querySelectorAll('main > section')].every((section) => section.hasAttribute('aria-labelledby'))).toBe(true);
|
||||
expect([...document.querySelectorAll('main > section > h2')].map((heading) => heading.textContent)).toEqual([
|
||||
'START', 'PROFILE', 'EXPERIENCE', 'INFRASTRUCTURE', 'SELECTED BUILDS', 'ADDITIONAL WORK', 'TOOLKIT', 'CONTACT',
|
||||
'Profile', 'Experience', 'Infrastructure', 'Selected builds', 'Additional work', 'Toolkit', 'Contact',
|
||||
]);
|
||||
expect([...document.querySelectorAll('main > section')].map((section) => section.getAttribute('data-layout'))).toEqual([
|
||||
'hero', 'right-rail', 'left-timeline', 'full-diagram', 'project-stage', 'compact-rail', 'toolkit-field', 'destination',
|
||||
]);
|
||||
expect(document.querySelectorAll('.route-label')).toHaveLength(0);
|
||||
expect(document.querySelector('h2 + h4')).toBeNull();
|
||||
});
|
||||
|
||||
it('renders the exact first-screen hierarchy and destination actions', async () => {
|
||||
const document = await renderedDocument();
|
||||
const hero = document.querySelector('.hero-journey__content')!;
|
||||
|
||||
expect([...hero.children].map((element) => element.textContent?.trim())).toEqual([
|
||||
'Luca Pîslaru',
|
||||
'System Administrator & Full-Stack Developer',
|
||||
'Building and operating reliable systems and software.',
|
||||
'Explore work',
|
||||
]);
|
||||
expect(hero.querySelector('a')?.getAttribute('href')).toBe('#selected-builds');
|
||||
expect(document.querySelector('a[href="mailto:hello@example.test"]')?.textContent).toBe('Start a conversation');
|
||||
expect(document.body.textContent).toContain("Thanks for making the trip. The road's open if you'd like to build something together.");
|
||||
expect(document.body.textContent).not.toMatch(/[–—]/u);
|
||||
});
|
||||
|
||||
it('assigns explicit project priority without promoting research exploration', async () => {
|
||||
const document = await renderedDocument();
|
||||
const priorities = [...document.querySelectorAll('#selected-builds article')].map((article) => [
|
||||
article.querySelector('h3')?.textContent,
|
||||
article.getAttribute('data-project-priority'),
|
||||
]);
|
||||
|
||||
expect(priorities).toEqual([
|
||||
['Private self-hosted medication tracker', 'primary'],
|
||||
['Footy Tracker', 'primary'],
|
||||
['Opinion Dynamics Simulation', 'supporting'],
|
||||
]);
|
||||
});
|
||||
|
||||
it('keeps native section links and visible contact available without JavaScript', async () => {
|
||||
const document = await renderedDocument();
|
||||
const navigation = document.querySelector('nav[aria-label="Portfolio sections"]')!;
|
||||
@@ -53,7 +87,7 @@ describe('semantic portfolio document', () => {
|
||||
'#start', '#profile', '#experience', '#infrastructure', '#selected-builds', '#additional-work', '#toolkit', '#contact',
|
||||
]);
|
||||
const email = document.querySelector('a[href="mailto:hello@example.test"]');
|
||||
expect(email?.textContent).toBe('hello@example.test');
|
||||
expect(email?.textContent).toBe('Start a conversation');
|
||||
expect(document.body.textContent).toContain('For a current CV or role-specific information, contact me directly.');
|
||||
});
|
||||
|
||||
@@ -89,7 +123,7 @@ describe('semantic portfolio document', () => {
|
||||
const document = await renderedDocumentFor(reorderedInputs);
|
||||
|
||||
expect([...document.querySelectorAll('main > section > h2')].map((heading) => heading.textContent)).toEqual([
|
||||
'START', 'PROFILE', 'EXPERIENCE', 'INFRASTRUCTURE', 'SELECTED BUILDS', 'ADDITIONAL WORK', 'TOOLKIT', 'CONTACT',
|
||||
'Profile', 'Experience', 'Infrastructure', 'Selected builds', 'Additional work', 'Toolkit', 'Contact',
|
||||
]);
|
||||
expect([...document.querySelectorAll('nav a')].map((link) => [link.getAttribute('href'), link.textContent])).toEqual([
|
||||
['#start', 'Start'], ['#profile', 'Profile'], ['#experience', 'Career'], ['#infrastructure', 'Infra'],
|
||||
|
||||
@@ -51,14 +51,15 @@ describe('semantic section components', () => {
|
||||
});
|
||||
|
||||
it('does not turn private project content into a link container', () => {
|
||||
const wrapper = mount(ProjectCaseStudy, { props: { project: privateProject } });
|
||||
const wrapper = mount(ProjectCaseStudy, { props: { project: privateProject, priority: 'primary' } });
|
||||
|
||||
expect(wrapper.get('article').findAll('a')).toHaveLength(0);
|
||||
expect(wrapper.get('h3').text()).toBe('Private self-hosted medication tracker');
|
||||
expect(wrapper.get('article').attributes('data-project-priority')).toBe('primary');
|
||||
});
|
||||
|
||||
it('uses a safe external link only for a public project with an approved URL', () => {
|
||||
const wrapper = mount(ProjectCaseStudy, { props: { project: publicProject } });
|
||||
const wrapper = mount(ProjectCaseStudy, { props: { project: publicProject, priority: 'supporting' } });
|
||||
const link = wrapper.get('article a');
|
||||
|
||||
expect(link.attributes('href')).toBe('https://github.com/example/footy-tracker');
|
||||
@@ -88,11 +89,11 @@ describe('semantic section components', () => {
|
||||
const wrapper = mount(ContactDestination, {
|
||||
props: {
|
||||
contact,
|
||||
identity: { name: 'Luca Pîslaru', role: 'System Administrator & Full-Stack Developer' },
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.get('a[href="mailto:hello@example.test"]').text()).toBe('hello@example.test');
|
||||
expect(wrapper.get('a[href="mailto:hello@example.test"]').text()).toBe('Start a conversation');
|
||||
expect(wrapper.text()).toContain("Thanks for making the trip. The road's open if you'd like to build something together.");
|
||||
const social = wrapper.get('a[href="https://github.com/example"]');
|
||||
expect(social.text()).toBe('GitHub');
|
||||
expect(social.attributes('rel')).toBe('noopener noreferrer');
|
||||
|
||||
Reference in New Issue
Block a user