Skip to content

Commit

Permalink
Merge pull request #441 from palmcivet/test/swiper/unit
Browse files Browse the repository at this point in the history 
test(swiper): add unit test for swiper
  • Loading branch information
@anlyyao
anlyyao authored Oct 31, 2022
2 parents bc362e4 + 1672b6d commit 1475330
Show file tree
Hide file tree
Showing 2 changed files with 389 additions and 0 deletions.
81 changes: 81 additions & 0 deletions src/swiper/__test__/__snapshots__/index.test.jsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
// Vitest Snapshot v1

exports[`swiper > : props > height && direction 1`] = `
<div
class="t-swiper"
style="height: 200px; overflow: hidden;"
>
<div
class="t-swiper__container"
data-is-trust="true"
style="height: 200px; flex-direction: column; transform: translateY(-400px); transition: transform 100ms;"
>
<div
class="t-swiper-item copy-item"
>
<img
src="https://tdesign.gtimg.com/site/swiper/03.png"
/>
</div>
<div
class="t-swiper-item"
>
<img
src="https://tdesign.gtimg.com/site/swiper/01.png"
/>
</div>
<div
class="t-swiper-item"
>
<img
src="https://tdesign.gtimg.com/site/swiper/02.png"
/>
</div>
<div
class="t-swiper-item"
>
<img
src="https://tdesign.gtimg.com/site/swiper/03.png"
/>
</div>
<div
class="t-swiper-item copy-item"
>
<img
src="https://tdesign.gtimg.com/site/swiper/01.png"
/>
</div>
</div>
<!--v-if-->
<span
class="t-swiper__pagination t-swiper__pagination-dots-bar t-swiper__pagination-bottom"
>
<span
class="t-swiper-dot"
/>
<span
class="t-swiper-dot t-swiper-dot--active"
/>
<span
class="t-swiper-dot"
/>
<!--v-if-->
</span>
</div>
`;
308 changes: 308 additions & 0 deletions src/swiper/__test__/index.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,308 @@
import { describe, it, vi } from 'vitest';
import { mount } from '@vue/test-utils';
import { ref } from 'vue';
import Swiper from '../swiper.vue';
import SwiperItem from '../swiper-item.vue';

const sleep = (duration) =>
new Promise((resolve) =>
setTimeout(() => {
resolve();
}, duration),
);

const classPrefix = 't-swiper';
const list = [
{
image: 'https://tdesign.gtimg.com/site/swiper/01.png',
},
{
image: 'https://tdesign.gtimg.com/site/swiper/02.png',
},
{
image: 'https://tdesign.gtimg.com/site/swiper/03.png',
},
];

