stellar-ui-v2 1.37.0 → 1.38.0

package/test/components/steps.test.js

@@ -0,0 +1,54 @@
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import Steps from '../../uni_modules/stellar-ui/components/ste-steps/ste-steps.vue';
+import Step from '../../uni_modules/stellar-ui/components/ste-step/ste-step.vue';
+import { createVue, triggerClick } from '../methods';
+
+describe('Steps Vue Component', async () => {
+	const vm = createVue(
+		{
+			components: { 'ste-steps': Steps, 'ste-step': Step },
+			template: `<ste-steps :active="active">
+				<ste-step></ste-step>
+				<ste-step></ste-step>
+				<ste-step></ste-step>
+			</ste-steps>
+			`,
+			data() {
+				return {
+					active: 0,
+				};
+			},
+		},
+		true
+	);
+	const wrapper = mount(Steps, {
+		propsData: {
+			direction: 'row',
+			dot: false,
+		},
+	});
+
+	await new Promise((p) => setTimeout(p, 500));
+
+	test('init', async () => {
+		// 默认隐藏
+		const els = vm.$el.querySelectorAll('[data-test="step"]');
+		expect(els.length).toBe(3);
+	});
+
+	test('active', async () => {
+		vm.active = 1;
+		await nextTick();
+		const els = vm.$el.querySelectorAll('[data-test="step"]');
+		expect(els[1].style._values['---color']).toBe('#0090FF');
+	});
+
+	test('direction', () => {
+		expect(wrapper.props('direction')).toBe('row');
+	});
+
+	test('dot', () => {
+		expect(wrapper.props('dot')).toBe(false);
+	});
+});

package/test/components/sticky.test.js

@@ -0,0 +1,40 @@
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import Sticky from '../../uni_modules/stellar-ui/components/ste-sticky/ste-sticky.vue';
+import { style2obj } from '../methods';
+describe('Sticky Comp', async () => {
+	const wrapper = mount(Sticky, {
+		propsData: {
+			offsetTop: 120,
+			customNavHeight: 0,
+			disabled: false,
+			background: "#f00",
+			zIndex: 98,
+		},
+	});
+	await nextTick();
+	const view = wrapper.find('[data-test="sticky"]');
+	const style = style2obj(view);
+	console.log(style);
+
+	test('offsetTop', async () => {
+		expect(style.top).toBe('60px');
+	});
+
+	test('customNavHeight', async () => {
+		expect(wrapper.props().customNavHeight).toBe(0);
+	})
+
+
+	test('disabled', async () => {
+		expect(style.position).toBe("sticky");
+	});
+
+	test('background', async () => {
+		expect(style['background-color']).toBe('rgb(255, 0, 0)');
+	})
+
+	test('zIndex', async () => {
+		expect(style['z-index']).toBe("98");
+	})
+});

package/test/components/swipe-action.test.js

