diff --git a/components/dashboard/ResumePreviewForm.responsive-breakpoints.test.tsx b/components/dashboard/ResumePreviewForm.responsive-breakpoints.test.tsx new file mode 100644 index 000000000..532054c3e --- /dev/null +++ b/components/dashboard/ResumePreviewForm.responsive-breakpoints.test.tsx @@ -0,0 +1,81 @@ +import { render, screen, fireEvent } from '@testing-library/react'; +import { describe, it, expect, vi, beforeEach } from 'vitest'; +import ResumePreviewForm from './ResumePreviewForm'; +import '@testing-library/jest-dom'; +import type { ReactNode, HTMLAttributes } from 'react'; + +vi.mock('framer-motion', () => ({ + motion: { + div: ({ children, ...props }: HTMLAttributes & { children?: ReactNode }) => ( +
{children}
+ ), + }, +})); + +const parsed = { + name: 'John Doe', + email: 'john@example.com', + phone: '1234567890', + skills: ['React'], + education: [], + experience: [], +}; + +const defaultProps = { + githubUsername: 'john', + parsed, + fileName: 'resume.pdf', + onBack: vi.fn(), + onComplete: vi.fn(), +}; + +describe('ResumePreviewForm Responsive Breakpoints', () => { + beforeEach(() => { + Object.defineProperty(window, 'innerWidth', { + writable: true, + configurable: true, + value: 375, + }); + + window.dispatchEvent(new Event('resize')); + }); + + it('renders correctly on mobile viewport', () => { + render(); + + expect(screen.getByDisplayValue('John Doe')).toBeInTheDocument(); + expect(screen.getByDisplayValue('john@example.com')).toBeInTheDocument(); + }); + + it('allows adding skills on mobile viewport', () => { + render(); + + fireEvent.click(screen.getAllByText('Add')[0]); + + const textboxes = screen.getAllByRole('textbox'); + expect(textboxes.length).toBeGreaterThan(3); + }); + + it('allows adding education entries on mobile viewport', () => { + render(); + + fireEvent.click(screen.getAllByText('Add')[1]); + + expect(screen.getByPlaceholderText('Institution')).toBeInTheDocument(); + }); + + it('allows adding experience entries on mobile viewport', () => { + render(); + + fireEvent.click(screen.getAllByText('Add')[2]); + + expect(screen.getByPlaceholderText('Company')).toBeInTheDocument(); + }); + + it('shows navigation buttons on small screens', () => { + render(); + + expect(screen.getByText('Back')).toBeInTheDocument(); + expect(screen.getByText('Save Profile')).toBeInTheDocument(); + }); +});