test(steps): update snapshots

bradapeter · Feb 22, 2019 · 5d0ab99 · 5d0ab99
1 parent a771459
commit 5d0ab99
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 66 deletions.
diff --git a/components/steps/test/__snapshots__/demo.spec.js.snap b/components/steps/test/__snapshots__/demo.spec.js.snap
@@ -6,7 +6,7 @@ exports[`Steps - Demo Add custom styles through by class named "current" 1`] = `
     <div class="step-wrapper reached">
       <div class="icon-wrapper">
         <div class="step-node-default">
-          <div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
         </div>
       </div>
       <div class="text-wrapper">
@@ -16,21 +16,21 @@ exports[`Steps - Demo Add custom styles through by class named "current" 1`] = `
         <!---->
       </div>
     </div>
-    <div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(0%, 0, 0);transition:all 0.3s linear;"></i></div>
+    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(0%, 0, 0); transition: all 0.3s linear;"></i></div>
     <div class="step-wrapper current">
-      <div class="icon-wrapper"><i class="md-icon icon-font md-icon-success success md" style="color:;"></i></div>
+      <div class="icon-wrapper"><i class="md-icon icon-font md-icon-success success md"></i></div>
       <div class="text-wrapper">
         <div class="name">
           开通
         </div>
         <!---->
       </div>
     </div>
-    <div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(-100%, 0, 0);transition:all 0s linear;"></i></div>
+    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(-100%, 0, 0); transition: all 0s linear;"></i></div>
     <div class="step-wrapper">
       <div class="icon-wrapper">
         <div class="step-node-default">
-          <div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
         </div>
       </div>
       <div class="text-wrapper">
@@ -40,11 +40,11 @@ exports[`Steps - Demo Add custom styles through by class named "current" 1`] = `
         <!---->
       </div>
     </div>
-    <div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(-100%, 0, 0);transition:all 0s linear;"></i></div>
+    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(-100%, 0, 0); transition: all 0s linear;"></i></div>
     <div class="step-wrapper">
       <div class="icon-wrapper">
         <div class="step-node-default">
-          <div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
         </div>
       </div>
       <div class="text-wrapper">
@@ -65,19 +65,19 @@ exports[`Steps - Demo Basic 1`] = `
 <div class="md-example-child md-example-child-steps md-example-child-steps-0">
   <div class="md-steps md-steps-horizontal">
     <div class="step-wrapper current">
-      <div class="icon-wrapper"><i class="md-icon icon-font md-icon-success success md" style="color:;"></i></div>
+      <div class="icon-wrapper"><i class="md-icon icon-font md-icon-success success md"></i></div>
       <div class="text-wrapper">
         <div class="name">
           登录/注册
         </div>
         <!---->
       </div>
     </div>
-    <div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(-100%, 0, 0);transition:all 0s linear;"></i></div>
+    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(-100%, 0, 0); transition: all 0s linear;"></i></div>
     <div class="step-wrapper">
       <div class="icon-wrapper">
         <div class="step-node-default">
-          <div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
         </div>
       </div>
       <div class="text-wrapper">
@@ -87,11 +87,11 @@ exports[`Steps - Demo Basic 1`] = `
         <!---->
       </div>
     </div>
-    <div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(-100%, 0, 0);transition:all 0s linear;"></i></div>
+    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(-100%, 0, 0); transition: all 0s linear;"></i></div>
     <div class="step-wrapper">
       <div class="icon-wrapper">
         <div class="step-node-default">
-          <div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
         </div>
       </div>
       <div class="text-wrapper">
@@ -114,7 +114,7 @@ exports[`Steps - Demo Complete all steps 1`] = `
     <div class="step-wrapper reached">
       <div class="icon-wrapper">
         <div class="step-node-default">
-          <div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
         </div>
       </div>
       <div class="text-wrapper">
