Merge pull request #803 from Perisiguiendo/test/skeleton

test(skeleton): add unit test
Tencent · Aug 29, 2022 · dc8ace4 · dc8ace4
2 parents 8e29eae + 2a9ff6c
commit dc8ace4
Show file tree

Hide file tree

Showing 3 changed files with 266 additions and 0 deletions.
diff --git a/src/skeleton/README.md b/src/skeleton/README.md
@@ -5,6 +5,7 @@ spline: data
 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-94%25-blue" /></span>
 ## 引入
 
 全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

diff --git a/src/skeleton/__test__/__snapshots__/index.test.js.snap b/src/skeleton/__test__/__snapshots__/index.test.js.snap
@@ -0,0 +1,160 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`skeleton Props :inner rowCol 1`] = `
+<main>
+  <t-skeleton
+    class="skeleton"
+  >
+    <wx-view
+      class="t-skeleton t-class "
+    >
+      <wx-view
+        class="t-skeleton__content"
+      >
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col,t-skeleton--type-text,t-skeleton--animation- t-class-col"
+            style="width:undefined;height:16px;background:undefined;background-color:undefined;margin:undefined;margin-right:undefined;margin-left:undefined;border-radius:undefined;"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col,t-skeleton--type-text,t-skeleton--animation- t-class-col"
+            style="width:24%;height:16px;background:undefined;background-color:undefined;margin:undefined;margin-right:16px;margin-left:undefined;border-radius:undefined;"
+          />
+          <wx-view
+            class="t-skeleton__col,t-skeleton--type-text,t-skeleton--animation- t-class-col"
+            style="width:76%;height:16px;background:undefined;background-color:undefined;margin:undefined;margin-right:undefined;margin-left:undefined;border-radius:undefined;"
+          />
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </t-skeleton>
+</main>
+`;
+
+exports[`skeleton Props :text rowCol 1`] = `
+<main>
+  <t-skeleton
+    class="skeleton"
+  >
+    <wx-view
+      class="t-skeleton t-class "
+    >
+      <wx-view
+        class="t-skeleton__content"
+      >
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col,t-skeleton--type-text,t-skeleton--animation- t-class-col"
+            style="width:686rpx;height:32rpx;background:undefined;background-color:undefined;margin:undefined;margin-right:undefined;margin-left:undefined;border-radius:undefined;"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col,t-skeleton--type-text,t-skeleton--animation- t-class-col"
+            style="width:undefined;height:16px;background:undefined;background-color:undefined;margin:undefined;margin-right:undefined;margin-left:undefined;border-radius:undefined;"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col,t-skeleton--type-text,t-skeleton--animation- t-class-col"
+            style="width:undefined;height:16px;background:undefined;background-color:undefined;margin:undefined;margin-right:undefined;margin-left:undefined;border-radius:undefined;"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col,t-skeleton--type-text,t-skeleton--animation- t-class-col"
+            style="width:38rpx;height:32rpx;background:undefined;background-color:undefined;margin:undefined;margin-right:20rpx;margin-left:20rpx;border-radius:undefined;"
+          />
+          <wx-view
+            class="t-skeleton__col,t-skeleton--type-text,t-skeleton--animation- t-class-col"
+            style="width:38rpx;height:32rpx;background:undefined;background-color:undefined;margin:undefined;margin-right:undefined;margin-left:undefined;border-radius:undefined;"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col,t-skeleton--type-text,t-skeleton--animation- t-class-col"
+            style="width:440rpx;height:16px;background:undefined;background-color:undefined;margin:undefined;margin-right:undefined;margin-left:undefined;border-radius:undefined;"
+          />
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </t-skeleton>
+</main>
+`;
+
+exports[`skeleton Props :text rowCol2 1`] = `
+<main>
+  <t-skeleton
+    class="skeleton"
+  >
+    <wx-view
+      class="t-skeleton t-class "
+    >
+      <wx-view
+        class="t-skeleton__content"
+      >
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col,t-skeleton--type-text,t-skeleton--animation- t-class-col"
+            style="width:343px;height:16px;background:undefined;background-color:undefined;margin:undefined;margin-right:undefined;margin-left:undefined;border-radius:undefined;"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col,t-skeleton--type-text,t-skeleton--animation- t-class-col"
+            style="width:undefined;height:16px;background:undefined;background-color:undefined;margin:undefined;margin-right:undefined;margin-left:undefined;border-radius:undefined;"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col,t-skeleton--type-text,t-skeleton--animation- t-class-col"
+            style="width:undefined;height:16px;background:undefined;background-color:undefined;margin:undefined;margin-right:undefined;margin-left:undefined;border-radius:undefined;"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col,t-skeleton--type-text,t-skeleton--animation- t-class-col"
+            style="width:14px;height:16px;background:undefined;background-color:undefined;margin:undefined;margin-right:10px;margin-left:10px;border-radius:undefined;"
+          />
+          <wx-view
+            class="t-skeleton__col,t-skeleton--type-text,t-skeleton--animation- t-class-col"
+            style="width:small;height:small;background:undefined;background-color:undefined;margin:undefined;margin-right:undefined;margin-left:undefined;border-radius:undefined;"
+          />
+        </wx-view>
+        <wx-view
+          class="t-skeleton__row t-class-row"
+        >
+          <wx-view
+            class="t-skeleton__col,t-skeleton--type-text,t-skeleton--animation- t-class-col"
+            style="width:220px;height:16px;background:undefined;background-color:undefined;margin:undefined;margin-right:undefined;margin-left:undefined;border-radius:undefined;"
+          />
+        </wx-view>
+      </wx-view>
+    </wx-view>
+  </t-skeleton>
+</main>
+`;
diff --git a/src/skeleton/__test__/index.test.js b/src/skeleton/__test__/index.test.js
@@ -0,0 +1,105 @@
+import simulate from 'miniprogram-simulate';
+import path from 'path';
+
+const textRowCol = [
+  { width: '686rpx', height: '32rpx' },
+  2,
+  3,
+  [
+    { width: '38rpx', height: '32rpx', marginRight: '20rpx', marginLeft: '20rpx' },
+    { width: '38rpx', height: '32rpx' },
+  ],
+  { width: '440rpx' },
+];
+
+const textRowCol2 = [
+  { width: 343, height: 16 },
+  2,
+  3,
+  [{ width: 14, height: 16, marginRight: 10, marginLeft: 10 }, { size: 'small' }],
+  { width: 220 },
+];
+
+describe('skeleton', () => {
+  const skeleton = simulate.load(path.resolve(__dirname, `../skeleton`), 't-skeleton', {
+    less: true,
+    rootPath: path.resolve(__dirname, '../..'),
+  });
+
+  describe('Props', () => {
+    it(':text rowCol', () => {
+      const id = simulate.load({
+        template: `<t-skeleton class="skeleton" rowCol="{{rowCol}}" loading="{{loading}}"></t-skeleton>`,
+        usingComponents: {
+          't-skeleton': skeleton,
+        },
+        data: {
+          rowCol: textRowCol,
+          loading: true,
+        },
+      });
+      const comp = simulate.render(id);
+      comp.attach(document.createElement('parent-wrapper'));
+
+      expect(comp.toJSON()).toMatchSnapshot();
+    });
+
+    it(':loading rowCol', async () => {
+      const id = simulate.load({
+        template: `<t-skeleton class="skeleton" rowCol="{{rowCol}}" loading="{{loading}}"></t-skeleton>`,
+        usingComponents: {
+          't-skeleton': skeleton,
+        },
+        data: {
+          rowCol: textRowCol,
+          loading: true,
+        },
+      });
+      const comp = simulate.render(id);
+      comp.attach(document.createElement('parent-wrapper'));
+
+      const $content = comp.querySelector('.skeleton >>> .t-skeleton__content');
+      expect($content.toJSON().children.length).not.toBe(0);
+
+      comp.setData({
+        loading: false,
+      });
+      await simulate.sleep(20);
+      const $content2 = comp.querySelector('.skeleton >>> .t-skeleton__content');
+      expect($content2.toJSON().children.length).toBe(0);
+    });
+
+    it(':inner rowCol', () => {
+      const id = simulate.load({
+        template: `<t-skeleton class="skeleton" loading="{{loading}}"></t-skeleton>`,
+        usingComponents: {
+          't-skeleton': skeleton,
+        },
+        data: {
+          loading: true,
+        },
+      });
+      const comp = simulate.render(id);
+      comp.attach(document.createElement('parent-wrapper'));
+
+      expect(comp.toJSON()).toMatchSnapshot();
+    });
+
+    it(':text rowCol2', () => {
+      const id = simulate.load({
+        template: `<t-skeleton class="skeleton" rowCol="{{rowCol}}" loading="{{loading}}"></t-skeleton>`,
+        usingComponents: {
+          't-skeleton': skeleton,
+        },
+        data: {
+          rowCol: textRowCol2,
+          loading: true,
+        },
+      });
+      const comp = simulate.render(id);
+      comp.attach(document.createElement('parent-wrapper'));
+
+      expect(comp.toJSON()).toMatchSnapshot();
+    });
+  });
+});