@@ -0,0 +1,76 @@
+import { expect, test, vi, describe } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import SwipeAction from '../../uni_modules/stellar-ui/components/ste-swipe-action/ste-swipe-action.vue';
+import SwipeActionGroup from '../../uni_modules/stellar-ui/components/ste-swipe-action-group/ste-swipe-action-group.vue';
+import { style2obj } from '../methods';
+
+describe('Test SwipeActionGroup', async () => {
+	test('SwipeAction', async () => {
+		const wrapper = mount(SwipeAction, {
+			template: `<ste-swipe-action>
+				<view style="height: 90rpx;">内容区域</view>
+				<template v-slot:right>
+					<div data-test="right-btn" style="width:100px;height: 100%;">删除</div>
+				</template>
+			</ste-swipe-action>`
+		})
+		await nextTick();
+		const el = wrapper.find('[data-test="swipe-action-view"]');
+		expect(el.exists()).toBe(true);
+	})
+
+	const items = Array.from({ length: 10 }, (_, i) => ({
+		components: { SwipeAction },
+		template: `<SwipeAction>
+			<div style="height: 90rpx;">单元格${i + 1}</div>
+			<template v-slot:right>
+				<div data-test="right-btn" style="width:100px;height: 100%;">侧边按钮</div>
+			</template>
+		</SwipeAction>`
+	}));
+
+	const wrapper = mount(SwipeActionGroup, {
+		slots: {
+			// 将子组件传递给默认插槽，并为子组件传参
+			default: items
+		},
+		propsData: {
+			mode: "right",
+			autoClose: true,
+			disabled: false,
+			swipeThreshold: 0.35,
+			duration: 300,
+			leftIcon: false,
+			rightIcon: false,
+		},
+	});
+
+	test('SwipeActionGroup', async () => {
+		const itemEls = wrapper.findAll('[data-test="swipe-action"]');
+		expect(itemEls.length).toBe(10);
+	});
+
+	test('mode', async () => {
+		expect(wrapper.props('mode')).toBe('right');
+	})
+	test('autoClose', async () => {
+		expect(wrapper.props('autoClose')).toBe(true);
+	})
+	test('disabled', async () => {
+		expect(wrapper.props('disabled')).toBe(false);
+	})
+	test('swipeThreshold', async () => {
+		expect(wrapper.props('swipeThreshold')).toBe(0.35);
+	})
+	test('duration', async () => {
+		expect(wrapper.props('duration')).toBe(300);
+	})
+	test('leftIcon', async () => {
+		expect(wrapper.props('leftIcon')).toBe(false);
+	})
+	test('rightIcon', async () => {
+		expect(wrapper.props('rightIcon')).toBe(false);
+	})
+
+});

package/test/components/swiper.test.js

