From fac2b08ec2fd1e507cf101e8ad5af1adfb5fe301 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Fri, 27 Nov 2020 21:20:06 +0800
Subject: [PATCH] test(Circle): update test cases

---
 .../test/__snapshots__/index.legacy.js.snap   | 22 -------
 .../test/__snapshots__/index.spec.js.snap     | 21 +++++++
 src/circle/test/index.legacy.js               | 59 -------------------
 src/circle/test/index.spec.js                 | 49 +++++++++++++++
 4 files changed, 70 insertions(+), 81 deletions(-)
 delete mode 100644 src/circle/test/__snapshots__/index.legacy.js.snap
 create mode 100644 src/circle/test/__snapshots__/index.spec.js.snap
 delete mode 100644 src/circle/test/index.legacy.js
 create mode 100644 src/circle/test/index.spec.js

diff --git a/src/circle/test/__snapshots__/index.legacy.js.snap b/src/circle/test/__snapshots__/index.legacy.js.snap
deleted file mode 100644
index 8749d4958..000000000
--- a/src/circle/test/__snapshots__/index.legacy.js.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`size prop 1`] = `
-<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
-    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 0px 3140px;"></path>
-  </svg></div>
-`;
-
-exports[`speed is 0 1`] = `
-<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
-    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
-  </svg></div>
-`;
-
-exports[`stroke-linecap prop 1`] = `
-<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
-    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></path>
-  </svg></div>
-`;
diff --git a/src/circle/test/__snapshots__/index.spec.js.snap b/src/circle/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..44985300f
--- /dev/null
+++ b/src/circle/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should change stroke linecap when using stroke-linecap prop 1`] = `
+<div class="van-circle"
+     style="width: 100px; height: 100px;"
+>
+  <svg viewbox="0 0 1040 1040">
+    <path class="van-circle__hover"
+          style="fill: none; stroke: #fff; stroke-width: 40px;"
+          d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
+    >
+    </path>
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000"
+          style="stroke: #1989fa; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"
+          class="van-circle__layer"
+          stroke="#1989fa"
+    >
+    </path>
+  </svg>
+</div>
+`;
diff --git a/src/circle/test/index.legacy.js b/src/circle/test/index.legacy.js
deleted file mode 100644
index e4f904b54..000000000
--- a/src/circle/test/index.legacy.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import Vue from 'vue';
-import Circle from '..';
-import { mount, later } from '../../../test';
-
-test('speed is 0', async () => {
-  const wrapper = mount(Circle, {
-    props: {
-      rate: 50,
-      value: 0,
-    },
-    listeners: {
-      input(value) {
-        Vue.nextTick(() => {
-          wrapper.setProps({ value });
-        });
-      },
-    },
-  });
-
-  await later();
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('animate', async () => {
-  const onInput = jest.fn();
-  mount(Circle, {
-    props: {
-      rate: 50,
-      speed: 100,
-    },
-    listeners: {
-      input: onInput,
-    },
-  });
-
-  await later(50);
-  expect(onInput).toHaveBeenCalled();
-  expect(onInput.mock.calls[0][0]).not.toEqual(0);
-});
-
-test('size prop', () => {
-  const wrapper = mount(Circle, {
-    props: {
-      size: 100,
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('stroke-linecap prop', () => {
-  const wrapper = mount(Circle, {
-    props: {
-      strokeLinecap: 'square',
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
diff --git a/src/circle/test/index.spec.js b/src/circle/test/index.spec.js
new file mode 100644
index 000000000..0c2c14ec2
--- /dev/null
+++ b/src/circle/test/index.spec.js
@@ -0,0 +1,49 @@
+import Circle from '..';
+import { mount, later } from '../../../test';
+
+// TODO
+// test('should update to final rate immediately if speed is 0', async () => {
+//   const wrapper = mount(Circle, {
+//     props: {
+//       rate: 50,
+//       currentRate: 0,
+//     },
+//   });
+
+//   await later();
+//   expect(wrapper.emitted('update:currentRate')).toBeTruthy();
+// });
+
+test('should emit "update:currentRate" event during animation', async () => {
+  const wrapper = mount(Circle, {
+    props: {
+      rate: 50,
+      speed: 100,
+    },
+  });
+
+  expect(wrapper.emitted('update:currentRate')).toBeFalsy();
+  await later(50);
+  expect(wrapper.emitted('update:currentRate')).toBeTruthy();
+});
+
+test('should change circle size when using size prop', () => {
+  const wrapper = mount(Circle, {
+    props: {
+      size: 100,
+    },
+  });
+
+  expect(wrapper.element.style.width).toEqual('100px');
+  expect(wrapper.element.style.height).toEqual('100px');
+});
+
+test('should change stroke linecap when using stroke-linecap prop', () => {
+  const wrapper = mount(Circle, {
+    props: {
+      strokeLinecap: 'square',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});