describe('swiper', () => {
describe(': props', () => {
it('duration && paginationPosition', async () => {
const current = ref(1);
const duration = 100;
const interval = 100;
const navigation = {
type: 'dots',
showSlideBtn: false,
};
const paginationPosition = 'top';
const onChange = vi.fn();
const wrapper = mount({
setup() {
return () => (
<Swiper
v-model={current.value}
interval={interval}
duration={duration}
navigation={navigation}
paginationPosition={paginationPosition}
onChange={onChange}
>
{{
default: list.map((item, index) => {
return (
<SwiperItem>
{{
default: () => {
return <img src={item.image} />;
},
}}
</SwiperItem>
);
}),
}}
</Swiper>
);
},
});
await sleep(interval + duration);
const $swiper = wrapper.find(`.${classPrefix}`);
const $swiperContainer = wrapper.find(`.${classPrefix}__container`);

// 模拟触发 transitionend
$swiperContainer.trigger(`transitionend`);

// duration = 100
expect($swiperContainer.attributes('style').includes(`transform ${duration}ms;`));

// swiper 会复制首项和末项， 所有 swiper-item 个数是 list.length + 2
const $swiperItems = wrapper.findAll(`.${classPrefix}-item`);
expect($swiperItems).toHaveLength(list.length + 2);

// 导航器
const $pagination = wrapper.find(`.${classPrefix}__pagination`);
expect(
$pagination
.attributes('class')
.includes(`t-swiper__pagination-${navigation.type} t-swiper__pagination-${paginationPosition}`),
);

// 导航器 dot
const $dots = wrapper.findAll(`.${classPrefix}-dot`);
expect($dots).toHaveLength(list.length);
// 初始化时，current 项为激活态
expect($dots[current.value].attributes('class').includes(`t-swiper-dot--active`)).toBeTruthy();
});

it('height && direction', async () => {
const current = ref(1);
const height = 200;
const duration = 100;
const interval = 100;
const direction = 'vertical';
const navigation = {
type: 'dots-bar',
showSlideBtn: false,
};
const onChange = vi.fn();
const wrapper = mount({
setup() {
return () => (
<Swiper
v-model={current.value}
interval={interval}
duration={duration}
height={height}
navigation={navigation}
direction={direction}
onChange={onChange}
>
{{
default: list.map((item, index) => {
return (
<SwiperItem>
{{
default: () => {
return <img src={item.image} />;
},
}}
</SwiperItem>
);
}),
}}
</Swiper>
);
},
});
await sleep(interval + duration);
expect(wrapper.element).toMatchSnapshot();
const $swiper = wrapper.find(`.${classPrefix}`);
const $swiperContainer = wrapper.find(`.${classPrefix}__container`);
$swiperContainer.trigger(`transitionend`);
expect(
$swiperContainer
.attributes('style')
.includes(`flex-direction: column; transform: translateY(-${height * (1 + current.value)}px);`),
);

// height = 200
expect($swiper.attributes('style').includes(`height: ${height}px;`));
expect($swiperContainer.attributes('style').includes(`height: ${height}px;`));

// 导航器 dots-bar
const $pagination = wrapper.find(`.${classPrefix}__pagination`);
expect($pagination.attributes('class').includes(`t-swiper__pagination-${navigation.type}`));
const $dots = wrapper.findAll(`.${classPrefix}-dot`);
expect($dots).toHaveLength(list.length);
});

it(': onChange', async () => {
const current = ref(1);
const duration = 100;
const interval = 100;
const navigation = {
showSlideBtn: true,
};
const onChange = vi.fn();
const wrapper = mount({
setup() {
return () => (
<Swiper
v-model:current={current.value}
autoplay={false}
loop={false}
interval={interval}
duration={duration}
navigation={navigation}
onChange={onChange}
>
{{
default: list.map((item, index) => {
return (
<SwiperItem>
{{
default: () => {
return <img src={item.image} />;
},
}}
</SwiperItem>
);
}),
}}
</Swiper>
);
},
});
await sleep(interval + duration);
const $swiperContainer = wrapper.find(`.${classPrefix}__container`);
$swiperContainer.trigger(`transitionend`);
// showSlideBtn = true, 显示两侧的滑动控制按钮
const $btn = wrapper.findAll(`.${classPrefix}__btn`);
expect($btn).toHaveLength(2);
const $btnNext = wrapper.find(`.btn-next`);
// 模拟触发 click , 下一页
$btnNext.trigger('click');
await sleep(200);
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledWith(2);
});
});
});

// TODO: 目前 change 事件均是通过 showSlideBtn = true 时，两侧滑动按钮控制前后翻页触发, 后期需要补齐 touch。
describe('SwiperNavigation', () => {
it(': minShowNum', async () => {
const current = ref(1);
const duration = 100;
const interval = 100;
const navigation = {
type: 'dots',
showSlideBtn: false,
minShowNum: 4,
};
const onChange = vi.fn();
const wrapper = mount({
setup() {
return () => (
<Swiper
v-model={current.value}
interval={interval}
duration={duration}
navigation={navigation}
onChange={onChange}
>
{{
default: list.map((item, index) => {
return (
<SwiperItem>
{{
default: () => {
return <img src={item.image} />;
},
}}
</SwiperItem>
);
}),
}}
</Swiper>
);
},
});
await sleep(interval + duration);
// minShowNum = 4, 大于 list.length, 不会出现导航器
const $pagination = wrapper.find(`.${classPrefix}__pagination`);
expect($pagination.exists()).toBeFalsy();
});

it(': showSlideBtn', async () => {
const current = ref(1); // 受控
const duration = 100;
const interval = 100;
const navigation = {
showSlideBtn: true,
};
const onChange = vi.fn();
const wrapper = mount({
setup() {
return () => (
<Swiper
v-model:current={current.value}
autoplay={false}
loop={false}
interval={interval}
duration={duration}
navigation={navigation}
onChange={onChange}
>
{{
default: list.map((item, index) => {
return (
<SwiperItem>
{{
default: () => {
return <img src={item.image} />;
},
}}
</SwiperItem>
);
}),
}}
</Swiper>
);
},
});
await sleep(interval + duration);
const $swiperContainer = wrapper.find(`.${classPrefix}__container`);
$swiperContainer.trigger(`transitionend`);
// showSlideBtn = true, 显示两侧的滑动控制按钮
const $btn = wrapper.findAll(`.${classPrefix}__btn`);
expect($btn).toHaveLength(2);
const $btnPrev = wrapper.find(`.btn-prev`);
const $btnNext = wrapper.find(`.btn-next`);

// 模拟触发 click 事件
$btnPrev.trigger('click');
await sleep(200);
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledWith(0);
});
});

0 comments on commit 1475330

Please sign in to comment.