From 9fadb6e8d4e42eb6cbf45391f4de27aff2f4e2c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= <ivestszheng@qq.com>
Date: Thu, 2 Dec 2021 14:13:10 +0800
Subject: [PATCH] =?UTF-8?q?test(Skeleton):=20=E4=BF=AE=E6=94=B9=E5=B9=B6?=
 =?UTF-8?q?=E8=A1=A5=E5=85=85=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/skeleton/__tests__/skeleton.spec.ts | 34 +++---------------
 .../skeleton/__tests__/skeletonItem.spec.ts   | 35 +++++++++++++++++++
 2 files changed, 39 insertions(+), 30 deletions(-)
 create mode 100644 packages/devui-vue/devui/skeleton/__tests__/skeletonItem.spec.ts

diff --git a/packages/devui-vue/devui/skeleton/__tests__/skeleton.spec.ts b/packages/devui-vue/devui/skeleton/__tests__/skeleton.spec.ts
index a5f90504..0a151f59 100644
--- a/packages/devui-vue/devui/skeleton/__tests__/skeleton.spec.ts
+++ b/packages/devui-vue/devui/skeleton/__tests__/skeleton.spec.ts
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import { ref } from 'vue';
 import DSkeleton from '../src/skeleton';
 
-describe('skeleton 组件', () => {
+describe('skeleton module', () => {
   it('render basic skeleton', () => {
     const row = ref(4)
     const wrapper = mount({
@@ -14,9 +14,8 @@ describe('skeleton 组件', () => {
         }
       },
     })
-
-    expect(wrapper.classes()).toContain('devui-skeleton')
-    expect(wrapper.classes()).toContain('devui-skeleton-animated')
+    
+    expect(wrapper.classes()).toEqual(['devui-skeleton', 'devui-skeleton__animated'])
     expect(wrapper.element.childElementCount).toBe(2)
     expect(wrapper.element.children[1].children[1].childElementCount).toBe(4)
   })
@@ -49,33 +48,8 @@ describe('skeleton 组件', () => {
         }
       },
     })
-    
+
     expect(wrapper.element.children[1].childElementCount).toBe(2)
   })
 
-  it('hide skeleton and show real content', () => {
-    const row = ref(4)
-    const loading = ref(false)
-    const wrapper = mount({
-      components: { DSkeleton },
-      template: `
-      <d-skeleton :row="4" :loading="loading">
-        <div>
-          <div>content1</div>
-          <div>content2</div>
-          <div>content3</div>
-          <div>content4</div>
-        </div>
-      </d-skeleton>`,
-      setup() {
-        return {
-          row,
-          loading
-        }
-      },
-    })
-
-    expect(wrapper.classes()).toContain('devui-skeleton')
-    expect(wrapper.element.children[0].innerHTML).toBe('<div>content1</div><div>content2</div><div>content3</div><div>content4</div>')
-  })
 })
\ No newline at end of file
diff --git a/packages/devui-vue/devui/skeleton/__tests__/skeletonItem.spec.ts b/packages/devui-vue/devui/skeleton/__tests__/skeletonItem.spec.ts
new file mode 100644
index 00000000..d32567b5
--- /dev/null
+++ b/packages/devui-vue/devui/skeleton/__tests__/skeletonItem.spec.ts
@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils';
+import DSkeletonItem from '../src/item/item';
+
+describe('skeleton-item module', () => {
+  it('render skeleton-item-avatar', () => {
+    const wrapper = mount({
+      components: { DSkeletonItem },
+      template: `<d-skeleton-item :shape="'avatar'" style="margin-left:55px;width:80px;height:80px;" />`,
+    })
+
+    expect(wrapper.find('.devui-skeleton__shape__avatar').element.getAttribute('style')).toBe('border-radius: 50%; margin-left: 55px; width: 80px; height: 80px;')
+  })
+
+  it('render skeleton-item-avatar without animation', () => {
+    const wrapper = mount({
+      components: { DSkeletonItem },
+      template: `<d-skeleton-item :shape="'avatar'" :animate="false" />`,
+    })
+
+    expect(wrapper.find('.devui-skeleton__shape__avatar').classes()).not.toContain('devui-skeleton__animated')
+  })
+
+  it('render skeleton-item-paragraph', () => {
+    const wrapper = mount({
+      components: { DSkeletonItem },
+      template: `<d-skeleton-item :shape="'paragraph'" :row="3" :row-width="['75%','50%']" />`,
+    })
+    const target = wrapper.find('.devui-skeleton__shape__paragraph')
+    
+    expect(target.element.childElementCount).toBe(3)    
+    expect(target.element.children[0].getAttribute('style')).toBe('width: 75%;')
+    expect(target.element.children[1].getAttribute('style')).toBe('width: 50%;')
+    expect(target.element.children[2].getAttribute('style')).toBe('')
+  })
+})
\ No newline at end of file
-- 
Gitee