@@ -124,11 +124,11 @@ exports[`Steps - Demo Complete all steps 1`] = `
         <!---->
       </div>
     </div>
-    <div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(0%, 0, 0);transition:all 0.3s linear;"></i></div>
+    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(0%, 0, 0); transition: all 0.3s linear;"></i></div>
     <div class="step-wrapper reached">
       <div class="icon-wrapper">
         <div class="step-node-default">
-          <div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
         </div>
       </div>
       <div class="text-wrapper">
@@ -138,11 +138,11 @@ exports[`Steps - Demo Complete all steps 1`] = `
         <!---->
       </div>
     </div>
-    <div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(0%, 0, 0);transition:all 0.3s linear;"></i></div>
+    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(0%, 0, 0); transition: all 0.3s linear;"></i></div>
     <div class="step-wrapper reached">
       <div class="icon-wrapper">
         <div class="step-node-default">
-          <div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
         </div>
       </div>
       <div class="text-wrapper">
@@ -152,9 +152,9 @@ exports[`Steps - Demo Complete all steps 1`] = `
         <!---->
       </div>
     </div>
-    <div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(0%, 0, 0);transition:all 0.3s linear;"></i></div>
+    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(0%, 0, 0); transition: all 0.3s linear;"></i></div>
     <div class="step-wrapper current">
-      <div class="icon-wrapper"><i class="md-icon icon-font md-icon-success success md" style="color:;"></i></div>
+      <div class="icon-wrapper"><i class="md-icon icon-font md-icon-success success md"></i></div>
       <div class="text-wrapper">
         <div class="name">
           成功
@@ -245,31 +245,31 @@ exports[`Steps - Demo Custom step icon 1`] = `
         <!---->
       </div>
     </div>
-    <div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(0%, 0, 0);transition:all 0.3s linear;"></i></div>
+    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(0%, 0, 0); transition: all 0.3s linear;"></i></div>
     <div class="step-wrapper reached">
-      <div class="icon-wrapper"><i class="md-icon icon-font md-icon-checked checked md" style="color:;"></i></div>
+      <div class="icon-wrapper"><i class="md-icon icon-font md-icon-checked checked md"></i></div>
       <div class="text-wrapper">
         <div class="name">
           开通
         </div>
         <!---->
       </div>
     </div>
-    <div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(0%, 0, 0);transition:all 0.3s linear;"></i></div>
+    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(0%, 0, 0); transition: all 0.3s linear;"></i></div>
     <div class="step-wrapper current">
-      <div class="icon-wrapper"><i class="md-icon icon-font md-icon-location location md" style="color:;"></i></div>
+      <div class="icon-wrapper"><i class="md-icon icon-font md-icon-location location md"></i></div>
       <div class="text-wrapper">
         <div class="name">
           验证
         </div>
         <!---->
       </div>
     </div>
-    <div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(-100%, 0, 0);transition:all 0s linear;"></i></div>
+    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(-100%, 0, 0); transition: all 0s linear;"></i></div>
     <div class="step-wrapper">
       <div class="icon-wrapper">
         <div class="step-node-default">
-          <div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
         </div>
       </div>
       <div class="text-wrapper">
@@ -292,7 +292,7 @@ exports[`Steps - Demo Non-integer progress 1`] = `
     <div class="step-wrapper reached">
       <div class="icon-wrapper">
         <div class="step-node-default">
-          <div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
         </div>
       </div>
       <div class="text-wrapper">
@@ -302,11 +302,11 @@ exports[`Steps - Demo Non-integer progress 1`] = `
         <!---->
       </div>
     </div>
-    <div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(0%, 0, 0);transition:all 0.3s linear;"></i></div>
+    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(0%, 0, 0); transition: all 0.3s linear;"></i></div>
     <div class="step-wrapper reached current">
       <div class="icon-wrapper">
         <div class="step-node-default">
-          <div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
         </div>
       </div>
       <div class="text-wrapper">
