Merge pull request #818 from Tencent/test/overlay/unit

test(overlay): add unit test

src/overlay/README.md

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

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

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`overlay :base 1`] = `
+<main>
+  <t-overlay>
+    <wx-view
+      class="t-overlay t-fade-enter t-fade-enter-active"
+      style="z-index: 11000;  "
+      bind:tap="handleClick"
+      catch:touchmove="noop"
+      bind:transitionend="onTransitionEnd"
+    />
+  </t-overlay>
+</main>
+`;

src/overlay/__test__/index.test.js

@@ -0,0 +1,61 @@
+import simulate from 'miniprogram-simulate';
+import path from 'path';
+
+describe('overlay', () => {
+  const overlay = simulate.load(path.resolve(__dirname, `../overlay`), 't-overlay', {
+    less: true,
+    rootPath: path.resolve(__dirname, '../..'),
+  });
+
+  it(':base', () => {
+    const id = simulate.load({
+      template: `<t-overlay visible></t-overlay>`,
+      usingComponents: {
+        't-overlay': overlay,
+      },
+    });
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    expect(comp.toJSON()).toMatchSnapshot();
+  });
+
+  it(':event', async () => {
+    const handleClick = jest.fn();
+    const id = simulate.load({
+      template: `<t-overlay id="overlay" visible="{{true}}" bind:click="handleClick"></t-overlay>`,
+      methods: {
+        handleClick,
+      },
+      usingComponents: {
+        't-overlay': overlay,
+      },
+    });
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const $overlay = comp.querySelector('#overlay >>> .t-overlay');
+
+    $overlay.dispatchEvent('tap');
+    $overlay.dispatchEvent('touchmove');
+
+    await simulate.sleep();
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it(':background', async () => {
+    const id = simulate.load({
+      template: `<t-overlay id="overlay" visible="{{true}}" backgroundColor="blue"></t-overlay>`,
+      usingComponents: {
+        't-overlay': overlay,
+      },
+    });
+    const comp = simulate.render(id);
+    comp.attach(document.createElement('parent-wrapper'));
+
+    const $overlay = comp.querySelector('#overlay >>> .t-overlay');
+
+    expect($overlay.dom.style.backgroundColor).toBe('blue');
+  });
+});

src/overlay/overlay.ts

@@ -45,7 +45,7 @@ export default class Overlay extends SuperComponent {
   observers = {
     backgroundColor(v) {
       this.setData({
-        computedStyle: `; background-color: ${v}`,
+        computedStyle: `background-color: ${v};`,
       });
     },
   };