@@ -0,0 +1,130 @@
+import { nextTick } from 'vue';
+import Swiper from '../../uni_modules/stellar-ui/components/ste-swiper/ste-swiper.vue';
+import SwiperItem from '../../uni_modules/stellar-ui/components/ste-swiper-item/ste-swiper-item.vue';
+import { createVue } from '../methods';
+import { mount } from '@vue/test-utils';
+
+describe('Swiper Component', async () => {
+	const vm = createVue({
+		components: { "ste-swiper": Swiper, "ste-swiper-item": SwiperItem },
+		template: `<ste-swiper ref="swiper" :current.sync="current" width="750">
+			<ste-swiper-item v-for="(m, i) in imgs" :key="i">
+				<view>内容{{ i + 1 }}</view>
+				<image :src="m" mode="widthFix"></image>
+			</ste-swiper-item>
+		</ste-swiper>`,
+		data() {
+			return {
+				width: 750,
+				current: 0,
+				imgs: [
+					'https://image.whzb.com/chain/StellarUI/image/img1.jpg',
+					'https://image.whzb.com/chain/StellarUI/image/img2.jfif',
+					'https://image.whzb.com/chain/StellarUI/image/img3.jpg',
+					'https://image.whzb.com/chain/StellarUI/image/img4.jpg',
+					'https://image.whzb.com/chain/StellarUI/image/img1.jpg',
+					'https://image.whzb.com/chain/StellarUI/image/img2.jfif',
+					'https://image.whzb.com/chain/StellarUI/image/img3.jpg',
+					'https://image.whzb.com/chain/StellarUI/image/img4.jpg',
+				],
+			}
+		}
+	}, true)
+
+	const wrapper = mount(Swiper, {
+		propsData: {
+			disabled: false,
+			width: 750,
+			height: 1334,
+			duration: 300,
+			swipeThreshold: 0.35,
+			indicatorDots: false,
+			indicatorColor: "#ffffff",
+			indicatorActiveColor: "#ffffff",
+			autoplay: false,
+			interval: 3000,
+			circular: false,
+			previousMargin: 0,
+			nextMargin: 0
+		}
+	})
+
+	await new Promise(r => setTimeout(r, 500));
+
+	test("list-item", async () => {
+		const list = vm.$el.querySelectorAll('[data-test="swiper-item"]');
+		expect(list.length).toBe(8);
+	})
+
+	test("position", async () => {
+		const translateX = vm.$refs.swiper.translateX
+		expect(translateX).toBe(0)
+	})
+
+	test("current", async () => {
+		vm.current = 1
+		await new Promise(resolve => setTimeout(resolve, 500))
+		expect(vm.$refs.swiper.translateX).toBe(-375)
+	})
+
+	test("direction-vertical", async () => {
+		const vm = createVue({
+			components: { "ste-swiper": Swiper, "ste-swiper-item": SwiperItem },
+			template: `<ste-swiper ref="swiper" :current.sync="current" height="1334" direction="vertical">
+				<ste-swiper-item v-for="(m, i) in imgs" :key="i">
+					<view>内容{{ i + 1 }}</view>
+					<image :src="m" mode="widthFix"></image>
+			</ste-swiper-item>
+		</ste-swiper>`,
+			data() {
+				return {
+					current: 0,
+					imgs: [
+						'https://image.whzb.com/chain/StellarUI/image/img1.jpg',
+						'https://image.whzb.com/chain/StellarUI/image/img2.jfif',
+						'https://image.whzb.com/chain/StellarUI/image/img3.jpg',
+						'https://image.whzb.com/chain/StellarUI/image/img4.jpg',
+						'https://image.whzb.com/chain/StellarUI/image/img1.jpg',
+						'https://image.whzb.com/chain/StellarUI/image/img2.jfif',
+						'https://image.whzb.com/chain/StellarUI/image/img3.jpg',
+						'https://image.whzb.com/chain/StellarUI/image/img4.jpg',
+					],
+				}
+			}
+		})
+		await nextTick();
+		const translateX = vm.$refs.swiper.translateY
+		expect(translateX).toBe(0)
+		vm.current = 1
+		await new Promise(resolve => setTimeout(resolve, 500))
+		expect(vm.$refs.swiper.translateY).toBe(-667)
+	})
+
+	test("disabled", () => {
+		expect(wrapper.props().disabled).toBe(false)
+	})
+
+	test("autoplay", () => {
+		expect(wrapper.props().autoplay).toBe(false)
+	})
+
+	test("current", () => {
+		expect(wrapper.props().current).toBe(0)
+	})
+
+	test("interval", () => {
+		expect(wrapper.props().interval).toBe(3000)
+	})
+
+	test("circular", () => {
+		expect(wrapper.props().circular).toBe(false)
+	})
+
+	test("previousMargin", () => {
+		expect(wrapper.props().previousMargin).toBe(0)
+	})
+
+	test("nextMargin", () => {
+		expect(wrapper.props().nextMargin).toBe(0)
+	})
+});

package/test/components/switch.test.js

@@ -0,0 +1,53 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import steSwitch from '../../uni_modules/stellar-ui/components/ste-switch/ste-switch.vue';
+import { expect } from 'vitest';
+
+describe('Switch', () => {
+	let size = 100;
+	const wrapper = mount(steSwitch, {
+		propsData: {
+			size,
+		},
+	});
+	const switchDom = wrapper.get('[data-test="switch"]');
+
+	test('size', () => {
+		let width = (size * 2 + 4) / 2 + 'px';
+		let height = (size + 4) / 2 + 'px';
+		expect(switchDom.element.style._values.width).toBe(width);
+		expect(switchDom.element.style._values.height).toBe(height);
+	});
+
+	test('activeColor', () => {
+		let activeColor = 'red';
+		const wrapper = mount(steSwitch, {
+			propsData: {
+				value: true,
+				activeColor,
+			},
+		});
+		const switchDom = wrapper.get('[data-test="switch"]');
+		expect(switchDom.element.style._values.background).toBe(activeColor);
+	});
+
+	test('inactiveColor', () => {
+		let inactiveColor = 'black';
+		const wrapper = mount(steSwitch, {
+			propsData: {
+				inactiveColor,
+			},
+		});
+		const switchDom = wrapper.get('[data-test="switch"]');
+		expect(switchDom.element.style._values.background).toBe(inactiveColor);
+	});
+
+	test('loading', () => {
+		const wrapper = mount(steSwitch, {
+			propsData: {
+				loading: true,
+			},
+		});
+		expect(wrapper.contains('[data-test="loading"]')).toBe(true);
+	});
+});

