fix(ui/input select): 修复了input select的label居中问题完成layout skeleton的单元测试

affects: @varlet/cli, @varlet/ui
varletjs · Apr 29, 2021 · b9502f9 · b9502f9
1 parent 9a97c2b
commit b9502f9
Show file tree

Hide file tree

Showing 14 changed files with 433 additions and 22 deletions.
diff --git a/packages/varlet-cli/src/commands/create.ts b/packages/varlet-cli/src/commands/create.ts
@@ -40,11 +40,18 @@ export default ${bigCamelize(name)}
 
   const testsTemplate = `\
 import example from '../example'
-import { render } from '@testing-library/vue'
+import ${bigCamelize(name)} from '..'
+import { mount } from '@vue/test-utils'
+import { createApp } from 'vue'
+
+test('test ${camelize(name)} example', () => {
+  const wrapper = mount(example)
+  expect(wrapper.html()).toMatchSnapshot()
+})
 
-test('test ${camelize(name)} example', async () => {
-  const wrapper = render(example)
-  console.log(wrapper)
+test('test ${camelize(name)} plugin', () => {
+  const app = createApp({}).use(${bigCamelize(name)})
+  expect(app.component(${bigCamelize(name)}.name)).toBeTruthy()
 })
 `
 

diff --git a/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap
@@ -154,9 +154,9 @@ exports[`test button example 1`] = `
 </button>"
 `;
 
-exports[`test button size & text & block & round 1`] = `
+exports[`test button styles 1`] = `
 "<button class=\\"var-button var--box var-button--large var--flex var-button--text-default var-button--text var-button--round\\" style=\\"width: 100%;\\">
   <!--v-if-->
-  <div class=\\"var-button__content\\"></div>
+  <div class=\\"var-button__content\\">button text</div>
 </button>"
 `;
diff --git a/packages/varlet-ui/src/button/__tests__/index.spec.js b/packages/varlet-ui/src/button/__tests__/index.spec.js
@@ -14,7 +14,7 @@ test('test button plugin', () => {
   expect(app.component(Button.name)).toBeTruthy()
 })
 
-test('test button click & touchstart', () => {
+test('test button onClick & onTouchstart null callback', () => {
   const wrapper = mount(VarButton)
   wrapper.trigger('click')
   wrapper.trigger('touchstart')
@@ -82,14 +82,17 @@ test('test button color & textColor', () => {
   expect(wrapper.html()).toMatchSnapshot()
 })
 
-test('test button size & text & block & round', () => {
+test('test button styles', () => {
   const wrapper = mount(VarButton, {
     props: {
       size: 'large',
       round: true,
       text: true,
       block: true,
     },
+    slots: {
+      default: () => 'button text',
+    },
   })
 
   expect(wrapper.html()).toMatchSnapshot()

diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
@@ -48,8 +48,11 @@
           @change="handleChange"
         />
         <label
-          class="var-input__placeholder"
-          :class="[computePlaceholderState(), !hint ? 'var-input--placeholder-non-hint' : null]"
+          :class="[
+            textarea ? 'var-input__textarea-placeholder' : 'var-input__placeholder',
+            computePlaceholderState(),
+            !hint ? 'var-input--placeholder-non-hint' : null,
+          ]"
           :for="id"
         >
           {{ placeholder }}

diff --git a/packages/varlet-ui/src/input/docs/en-US.md b/packages/varlet-ui/src/input/docs/en-US.md
@@ -167,7 +167,6 @@ Other values are converted to text as a user prompt.
 | `@input-blur-color` | `#888` |
 | `@input-focus-color` | `@color-primary` |
 | `@input-placeholder-size` | `6px` |
-| `@input-placeholder-offset-top` | `4px` |
 | `@input-textarea-height` | `auto` |
 | `@input-textarea-padding-top` | `8px` |
 | `@input-icon-padding` | `@input-placeholder-size 0 0` |

diff --git a/packages/varlet-ui/src/input/docs/zh-CN.md b/packages/varlet-ui/src/input/docs/zh-CN.md
@@ -166,7 +166,6 @@ createApp().use(Icon)
 | `@input-blur-color` | `#888` |
 | `@input-focus-color` | `@color-primary` |
 | `@input-placeholder-size` | `6px` |
-| `@input-placeholder-offset-top` | `4px` |
 | `@input-textarea-height` | `auto` |
 | `@input-textarea-padding-top` | `8px` |
 | `@input-icon-padding` | `@input-placeholder-size 0 0` |

