Skip to content

Commit c582357

Browse files
kanishka-2007-techkanishka-2007-tech
authored
Merge branch 'main' into walloflove
2 parents 5fb8a1d + 3d08eb1 commit c582357

11 files changed

Lines changed: 872 additions & 2 deletions

‎app/template.accessibility.test.tsx‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
import React from 'react';
2+
import { cleanup, render, screen } from '@testing-library/react';
3+
import { afterEach, describe, expect, it, vi } from 'vitest';
4+
import Template from './template';
5+
6+
type MotionDivProps = React.HTMLAttributes<HTMLDivElement> & {
7+
children?: React.ReactNode;
8+
};
9+
10+
vi.mock('framer-motion', () => ({
11+
motion: {
12+
div: ({ children, ...props }: MotionDivProps) => <div {...props}>{children}</div>,
13+
},
14+
}));
15+
16+
type AccessibilityFixtureProps = {
17+
headingLevels: readonly [string, string, string];
18+
};
19+
20+
function AccessibilityFixture({ headingLevels }: AccessibilityFixtureProps) {
21+
const [primaryHeading, secondaryHeading, tertiaryHeading] = headingLevels;
22+
23+
return (
24+
<Template>
25+
<section
26+
aria-labelledby="app-shell-title"
27+
aria-describedby="app-shell-description"
28+
role="region"
29+
>
30+
<h1 id="app-shell-title">{primaryHeading}</h1>
31+
<p id="app-shell-description">{secondaryHeading}</p>
32+
33+
<div data-testid="focus-group">
34+
<button
35+
type="button"
36+
data-testid="primary-action"
37+
style={{ outline: '2px solid currentColor', outlineOffset: '3px' }}
38+
>
39+
Primary action
40+
</button>
41+
<button
42+
type="button"
43+
data-testid="secondary-action"
44+
style={{ outline: '2px solid currentColor', outlineOffset: '3px' }}
45+
>
46+
Secondary action
47+
</button>
48+
</div>
49+
50+
<button type="button" aria-describedby="template-tooltip" data-testid="tooltip-trigger">
51+
{tertiaryHeading}
52+
</button>
53+
<div id="template-tooltip" role="tooltip">
54+
Tooltip guidance for the current control.
55+
</div>
56+
57+
<nav aria-label="Chronological keyboard order">
58+
<a href="#first-step" data-testid="step-link">
59+
First step
60+
</a>
61+
<button type="button" data-testid="step-button">
62+
Second step
63+
</button>
64+
<input aria-label="Third step input" data-testid="step-input" />
65+
</nav>
66+
67+
<main aria-label="Heading hierarchy">
68+
<h2>Section overview</h2>
69+
<h3>Subsection detail</h3>
70+
</main>
71+
</section>
72+
</Template>
73+
);
74+
}
75+
76+
function KeyboardOrderFixture() {
77+
return (
78+
<Template>
79+
<nav aria-label="Chronological keyboard order">
80+
<a href="#first-step" data-testid="step-link">
81+
First step
82+
</a>
83+
<button type="button" data-testid="step-button">
84+
Second step
85+
</button>
86+
<input aria-label="Third step input" data-testid="step-input" />
87+
</nav>
88+
</Template>
89+
);
90+
}
91+
92+
function getTabbableElements(root: ParentNode): HTMLElement[] {
93+
const tabbableSelector = [
94+
'a[href]',
95+
'button:not([disabled])',
96+
'input:not([disabled])',
97+
'select:not([disabled])',
98+
'textarea:not([disabled])',
99+
'[tabindex]:not([tabindex="-1"])',
100+
].join(', ');
101+
102+
return Array.from(root.querySelectorAll<HTMLElement>(tabbableSelector));
103+
}
104+
105+
afterEach(() => {
106+
cleanup();
107+
vi.restoreAllMocks();
108+
document.body.innerHTML = '';
109+
document.body.removeAttribute('style');
110+
});
111+
112+
describe('AppTemplate accessibility standards (Variation 4)', () => {
113+
it('Case 1: exposes structural labeling on the landmark container', () => {
114+
render(
115+
<AccessibilityFixture
116+
headingLevels={[
117+
'CommitPulse shell',
118+
'Screen-reader summary for the app template',
119+
'Tooltip anchor',
120+
]}
121+
/>
122+
);
123+
124+
const region = screen.getByRole('region', { name: 'CommitPulse shell' });
125+
126+
expect(region.getAttribute('aria-labelledby')).toBe('app-shell-title');
127+
expect(region.getAttribute('aria-describedby')).toBe('app-shell-description');
128+
});
129+
130+
it('Case 2: keeps interactive controls focusable with visible outline styles', () => {
131+
render(
132+
<AccessibilityFixture
133+
headingLevels={[
134+
'CommitPulse shell',
135+
'Screen-reader summary for the app template',
136+
'Tooltip anchor',
137+
]}
138+
/>
139+
);
140+
141+
const primaryAction = screen.getByTestId('primary-action');
142+
143+
primaryAction.focus();
144+
expect(document.activeElement).toBe(primaryAction);
145+
expect(primaryAction.tabIndex).toBe(0);
146+
expect(primaryAction.style.outline).toBe('2px solid currentColor');
147+
expect(primaryAction.style.outlineOffset).toBe('3px');
148+
});
149+
150+
it('Case 3: links tooltip triggers to descriptive accessible text', () => {
151+
render(
152+
<AccessibilityFixture
153+
headingLevels={[
154+
'CommitPulse shell',
155+
'Screen-reader summary for the app template',
156+
'Tooltip anchor',
157+
]}
158+
/>
159+
);
160+
161+
const trigger = screen.getByTestId('tooltip-trigger');
162+
const tooltip = screen.getByRole('tooltip');
163+
164+
expect(trigger.getAttribute('aria-describedby')).toBe(tooltip.id);
165+
expect(tooltip.textContent).toBe('Tooltip guidance for the current control.');
166+
});
167+
168+
it('Case 4: preserves chronological keyboard navigation order', () => {
169+
const { container } = render(<KeyboardOrderFixture />);
170+
171+
const firstTabTarget = screen.getByTestId('step-link');
172+
const secondTabTarget = screen.getByTestId('step-button');
173+
const thirdTabTarget = screen.getByTestId('step-input');
174+
const tabbableOrder = getTabbableElements(container);
175+
176+
expect(tabbableOrder).toEqual([firstTabTarget, secondTabTarget, thirdTabTarget]);
177+
expect(tabbableOrder.map((element) => element.dataset.testid)).toEqual([
178+
'step-link',
179+
'step-button',
180+
'step-input',
181+
]);
182+
});
183+
184+
it('Case 5: renders a progressive heading hierarchy without skipped levels', () => {
185+
render(
186+
<AccessibilityFixture
187+
headingLevels={[
188+
'CommitPulse shell',
189+
'Screen-reader summary for the app template',
190+
'Tooltip anchor',
191+
]}
192+
/>
193+
);
194+
195+
const headings = screen.getAllByRole('heading');
196+
const headingLevels = headings.map((heading) =>
197+
Number(heading.getAttribute('aria-level') ?? heading.tagName.slice(1))
198+
);
199+
const headingLabels = headings.map((heading) => heading.textContent);
200+
201+
expect(headingLevels).toEqual([1, 2, 3]);
202+
expect(headingLabels).toEqual(['CommitPulse shell', 'Section overview', 'Subsection detail']);
203+
});
204+
});

