张翔
129 lines
4.2 KiB
TypeScript
129 lines
4.2 KiB
TypeScript
import { describe, it, expect, beforeEach } from '@jest/globals';
|
|
import { render, screen } from '@testing-library/react';
|
|
import '@testing-library/jest-dom';
|
|
import { ProductsSection } from './products-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>;
|
|
});
|
|
|
|
describe('ProductsSection', () => {
|
|
beforeEach(() => {
|
|
jest.clearAllMocks();
|
|
});
|
|
|
|
describe('Rendering', () => {
|
|
it('should render products section', () => {
|
|
render(<ProductsSection />);
|
|
const section = document.querySelector('section#products');
|
|
expect(section).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render section heading', () => {
|
|
render(<ProductsSection />);
|
|
expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render section description', () => {
|
|
render(<ProductsSection />);
|
|
expect(screen.getByText(/自主研发的企业级产品/)).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe('Product Cards', () => {
|
|
it('should render product cards', () => {
|
|
render(<ProductsSection />);
|
|
const cards = document.querySelectorAll('[class*="flex-col"]');
|
|
expect(cards.length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('should display products in grid layout', () => {
|
|
const { container } = render(<ProductsSection />);
|
|
const grid = container.querySelector('.grid-cols-1');
|
|
expect(grid).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render product categories', () => {
|
|
render(<ProductsSection />);
|
|
const badges = document.querySelectorAll('[class*="rounded-full"]');
|
|
expect(badges.length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('should render product features', () => {
|
|
render(<ProductsSection />);
|
|
const features = document.querySelectorAll('[class*="inline-flex"]');
|
|
expect(features.length).toBeGreaterThan(0);
|
|
});
|
|
});
|
|
|
|
describe('Custom Solution Section', () => {
|
|
it('should render custom solution section', () => {
|
|
render(<ProductsSection />);
|
|
expect(screen.getByText(/需要定制化解决方案/)).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render custom solution description', () => {
|
|
render(<ProductsSection />);
|
|
expect(screen.getByText(/我们的专业团队/)).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render contact button', () => {
|
|
render(<ProductsSection />);
|
|
expect(screen.getByRole('link', { name: /联系我们/ })).toBeInTheDocument();
|
|
});
|
|
|
|
it('should link to contact page', () => {
|
|
render(<ProductsSection />);
|
|
const link = screen.getByRole('link', { name: /联系我们/ });
|
|
expect(link).toHaveAttribute('href', '/contact');
|
|
});
|
|
});
|
|
|
|
describe('Accessibility', () => {
|
|
it('should have region role', () => {
|
|
render(<ProductsSection />);
|
|
const section = screen.getByRole('region');
|
|
expect(section).toBeInTheDocument();
|
|
});
|
|
|
|
it('should have aria-labelledby attribute', () => {
|
|
render(<ProductsSection />);
|
|
const section = document.querySelector('section#products');
|
|
expect(section).toHaveAttribute('aria-labelledby', 'products-heading');
|
|
});
|
|
|
|
it('should have accessible heading', () => {
|
|
render(<ProductsSection />);
|
|
const heading = screen.getByRole('heading', { level: 2 });
|
|
expect(heading).toHaveAttribute('id', 'products-heading');
|
|
});
|
|
});
|
|
|
|
describe('Styling', () => {
|
|
it('should have background color', () => {
|
|
render(<ProductsSection />);
|
|
const section = document.querySelector('section#products');
|
|
expect(section).toHaveClass('bg-[#F5F7FA]');
|
|
});
|
|
|
|
it('should have proper padding', () => {
|
|
render(<ProductsSection />);
|
|
const section = document.querySelector('section#products');
|
|
expect(section).toHaveClass('py-24');
|
|
});
|
|
|
|
it('should have decorative background elements', () => {
|
|
const { container } = render(<ProductsSection />);
|
|
const decorativeElements = container.querySelectorAll('.blur-3xl');
|
|
expect(decorativeElements.length).toBeGreaterThan(0);
|
|
});
|
|
});
|
|
});
|