@@ -316,11 +316,11 @@ exports[`Steps - Demo Non-integer progress 1`] = `
         <!---->
       </div>
     </div>
-    <div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(-80%, 0, 0);transition:all 0.059999999999999984s linear;"></i></div>
+    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(-80%, 0, 0); transition: all 0.059999999999999984s linear;"></i></div>
     <div class="step-wrapper">
       <div class="icon-wrapper">
         <div class="step-node-default">
-          <div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
         </div>
       </div>
       <div class="text-wrapper">
@@ -330,11 +330,11 @@ exports[`Steps - Demo Non-integer progress 1`] = `
         <!---->
       </div>
     </div>
-    <div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(-100%, 0, 0);transition:all 0s linear;"></i></div>
+    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(-100%, 0, 0); transition: all 0s linear;"></i></div>
     <div class="step-wrapper">
       <div class="icon-wrapper">
         <div class="step-node-default">
-          <div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
         </div>
       </div>
       <div class="text-wrapper">
@@ -354,17 +354,21 @@ exports[`Steps - Demo Non-integer progress 1`] = `
 exports[`Steps - Demo Specify the current step 1`] = `
 <div class="md-example-child md-example-child-steps md-example-child-steps-3">
   <div class="md-steps md-steps-horizontal">
-    <div class="step-wrapper current">
-      <div class="icon-wrapper"><i class="md-icon icon-font md-icon-success success md"></i></div>
+    <div class="step-wrapper reached">
+      <div class="icon-wrapper">
+        <div class="step-node-default">
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
+        </div>
+      </div>
       <div class="text-wrapper">
         <div class="name">
           登录
         </div>
         <!---->
       </div>
     </div>
-    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(-100%, 0, 0); transition: all 0s linear;"></i></div>
-    <div class="step-wrapper">
+    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(0%, 0, 0); transition: all 0.3s linear;"></i></div>
+    <div class="step-wrapper reached">
       <div class="icon-wrapper">
         <div class="step-node-default">
           <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
@@ -377,13 +381,9 @@ exports[`Steps - Demo Specify the current step 1`] = `
         <!---->
       </div>
     </div>
-    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(-100%, 0, 0); transition: all 0s linear;"></i></div>
-    <div class="step-wrapper">
-      <div class="icon-wrapper">
-        <div class="step-node-default">
-          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
-        </div>
-      </div>
+    <div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(0%, 0, 0); transition: all 0.3s linear;"></i></div>
+    <div class="step-wrapper current">
+      <div class="icon-wrapper"><i class="md-icon icon-font md-icon-success success md"></i></div>
       <div class="text-wrapper">
         <div class="name">
           验证
@@ -483,7 +483,7 @@ exports[`Steps - Demo Vertical display 1`] = `
     <div class="step-wrapper reached">
       <div class="icon-wrapper">
         <div class="step-node-default">
-          <div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
         </div>
       </div>
       <div class="text-wrapper">
@@ -495,9 +495,9 @@ exports[`Steps - Demo Vertical display 1`] = `
         </div>
       </div>
     </div>
-    <div class="bar vertical-bar"><i class="bar-inner" style="transform:translate3d(0, 0%, 0);transition:all 0.3s linear;"></i></div>
+    <div class="bar vertical-bar"><i class="bar-inner" style="transform: translate3d(0, 0%, 0); transition: all 0.3s linear;"></i></div>
     <div class="step-wrapper current">
-      <div class="icon-wrapper"><i class="md-icon icon-font md-icon-success success md" style="color:;"></i></div>
+      <div class="icon-wrapper"><i class="md-icon icon-font md-icon-success success md"></i></div>
       <div class="text-wrapper">
         <div class="name">
           开通
@@ -507,11 +507,11 @@ exports[`Steps - Demo Vertical display 1`] = `
         </div>
       </div>
     </div>
-    <div class="bar vertical-bar"><i class="bar-inner" style="transform:translate3d(0, -100%, 0);transition:all 0s linear;"></i></div>
+    <div class="bar vertical-bar"><i class="bar-inner" style="transform: translate3d(0, -100%, 0); transition: all 0s linear;"></i></div>
     <div class="step-wrapper">
       <div class="icon-wrapper">
         <div class="step-node-default">
