Skip to content

Commit

Permalink
test(rate): add test cases (#807)
Browse files Browse the repository at this point in the history
  • Loading branch information
@palmcivet
palmcivet authored Jun 5, 2023
1 parent b6f743a commit c87bba9
Showing 1 changed file with 115 additions and 91 deletions.
206 changes: 115 additions & 91 deletions src/rate/__test__/index.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,137 @@
import { ref, nextTick } from 'vue';
import { ref, nextTick, markRaw } from 'vue';
import { mount } from '@vue/test-utils';
import { describe, it, expect, vi } from 'vitest';
import { StarFilledIcon, StarIcon } from 'tdesign-icons-vue-next';
import { ThumbUpIcon, ThumbDownIcon, StarIcon } from 'tdesign-icons-vue-next';
import Rate from '../rate.vue';
import { trigger } from '../../image-viewer/__test__/touch';

const move = async (target) => {
await trigger(target, 'touchstart', 0, 0);
await trigger(target, 'touchmove', 1, 0);
await trigger(target, 'touchend', 1, 0);
await trigger(target, 'touchstart', 10, 10);
await trigger(target, 'touchmove', 120, 10);
await trigger(target, 'touchend', 120, 10);
};

const prefix = 't';
const name = `${prefix}-rate`;

describe('Rate', () => {
describe('Rate', () => {
it('create', async () => {
const wrapper = mount(() => <Rate />);
expect(wrapper.classes()).toContain(`${name}`);
const items = wrapper.findAll(`.${name}__icon`);
expect(items.length).toBe(5);
const icon = wrapper.findComponent(StarIcon);
expect(icon.exists()).toBeTruthy();
});
it('create', async () => {
const wrapper = mount(() => <Rate />);
expect(wrapper.classes()).toContain(`${name}`);
const items = wrapper.findAll(`.${name}__icon`);
expect(items.length).toBe(5);
const icon = wrapper.findComponent(StarIcon);
expect(icon.exists()).toBeTruthy();

it(': count', async () => {
const wrapper = mount(() => <Rate count={10} />);
const items = wrapper.findAll(`.${name}__icon`);
expect(items.length).toBe(10);
});
const $target = wrapper.find(`.${name}__wrapper`);
await move($target);
const icons = wrapper.findAll(`.${name}__icon`);
await icons[4].trigger('click'); // hideTips(true)

it(': gap', async () => {
const wrapper = mount(() => <Rate gap={10} />);
const items = wrapper.findAll(`.${name}__icon`);
for (let i = 0; i < items.length - 1; i++) {
expect(getComputedStyle(items[i].element, null).marginRight).toBe('10px');
}
expect(getComputedStyle(items[items.length - 1].element, null).marginRight).toBe('0px');
});
await trigger($target, 'touchstart', 200, 10);
await trigger($target, 'touchmove', 220, 10);
await trigger($target, 'touchend', 220, 10);
await trigger($target, 'touchcancel', 220, 10); // onTouchEnd
});

it(': count', async () => {
const wrapper = mount(() => <Rate count={10} />);
const items = wrapper.findAll(`.${name}__icon`);
expect(items.length).toBe(10);
});

it(': gap', async () => {
const wrapper = mount(() => <Rate gap={10} />);
const items = wrapper.findAll(`.${name}__icon`);
for (let i = 0; i < items.length - 1; i++) {
expect(getComputedStyle(items[i].element, null).marginRight).toBe('10px');
}
expect(getComputedStyle(items[items.length - 1].element, null).marginRight).toBe('0px');
});

it(': allowHalf', async () => {
const value = ref(0);
const texts = ['很差', '差', '一般', '好评', '优秀'];
const onChange = vi.fn();
const wrapper = mount(() => <Rate v-model={value.value} allowHalf showText texts={texts} onChange={onChange} />);
const icons = wrapper.findAll(`.${name}__icon`);
await icons[0].trigger('click');
const tips = wrapper.find(`.${name}__tips`);
expect(tips.exists()).toBeTruthy();
const tipsItem = tips.findAll(`.${name}__tips-item`);
await tipsItem[0].trigger('click');
expect(onChange).toHaveBeenCalledTimes(2);
expect(icons[0].exists()).toBeTruthy();
value.value = 0.5;
await nextTick();
const half = wrapper.findAll(`.${name}__icon-left--selected`);
expect(half.length).toBe(1);
const $target = wrapper.find(`.${name}__wrapper`);
await move($target);
expect(onChange).toHaveBeenCalledTimes(2);
});

it(': allowHalf', async () => {
const value = ref(0);
const showText = true;
const texts = ['很差', '差', '一般', '好评', '优秀'];
const onChange = vi.fn();
const wrapper = mount(() => <Rate v-model={value.value} allowHalf showText texts={texts} onChange={onChange} />);
const icons = wrapper.findAll(`.${name}__icon`);
await icons[0].trigger('click');
let tips = wrapper.find(`.${name}__tips`)
expect(tips.exists()).toBeTruthy();
let tipsItem = tips.findAll(`.${name}__tips-item`);
await tipsItem[0].trigger('click');
expect(onChange).toHaveBeenCalledTimes(2);
expect(icons[0].exists()).toBeTruthy();
value.value = 0.5;
await nextTick()
const half = wrapper.findAll(`.${name}__icon-left--selected`);
expect(half.length).toBe(1);
const $target = wrapper.find(`.${name}__wrapper`);
await move($target);
expect(onChange).toHaveBeenCalledTimes(2);
it(': showText && texts', async () => {
const defaultValue = 3;
const showText = true;
const texts = ['很差', '差', '一般', '好评', '优秀'];
const onChange = vi.fn();
const wrapper = mount(Rate, {
props: {
defaultValue,
showText,
texts,
onChange,
},
});
const $text = wrapper.find(`.${name}__text`);
expect($text.text()).toEqual(texts[defaultValue - 1]);
});

it(': showText && texts', async () => {
const defaultValue = 3;
const showText = true;
const texts = ['很差', '差', '一般', '好评', '优秀'];
const onChange = vi.fn();
const wrapper = mount(Rate, {
props: {
defaultValue,
showText,
texts,
onChange,
},
});
const $text = wrapper.find(`.${name}__text`);
expect($text.text()).toEqual(texts[defaultValue - 1]);
it(': icon && color', async () => {
const wrapper = mount(Rate, {
props: {
value: 3,
icon: [markRaw(ThumbUpIcon), markRaw(ThumbDownIcon)],
color: ['#ED7B2F', '#E3E6EB'],
},
});
const $selectIcon = wrapper.findComponent(ThumbUpIcon);
expect($selectIcon.exists()).toBeTruthy();

it(': disabled', async () => {
const onChange = vi.fn();
const wrapper = mount(Rate, {
props: {
disabled: true,
onChange,
},
});
// disabled = true, 不触发 change， touch 无效
const $target = wrapper.find(`.${name}__wrapper`);
const icons = wrapper.findAll(`.${name}__icon`);
const index = 3;

await icons[index].trigger('click');
expect(onChange).toHaveBeenCalledTimes(0);
await move($target);
expect(onChange).toHaveBeenCalledTimes(0);

// disabled = false
await wrapper.setProps({
disabled: false,
});

await icons[index].trigger('click');
expect(onChange).toHaveBeenCalledTimes(1);
// expect(onChange).toHaveBeenLastCalledWith(index + 1);
await move($target);
expect(onChange).toHaveBeenCalledTimes(1);
const $unselectIcon = wrapper.findComponent(ThumbDownIcon);
expect($unselectIcon.exists()).toBeTruthy();
});

it(': size', async () => {
const wrapper = mount(<Rate size={'20px'} icon={[() => markRaw(ThumbUpIcon), () => markRaw(ThumbDownIcon)]} />);
const items = wrapper.findAll(`.${name}__icon`);
for (let i = 0; i < items.length; i++) {
expect(getComputedStyle(items[i].element, null).fontSize).toBe('20px');
}
});

it(': disabled', async () => {
const onChange = vi.fn();
const wrapper = mount(<Rate disabled onChange={onChange} />);
// disabled = true, 不触发 change， touch 无效
const $target = wrapper.find(`.${name}__wrapper`);
const icons = wrapper.findAll(`.${name}__icon`);
const index = 3;

await icons[index].trigger('click');
expect(onChange).toHaveBeenCalledTimes(0);
await move($target);
expect(onChange).toHaveBeenCalledTimes(0);

// disabled = false
await wrapper.setProps({
disabled: false,
});

await icons[index].trigger('click');
expect(onChange).toHaveBeenCalledTimes(1);
await move($target);
expect(onChange).toHaveBeenCalledTimes(1);
});
});

0 comments on commit c87bba9

Please sign in to comment.