From 92aa6620bcfb373e00d197c2838e8d1cfcb36611 Mon Sep 17 00:00:00 2001 From: qinwencheng <157475034@qq.com> Date: Wed, 24 Aug 2022 23:19:09 +0800 Subject: [PATCH 1/3] test(switch): test color prop --- .../devui/switch/__tests__/switch.spec.ts | 33 ++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/packages/devui-vue/devui/switch/__tests__/switch.spec.ts b/packages/devui-vue/devui/switch/__tests__/switch.spec.ts index f0d0556155..96da8eed1f 100644 --- a/packages/devui-vue/devui/switch/__tests__/switch.spec.ts +++ b/packages/devui-vue/devui/switch/__tests__/switch.spec.ts @@ -141,5 +141,36 @@ describe('d-switch', () => { expect(wrapper.classes()).not.toContain(checkedClass); }); - it.todo('props color work well.'); + it('switch color work', async () => { + const checked = ref(false); + const wrapper = mount({ + components: { DSwitch }, + template: ` + + `, + setup() { + return { + checked, + }; + }, + }); + + expect(wrapper.classes()).toContain(baseClass); + expect(wrapper.classes()).not.toContain(checkedClass); + expect(wrapper.vm.$el.style.getPropertyValue('background-color')).not.toBe('pink'); + expect(wrapper.vm.$el.style.getPropertyValue('border-color')).not.toBe('pink'); + + checked.value = true; + + await nextTick(); + + expect(wrapper.vm.$el.style.getPropertyValue('background-color')).toBe('pink'); + expect(wrapper.vm.$el.style.getPropertyValue('border-color')).toBe('pink'); + + await wrapper.setProps({ + color: 'green', + }); + expect(wrapper.vm.$el.style.getPropertyValue('background-color')).toBe('green'); + expect(wrapper.vm.$el.style.getPropertyValue('border-color')).toBe('green'); + }); }); From 5304644076b6ec38c92ba566055a908a7a21aa00 Mon Sep 17 00:00:00 2001 From: qinwencheng <157475034@qq.com> Date: Thu, 25 Aug 2022 23:46:13 +0800 Subject: [PATCH 2/3] =?UTF-8?q?test(checkbox):=20=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E5=AF=B9=E9=A2=9C=E8=89=B2=E5=B1=9E=E6=80=A7=E7=9A=84=E6=B5=8B?= =?UTF-8?q?=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/checkbox/__tests__/checkbox.spec.ts | 41 ++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/packages/devui-vue/devui/checkbox/__tests__/checkbox.spec.ts b/packages/devui-vue/devui/checkbox/__tests__/checkbox.spec.ts index 843ec520ca..4d033898dc 100644 --- a/packages/devui-vue/devui/checkbox/__tests__/checkbox.spec.ts +++ b/packages/devui-vue/devui/checkbox/__tests__/checkbox.spec.ts @@ -9,6 +9,7 @@ const noAnimationClass = ns.m('no-animation'); const defaultBgClass = ns.e('default-background'); const borderClass = ns.m('bordered'); const sizeLgClass = ns.m('lg'); +const materialClass = ns.e('material'); describe('checkbox', () => { it('checkbox render work', async () => { @@ -185,5 +186,43 @@ describe('checkbox', () => { expect(wrapper.find(sizeLgClass).exists()).toBe(true); }); - it.todo('props color work well.'); + it('checkbox color work', async () => { + const checked = ref(false); + const wrapper = mount({ + components: { DCheckbox }, + template: ` + + 666 + `, + setup() { + return { + checked, + }; + }, + }); + let element = wrapper.find(materialClass).element as HTMLElement; + expect(element.style.borderColor).not.toBe('pink'); + checked.value = true; + await nextTick(); + element = wrapper.find(materialClass).element as HTMLElement; + expect(element.style.borderColor).toBe('pink'); + // 根据源码，这里面将不会设置它的backgroundColor + expect(element.style.backgroundColor).not.toBe('pink'); + // 找不到backgroundImage属性 + // expect(element.style.backgroundImage).toBe('pink'); + wrapper.setProps({ + halfChecked: true, + }); + await nextTick(); + element = wrapper.find(materialClass).element as HTMLElement; + + expect(element.style.borderColor).toBe('pink'); + // 找不到backgroundImage属性 + // expect(element.style.backgroundImage).toBe('linear-gradient(pink, pink)'); // can't find backgroundImage + expect(element.style.backgroundColor).toBe('pink'); + }); }); From 6d2467aeece51340df24e156812ccdff31ac4a16 Mon Sep 17 00:00:00 2001 From: qinwencheng <157475034@qq.com> Date: Thu, 8 Sep 2022 00:13:48 +0800 Subject: [PATCH 3/3] =?UTF-8?q?docs(time-select):=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E6=96=87=E6=A1=A3=EF=BC=8C=E7=A4=BA=E4=BE=8B=E6=9B=B4=E5=8F=8B?= =?UTF-8?q?=E5=A5=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/components/time-select/index.md | 117 +++++++++++++----- 1 file changed, 85 insertions(+), 32 deletions(-) diff --git a/packages/devui-vue/docs/components/time-select/index.md b/packages/devui-vue/docs/components/time-select/index.md index 5f0ec21d69..e00f2dad86 100644 --- a/packages/devui-vue/docs/components/time-select/index.md +++ b/packages/devui-vue/docs/components/time-select/index.md @@ -19,17 +19,11 @@
step
-
min-time、max-time
- - -
min-time、max-time、start、end
- -
disabled
- +
不可清除
- + @@ -39,15 +33,13 @@ export default defineComponent({ setup(props, ctx) { let time00 = ref(''); let time01 = ref(''); - let time02 = ref('03:30'); + let time02 = ref('09:30'); let time03 = ref('09:30'); - let time04 = ref('09:30'); return { time00, time01, time02, time03, - time04, }; }, }); @@ -62,21 +54,76 @@ export default defineComponent({ ::: -### 固定时间范围 +### 尺寸 + +:::demo + +```vue + + + + + +``` + +::: + +### 时间段 :::demo ```vue @@ -84,9 +131,15 @@ export default defineComponent({ import { ref, defineComponent, nextTick } from 'vue'; export default defineComponent({ setup(props, ctx) { + let time01 = ref(''); + let time02 = ref(''); + let time03 = ref('09:30'); let startTime = ref(''); let endTime = ref(''); return { + time01, + time02, + time03, startTime, endTime, }; @@ -148,18 +201,18 @@ export default defineComponent({ ### TimeSelect 参数 -| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | -| ----------- | --------------------------- | ------------ | ---------------- | --------------------- | -| v-model | string | -- | 选中项绑定值 | [基本用法](#基本用法) | -| disabled | boolean | false | 禁用状态 | [基本用法](#基本用法) | -| size | [ITimeSelect](#itimeselect) | md | 输入框尺寸 | -- | -| placeholder | string | '请选择时间' | 占位内容 | [基本用法](#基本用法) | -| min-time | string | '00:00' | 可选，最早时间点 | [基本用法](#基本用法) | -| max-time | string | '24:00' | 可选，最晚时间点 | [基本用法](#基本用法) | -| start | string | '00:00' | 可选，开始时间 | [基本用法](#基本用法) | -| end | string | '24:00' | 可选，结束时间 | [基本用法](#基本用法) | -| step | string | '00:30' | 可选，间隔时间 | [基本用法](#基本用法) | -| clearable | boolean | true | 可选，是否可清除 | [基本用法](#基本用法) | +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | +| ----------- | --------------------------- | ------------ | ----------------------------------------- | --------------------- | +| v-model | string | -- | 选中项绑定值 | [基本用法](#基本用法) | +| disabled | boolean | false | 禁用状态 | [基本用法](#基本用法) | +| size | [ITimeSelect](#itimeselect) | md | 输入框尺寸 | [尺寸](#尺寸) | +| placeholder | string | '请选择时间' | 占位内容 | [占位内容](#尺寸) | +| min-time | string | '00:00' | 可选，最早时间点，早于该值的时间段将被禁用 | [时间段](#时间段) | +| max-time | string | '24:00' | 可选，最晚时间点，晚于该值的时间段将被禁用 | [时间段](#时间段) | +| start | string | '00:00' | 可选，开始时间 | [时间段](#时间段) | +| end | string | '24:00' | 可选，结束时间 | [时间段](#时间段) | +| step | string | '00:30' | 可选，间隔时间 | [基本用法](#基本用法) | +| clearable | boolean | true | 可选，是否可清除 | [基本用法](#基本用法) | ### TimeSelect 事件