whisper-money/resources/js/components/partials/header.test.tsx

73 lines
1.9 KiB
TypeScript

import { dashboard, home } from '@/routes';
import { render, screen } from '@testing-library/react';
import type React from 'react';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import Header from './header';
const mocks = vi.hoisted(() => ({
url: '/roadmap',
pageProps: {
auth: {
user: {
id: 'user-1',
name: 'Test User',
email: 'test@example.com',
},
},
},
}));
vi.mock('@inertiajs/react', () => ({
Link: ({
children,
href,
}: {
children: React.ReactNode;
href: string | { url: string };
}) => <a href={typeof href === 'string' ? href : href.url}>{children}</a>,
usePage: () => ({ url: mocks.url, props: mocks.pageProps }),
}));
describe('Header', () => {
beforeEach(() => {
mocks.url = '/roadmap';
vi.stubGlobal(
'fetch',
vi.fn(() => new Promise(() => {})),
);
});
it('shows dashboard links for authenticated users', () => {
render(<Header />);
const dashboardLinks = screen.getAllByRole('link', {
name: 'Dashboard',
});
expect(dashboardLinks).toHaveLength(2);
expect(dashboardLinks[0]?.getAttribute('href')).toBe(dashboard().url);
});
it('links the logo home on every page but the landing one', () => {
render(<Header />);
const logoLinks = screen.getAllByRole('link', {
name: 'Whisper Money',
});
expect(logoLinks).toHaveLength(2);
expect(logoLinks[0]?.getAttribute('href')).toBe(home().url);
});
it('does not link the logo on the landing page', () => {
mocks.url = '/?ref=newsletter';
render(<Header />);
expect(screen.getAllByText('Whisper Money')).toHaveLength(2);
expect(
screen.queryByRole('link', { name: 'Whisper Money' }),
).toBeNull();
});
});