package/test/components/tabs.test.js

@@ -0,0 +1,273 @@
+import { nextTick } from 'vue';
+import Tabs from '../../uni_modules/stellar-ui/components/ste-tabs/ste-tabs.vue';
+import Tab from '../../uni_modules/stellar-ui/components/ste-tab/ste-tab.vue';
+import { createVue, style2obj } from '../methods';
+import { mount } from '@vue/test-utils';
+const list = [
+	{
+		title: '标签1',
+		image: `https://image.whzb.com/chain/StellarUI/图片.jpg`,
+		content: 'https://image.whzb.com/chain/StellarUI/image/img1.jpg',
+	},
+	{
+		title: '标签2',
+		image: `https://image.whzb.com/chain/StellarUI/图片.jpg`,
+		content: 'https://image.whzb.com/chain/StellarUI/image/img2.jfif',
+	},
+	{
+		title: '标签3标签3标签3标签3',
+		image: `https://image.whzb.com/chain/StellarUI/图片.jpg`,
+		content: 'https://image.whzb.com/chain/StellarUI/image/img3.jpg',
+	},
+	{
+		title: '标签4',
+		image: `https://image.whzb.com/chain/StellarUI/图片.jpg`,
+		content: 'https://image.whzb.com/chain/StellarUI/image/img4.jpg',
+	},
+]
+
+describe('Tabs Component', async () => {
+	const vm = createVue({
+		components: { "ste-tabs": Tabs, "ste-tab": Tab },
+		template: `<ste-tabs ref="tabs" >
+			<ste-tab v-for="(item, index) in list" :key="index" :title="item.title" :index="index">
+				<view>{{ item.title }}内容</view>
+				<image style="width: 100%; height: 300px" :src="item.content" />
+			</ste-tab>
+		</ste-tabs>`,
+		data() {
+			return { list }
+		}
+	}, true)
+
+	const wrapper = mount(Tabs, {
+		propsData: {
+			active: 0,
+			type: "line",
+			showImage: false,
+			showTitle: true,
+			showSubtitle: false,
+			color: "#0090ff",
+			background: "#000000",
+			radius: 0,
+			duration: 0.3,
+			showLine: true,
+			lineWidth: 52,
+			lineHeight: 6,
+			border: false,
+			ellipsis: false,
+			tabWidth: "auto",
+			tabPadding: 24,
+			tabSpace: 0,
+			divideNum: 4,
+			sticky: false,
+			offsetTop: 0,
+			swipeable: false,
+			titleColor: "#000000",
+			activeTitleColor: "#000000",
+			titleHeight: 48,
+			subColor: "#000000",
+			activeSubColor: "#ffffff",
+			subTitleHeight: 42,
+			subTitleRadius: 21,
+			imageWidth: 80,
+			imageHeight: 80,
+			imageRadius: "50%",
+			imageBorderWidth: 4,
+			showGapLine: false,
+			lock: false,
+			disabled: false,
+			pullDown: false,
+			placeholder: "请选择",
+			maskTop: 0,
+			maskRight: 0,
+			maskBottom: 0,
+			maskLeft: 0,
+			maskZindex: 1001
+		}
+	})
+
+
+	await new Promise(resolve => setTimeout(resolve, 1000));
+
+	test("tab-item", async () => {
+		const tabs = vm.$el.querySelectorAll('[data-test="tab"]');
+		expect(tabs.length).toBe(4);
+		const titles = vm.$el.querySelectorAll('[data-test="tab-title"]');
+		expect(titles.length).toBe(4);
+	})
+
+	test("showImage", async () => {
+		const vm = createVue({
+			components: { "ste-tabs": Tabs, "ste-tab": Tab },
+			template: `<ste-tabs ref="tabs" :showImage="true">
+				<ste-tab v-for="(item, index) in list" :key="index" :title="item.title" :index="index" >
+					<view>{{ item.title }}内容</view>
+					<image style="width: 100%; height: 300px" :src="item.content" />
+				</ste-tab>
+			</ste-tabs>`,
+			data() {
+				return { list }
+			}
+		}, true)
+		await new Promise(resolve => setTimeout(resolve, 1000));
+		const imgs = vm.$el.querySelectorAll('[date-test="tab-image"]');
+		expect(imgs.length).toBe(4);
+	})
+
+	test("showSubtitle", async () => {
+		const vm = createVue({
+			components: { "ste-tabs": Tabs, "ste-tab": Tab },
+			template: `<ste-tabs ref="tabs" :showSubtitle="true">
+				<ste-tab v-for="(item, index) in list" :key="index" :title="item.title" :index="index" >
+					<view>{{ item.title }}内容</view>
+					<image style="width: 100%; height: 300px" :src="item.content" />
+				</ste-tab>
+			</ste-tabs>`,
+			data() {
+				return { list }
+			}
+		}, true)
+		await new Promise(resolve => setTimeout(resolve, 1000));
+		const subtitles = vm.$el.querySelectorAll('[data-test="tab-sub-title"]');
+		expect(subtitles.length).toBe(4);
+	})
+
+	test("color", async () => {
+		const vm = createVue({
+			components: { "ste-tabs": Tabs, "ste-tab": Tab },
+			template: `<ste-tabs ref="tabs" color="#f00">
+				<ste-tab v-for="(item, index) in list" :key="index" :title="item.title" :index="index" >
+					<view>{{ item.title }}内容</view>
+					<image style="width: 100%; height: 300px" :src="item.content" />
+				</ste-tab>
+			</ste-tabs>`,
+			data() {
+				return { list }
+			}
+		}, true)
+		await new Promise(resolve => setTimeout(resolve, 1000));
+		const tabs = vm.$el;
+		expect(tabs.style._values["--tabs-card-background-active"]).toBe('rgba(255,0,0,0.1)');
+	})
+
+	test("background", async () => {
+		const vm = createVue({
+			components: { "ste-tabs": Tabs, "ste-tab": Tab },
+			template: `<ste-tabs ref="tabs" background="#f00">
+				<ste-tab v-for="(item, index) in list" :key="index" :title="item.title" :index="index" >
+					<view>{{ item.title }}内容</view>
+					<image style="width: 100%; height: 300px" :src="item.content" />
+					</ste-tab>
+			</ste-tabs>`,
+			data() {
+				return { list }
+			}
+		})
+		await new Promise(resolve => setTimeout(resolve, 1000));
+		const bg = vm.$refs.tabs.cmpListBackground.backgroundColor;
+		expect(bg).toBe('#f00');
+	})
+
+	test("titleColor and activeTitleColor", async () => {
+		const vm = createVue({
+			components: { "ste-tabs": Tabs, "ste-tab": Tab },
+			template: `<ste-tabs ref="tabs" titleColor="#f00" activeTitleColor="#00f">
+				<ste-tab v-for="(item, index) in list" :key="index" :title="item.title" :index="index" >
+					<view>{{ item.title }}内容</view>
+					<image style="width: 100%; height: 300px" :src="item.content" />
+				</ste-tab>
+			</ste-tabs>`,
+			data() {
+				return { list }
+			}
+		})
+		await new Promise(resolve => setTimeout(resolve, 1000));
+		const style = vm.$refs.tabs.cmpRootStyle;
+		expect(style['--tabs-title-color']).toBe('#f00');
+		expect(style['--tabs-active-title-color']).toBe('#00f');
+	})
+
+	test("el-height", async () => {
+		const vm = createVue({
+			components: { "ste-tabs": Tabs, "ste-tab": Tab },
+			template: `<ste-tabs ref="tabs" titleHeight="90" subTitleHeight="60" subTitleRadius="30" imageWidth="60" imageHeight="60" imageRadius="10">
+				<ste-tab v-for="(item, index) in list" :key="index" :title="item.title" :index="index" >
+					<view>{{ item.title }}内容</view>
+					<image style="width: 100%; height: 300px" :src="item.content" />
+				</ste-tab>
+			</ste-tabs>`,
+			data() {
+				return { list }
+			}
+		})
+		await new Promise(resolve => setTimeout(resolve, 1000));
+		const style = vm.$refs.tabs.cmpRootStyle;
+		expect(style['--tabs-title-height']).toBe('45px');
+		expect(style['--tabs-sub-title-height']).toBe('30px');
+		expect(style['--tabs-sub-title-radius']).toBe('15px');
+		expect(style['--tabs-image-width']).toBe('30px');
+		expect(style['--tabs-image-height']).toBe('30px');
+		expect(style['--tabs-image-radius']).toBe('5px');
+	})
+
+	test("active", async () => {
+		expect(wrapper.props().active).toBe(0);
+	})
+	test("type", async () => {
+		expect(wrapper.props().type).toBe('line');
+	})
+	test("radius", () => {
+		expect(wrapper.props().radius).toBe(0);
+	})
+	test("titleColor", () => {
+		expect(wrapper.props().titleColor).toBe('#000000');
+	})
+	test("activeTitleColor", () => {
+		expect(wrapper.props().activeTitleColor).toBe('#000000');
+	})
+	test("titleHeight", () => {
+		expect(wrapper.props().titleHeight).toBe(48);
+	})
+	test("subTitleHeight", () => {
+		expect(wrapper.props().subTitleHeight).toBe(42);
+	})
+	test("imageBorderWidth", () => {
+		expect(wrapper.props().imageBorderWidth).toBe(4);
+	})
+	test("showGapLine", () => {
+		expect(wrapper.props().showGapLine).toBe(false);
+	})
+	test("lock", () => {
+		expect(wrapper.props().lock).toBe(false);
+	})
+
+	test("disabled", () => {
+		expect(wrapper.props().disabled).toBe(false);
+	})
+
+	test("pullDown", () => {
+		expect(wrapper.props().pullDown).toBe(false);
+	})
+
+	test("placeholder", () => {
+		expect(wrapper.props().placeholder).toBe("请选择");
+	})
+
+	test("maskTop", () => {
+		expect(wrapper.props().maskTop).toBe(0);
+	})
+
+	test("maskBottom", () => {
+		expect(wrapper.props().maskBottom).toBe(0)
+	})
+	test("maskRight", () => {
+		expect(wrapper.props().maskRight).toBe(0)
+	})
+	test("maskLeft", () => {
+		expect(wrapper.props().maskLeft).toBe(0)
+	})
+	test("maskZindex", () => {
+		expect(wrapper.props().maskZindex).toBe(1001)
+	})
+});

package/test/components/text.test.js

@@ -0,0 +1,17 @@
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import steText from '../../uni_modules/stellar-ui/components/ste-text/ste-text.vue';
+
+describe('Test Text', () => {
+	test('text', async () => {
+		const text = 'Stellar UI，全面的组件和便捷的工具会让您信手拈来，如鱼得水';
+		const wrapper = mount(steText, {
+			slots: {
+				default: text,
+			},
+		});
+
+		const rootEl = wrapper.get('.ste-text-root');
+		expect(rootEl.text()).toBe(text);
+	});
+});