refactor: 确立独立子工程架构 (backend, admin, mpuniapp) 并同步更新 AGENTS.md 规范
这个提交包含在：
wikiboss
@@ -0,0 +1,113 @@
|
||||
const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
|
||||
const isMP = platformInfo.startsWith('mp')
|
||||
const isWeb = platformInfo.startsWith('web')
|
||||
|
||||
function getData(key = '') {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
const data = await page.data('data')
|
||||
resolve(key ? data[key] : data)
|
||||
})
|
||||
}
|
||||
|
||||
describe('Progress.uvue', () => {
|
||||
let page
|
||||
beforeAll(async () => {
|
||||
page = await program.reLaunch('/pages/component/progress/progress')
|
||||
await page.waitFor(2000);
|
||||
})
|
||||
|
||||
async function setPageData(newData) {
|
||||
return await page.setData({ data: newData });
|
||||
}
|
||||
|
||||
beforeEach(async () => {
|
||||
await page.callMethod('setEventCallbackNumTest', 0)
|
||||
})
|
||||
|
||||
|
||||
it('percent', async () => {
|
||||
await page.callMethod('setProgress')
|
||||
await page.waitFor(1000);
|
||||
const p = await page.$('.p')
|
||||
expect(await p.attribute('percent')).toEqual(20 + '')
|
||||
const p1 = await page.$('.p1')
|
||||
expect(await p1.attribute('percent')).toEqual(40 + '')
|
||||
const p2 = await page.$('.p2')
|
||||
expect(await p2.attribute('percent')).toEqual(60 + '')
|
||||
const p3 = await page.$('.p3')
|
||||
expect(await p3.attribute('percent')).toEqual(80 + '')
|
||||
if (process.env.UNI_PLATFORM === 'app-android') {
|
||||
expect(await getData('curPercent')).toEqual(20)
|
||||
}
|
||||
await page.callMethod('clearProgress')
|
||||
await page.waitFor(1000)
|
||||
expect(await p.attribute('percent')).toEqual(0 + '')
|
||||
expect(await p1.attribute('percent')).toEqual(0 + '')
|
||||
expect(await p2.attribute('percent')).toEqual(0 + '')
|
||||
expect(await p3.attribute('percent')).toEqual(0 + '')
|
||||
if (process.env.UNI_PLATFORM === 'app-android') {
|
||||
expect(await getData('curPercent')).toEqual(0)
|
||||
}
|
||||
})
|
||||
it('length', async () => {
|
||||
const elements = await page.$$('.progress')
|
||||
expect(elements.length).toBe(4)
|
||||
})
|
||||
if(isMP) {
|
||||
it('show-info', async () => {
|
||||
const el = await page.$('.p')
|
||||
expect(await el.property('showInfo')).toEqual(true)
|
||||
await setPageData({showInfo: false})
|
||||
expect(await el.property('showInfo')).toEqual(false)
|
||||
})
|
||||
} else {
|
||||
it('show-info', async () => {
|
||||
const el = await page.$('.p')
|
||||
expect(await el.attribute('show-info')).toEqual(true + '')
|
||||
await setPageData({showInfo: false})
|
||||
expect(await el.attribute('show-info')).toEqual(false + '')
|
||||
})
|
||||
}
|
||||
it('border-radius', async () => {
|
||||
const el = await page.$('.p')
|
||||
expect(await el.attribute('border-radius')).toEqual(0 + '')
|
||||
await setPageData({borderRadius: 5})
|
||||
expect(await el.attribute('border-radius')).toEqual(5 + '')
|
||||
})
|
||||
it('font-size', async () => {
|
||||
const el = await page.$('.p')
|
||||
expect(await el.attribute('font-size')).toEqual(16 + '')
|
||||
await setPageData({fontSize: 18})
|
||||
expect(await el.attribute('font-size')).toEqual(18 + '')
|
||||
})
|
||||
it('stroke-width', async () => {
|
||||
const el = await page.$('.p')
|
||||
expect(await el.attribute('stroke-width')).toEqual(3 + '')
|
||||
await setPageData({strokeWidth: 6})
|
||||
expect(await el.attribute('stroke-width')).toEqual(6 + '')
|
||||
if(isWeb) {
|
||||
await setPageData({strokeWidth: '10px'})
|
||||
expect(await el.attribute('stroke-width')).toEqual('10px')
|
||||
await setPageData({strokeWidth: '30rpx'})
|
||||
expect(await el.attribute('stroke-width')).toEqual('30rpx')
|
||||
}
|
||||
})
|
||||
it('backgroundColor', async () => {
|
||||
const el = await page.$('.p')
|
||||
expect(await el.attribute('background-color')).toEqual('#EBEBEB')
|
||||
await setPageData({backgroundColor: "#007aff"})
|
||||
expect(await el.attribute('background-color')).toEqual('#007aff')
|
||||
})
|
||||
it('trigger UniProgressActiveendEvent', async () => {
|
||||
if (isWeb || isMP) {
|
||||
expect(1).toBe(1)
|
||||
return
|
||||
}
|
||||
|
||||
await setPageData({pgList: [21, 40, 60, 80]})
|
||||
// 动画执行
|
||||
await page.waitFor(1000);
|
||||
const eventCallbackNum = await page.callMethod('getEventCallbackNum')
|
||||
expect(eventCallbackNum).toBe(3)
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,174 @@
|
||||
<script setup lang="uts">
|
||||
import { state, setEventCallbackNum } from '@/store/index.uts'
|
||||
import { ItemType } from '@/components/enum-data/enum-data-types'
|
||||
|
||||
type DataType = {
|
||||
title: string;
|
||||
pgList: number[];
|
||||
curPercent: number;
|
||||
showInfo: boolean;
|
||||
borderRadius: number;
|
||||
fontSize: number;
|
||||
strokeWidth: number;
|
||||
backgroundColor: string;
|
||||
// 组件属性 autotest
|
||||
active_boolean: boolean;
|
||||
show_info_boolean: boolean;
|
||||
duration_input: number;
|
||||
percent_input: number;
|
||||
stroke_width_input: number;
|
||||
activeColor_input: string;
|
||||
backgroundColor_input: string;
|
||||
active_mode_enum: ItemType[];
|
||||
active_mode_enum_current: number;
|
||||
}
|
||||
|
||||
// 使用reactive包装数据，避免ref数据在自动化测试中无法获取的问题
|
||||
const data = reactive({
|
||||
title: 'progress',
|
||||
pgList: [0, 0, 0, 0] as number[],
|
||||
curPercent: 0,
|
||||
showInfo: true,
|
||||
borderRadius: 0,
|
||||
fontSize: 16,
|
||||
strokeWidth: 3,
|
||||
backgroundColor: '#EBEBEB',
|
||||
// 组件属性 autotest
|
||||
active_boolean: false,
|
||||
show_info_boolean: false,
|
||||
duration_input: 30,
|
||||
percent_input: 0,
|
||||
stroke_width_input: 6,
|
||||
activeColor_input: "#09BB07",
|
||||
backgroundColor_input: "#EBEBEB",
|
||||
active_mode_enum: [{ "value": 0, "name": "backwards" }, { "value": 1, "name": "forwards" }] as ItemType[],
|
||||
active_mode_enum_current: 0
|
||||
} as DataType)
|
||||
|
||||
// 自动化测试
|
||||
const getEventCallbackNum = () : number => {
|
||||
return state.eventCallbackNum
|
||||
}
|
||||
// 自动化测试
|
||||
const setEventCallbackNumTest = (num : number) => {
|
||||
setEventCallbackNum(num)
|
||||
}
|
||||
|
||||
const setProgress = () => {
|
||||
data.pgList = [20, 40, 60, 80] as number[]
|
||||
}
|
||||
const clearProgress = () => {
|
||||
data.pgList = [0, 0, 0, 0] as number[]
|
||||
}
|
||||
const activeend = (e : UniProgressActiveendEvent) => {
|
||||
// 自动化测试
|
||||
if ((e.target?.tagName ?? '').includes('PROGRESS')) {
|
||||
setEventCallbackNumTest(state.eventCallbackNum + 1)
|
||||
}
|
||||
if (e.type === 'activeend') {
|
||||
setEventCallbackNumTest(state.eventCallbackNum + 2)
|
||||
}
|
||||
data.curPercent = e.detail.curPercent
|
||||
}
|
||||
const progress_touchstart = () => { console.log("手指触摸动作开始") }
|
||||
const progress_touchmove = () => { console.log("手指触摸后移动") }
|
||||
const progress_touchcancel = () => { console.log("手指触摸动作被打断，如来电提醒，弹窗") }
|
||||
const progress_touchend = () => { console.log("手指触摸动作结束") }
|
||||
const progress_tap = () => { console.log("手指触摸后马上离开") }
|
||||
const change_active_boolean = (checked : boolean) => { data.active_boolean = checked }
|
||||
const change_show_info_boolean = (checked : boolean) => { data.show_info_boolean = checked }
|
||||
const confirm_duration_input = (value : number) => { data.duration_input = value }
|
||||
const confirm_percent_input = (value : number) => { data.percent_input = value }
|
||||
const confirm_stroke_width_input = (value : number) => { data.stroke_width_input = value }
|
||||
const confirm_activeColor_input = (value : string) => { data.activeColor_input = value }
|
||||
const confirm_backgroundColor_input = (value : string) => { data.backgroundColor_input = value }
|
||||
const radio_change_active_mode_enum = (checked : number) => { data.active_mode_enum_current = checked }
|
||||
|
||||
defineExpose({
|
||||
data,
|
||||
getEventCallbackNum,
|
||||
setEventCallbackNumTest,
|
||||
setProgress,
|
||||
clearProgress,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="main">
|
||||
<progress :duration="data.duration_input" :percent="data.percent_input" :show-info="data.show_info_boolean"
|
||||
:stroke-width="data.stroke_width_input" :activeColor="data.activeColor_input" :backgroundColor="data.backgroundColor_input"
|
||||
:active="data.active_boolean" :active-mode="data.active_mode_enum[data.active_mode_enum_current].name"
|
||||
@touchstart="progress_touchstart" @touchmove="progress_touchmove" @touchcancel="progress_touchcancel"
|
||||
@touchend="progress_touchend" @tap="progress_tap" style="width: 80%">
|
||||
</progress>
|
||||
</view>
|
||||
|
||||
<scroll-view style="flex: 1">
|
||||
<view class="content">
|
||||
<page-head title="组件属性"></page-head>
|
||||
<boolean-data :defaultValue="false" title="进度条从左往右的动画" @change="change_active_boolean"></boolean-data>
|
||||
<boolean-data :defaultValue="false" title="在进度条右侧显示百分比" @change="change_show_info_boolean"></boolean-data>
|
||||
<input-data defaultValue="30" title="进度增加1%所需毫秒数" type="number" @confirm="confirm_duration_input"></input-data>
|
||||
<input-data defaultValue="0" title="百分比0~100" type="number" @confirm="confirm_percent_input"></input-data>
|
||||
<input-data defaultValue="6" title="进度条线的宽度，单位px" type="number"
|
||||
@confirm="confirm_stroke_width_input"></input-data>
|
||||
<input-data defaultValue="#09BB07" title="已选择的进度条的颜色" type="text"
|
||||
@confirm="confirm_activeColor_input"></input-data>
|
||||
<input-data defaultValue="#EBEBEB" title="未选择的进度条的颜色" type="text"
|
||||
@confirm="confirm_backgroundColor_input"></input-data>
|
||||
<enum-data :items="data.active_mode_enum" title="backwards: 动画从头播；forwards：动画从上次结束点接着播"
|
||||
@change="radio_change_active_mode_enum"></enum-data>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<page-head title="默认及使用"></page-head>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="progress-box">
|
||||
<progress :percent="data.pgList[0]" :active="true" :border-radius="data.borderRadius" :show-info="data.showInfo"
|
||||
:font-size="data.fontSize" :stroke-width="data.strokeWidth" :background-color="data.backgroundColor" class="progress p"
|
||||
@activeend="activeend" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="data.pgList[1]" :stroke-width="3" class="progress p1" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="data.pgList[2]" :stroke-width="3" class="progress p2" />
|
||||
</view>
|
||||
<view class="progress-box">
|
||||
<progress :percent="data.pgList[3]" activeColor="#10AEFF" :stroke-width="3" class="progress p3" />
|
||||
</view>
|
||||
<view class="progress-control">
|
||||
<button type="primary" @click="setProgress" class="button">
|
||||
设置进度
|
||||
</button>
|
||||
<button type="warn" @click="clearProgress" class="button">
|
||||
清除进度
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<navigator class="uni-common-mb" url="/pages/template/progress-100/progress-100">
|
||||
<button>组件性能测试</button>
|
||||
</navigator>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.main {
|
||||
max-height: 250px;
|
||||
padding: 5px 0;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.progress-box {
|
||||
height: 25px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
在新工单中引用
屏蔽一个用户