diff --git a/packages/varlet-ui/src/input/input.less b/packages/varlet-ui/src/input/input.less
@@ -5,7 +5,6 @@
 @input-blur-color: #888;
 @input-focus-color: @color-primary;
 @input-placeholder-size: 16px;
-@input-placeholder-offset-top: 4px;
 @input-textarea-height: auto;
 @input-textarea-padding-top: 8px;
 @input-icon-padding: @input-placeholder-size 0 0;
@@ -54,12 +53,23 @@
   }
 
   &__placeholder {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform-origin: left;
+    transition-property: top, transform;
+    transition-duration: 0.3s;
+    transform: translate(0, calc(-50% + @input-placeholder-size / 2)) scale(1);
+    font-size: @input-placeholder-size;
+  }
+
+  &__textarea-placeholder {
     position: absolute;
     top: 0;
     left: 0;
     transform-origin: left;
     transition: transform 0.3s;
-    transform: translate(0, @input-placeholder-offset-top + @input-placeholder-size) scale(1);
+    transform: translate(0, @input-textarea-padding-top + @input-placeholder-size) scale(1);
     font-size: @input-placeholder-size;
   }
 
@@ -106,7 +116,8 @@
   }
 
   &--placeholder-non-hint {
-    transform: translate(0, @input-placeholder-offset-top) scale(1);
+    top: 50%;
+    transform: translate(0, -50%) scale(1);
   }
 
   &--non-hint {

diff --git a/packages/varlet-ui/src/row/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/row/__tests__/__snapshots__/index.spec.js.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test col in row 1`] = `
+"<div class=\\"var-row var--box\\" style=\\"justify-content: flex-start; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-8 var-col--offset-4\\" style=\\"padding-left: 0px; padding-right: 0px;\\"></div>
+  <div class=\\"var-col var--box var-col--span-12\\" style=\\"padding-left: 0px; padding-right: 0px;\\"></div>
+</div>"
+`;
+
+exports[`test col in row 2`] = `
+"<div class=\\"var-row var--box\\" style=\\"justify-content: flex-start; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-12\\" style=\\"padding-left: 0px; padding-right: 5px;\\"></div>
+  <div class=\\"var-col var--box var-col--span-12\\" style=\\"padding-left: 5px; padding-right: 0px;\\"></div>
+</div>"
+`;
+
+exports[`test row example 1`] = `
+"<div class=\\"app-type\\">栅格系统</div>
+<div class=\\"var-row var--box\\" style=\\"justify-content: flex-start; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+</div>
+<div class=\\"app-type\\">偏移</div>
+<div class=\\"var-row var--box\\" style=\\"justify-content: flex-start; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-16 var-col--offset-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">offset: 8 span: 16</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+</div>
+<div class=\\"app-type\\">对齐</div>
+<div class=\\"var-row var--box\\" style=\\"justify-content: flex-start; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+</div>
+<div class=\\"var-row var--box\\" style=\\"justify-content: center; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+</div>
+<div class=\\"var-row var--box\\" style=\\"justify-content: flex-end; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+</div>
+<div class=\\"var-row var--box\\" style=\\"justify-content: space-around; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+</div>
+<div class=\\"var-row var--box\\" style=\\"justify-content: space-between; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+</div>
+<div class=\\"app-type\\">列间距</div>
+<div class=\\"var-row var--box\\" style=\\"justify-content: flex-start; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+</div>"
+`;
+
+exports[`test row flex 1`] = `"<div class=\\"var-row var--box\\" style=\\"justify-content: flex-start; align-items: flex-start;\\"></div>"`;
+
+exports[`test row flex 2`] = `"<div class=\\"var-row var--box\\" style=\\"justify-content: flex-end; align-items: flex-start;\\"></div>"`;
+
+exports[`test row flex 3`] = `"<div class=\\"var-row var--box\\" style=\\"justify-content: center; align-items: flex-start;\\"></div>"`;
+
+exports[`test row flex 4`] = `"<div class=\\"var-row var--box\\" style=\\"justify-content: space-between; align-items: flex-start;\\"></div>"`;
+
+exports[`test row flex 5`] = `"<div class=\\"var-row var--box\\" style=\\"justify-content: space-around; align-items: flex-start;\\"></div>"`;
+
+exports[`test row flex 6`] = `"<div class=\\"var-row var--box\\" style=\\"justify-content: space-around; align-items: flex-start;\\"></div>"`;
+
+exports[`test row flex 7`] = `"<div class=\\"var-row var--box\\" style=\\"justify-content: space-around; align-items: center;\\"></div>"`;
+
+exports[`test row flex 8`] = `"<div class=\\"var-row var--box\\" style=\\"justify-content: space-around; align-items: flex-end;\\"></div>"`;
diff --git a/packages/varlet-ui/src/row/__tests__/index.spec.js b/packages/varlet-ui/src/row/__tests__/index.spec.js
@@ -0,0 +1,92 @@
+import example from '../example'
+import Row from '..'
+import VarRow from '../Row'
+import Col from '../../col'
+import VarCol from '../../col/Col'
+import { mount } from '@vue/test-utils'
+import { createApp, h } from 'vue'
+
+test('test row example', () => {
+  const wrapper = mount(example)
+  expect(wrapper.html()).toMatchSnapshot()
+})
+
+test('test row plugin', () => {
+  const app = createApp({}).use(Row)
+  expect(app.component(Row.name)).toBeTruthy()
+})
+
+test('test col plugin', () => {
+  const app = createApp({}).use(Col)
+  expect(app.component(Col.name)).toBeTruthy()
+})
+
+test('test row flex', async () => {
+  const wrapper = mount(VarRow)
+
+  await wrapper.setProps({ justify: 'flex-start' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ justify: 'flex-end' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ justify: 'center' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ justify: 'space-between' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ justify: 'space-around' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ align: 'flex-start' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ align: 'center' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ align: 'flex-end' })
+  expect(wrapper.html()).toMatchSnapshot()
+})
+
+test('test row onClick null callback', () => {
+  const wrapper = mount(VarRow)
+  wrapper.trigger('click')
+})
+
+test('test row onClick', () => {
+  const onClick = jest.fn()
+
+  const wrapper = mount(VarRow, {
+    props: {
+      onClick,
+    },
+  })
+  wrapper.trigger('click')
+  expect(onClick).toHaveBeenCalledTimes(1)
+})
+
+test('test col in row', async () => {
+  const wrapper = mount({
+    data: () => ({
+      span: 8,
+      offset: 4,
+    }),
+    render() {
+      return h(
+        VarRow,
+        {
+          gutter: '10px',
+        },
+        () => [h(VarCol, { span: this.span, offset: this.offset }), h(VarCol, { span: 12 })]
+      )
+    },
+  })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setData({
+    span: 12,
+    offset: 0,
+  })
+  expect(wrapper.html()).toMatchSnapshot()
+})
diff --git a/packages/varlet-ui/src/select/docs/en-US.md b/packages/varlet-ui/src/select/docs/en-US.md
@@ -279,7 +279,6 @@ export default {
 | `@select-scroller-padding` | `6px 0` |
 | `@select-scroller-max-height` | `278px` |
 | `@select-placeholder-size` | `16px` |
-| `@select-placeholder-offset-top` | `4px` |
 | `@select-icon-padding` | `@select-placeholder-size 0 0` |
 | `@select-icon-size` | `20px` |
 | `@select-select-text-color` | `#555` |

diff --git a/packages/varlet-ui/src/select/docs/zh-CN.md b/packages/varlet-ui/src/select/docs/zh-CN.md
@@ -277,7 +277,6 @@ export default {
 | `@select-scroller-padding` | `6px 0` |
 | `@select-scroller-max-height` | `278px` |
 | `@select-placeholder-size` | `16px` |
-| `@select-placeholder-offset-top` | `4px` |
 | `@select-icon-padding` | `@select-placeholder-size 0 0` |
 | `@select-icon-size` | `20px` |
 | `@select-select-text-color` | `#555` |

diff --git a/packages/varlet-ui/src/select/select.less b/packages/varlet-ui/src/select/select.less
@@ -9,7 +9,6 @@
 @select-scroller-padding: 6px 0;
 @select-scroller-max-height: 278px;
 @select-placeholder-size: 16px;
-@select-placeholder-offset-top: 4px;
 @select-icon-padding: @select-placeholder-size 0 0;
 @select-icon-size: 20px;
 @select-select-text-color: #555;
@@ -74,11 +73,12 @@
 
   &__placeholder {
     position: absolute;
-    top: 0;
+    top: 50%;
     left: 0;
     transform-origin: left;
-    transition: transform 0.3s;
-    transform: translate(0, @select-placeholder-offset-top + @select-placeholder-size) scale(1);
+    transition-property: top, transform;
+    transition-duration: 0.3s;
+    transform: translate(0, calc(-50% + @select-placeholder-size / 2)) scale(1);
     font-size: @select-placeholder-size;
   }
 
@@ -122,7 +122,8 @@
   }
 
   &--placeholder-non-hint {
-    transform: translate(0, @select-placeholder-offset-top) scale(1);
+    top: 50%;
+    transform: translate(0, -50%) scale(1);
   }
 
   &--non-hint {