-          <div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
         </div>
       </div>
       <div class="text-wrapper">
@@ -523,11 +523,11 @@ exports[`Steps - Demo Vertical display 1`] = `
         </div>
       </div>
     </div>
-    <div class="bar vertical-bar"><i class="bar-inner" style="transform:translate3d(0, -100%, 0);transition:all 0s linear;"></i></div>
+    <div class="bar vertical-bar"><i class="bar-inner" style="transform: translate3d(0, -100%, 0); transition: all 0s linear;"></i></div>
     <div class="step-wrapper">
       <div class="icon-wrapper">
         <div class="step-node-default">
-          <div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
+          <div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
         </div>
       </div>
       <div class="text-wrapper">

diff --git a/components/steps/test/demo.spec.js b/components/steps/test/demo.spec.js
@@ -11,18 +11,33 @@ import {renderToString} from '@vue/server-test-utils'
 import {mount} from '@vue/test-utils'
 
 describe('Steps - Demo', () => {
-  test(`Basic`, () => {
-    expect(renderToString(Demo0)).toMatchSnapshot()
+  test(`Basic`, done => {
+    const wrapper = mount(Demo0)
+    setTimeout(() => {
+      expect(wrapper.html()).toMatchSnapshot()
+      done()
+    }, 2000)
   })
-  test(`Non-integer progress`, () => {
-    expect(renderToString(Demo1)).toMatchSnapshot()
+  test(`Non-integer progress`, done => {
+    const wrapper = mount(Demo1)
+    setTimeout(() => {
+      expect(wrapper.html()).toMatchSnapshot()
+      done()
+    }, 2000)
   })
-  test(`Custom step icon`, () => {
-    expect(renderToString(Demo2)).toMatchSnapshot()
+  test(`Custom step icon`, done => {
+    const wrapper = mount(Demo2)
+    setTimeout(() => {
+      expect(wrapper.html()).toMatchSnapshot()
+      done()
+    }, 2000)
   })
-  test(`Specify the current step`, () => {
+  test(`Specify the current step`, done => {
     const wrapper = mount(Demo3)
-    expect(wrapper.html()).toMatchSnapshot()
+    setTimeout(() => {
+      expect(wrapper.html()).toMatchSnapshot()
+      done()
+    }, 2000)
   })
   test(`Transition of rogress changes`, done => {
     const wrapper = mount(Demo4)
@@ -31,17 +46,32 @@ describe('Steps - Demo', () => {
       done()
     }, 2000)
   })
-  test(`Add custom styles through by class named "current"`, () => {
-    expect(renderToString(Demo5)).toMatchSnapshot()
+  test(`Add custom styles through by class named "current"`, done => {
+    const wrapper = mount(Demo5)
+    setTimeout(() => {
+      expect(wrapper.html()).toMatchSnapshot()
+      done()
+    }, 2000)
   })
-  test(`Complete all steps`, () => {
-    expect(renderToString(Demo6)).toMatchSnapshot()
+  test(`Complete all steps`, done => {
+    const wrapper = mount(Demo6)
+    setTimeout(() => {
+      expect(wrapper.html()).toMatchSnapshot()
+      done()
+    }, 2000)
   })
-  test(`Vertical display`, () => {
-    expect(renderToString(Demo7)).toMatchSnapshot()
+  test(`Vertical display`, done => {
+    const wrapper = mount(Demo7)
+    setTimeout(() => {
+      expect(wrapper.html()).toMatchSnapshot()
+      done()
+    }, 2000)
   })
-  test(`Custom content`, () => {
+  test(`Custom content`, done => {
     const wrapper = mount(Demo8)
-    expect(wrapper.html()).toMatchSnapshot()
+    setTimeout(() => {
+      expect(wrapper.html()).toMatchSnapshot()
+      done()
+    }, 2000)
   })
 })