test(Textarea): add unit test for textarea (#774)

src/textarea/README.md

@@ -5,6 +5,7 @@ spline: form
 isComponent: true
 ---
 
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-90%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-57%25-red" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-90%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-92%25-blue" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

src/textarea/__test__/__snapshots__/index.test.js.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`textarea slots : label 1`] = `
+<t-textarea
+  class="base"
+>
+  <wx-view
+    class="t-textarea t-class"
+  >
+    <wx-view
+      class="t-textarea__name t-class-label"
+    >
+      <wx-text
+        slot="label"
+      >
+        标签文字
+      </wx-text>
+    </wx-view>
+    <wx-view
+      class="t-textarea__wrapper"
+    >
+      <wx-textarea
+        adjustPosition="{{true}}"
+        autoFocus="{{false}}"
+        autoHeight="{{false}}"
+        class="t-textarea__wrapper-textarea t-class-textarea"
+        confirmHold="{{false}}"
+        confirmType="done"
+        cursorSpacing="{{0}}"
+        disabled="{{false}}"
+        focus="{{false}}"
+        maxlength="{{-1}}"
+        placeholder=""
+        placeholderClass="t-textarea__placeholder"
+        value=""
+        bind:blur="onBlur"
+        bind:confirm="onConfirm"
+        bind:focus="onFocus"
+        bind:input="onInput"
+        bind:linechange="onLineChange"
+      />
+    </wx-view>
+  </wx-view>
+</t-textarea>
+`;

src/textarea/__test__/index.test.js

@@ -0,0 +1,146 @@
+import simulate from 'miniprogram-simulate';
+import path from 'path';
+
+describe('textarea', () => {
+  const textarea = simulate.load(path.resolve(__dirname, `../textarea`), 't-textarea', {
+    less: true,
+    rootPath: path.resolve(__dirname, '../..'),
+  });
+
+  describe('props', () => {
+    it(': label', () => {
+      const id = simulate.load({
+        template: `<t-textarea
+        class="base"
+        value="{{value}}"
+        label="{{label}}"
+        ></t-textarea>`,
+        data: {
+          value: 'textarea content',
+          label: '标签文字',
+        },
+        usingComponents: {
+          't-textarea': textarea,
+        },
+      });
+      const comp = simulate.render(id);
+      comp.attach(document.createElement('parent-wrapper'));
+      const component = comp.querySelector('.base');
+
+      const $label = comp.querySelector('.base >>> .t-textarea__name');
+      expect($label).toBeDefined();
+      expect($label.dom.textContent).toBe(component.instance.data.label);
+    });
+
+    it(': maxcharacter', async () => {
+      const handleChange = jest.fn();
+      const id = simulate.load({
+        template: `<t-textarea
+        class="base"
+        maxcharacter="{{maxcharacter}}"
+        value="{{value}}"
+        bind:change="handleChange"
+        >
+        </t-textarea>`,
+        data: {
+          maxcharacter: 10,
+          value: 'tdesign',
+        },
+        methods: {
+          handleChange,
+        },
+        usingComponents: {
+          't-textarea': textarea,
+        },
+      });
+      const comp = simulate.render(id);
+      comp.attach(document.createElement('parent-wrapper'));
+      const component = comp.querySelector('.base');
+      expect(component.instance.data.count).toBe(7);
+
+      const $textarea = comp.querySelector('.base >>> .t-textarea__wrapper-textarea');
+
+      $textarea.dispatchEvent('input', { detail: { value: 'tdesign123' } });
+      await simulate.sleep(0);
+      expect(handleChange).toHaveBeenCalledTimes(1);
+      expect(component.instance.data.count).toBe(10);
+
+      $textarea.dispatchEvent('input', { detail: { value: 'textarea用于多行文本信息输入' } });
+      await simulate.sleep(0);
+      expect(handleChange).toHaveBeenCalledTimes(2);
+      expect(component.instance.data.count).toBe(10);
+      expect(handleChange.mock.calls[1][0].detail).toStrictEqual({
+        value: 'textarea用于多行文本信息输入',
+      });
+
+      $textarea.dispatchEvent('textarea', { detail: { value: 'textarea用于567' } });
+      await simulate.sleep(0);
+      expect(component.instance.data.count).toBe(10);
+    });
+  });
+
+  describe('slots', () => {
+    it(': label', () => {
+      const id = simulate.load({
+        template: `
+        <t-textarea class="base">
+          <text slot="label">标签文字</text>
+        </t-textarea>`,
+        usingComponents: {
+          't-textarea': textarea,
+        },
+      });
+      const comp = simulate.render(id);
+      comp.attach(document.createElement('parent-wrapper'));
+      const component = comp.querySelector('.base');
+      expect(component).toMatchSnapshot();
+
+      const $label = comp.querySelector('.base >>> .t-textarea__name');
+      expect($label.dom.textContent).toBe('标签文字');
+      //
+    });
+  });
+
+  describe('event', () => {
+    it(': line-change', async () => {
+      const handleLineChange = jest.fn();
+      const id = simulate.load({
+        template: `<t-textarea
+        class="base"
+        maxcharacter="{{maxcharacter}}"
+        value="{{value}}"
+        bind:lineChange="handleLineChange"
+        >
+        </t-textarea>`,
+        data: {
+          maxcharacter: 10,
+          value: 'tdesign',
+        },
+        methods: {
+          handleLineChange,
+        },
+        usingComponents: {
+          't-textarea': textarea,
+        },
+      });
+      const comp = simulate.render(id);
+      comp.attach(document.createElement('parent-wrapper'));
+      const component = comp.querySelector('.base');
+      expect(component.instance.data.count).toBe(7);
+
+      const $textarea = comp.querySelector('.base >>> .t-textarea__wrapper-textarea');
+
+      $textarea.dispatchEvent('linechange', {
+        detail: {
+          value: '指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离',
+        },
+      });
+      await simulate.sleep(0);
+      expect(handleLineChange).toHaveBeenCalledTimes(1);
+      expect(handleLineChange.mock.calls[0][0].detail).toStrictEqual({
+        value: '指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离',
+      });
+      // expect(component.instance.data.count).toBe(10);
+    });
+  });
+});

src/textarea/textarea.ts

@@ -40,6 +40,13 @@ export default class Textarea extends SuperComponent {
     maxchars: -1,
   };
 
+  lifetimes = {
+    ready() {
+      const { value } = this.properties;
+      this.updateValue(value);
+    },
+  };
+
   methods = {
     updateValue(value) {
       const { maxcharacter } = this.properties;