fix(textarea-item): aync data (didi#658)

EDMZJJJ · Mar 26, 2020 · fc5ba3e · fc5ba3e
1 parent 071db18
commit fc5ba3e
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 7 deletions.
diff --git a/components/textarea-item/demo/cases/demo0.vue b/components/textarea-item/demo/cases/demo0.vue
@@ -14,6 +14,7 @@
         title="自动适应"
         class="example"
         :autosize="true"
+        v-model="value2"
         :rows="1"
         placeholder="最大高度150px"
         :max-height="150"
@@ -62,11 +63,17 @@ export default {
   data() {
     return {
       value: '',
+      value2: '',
     }
   },
   components: {
     [TextareaItem.name]: TextareaItem,
     [Field.name]: Field,
   },
+  mounted() {
+    setTimeout(() => {
+      this.value2 = '异步数据, 高度适应,异步数据, 高度适应,异步数据, 高度适应,异步数据, 高度适应,异步数据, 高度适应,异步数据, 高度适应'
+    }, 1000)
+  },
 }
 </script>

diff --git a/components/textarea-item/index.vue b/components/textarea-item/index.vue
@@ -122,7 +122,9 @@ export default {
   watch: {
     value(val) {
       this.inputValue = val
-      this.resizeTextarea()
+      this.$nextTick(() => {
+        this.resizeTextarea()
+      })
     },
     inputValue(val) {
       this.$emit('input', val)

diff --git a/components/textarea-item/test/index.spec.js b/components/textarea-item/test/index.spec.js
@@ -44,20 +44,60 @@ describe('TextareaItem - Operation', () => {
     triggerEvent(textarea, 'keyup', 0, 0, 49)
     triggerEvent(textarea, 'blur', 0, 0)
 
+    expect(textarea.style.height).toBe('342px')
+  })
+
+  test('test async data', done => {
+    wrapper = mount(TextareaItem, {
+      propsData: {
+        maxHeight: 300,
+        maxLength: 10,
+        autosize: true,
+        value: '',
+      },
+    })
+    wrapper.setProps({maxHeight: '200'})
+    const textarea = wrapper.vm.$refs.textarea
+
     // 测试高度适应
     // scrollHeight 总是0, 很难模拟到srollHeight的计算过程
     // https://github.com/testing-library/react-testing-library/issues/353
-    Object.defineProperty(HTMLTextAreaElement.prototype, 'scrollHeight', {configurable: true, value: 30})
+
+    // 模拟本来高度342
+    textarea.style.height = '342px'
+    // 模拟数据异步更新
+    Object.defineProperty(HTMLTextAreaElement.prototype, 'scrollHeight', {configurable: true, value: 300})
     wrapper.setProps({value: '123'})
-    expect(textarea.style.height).toBe('30px')
+    // 验证最终的高度, 以最大高度为准
+    setTimeout(() => {
+      expect(textarea.style.height).toBe('200px')
+      done()
+    }, 100)
+  })
+
+  test('test textarea not display', done => {
+    wrapper = mount(TextareaItem, {
+      propsData: {
+        maxHeight: 300,
+        maxLength: 10,
+        autosize: true,
+        value: '',
+      },
+    })
 
-    wrapper.setProps({maxHeight: '20'})
-    expect(textarea.style.height).toBe('20px')
+    const textarea = wrapper.vm.$refs.textarea
 
-    // 当scrollHeight为0时, 不改变textarea的高度
+    // 模拟本来高度342
+    textarea.style.height = '342px'
+    // 模拟textarea还没有显示, scrollHeight==0
     Object.defineProperty(HTMLTextAreaElement.prototype, 'scrollHeight', {configurable: true, value: 0})
     wrapper.setProps({value: '123'})
-    expect(textarea.style.height).toBe('20px')
+
+    setTimeout(() => {
+      // 现实中是不会改变高度
+      expect(textarea.style.height).toBe('auto')
+      done()
+    }, 100)
   })
 
   test('focus and blur', done => {