98 lines
4.3 KiB
TypeScript
98 lines
4.3 KiB
TypeScript
// @ts-nocheck
|
|
import { describe, it, expect, jest } from '@jest/globals';
|
|
import { render, screen } from '@testing-library/react';
|
|
import '@testing-library/jest-dom';
|
|
|
|
// ─── Mocks ───────────────────────────────────────────────────────────────
|
|
|
|
jest.mock('framer-motion', () => ({
|
|
motion: {
|
|
div: ({ children, initial, animate, variants, whileInView, whileHover, viewport, transition, className, ...props }: any) => (
|
|
<div
|
|
data-testid="motion-div"
|
|
data-initial={JSON.stringify(initial)}
|
|
data-animate={JSON.stringify(animate)}
|
|
data-variants={JSON.stringify(variants)}
|
|
data-while-hover={JSON.stringify(whileHover)}
|
|
data-while-inview={JSON.stringify(whileInView)}
|
|
data-viewport={JSON.stringify(viewport)}
|
|
data-transition={JSON.stringify(transition)}
|
|
className={className}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
),
|
|
},
|
|
useInView: jest.fn(() => true),
|
|
AnimatePresence: ({ children }: any) => <>{children}</>,
|
|
}));
|
|
|
|
jest.mock('lucide-react', () => ({
|
|
ArrowUpRight: (props: any) => <svg data-testid="icon-arrow-up-right" className={props.className} />,
|
|
}));
|
|
|
|
// ─── Mock Data ────────────────────────────────────────────────────────────
|
|
|
|
const mockInsight = {
|
|
tag: '白皮书',
|
|
title: '2025年数字化转型趋势',
|
|
desc: '深入分析企业数字化转型的最新趋势与挑战',
|
|
date: '2025年1月',
|
|
};
|
|
|
|
// ─── Tests ───────────────────────────────────────────────────────────────
|
|
|
|
describe('InsightCard', () => {
|
|
it('should render tag, title, and description', async () => {
|
|
const { InsightCard } = await import('./insight-card');
|
|
render(<InsightCard {...mockInsight} />);
|
|
expect(screen.getByText('白皮书')).toBeInTheDocument();
|
|
expect(screen.getByText('2025年数字化转型趋势')).toBeInTheDocument();
|
|
expect(screen.getByText('深入分析企业数字化转型的最新趋势与挑战')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render date when provided', async () => {
|
|
const { InsightCard } = await import('./insight-card');
|
|
render(<InsightCard {...mockInsight} />);
|
|
expect(screen.getByText('2025年1月')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should not render date when not provided', async () => {
|
|
const { InsightCard } = await import('./insight-card');
|
|
render(<InsightCard {...mockInsight} date={undefined} />);
|
|
expect(screen.queryByText('2025年1月')).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('should render "阅读全文" for featured variant', async () => {
|
|
const { InsightCard } = await import('./insight-card');
|
|
render(<InsightCard {...mockInsight} featured />);
|
|
expect(screen.getByText('阅读全文')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render background image for featured variant', async () => {
|
|
const { InsightCard } = await import('./insight-card');
|
|
const { container } = render(
|
|
<InsightCard {...mockInsight} featured image="/images/insights/trends.jpg" />
|
|
);
|
|
// 组件用 CSS 背景图而非 <img>，使 404 图片静默降级为纯色底
|
|
const bg = container.querySelector('[style*="background-image"]');
|
|
expect(bg).toBeInTheDocument();
|
|
expect(bg).toHaveAttribute('aria-hidden', 'true');
|
|
expect(bg).toHaveStyle({ backgroundImage: 'url(/images/insights/trends.jpg)' });
|
|
});
|
|
|
|
it('should render link element when provided', async () => {
|
|
const { InsightCard } = await import('./insight-card');
|
|
render(<InsightCard {...mockInsight} link={<span data-testid="custom-link">查看更多</span>} />);
|
|
expect(screen.getByTestId('custom-link')).toBeInTheDocument();
|
|
expect(screen.getByText('查看更多')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should apply custom className', async () => {
|
|
const { InsightCard } = await import('./insight-card');
|
|
const { container } = render(<InsightCard {...mockInsight} className="custom-card" />);
|
|
const card = container.querySelector('.custom-card');
|
|
expect(card).toBeInTheDocument();
|
|
});
|
|
}); |