@yh-ui/components 0.1.0

package/dist/countdown/__tests__/countdown.test.mjs

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