diff --git a/packages/components/list/__tests__/list-item-meta.test.tsx b/packages/components/list/__tests__/list-item-meta.test.tsx
new file mode 100644
index 0000000000..a14c3b03cb
--- /dev/null
+++ b/packages/components/list/__tests__/list-item-meta.test.tsx
@@ -0,0 +1,178 @@
+import { List, ListItem, ListItemMeta } from '@tdesign/components/list';
+import { mount } from '@vue/test-utils';
+
+describe('ListItemMeta', () => {
+ describe('props', () => {
+ it('description[string]', () => {
+ const wrapper = mount(() => (
+
+
+
+
+
+
+
+
+ ));
+ const descriptions = wrapper.findAll('.t-list-item__meta .t-list-item__meta-description');
+ expect(descriptions.length).toBe(2);
+ expect(descriptions[0].text()).toBe('描述一');
+ expect(descriptions[1].text()).toBe('描述二');
+ });
+
+ it('description[slot]', () => {
+ const wrapper = mount(() => (
+
+
+ '描述一' }}>
+
+
+ '描述二' }}>
+
+
+ ));
+ const descriptions = wrapper.findAll('.t-list-item__meta .t-list-item__meta-description');
+ expect(descriptions.length).toBe(2);
+ expect(descriptions[0].text()).toBe('描述一');
+ expect(descriptions[1].text()).toBe('描述二');
+ });
+
+ it('description[function]', () => {
+ const wrapper = mount(() => (
+
+
+ '描述一'}>
+
+
+ '描述二'}>
+
+
+ ));
+ const descriptions = wrapper.findAll('.t-list-item__meta .t-list-item__meta-description');
+ expect(descriptions.length).toBe(2);
+ expect(descriptions[0].text()).toBe('描述一');
+ expect(descriptions[1].text()).toBe('描述二');
+ });
+
+ it('title[string]', () => {
+ const wrapper = mount(() => (
+
+
+
+
+
+
+
+
+ ));
+ const titles = wrapper.findAll('.t-list-item__meta .t-list-item__meta-title');
+ expect(titles.length).toBe(2);
+ expect(titles[0].text()).toBe('标题一');
+ expect(titles[1].text()).toBe('标题一');
+ });
+
+ it('title[slot]', () => {
+ const wrapper = mount(() => (
+
+
+ '标题一' }} description="描述一">
+
+
+ '标题二' }} description="描述二">
+
+
+ ));
+ const titles = wrapper.findAll('.t-list-item__meta .t-list-item__meta-title');
+ expect(titles.length).toBe(2);
+ expect(titles[0].text()).toBe('标题一');
+ expect(titles[1].text()).toBe('标题二');
+ });
+
+ it('title[function]', () => {
+ const wrapper = mount(() => (
+
+
+ '标题一'} description="描述一">
+
+
+ '标题二'} description="描述二">
+
+
+ ));
+ const titles = wrapper.findAll('.t-list-item__meta .t-list-item__meta-title');
+ expect(titles.length).toBe(2);
+ expect(titles[0].text()).toBe('标题一');
+ expect(titles[1].text()).toBe('标题二');
+ });
+
+ it('image[string]', () => {
+ const imageUrl = 'https://tdesign.gtimg.com/site/avatar.jpg';
+ const wrapper = mount(() => (
+
+
+
+
+
+
+
+
+ ));
+ const images = wrapper.findAll('.t-list-item__meta .t-list-item__meta-avatar img');
+ expect(images.length).toBe(2);
+ expect(images[0].element.getAttribute('src')).toBe('https://tdesign.gtimg.com/site/avatar.jpg');
+ expect(images[1].element.getAttribute('src')).toBe('https://tdesign.gtimg.com/site/avatar.jpg');
+ });
+
+ it('image[slot]', () => {
+ const wrapper = mount(() => {
+ return (
+
+
+ 
}}
+ title="标题一"
+ description="描述一"
+ />
+
+
+ }}
+ title="标题二"
+ description="描述二"
+ />
+
+
+ );
+ });
+ const images = wrapper.findAll('.t-list-item__meta .t-list-item__meta-avatar img');
+ expect(images.length).toBe(2);
+ expect(images[0].element.getAttribute('src')).toBe('https://tdesign.gtimg.com/site/avatar.jpg');
+ expect(images[1].element.getAttribute('src')).toBe('https://tdesign.gtimg.com/site/avatar.jpg');
+ });
+
+ it('image[function]', () => {
+ const wrapper = mount(() => (
+
+
+ }
+ title="标题一"
+ description="描述一"
+ >
+
+
+ }
+ title="标题二"
+ description="描述二"
+ >
+
+
+ ));
+ const images = wrapper.findAll('.t-list-item__meta .t-list-item__meta-avatar img');
+ expect(images.length).toBe(2);
+ expect(images[0].element.getAttribute('src')).toBe('https://tdesign.gtimg.com/site/avatar.jpg');
+ expect(images[1].element.getAttribute('src')).toBe('https://tdesign.gtimg.com/site/avatar.jpg');
+ });
+ });
+});
diff --git a/packages/components/list/__tests__/list-item.test.tsx b/packages/components/list/__tests__/list-item.test.tsx
new file mode 100644
index 0000000000..29a0c15895
--- /dev/null
+++ b/packages/components/list/__tests__/list-item.test.tsx
@@ -0,0 +1,95 @@
+import { List, ListItem } from '@tdesign/components/list';
+import { mount } from '@vue/test-utils';
+
+describe('ListItem', () => {
+ describe('props', () => {
+ it('action[string]', () => {
+ const wrapper = mount(() => (
+
+ 描述性文字
+
+ ));
+ expect(wrapper.find('.t-list-item .t-list-item__action').text()).toBe('操作');
+ });
+
+ it('action[slot]', () => {
+ const wrapper = mount(() => (
+
+ '操作' }}>描述性文字
+
+ ));
+ expect(wrapper.find('.t-list-item .t-list-item__action').text()).toBe('操作');
+ });
+
+ it('action[function]', () => {
+ const wrapper = mount(() => (
+
+ '操作'}>描述性文字
+
+ ));
+ expect(wrapper.find('.t-list-item .t-list-item__action').text()).toBe('操作');
+ });
+ it('content[string]', () => {
+ const wrapper = mount(() => (
+
+
+
+ ));
+ const [item] = wrapper.findAll('.t-list-item .t-list-item-main');
+ expect(item.exists()).toBeTruthy();
+ expect(item.text()).toBe('描述性文字');
+ });
+
+ it('content[slot]', () => {
+ const wrapper = mount(() => (
+
+ '描述性文字' }}>
+
+ ));
+ const [item] = wrapper.findAll('.t-list-item .t-list-item-main');
+ expect(item.exists()).toBeTruthy();
+ expect(item.text()).toBe('描述性文字');
+ });
+
+ it('content[function]', () => {
+ const wrapper = mount(() => (
+
+ '描述性文字'}>
+
+ ));
+ const [item] = wrapper.findAll('.t-list-item .t-list-item-main');
+ expect(item.exists()).toBeTruthy();
+ expect(item.text()).toBe('描述性文字');
+ });
+ it('default[string]', () => {
+ const wrapper = mount(() => (
+
+
+
+ ));
+ const [item] = wrapper.findAll('.t-list-item .t-list-item-main');
+ expect(item.exists()).toBeTruthy();
+ expect(item.text()).toBe('描述性文字');
+ });
+ it('default[slot]', () => {
+ const wrapper = mount(() => (
+
+ '描述性文字' }}>
+
+ ));
+ const [item] = wrapper.findAll('.t-list-item .t-list-item-main');
+ expect(item.exists()).toBeTruthy();
+ expect(item.text()).toBe('描述性文字');
+ });
+ it('default[function]', () => {
+ const wrapper = mount(() => (
+
+ '描述性文字'}>
+
+ ));
+ const [item] = wrapper.findAll('.t-list-item .t-list-item-main');
+ expect(item.exists()).toBeTruthy();
+ expect(item.text()).toBe('描述性文字');
+ });
+ });
+});
diff --git a/packages/components/list/__tests__/list.test.tsx b/packages/components/list/__tests__/list.test.tsx
index 49765420f8..4936ee8d85 100644
--- a/packages/components/list/__tests__/list.test.tsx
+++ b/packages/components/list/__tests__/list.test.tsx
@@ -1,36 +1,68 @@
-// @ts-nocheck
import { mount } from '@vue/test-utils';
-import { describe, expect, vi, it } from 'vitest';
-import { List, ListItem, ListItemMeta } from '@tdesign/components/list';
+import { describe, expect, it } from 'vitest';
+import { List, ListItem, ListProps } from '@tdesign/components/list';
describe('List', () => {
- describe(':props', () => {
- it(':size', () => {
- const sizeList = ['small', 'medium', 'large'];
- sizeList.forEach((size) => {
- const wrapper = mount(() => (
-
- 描述性文字一
- 描述性文字二
-
- ));
- expect(wrapper.classes()).toContain(`t-size-${size.slice(0, 1)}`);
- });
+ describe('props', () => {
+ it('asyncLoading[string]', () => {
+ const wrapperLoading = mount(() => (
+
+ 描述性文字一
+ 描述性文字二
+
+ ));
+ const loading = wrapperLoading.find('.t-list .t-list__load--loading');
+ expect(loading.exists()).toBeTruthy();
+ expect(loading.find('span').text()).toBe('正在加载中，请稍等');
+
+ const wrapperLoadingMore = mount(() => (
+
+ 描述性文字一
+ 描述性文字二
+
+ ));
+ const loadingMore = wrapperLoadingMore.find('.t-list .t-list__load--loading');
+ expect(loadingMore.exists()).toBeTruthy();
+ expect(loadingMore.find('span').text()).toBe('正在加载中，请稍等');
+ });
+
+ it('asyncLoading[slot]', () => {
+ const wrapperLoading = mount(() => (
+ '自定义正在加载中' }}>
+ 描述性文字一
+ 描述性文字二
+
+ ));
+ const loading = wrapperLoading.find('.t-list .t-list__load');
+ expect(loading.exists()).toBeTruthy();
+ expect(loading.text()).toBe('自定义正在加载中');
});
- it(':header', () => {
+ it('async-loading[slot]', () => {
+ const wrapperLoading = mount(() => (
+ '自定义正在加载中' }}>
+ 描述性文字一
+ 描述性文字二
+
+ ));
+ const loading = wrapperLoading.find('.t-list .t-list__load');
+ expect(loading.exists()).toBeTruthy();
+ expect(loading.text()).toBe('自定义正在加载中');
+ });
+
+ it('asyncLoading[function]', () => {
const wrapper = mount(() => (
-
+ '自定义正在加载中'}>
描述性文字一
描述性文字二
));
- const header = wrapper.find('.t-list__header');
- expect(header.exists()).toBeTruthy();
- expect(header.text()).toBe('header');
+ const loading = wrapper.find('.t-list .t-list__load');
+ expect(loading.exists()).toBeTruthy();
+ expect(loading.text()).toBe('自定义正在加载中');
});
- it(':footer', () => {
+ it('footer[string]', () => {
const wrapper = mount(() => (
描述性文字一
@@ -42,113 +74,106 @@ describe('List', () => {
expect(footer.text()).toBe('footer');
});
- it(':split', () => {
+ it('footer[slot]', () => {
const wrapper = mount(() => (
-
+ 'footer' }}>
描述性文字一
描述性文字二
));
- const split = wrapper.find('.t-list--split');
- expect(split.exists()).toBeTruthy();
+ const footer = wrapper.find('.t-list__footer');
+ expect(footer.exists()).toBeTruthy();
+ expect(footer.text()).toBe('footer');
});
- it(':stripe', () => {
+ it('footer[function]', () => {
const wrapper = mount(() => (
-
+ 'footer'}>
描述性文字一
描述性文字二
));
- const stripes = wrapper.findAll('.t-list--stripe');
- expect(stripes.length).toBe(1);
+ const footer = wrapper.find('.t-list__footer');
+ expect(footer.exists()).toBeTruthy();
+ expect(footer.text()).toBe('footer');
});
- });
-});
-describe('ListItem', () => {
- describe(':props', () => {
- it(':action', () => {
- const slots = {
- action: () => (
- <>
- 操作一
- 操作二
- 操作三
-
- ),
- };
+ it('header[string]', () => {
const wrapper = mount(() => (
-
- 描述性文字一
+
+ 描述性文字一
描述性文字二
));
- const [item] = wrapper.findAll('.t-list-item .t-list-item__action');
- const spans = item.findAll('span');
- expect(item.element.children.length).toBe(3);
- expect(spans[0].text()).toBe('操作一');
- expect(spans[1].text()).toBe('操作二');
- expect(spans[2].text()).toBe('操作三');
+ const header = wrapper.find('.t-list__header');
+ expect(header.exists()).toBeTruthy();
+ expect(header.text()).toBe('header');
});
- it(':content', () => {
- const slots = {
- content: () => <>描述一,
- };
+ it('header[slot]', () => {
const wrapper = mount(() => (
-
-
+ 'header' }}>
+ 描述性文字一
描述性文字二
));
- const [item] = wrapper.findAll('.t-list-item .t-list-item-main');
- expect(item.exists()).toBeTruthy();
- expect(item.text()).toBe('描述一');
+ const header = wrapper.find('.t-list__header');
+ expect(header.exists()).toBeTruthy();
+ expect(header.text()).toBe('header');
});
- it(':default', () => {
- const slots = {
- content: () => <>描述一,
- };
+ it('header[function]', () => {
const wrapper = mount(() => (
-
-
+ 'header'}>
+ 描述性文字一
描述性文字二
));
- const [item] = wrapper.findAll('.t-list-item .t-list-item-main');
- expect(item.exists()).toBeTruthy();
- expect(item.text()).toBe('描述一');
+ const header = wrapper.find('.t-list__header');
+ expect(header.exists()).toBeTruthy();
+ expect(header.text()).toBe('header');
});
- it(':asyncLoading:loading', () => {
+ it('scroll[object]', () => {});
+
+ it('size[string]', () => {
+ const sizeList: Array = ['small', 'medium', 'large'];
+ sizeList.forEach((size) => {
+ const wrapper = mount(() => (
+
+ 描述性文字一
+ 描述性文字二
+
+ ));
+ expect(wrapper.classes()).toContain(`t-size-${size.slice(0, 1)}`);
+ });
+ });
+
+ it('split[boolean]', () => {
const wrapper = mount(() => (
-
+
描述性文字一
描述性文字二
));
- const loading = wrapper.find('.t-list .t-list__load--loading');
- expect(loading.exists()).toBeTruthy();
- expect(loading.find('span').text()).toBe('正在加载中，请稍等');
+ const split = wrapper.find('.t-list--split');
+ expect(split.exists()).toBeTruthy();
});
- it(':asyncLoading:load-more', () => {
+ it('stripe[boolean]', () => {
const wrapper = mount(() => (
-
+
描述性文字一
描述性文字二
));
- const loadMore = wrapper.find('.t-list .t-list__load--load-more');
- expect(loadMore.exists()).toBeTruthy();
- expect(loadMore.find('span').text()).toBe('点击加载更多');
+ const stripes = wrapper.findAll('.t-list--stripe');
+ expect(stripes.length).toBe(1);
});
});
- describe(':events', () => {
- it(':onLoadMore', async () => {
+ describe('events', () => {
+ it('onLoadMore', async () => {
const fn = vi.fn();
const wrapper = mount(() => (
@@ -161,7 +186,7 @@ describe('ListItem', () => {
expect(fn).toBeCalled();
});
- it(':onScroll', async () => {
+ it('onScroll', async () => {
const fn = vi.fn();
const wrapper = mount(() => (
@@ -189,59 +214,3 @@ describe('ListItem', () => {
});
});
});
-
-describe('ListItemMeta', () => {
- describe(':props', () => {
- it(':description', () => {
- const wrapper = mount(() => (
-
-
-
-
-
-
-
-
- ));
- const descriptions = wrapper.findAll('.t-list-item__meta .t-list-item__meta-description');
- expect(descriptions.length).toBe(2);
- expect(descriptions[0].text()).toBe('描述一');
- expect(descriptions[1].text()).toBe('描述二');
- });
-
- it(':title', () => {
- const wrapper = mount(() => (
-
-
-
-
-
-
-
-
- ));
- const titles = wrapper.findAll('.t-list-item__meta .t-list-item__meta-title');
- expect(titles.length).toBe(2);
- expect(titles[0].text()).toBe('标题一');
- expect(titles[1].text()).toBe('标题一');
- });
-
- it(':image', () => {
- const imageUrl = 'https://tdesign.gtimg.com/site/avatar.jpg';
- const wrapper = mount(() => (
-
-
-
-
-
-
-
-
- ));
- const images = wrapper.findAll('.t-list-item__meta .t-list-item__meta-avatar img');
- expect(images.length).toBe(2);
- expect(images[0].element.getAttribute('src')).toBe('https://tdesign.gtimg.com/site/avatar.jpg');
- expect(images[1].element.getAttribute('src')).toBe('https://tdesign.gtimg.com/site/avatar.jpg');
- });
- });
-});