张翔
120 lines
3.4 KiB
TypeScript
120 lines
3.4 KiB
TypeScript
import { describe, it, expect, beforeEach, jest } from '@jest/globals';
|
|
import { render, screen } from '@testing-library/react';
|
|
import '@testing-library/jest-dom';
|
|
import { CasesSection } from './cases-section';
|
|
|
|
jest.mock('framer-motion', () => ({
|
|
motion: {
|
|
div: ({ children, ...props }: any) => <div {...props}>{children}</div>,
|
|
},
|
|
useInView: () => true,
|
|
}));
|
|
|
|
jest.mock('next/link', () => {
|
|
return ({ children, href }: any) => <a href={href}>{children}</a>;
|
|
});
|
|
|
|
jest.mock('@/lib/constants', () => ({
|
|
CASES: [
|
|
{
|
|
id: 'case-1',
|
|
client: '测试客户',
|
|
title: '测试案例',
|
|
description: '测试描述',
|
|
industry: '制造业',
|
|
results: [{ value: '40%', label: '效率提升' }],
|
|
},
|
|
{
|
|
id: 'case-2',
|
|
client: '测试客户2',
|
|
title: '测试案例2',
|
|
description: '测试描述2',
|
|
industry: '零售业',
|
|
results: [{ value: '50%', label: '成本降低' }],
|
|
},
|
|
],
|
|
}));
|
|
|
|
describe('CasesSection', () => {
|
|
beforeEach(() => {
|
|
jest.clearAllMocks();
|
|
});
|
|
|
|
describe('Rendering', () => {
|
|
it('should render cases section', () => {
|
|
render(<CasesSection />);
|
|
const section = document.querySelector('section#cases');
|
|
expect(section).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render section heading', () => {
|
|
render(<CasesSection />);
|
|
expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render section description', () => {
|
|
render(<CasesSection />);
|
|
expect(screen.getByText(/我们与优秀的企业同行/)).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render case cards', () => {
|
|
render(<CasesSection />);
|
|
expect(screen.getByText('测试案例')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render client names', () => {
|
|
render(<CasesSection />);
|
|
expect(screen.getByText('测试客户')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render industry badges', () => {
|
|
render(<CasesSection />);
|
|
expect(screen.getByText('制造业')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render results', () => {
|
|
render(<CasesSection />);
|
|
expect(screen.getByText('40%')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render view more button', () => {
|
|
render(<CasesSection />);
|
|
expect(screen.getByText('查看更多案例')).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('Accessibility', () => {
|
|
it('should have section id', () => {
|
|
render(<CasesSection />);
|
|
const section = document.querySelector('section#cases');
|
|
expect(section).toBeInTheDocument();
|
|
});
|
|
|
|
it('should have region role', () => {
|
|
render(<CasesSection />);
|
|
const section = document.querySelector('section[role="region"]');
|
|
expect(section).toBeInTheDocument();
|
|
});
|
|
|
|
it('should have aria-labelledby', () => {
|
|
render(<CasesSection />);
|
|
const section = document.querySelector('section[aria-labelledby="cases-heading"]');
|
|
expect(section).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('Styling', () => {
|
|
it('should have correct background', () => {
|
|
render(<CasesSection />);
|
|
const section = document.querySelector('section.bg-white');
|
|
expect(section).toBeInTheDocument();
|
|
});
|
|
|
|
it('should have container', () => {
|
|
render(<CasesSection />);
|
|
const container = document.querySelector('.container-wide');
|
|
expect(container).toBeInTheDocument();
|
|
});
|
|
});
|
|
});
|