From d35fb2bd2ed91f231a8603a41a8f8ba09d64d635 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=A8=E6=B6=9B?= Date: Tue, 19 Sep 2023 16:32:06 +0800 Subject: [PATCH] feat: add test for rate --- .../components/rate/__test__/index.spec.js | 203 +++++++++++++++++- 1 file changed, 202 insertions(+), 1 deletion(-) diff --git a/packages/arcodesign/components/rate/__test__/index.spec.js b/packages/arcodesign/components/rate/__test__/index.spec.js index 2b36bfcd..21690600 100644 --- a/packages/arcodesign/components/rate/__test__/index.spec.js +++ b/packages/arcodesign/components/rate/__test__/index.spec.js @@ -1,7 +1,208 @@ +import '@testing-library/jest-dom'; +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import React, { useRef, useState } from 'react'; +import Rate from '..'; import demoTest from '../../../tests/demoTest'; import mountTest from '../../../tests/mountTest'; -import Rate from '..'; demoTest('rate'); mountTest(Rate, 'Rate'); + +// 定义你的 SVG 图标 +const Star = () => ( + + + + +); + +const StarFilled = () => ( + + + + +); + +const HalfStar = () => ( + + + + + + + + + + +); + +describe('Rate Component', () => { + // 测试默认值 (Test default value) + it('should render with default value', () => { + const { container } = render(); + const stars = container.querySelectorAll('.arco-rate-icon-wrap'); + stars.forEach((star, index) => { + expect(star).toHaveClass('normal'); + }); + }); + + // 测试自定义值 (Test custom value) + it('should render with custom value', () => { + const { container } = render(); + const stars = container.querySelectorAll('.arco-rate-icon-wrap'); + stars.forEach((star, index) => { + if (index < 3) { + expect(star).toHaveClass('active'); + } else { + expect(star).toHaveClass('normal'); + } + }); + }); + + // 测试用户交互 (Test user interaction) + it('should update value on user interaction', async () => { + const { container } = render(); + const stars = container.querySelectorAll('.arco-rate-icon-wrap'); + await userEvent.click(stars[4].querySelector('.arco-rate-icon-click-half.right')); + stars.forEach((star, index) => { + if (index <= 4) { + expect(star).toHaveClass('active'); + } else { + expect(star).toHaveClass('normal'); + } + }); + }); + + // 测试禁用属性 (Test disabled property) + it('should not update value on user interaction when disabled', async () => { + const { container } = render(); + const stars = container.querySelectorAll('.arco-rate-icon-wrap'); + await userEvent.click(stars[4].querySelector('.arco-rate-icon-click-half.right')); + stars.forEach((star, index) => { + if (index < 3) { + expect(star).toHaveClass('active'); + } else { + expect(star).toHaveClass('normal'); + } + }); + }); + + // 测试半星功能 (Test half-star feature) + it('should support half-star ratings when allowHalf is true', async () => { + const { container } = render(); + const stars = container.querySelectorAll('.arco-rate-icon-wrap'); + await userEvent.click(stars[2].querySelector('.arco-rate-icon-click-half.left')); + stars.forEach((star, index) => { + if (index < 2) { + expect(star).toHaveClass('active'); + } else if (index === 2) { + expect(star).toHaveClass('half-active'); + } else { + expect(star).toHaveClass('normal'); + } + }); + }); + + // 测试不支持半星 (Test no half-star support) + it('should not support half-star ratings when allowHalf is false', async () => { + const { container } = render(); + const stars = container.querySelectorAll('.arco-rate-icon-wrap'); + await userEvent.click(stars[2].querySelector('.arco-rate-icon-click-half.left')); + stars.forEach((star, index) => { + if (index <= 2) { + expect(star).toHaveClass('active'); + } else { + expect(star).toHaveClass('normal'); + } + }); + }); + + // 测试自定义图标数量 (Test custom icon count) + it('should render correct number of stars when count is set', () => { + const { container } = render(); + const stars = container.querySelectorAll('.arco-rate-icon-wrap'); + expect(stars.length).toBe(7); + }); + + // 测试 step 属性 (Test step property) + it('should support custom step values', async () => { + let value = 0; + const { container } = render( + { + value = v; + }} + />, + ); + const stars = container.querySelectorAll('.arco-rate-icon-wrap'); + await userEvent.click(stars[2].querySelector('.arco-rate-icon-click-half.right')); + expect(value).toBe(6); // 3 星 * 2 分/星 = 6 分 + }); + + // 测试 step 属性的响应式 (Test reactivity of step property) + it('should react to changes in step value', async () => { + let value = 0; + const TestComponent = () => { + const [step, setStep] = useState(2); + return ( + <> + { + value = v; + }} + /> + + + ); + }; + + const { container } = render(); + + const stars = container.querySelectorAll('.arco-rate-icon-wrap'); + await userEvent.click(stars[2].querySelector('.arco-rate-icon-click-half.right')); + + expect(value).toBe(6); // 3 星 * 2 分/星 = 6 分 + + await userEvent.click(container.querySelector('button')); + await userEvent.click(stars[3].querySelector('.arco-rate-icon-click-half.right')); + + expect(value).toBe(12); // 4 星 * 3 分/星 = 9 分 + }); + + // 测试 icons 属性 (Test icons property) + it('should support custom icons', () => { + const { container } = render( + , + active: () => , + halfActive: () => , + }} + />, + ); + const stars = container.querySelectorAll('.arco-rate-icon-wrap'); + stars.forEach((star, index) => { + expect(star.querySelector('svg')).not.toBeNull(); + }); + }); + + // 测试 ref 属性 (Test ref property) + it('should pass ref correctly', () => { + const TestComponent = () => { + const rateRef = useRef(null); + return ; + }; + + render(); + const rate = screen.getByRole('slider'); + expect(rate).toBeInstanceOf(HTMLDivElement); + expect(rate).toHaveClass('arco-rate'); + }); +});