@yh-ui/components 0.1.0

package/dist/countdown/__tests__/countdown.test.cjs

@@ -0,0 +1,767 @@
+"use strict";
+
+var _vitest = require("vitest");
+var _testUtils = require("@vue/test-utils");
+var _index = require("../index.cjs");
+var _vue = require("vue");
+var _countdown = require("../src/countdown.cjs");
+(0, _vitest.describe)("Countdown.vue", () => {
+  const BASE_TIME = 17e11;
+  (0, _vitest.beforeEach)(() => {
+    _vitest.vi.useFakeTimers();
+    _vitest.vi.setSystemTime(BASE_TIME);
+  });
+  (0, _vitest.afterEach)(() => {
+    _vitest.vi.useRealTimers();
+    _vitest.vi.restoreAllMocks();
+  });
+  (0, _vitest.describe)("\u5DE5\u5177\u51FD\u6570", () => {
+    (0, _vitest.it)("parseTimeUnits \u5E94\u8BE5\u6B63\u786E\u89E3\u6790\u65F6\u95F4", () => {
+      const result = (0, _countdown.parseTimeUnits)(3661e3);
+      (0, _vitest.expect)(result.hours).toBe(1);
+      (0, _vitest.expect)(result.minutes).toBe(1);
+      (0, _vitest.expect)(result.seconds).toBe(1);
+    });
+    (0, _vitest.it)("createFormatContext \u5E94\u8BE5\u6B63\u786E\u521B\u5EFA\u683C\u5F0F\u5316\u4E0A\u4E0B\u6587", () => {
+      const ctx = (0, _countdown.createFormatContext)(3661e3);
+      (0, _vitest.expect)(ctx.HH).toBe("01");
+      (0, _vitest.expect)(ctx.mm).toBe("01");
+      (0, _vitest.expect)(ctx.ss).toBe("01");
+    });
+    (0, _vitest.it)("formatCountdown \u5E94\u8BE5\u6B63\u786E\u683C\u5F0F\u5316\u65F6\u95F4", () => {
+      const ctx = (0, _countdown.createFormatContext)(3661e3);
+      const result = (0, _countdown.formatCountdown)("HH:mm:ss", ctx);
+      (0, _vitest.expect)(result).toBe("01:01:01");
+    });
+    (0, _vitest.it)("isTargetTimestamp \u5E94\u8BE5\u6B63\u786E\u5224\u65AD\u503C\u7C7B\u578B", () => {
+      (0, _vitest.expect)((0, _countdown.isTargetTimestamp)(36e5)).toBe(false);
+      (0, _vitest.expect)((0, _countdown.isTargetTimestamp)(9e7)).toBe(false);
+      (0, _vitest.expect)((0, _countdown.isTargetTimestamp)(17e11)).toBe(true);
+      (0, _vitest.expect)((0, _countdown.isTargetTimestamp)(/* @__PURE__ */new Date())).toBe(true);
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u6B63\u786E\u89E3\u6790\u590D\u6742\u65F6\u95F4\u5355\u4F4D", () => {
+      const ctx = (0, _countdown.createFormatContext)(93784005);
+      (0, _vitest.expect)(ctx.DD).toBe("01");
+      (0, _vitest.expect)(ctx.HH).toBe("02");
+      (0, _vitest.expect)(ctx.mm).toBe("03");
+      (0, _vitest.expect)(ctx.ss).toBe("04");
+      (0, _vitest.expect)(ctx.SSS).toBe("005");
+    });
+    (0, _vitest.it)("calculateRemain \u5E94\u8BE5\u6B63\u786E\u8BA1\u7B97\u5269\u4F59\u65F6\u95F4", () => {
+      const target = BASE_TIME + 5e3;
+      (0, _vitest.expect)((0, _countdown.calculateRemain)(target, 0)).toBe(5e3);
+      (0, _vitest.expect)((0, _countdown.calculateRemain)(5e3, 0)).toBe(5e3);
+      (0, _vitest.expect)((0, _countdown.calculateRemain)(BASE_TIME - 1e3, 0)).toBe(0);
+    });
+    (0, _vitest.it)("padZero \u5E94\u8BE5\u6B63\u786E\u8865\u96F6", () => {
+      (0, _vitest.expect)((0, _countdown.padZero)(5)).toBe("05");
+      (0, _vitest.expect)((0, _countdown.padZero)(5, 3)).toBe("005");
+      (0, _vitest.expect)((0, _countdown.padZero)(15)).toBe("15");
+    });
+  });
+  (0, _vitest.describe)("\u57FA\u7840\u6E32\u67D3", () => {
+    (0, _vitest.it)("\u5E94\u8BE5\u6B63\u786E\u6E32\u67D3\u7EC4\u4EF6", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 36e5
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-countdown").exists()).toBe(true);
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u6839\u636E\u9ED8\u8BA4\u683C\u5F0F\u663E\u793A\u65F6\u95F4\uFF08\u6301\u7EED\u65F6\u95F4\u6A21\u5F0F\uFF09", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 3661e3,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-countdown__value").text()).toBe("01:01:01");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301\u81EA\u5B9A\u4E49\u683C\u5F0F", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 90061e3,
+          format: "DD\u5929HH\u65F6mm\u5206ss\u79D2",
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-countdown__value").text()).toBe("01\u592901\u65F601\u520601\u79D2");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301\u81EA\u5B9A\u4E49\u683C\u5F0F\u5316\u51FD\u6570", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 36e5,
+          format: ctx => `\u5269\u4F59 ${ctx.HH} \u5C0F\u65F6`,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-countdown__value").text()).toBe("\u5269\u4F59 01 \u5C0F\u65F6");
+    });
+  });
+  (0, _vitest.describe)("\u503C\u7C7B\u578B", () => {
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301\u6BEB\u79D2\u6301\u7EED\u65F6\u95F4", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 5e3,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-countdown__value").text()).toBe("00:00:05");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301 Date \u5BF9\u8C61\u4F5C\u4E3A\u76EE\u6807\u65F6\u95F4", async () => {
+      const futureDate = new Date(BASE_TIME + 6e4);
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: futureDate,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-countdown__value").text()).toBe("00:01:00");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301\u65F6\u95F4\u6233\u4F5C\u4E3A\u76EE\u6807\u65F6\u95F4", async () => {
+      const futureTimestamp = BASE_TIME + 12e4;
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: futureTimestamp,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-countdown__value").text()).toBe("00:02:00");
+    });
+  });
+  (0, _vitest.describe)("\u63A7\u5236\u65B9\u6CD5", () => {
+    (0, _vitest.it)("\u5E94\u8BE5\u66B4\u9732 start \u65B9\u6CD5", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.vm.getStatus()).toBe("pending");
+      wrapper.vm.start();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.vm.getStatus()).toBe("running");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u66B4\u9732 pause \u65B9\u6CD5", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.vm.getStatus()).toBe("running");
+      wrapper.vm.pause();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.vm.getStatus()).toBe("paused");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u66B4\u9732 resume \u65B9\u6CD5", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      wrapper.vm.pause();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.vm.getStatus()).toBe("paused");
+      wrapper.vm.resume();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.vm.getStatus()).toBe("running");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u66B4\u9732 reset \u65B9\u6CD5", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      wrapper.vm.start();
+      await (0, _vue.nextTick)();
+      wrapper.vm.reset();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.emitted("reset")).toBeTruthy();
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u66B4\u9732 getRemain \u65B9\u6CD5", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.vm.getRemain()).toBe(1e4);
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u66B4\u9732 getStatus \u65B9\u6CD5", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.vm.getStatus()).toBe("pending");
+    });
+    (0, _vitest.it)("getStatus \u5E94\u8BE5\u8FD4\u56DE\u6B63\u786E\u7684\u503C", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.vm.getStatus()).toBe("running");
+      wrapper.vm.pause();
+      (0, _vitest.expect)(wrapper.vm.getStatus()).toBe("paused");
+      wrapper.vm.resume();
+      (0, _vitest.expect)(wrapper.vm.getStatus()).toBe("running");
+    });
+    (0, _vitest.it)("start \u65B9\u6CD5\u5728\u5DF2\u8FD0\u884C\u65F6\u4E0D\u5E94\u91CD\u590D\u6267\u884C", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      const spy = _vitest.vi.spyOn(window, "requestAnimationFrame");
+      wrapper.vm.start();
+      (0, _vitest.expect)(spy).not.toHaveBeenCalled();
+    });
+    (0, _vitest.it)("pause \u65B9\u6CD5\u5728\u975E\u8FD0\u884C\u72B6\u6001\u4E0B\u4E0D\u5E94\u6267\u884C", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      wrapper.vm.pause();
+      (0, _vitest.expect)(wrapper.vm.getStatus()).toBe("pending");
+    });
+    (0, _vitest.it)("resume \u65B9\u6CD5\u5728\u975E\u6682\u505C\u72B6\u6001\u4E0B\u4E0D\u5E94\u6267\u884C", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      wrapper.vm.resume();
+      (0, _vitest.expect)(wrapper.vm.getStatus()).toBe("running");
+    });
+  });
+  (0, _vitest.describe)("\u4E8B\u4EF6", () => {
+    (0, _vitest.it)("\u5E94\u8BE5\u5728\u5F00\u59CB\u65F6\u89E6\u53D1 start \u4E8B\u4EF6", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      wrapper.vm.start();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.emitted("start")).toBeTruthy();
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u5728\u6682\u505C\u65F6\u89E6\u53D1 pause \u4E8B\u4EF6", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      wrapper.vm.pause();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.emitted("pause")).toBeTruthy();
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u5728\u6062\u590D\u65F6\u89E6\u53D1 resume \u4E8B\u4EF6", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      wrapper.vm.pause();
+      await (0, _vue.nextTick)();
+      wrapper.vm.resume();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.emitted("resume")).toBeTruthy();
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u5728\u72B6\u6001\u53D8\u5316\u65F6\u89E6\u53D1 statusChange \u4E8B\u4EF6", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      wrapper.vm.start();
+      await (0, _vue.nextTick)();
+      const statusChanges = wrapper.emitted("statusChange");
+      (0, _vitest.expect)(statusChanges).toBeTruthy();
+      (0, _vitest.expect)(statusChanges[0]).toEqual(["running"]);
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u5728\u7ED3\u675F\u65F6\u89E6\u53D1 finish \u4E8B\u4EF6", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 0,
+          autoStart: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.emitted("finish")).toBeTruthy();
+    });
+  });
+  (0, _vitest.describe)("Props", () => {
+    (0, _vitest.it)("autoStart \u4E3A false \u65F6\u4E0D\u5E94\u81EA\u52A8\u5F00\u59CB", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.vm.getStatus()).toBe("pending");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301 title prop", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          title: "\u5012\u8BA1\u65F6\uFF1A",
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-countdown__title").text()).toBe("\u5012\u8BA1\u65F6\uFF1A");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301 suffix prop", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          suffix: "\u5269\u4F59",
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-countdown__suffix").text()).toBe("\u5269\u4F59");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301 useMonospaceFont prop", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          useMonospaceFont: true,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-countdown").classes()).toContain("is-monospace");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301 flipAnimation prop", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          flipAnimation: true,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-countdown").classes()).toContain("is-flip");
+    });
+    (0, _vitest.it)("flipAnimation \u6A21\u5F0F\u5E94\u8BE5\u663E\u793A\u65F6\u95F4\u5757", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 3661e3,
+          flipAnimation: true,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      const blocks = wrapper.findAll(".yh-countdown__block");
+      (0, _vitest.expect)(blocks.length).toBe(3);
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301 labels prop", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 3661e3,
+          flipAnimation: true,
+          labels: {
+            hours: "\u65F6",
+            minutes: "\u5206",
+            seconds: "\u79D2"
+          },
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      const labels = wrapper.findAll(".yh-countdown__label");
+      (0, _vitest.expect)(labels.length).toBe(3);
+      (0, _vitest.expect)(labels[0].text()).toBe("\u65F6");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301 showDays prop", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 9e7,
+          flipAnimation: true,
+          showDays: true,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      const blocks = wrapper.findAll(".yh-countdown__block");
+      (0, _vitest.expect)(blocks.length).toBe(4);
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301 serverTimeOffset prop", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: BASE_TIME + 72e5,
+          serverTimeOffset: 36e5,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      const remain = wrapper.vm.getRemain();
+      (0, _vitest.expect)(remain).toBeLessThanOrEqual(3600100);
+      (0, _vitest.expect)(remain).toBeGreaterThanOrEqual(3599e3);
+    });
+    (0, _vitest.it)("shouldShowDays \u5E94\u8BE5\u6B63\u786E\u5904\u7406\u5404\u6A21\u5F0F", async () => {
+      const wrapper1 = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 36e5,
+          showDays: "auto"
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper1.vm.shouldShowDays).toBe(false);
+      const wrapper2 = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 9e7,
+          showDays: "auto"
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper2.vm.shouldShowDays).toBe(true);
+      const wrapper3 = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 36e5,
+          showDays: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper3.vm.shouldShowDays).toBe(true);
+      const wrapper4 = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 9e7,
+          showDays: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper4.vm.shouldShowDays).toBe(false);
+    });
+    (0, _vitest.it)("digits \u5E94\u8BE5\u5305\u542B\u6B63\u786E\u7684\u65F6\u95F4\u5355\u4F4D", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          showHours: true,
+          showMinutes: true,
+          showSeconds: true,
+          showMilliseconds: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      const digits = wrapper.vm.digits;
+      (0, _vitest.expect)(digits.find(d => d.key === "hours")).toBeTruthy();
+      (0, _vitest.expect)(digits.find(d => d.key === "minutes")).toBeTruthy();
+      (0, _vitest.expect)(digits.find(d => d.key === "seconds")).toBeTruthy();
+      (0, _vitest.expect)(digits.find(d => d.key === "milliseconds")).toBeTruthy();
+    });
+  });
+  (0, _vitest.describe)("\u9884\u8B66\u72B6\u6001", () => {
+    (0, _vitest.it)("\u5E94\u8BE5\u5728\u5269\u4F59\u65F6\u95F4\u5C0F\u4E8E\u9608\u503C\u65F6\u6DFB\u52A0 warning \u7C7B", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 5e3,
+          warningThreshold: 1e4,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-countdown").classes()).toContain("is-warning");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u5728\u8D85\u51FA\u9608\u503C\u65F6\u4E0D\u663E\u793A warning \u7C7B", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 2e4,
+          warningThreshold: 1e4,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-countdown").classes()).not.toContain("is-warning");
+    });
+  });
+  (0, _vitest.describe)("\u63D2\u69FD", () => {
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301 prefix \u63D2\u69FD", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: false
+        },
+        slots: {
+          prefix: '<span class="custom-prefix">\u524D\u7F00</span>'
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".custom-prefix").exists()).toBe(true);
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301 suffix \u63D2\u69FD", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: false
+        },
+        slots: {
+          suffix: '<span class="custom-suffix">\u540E\u7F00</span>'
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".custom-suffix").exists()).toBe(true);
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301 separator \u63D2\u69FD", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 3661e3,
+          flipAnimation: true,
+          autoStart: false
+        },
+        slots: {
+          separator: '<span class="custom-sep">-</span>'
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".custom-sep").exists()).toBe(true);
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301\u9ED8\u8BA4\u4F5C\u7528\u57DF\u63D2\u69FD", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: false
+        },
+        slots: {
+          default: `
+            <template #default="{ remaining, status }">
+              <div class="custom-render">{{ status }}-{{ remaining }}</div>
+            </template>
+          `
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".custom-render").text()).toBe("pending-10000");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301\u65F6\u95F4\u5355\u5143\u683C\u63D2\u69FD (cell slots)", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 3661e3,
+          flipAnimation: true,
+          autoStart: false
+        },
+        slots: {
+          "hours-cell": '<span class="custom-hours">H</span>'
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".custom-hours").exists()).toBe(true);
+    });
+  });
+  (0, _vitest.describe)("\u72B6\u6001", () => {
+    (0, _vitest.it)("\u521D\u59CB\u65F6\u95F4\u4E3A 0 \u5E94\u8BE5\u76F4\u63A5\u8FDB\u5165 finished \u72B6\u6001", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 0,
+          autoStart: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.vm.getStatus()).toBe("finished");
+      (0, _vitest.expect)(wrapper.find(".yh-countdown").classes()).toContain("is-finished");
+    });
+    (0, _vitest.it)("\u6682\u505C\u72B6\u6001\u5E94\u8BE5\u6DFB\u52A0 paused \u7C7B", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      wrapper.vm.pause();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-countdown").classes()).toContain("is-paused");
+    });
+  });
+  (0, _vitest.describe)("value \u53D8\u5316", () => {
+    (0, _vitest.it)("value \u53D8\u5316\u65F6\u5E94\u8BE5\u91CD\u7F6E\u5012\u8BA1\u65F6", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      await wrapper.setProps({
+        value: 2e4
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.vm.getRemain()).toBe(2e4);
+      (0, _vitest.expect)(wrapper.emitted("reset")).toBeTruthy();
+    });
+  });
+  (0, _vitest.describe)("\u8986\u76D6\u7387\u8865\u5145", () => {
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301 valueStyle \u4E3A\u5B57\u7B26\u4E32", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          valueStyle: "color: red;",
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.find(".yh-countdown__value").attributes("style")).toContain("color: red");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u652F\u6301 showMilliseconds", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1234,
+          showMilliseconds: true,
+          flipAnimation: true,
+          autoStart: false
+        }
+      });
+      await (0, _vue.nextTick)();
+      await (0, _vue.nextTick)();
+      const blocks = wrapper.findAll(".yh-countdown__block");
+      (0, _vitest.expect)(blocks.length).toBe(4);
+      (0, _vitest.expect)(blocks[3].find(".yh-countdown__label").text()).toBe("\u6BEB\u79D2");
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u6B63\u786E\u6267\u884C\u8BA1\u65F6\u903B\u8F91 (tick)", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          interval: 100
+        }
+      });
+      await (0, _vue.nextTick)();
+      _vitest.vi.advanceTimersByTime(1e3);
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.vm.getRemain()).toBeLessThan(1e4);
+      (0, _vitest.expect)(wrapper.emitted("change")).toBeTruthy();
+    });
+    (0, _vitest.it)("\u5012\u8BA1\u65F6\u7ED3\u675F\u5E94\u8BE5\u89E6\u53D1 finish", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e3,
+          autoStart: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      _vitest.vi.advanceTimersByTime(2e3);
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.vm.getStatus()).toBe("finished");
+      (0, _vitest.expect)(wrapper.emitted("finish")).toBeTruthy();
+    });
+    (0, _vitest.it)("\u6682\u505C\u548C\u6062\u590D\u5E94\u8BE5\u6B63\u5E38\u5DE5\u4F5C", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      wrapper.vm.pause();
+      const remainBefore = wrapper.vm.getRemain();
+      _vitest.vi.advanceTimersByTime(2e3);
+      (0, _vitest.expect)(wrapper.vm.getRemain()).toBe(remainBefore);
+      wrapper.vm.resume();
+      _vitest.vi.advanceTimersByTime(1e3);
+      (0, _vitest.expect)(wrapper.vm.getRemain()).toBeLessThan(remainBefore);
+    });
+    (0, _vitest.it)("\u5E94\u8BE5\u5904\u7406 timezoneOffset", () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          timezoneOffset: 480
+        }
+      });
+      (0, _vitest.expect)(wrapper.props("timezoneOffset")).toBe(480);
+    });
+    (0, _vitest.it)("\u5378\u8F7D\u65F6\u5E94\u6E05\u9664\u8BA1\u65F6\u5668", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          autoStart: true
+        }
+      });
+      await (0, _vue.nextTick)();
+      const spy = _vitest.vi.spyOn(window, "cancelAnimationFrame");
+      wrapper.unmount();
+      (0, _vitest.expect)(spy).toHaveBeenCalled();
+    });
+    (0, _vitest.it)("tick \u903B\u8F91\u4E2D\u7684 precision \u8282\u6D41", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e4,
+          interval: 100,
+          precision: 100
+        }
+      });
+      await (0, _vue.nextTick)();
+      _vitest.vi.advanceTimersByTime(50);
+      await (0, _vue.nextTick)();
+    });
+    (0, _vitest.it)("warning \u4E8B\u4EF6\u5E94\u8BE5\u53EA\u89E6\u53D1\u4E00\u6B21", async () => {
+      const wrapper = (0, _testUtils.mount)(_index.YhCountdown, {
+        props: {
+          value: 1e3,
+          warningThreshold: 2e3,
+          interval: 100
+        }
+      });
+      await (0, _vue.nextTick)();
+      _vitest.vi.advanceTimersByTime(100);
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.emitted("warning")).toBeTruthy();
+      (0, _vitest.expect)(wrapper.emitted("warning").length).toBe(1);
+      _vitest.vi.advanceTimersByTime(500);
+      await (0, _vue.nextTick)();
+      (0, _vitest.expect)(wrapper.emitted("warning").length).toBe(1);
+    });
+  });
+});