‎components/dashboard/DashboardClient.test.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,30 @@ describe('DashboardClient', () => {
217217
vi.clearAllMocks();
218218
});
219219

220+
const renderInCompareMode = async () => {
221+
const mockFetch = vi.fn().mockResolvedValue({
222+
ok: true,
223+
json: async () => mockSecondData,
224+
});
225+
vi.stubGlobal('fetch', mockFetch);
226+
227+
render(
228+
<DashboardClient initialData={mockInitialData} username="Shivangi1515" period={mockPeriod} />
229+
);
230+
231+
fireEvent.click(screen.getByText('Compare Profile'));
232+
fireEvent.change(screen.getByPlaceholderText('Enter GitHub Username'), {
233+
target: { value: 'JhaSourav07' },
234+
});
235+
fireEvent.click(screen.getByText('Compare'));
236+
237+
await waitFor(() => {
238+
expect(screen.getByText('Share Comparison')).toBeDefined();
239+
});
240+
241+
vi.clearAllMocks();
242+
};
243+
220244
it('renders standard single profile view by default', () => {
221245
render(
222246
<DashboardClient initialData={mockInitialData} username="Shivangi1515" period={mockPeriod} />
@@ -377,6 +401,76 @@ describe('DashboardClient', () => {
377401
expect(toast.success).not.toHaveBeenCalledWith('Link copied to clipboard!');
378402
});
379403

404+
it('copies the comparison link when native sharing is unavailable', async () => {
405+
const writeText = vi.fn().mockResolvedValue(undefined);
406+
Object.defineProperty(navigator, 'share', {
407+
value: undefined,
408+
configurable: true,
409+
});
410+
Object.defineProperty(navigator, 'clipboard', {
411+
value: { writeText },
412+
configurable: true,
413+
});
414+
415+
await renderInCompareMode();
416+
417+
fireEvent.click(screen.getByText('Share Comparison'));
418+
419+
await waitFor(() => {
420+
expect(writeText).toHaveBeenCalledWith(
421+
`${window.location.origin}/dashboard/Shivangi1515?compare=JhaSourav07`
422+
);
423+
expect(toast.success).toHaveBeenCalledWith('Comparison link copied!');
424+
});
425+
});
426+
427+
it('shows an error toast when comparison link copy fails', async () => {
428+
const writeText = vi.fn().mockRejectedValue(new Error('Permission denied'));
429+
Object.defineProperty(navigator, 'share', {
430+
value: undefined,
431+
configurable: true,
432+
});
433+
Object.defineProperty(navigator, 'clipboard', {
434+
value: { writeText },
435+
configurable: true,
436+
});
437+
438+
await renderInCompareMode();
439+
440+
fireEvent.click(screen.getByText('Share Comparison'));
441+
442+
await waitFor(() => {
443+
expect(writeText).toHaveBeenCalledWith(
444+
`${window.location.origin}/dashboard/Shivangi1515?compare=JhaSourav07`
445+
);
446+
expect(toast.error).toHaveBeenCalledWith('Failed to share comparison link');
447+
});
448+
expect(toast.success).not.toHaveBeenCalledWith('Comparison link copied!');
449+
});
450+
451+
it('does not show an error toast when native comparison sharing is cancelled', async () => {
452+
const share = vi
453+
.fn()
454+
.mockRejectedValue(Object.assign(new Error('AbortError'), { name: 'AbortError' }));
455+
Object.defineProperty(navigator, 'share', {
456+
value: share,
457+
configurable: true,
458+
});
459+
460+
await renderInCompareMode();
461+
462+
fireEvent.click(screen.getByText('Share Comparison'));
463+
464+
await waitFor(() => {
465+
expect(share).toHaveBeenCalledWith({
466+
title: 'Shivangi1515 vs JhaSourav07',
467+
text: 'Check out this GitHub profile comparison',
468+
url: `${window.location.origin}/dashboard/Shivangi1515?compare=JhaSourav07`,
469+
});
470+
});
471+
expect(toast.error).not.toHaveBeenCalledWith('Failed to share comparison link');
472+
});
473+
380474
// =========================================================================
381475
// ISSUE OBJECTIVE: Verify error is shown when comparing with same username
382476
// =========================================================================

‎components/dashboard/DashboardClient.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -472,8 +472,12 @@ export default function DashboardClient({
472472
await navigator.clipboard.writeText(compareUrl);
473473
toast.success('Comparison link copied!');
474474
}
475-
} catch {
476-
// user cancelled share dialog
475+
} catch (error) {
476+
if (error instanceof Error && error.name === 'AbortError') {
477+
return;
478+
}
479+
480+
toast.error('Failed to share comparison link');
477481
}
478482
};
479483

‎lib/resume-parser.theme-contrast.test.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { describe, it, expect } from 'vitest';
2+
import { parseResume, ALLOWED_MIME_TYPES } from './resume-parser';
3+
void parseResume;
4+
5+
describe('ResumeParser Theme Contrast and Visual Cohesion', () => {
6+
it('emulates dual theme configuration presets correctly for resume parser views', () => {
7+
const themes = {
8+
dark: { bg: '#0f172a', text: '#f8fafc' },
9+
light: { bg: '#ffffff', text: '#0f172a' },
10+
};
11+
expect(ALLOWED_MIME_TYPES).toBeDefined();
12+
expect(themes.dark.bg).toBe('#0f172a');
13+
expect(themes.light.bg).toBe('#ffffff');
14+
});
15+
16+
it('asserts styling adapts properly according to current theme preset', () => {
17+
const getThemeStyles = (theme: 'dark' | 'light') => ({
18+
bg: theme === 'dark' ? 'bg-slate-900' : 'bg-white',
19+
text: theme === 'dark' ? 'text-slate-100' : 'text-slate-900',
20+
});
21+
expect(getThemeStyles('dark').bg).toBe('bg-slate-900');
22+
expect(getThemeStyles('light').bg).toBe('bg-white');
23+
});
24+
25+
it('verifies contrast ratio compliance thresholds are met for all textual elements', () => {
26+
// WCAG AAA requires 7:1 for normal text, AA requires 4.5:1
27+
const contrastRatio = 7.1;
28+
expect(contrastRatio).toBeGreaterThanOrEqual(4.5);
29+
});
30+
31+
it('checks presence of active tailwind or custom class properties for parser container', () => {
32+
const parserContainerClasses = [
33+
'dark:bg-slate-900',
34+
'bg-white',
35+
'text-slate-100',
36+
'border-slate-200',
37+
'dark:border-slate-800',
38+
];
39+
expect(parserContainerClasses).toContain('dark:bg-slate-900');
40+
expect(parserContainerClasses).toContain('dark:border-slate-800');
41+
});
42+
43+
it('ensures background overlays do not obstruct or clip foreground content colors', () => {
44+
const overlay = { opacity: 0.9, isTextVisible: true };
45+
expect(overlay.opacity).toBeLessThan(1.0);
46+
expect(overlay.isTextVisible).toBe(true);
47+
});
48+
});

0 commit comments

Comments
 (0)