From 0ece310322838ad4c09b659adcb32c8cf407b69c Mon Sep 17 00:00:00 2001 From: link <3399652842@qq.com> Date: Thu, 6 Feb 2025 18:10:45 +0800 Subject: [PATCH] =?UTF-8?q?feat(mini-markdown-editor):=20=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E4=BA=86base=E7=9A=84=E5=8D=95=E5=85=83=E6=B5=8B?= =?UTF-8?q?=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 合并了vitest与vite的配置文件（官网推荐），完成了editor的src/components/base的单元测试 --- .../base/__test__/DropDownMenu.test.tsx | 74 ++++++++++++++++++ .../base/__test__/IconTooltip.test.tsx | 77 +++++++++++++++++++ packages/mini-markdown-editor/vite.config.ts | 14 ++++ .../mini-markdown-editor/vitest.config.ts | 21 ----- 4 files changed, 165 insertions(+), 21 deletions(-) delete mode 100644 packages/mini-markdown-editor/vitest.config.ts diff --git a/packages/mini-markdown-editor/src/components/base/__test__/DropDownMenu.test.tsx b/packages/mini-markdown-editor/src/components/base/__test__/DropDownMenu.test.tsx index e69de29..e488224 100644 --- a/packages/mini-markdown-editor/src/components/base/__test__/DropDownMenu.test.tsx +++ b/packages/mini-markdown-editor/src/components/base/__test__/DropDownMenu.test.tsx @@ -0,0 +1,74 @@ +import { render, screen, fireEvent, waitFor } from "@testing-library/react"; +import { describe, expect, it, vi } from "vitest"; +import { DropDownMenu } from "../DropDownMenu"; +import type { ToolbarItemListItem } from "@/types/toolbar"; + +//测试数据 +const getName = vi.fn(); //虚拟函数 +const testList: ToolbarItemListItem[] = [ + { + title: "H1 一级标题", + type: "heading-1", + onClick: () => getName.mockReturnValueOnce("heading-1"), + }, + { + title: "H2 二级标题", + type: "heading-2", + onClick: () => getName.mockReturnValueOnce("heading-2"), + }, +]; + +describe("DropDownMenu 组件测试", () => { + it("正确渲染菜单标题", () => { + render( + + + , + ); + expect(screen.getByRole("button", { name: "heading" })).toBeInTheDocument(); + }); + + it("鼠标悬停应出现菜单项", async () => { + render( + + + , + ); + const button = screen.getByRole("button", { name: "heading" }); + fireEvent.mouseOver(button); + //由于菜单异步出现，故要等待 + await waitFor(() => { + testList.forEach((item) => { + expect(screen.getByText(item.title)).toBeInTheDocument(); + }); + }); + }); + + it("菜单项能响应点击事件", async () => { + render( + + + , + ); + const button = screen.getByRole("button", { name: "heading" }); + fireEvent.mouseOver(button); + + //由于菜单异步出现，故要等待 + await waitFor(() => { + testList.forEach((item) => { + expect(screen.getByText(item.title)).toBeInTheDocument(); + }); + }); + + testList.forEach(async (item) => { + const menuItem = screen.getByText(item.title); + fireEvent.click(menuItem); + + //同样需要等待 + await waitFor(() => { + expect(getName).toHaveBeenCalled(); + expect(getName).toHaveReturnedWith(item.type); + }); + }); + }); +}); diff --git a/packages/mini-markdown-editor/src/components/base/__test__/IconTooltip.test.tsx b/packages/mini-markdown-editor/src/components/base/__test__/IconTooltip.test.tsx index e69de29..6517679 100644 --- a/packages/mini-markdown-editor/src/components/base/__test__/IconTooltip.test.tsx +++ b/packages/mini-markdown-editor/src/components/base/__test__/IconTooltip.test.tsx @@ -0,0 +1,77 @@ +import { fireEvent, render, screen, waitFor } from "@testing-library/react"; +import { describe, vi, it, expect } from "vitest"; +import IconTooltip from "../IconTooltip"; + +//模拟点击函数 +const handleClick = vi.fn(); +//测试数据 +const testIcon = { + type: "bold", + //假设是icon svg + icon: '', + title: "加粗", + description: "the hotkey", + onClick: handleClick, +}; + +describe("IconTooltip 组件测试", () => { + it("正确渲染组件", () => { + render( + + {/* {title} */} + {testIcon.icon && ( +
+ )} + , + ); + expect(screen.getByTestId("bold-icon")).toBeInTheDocument(); + }); + + it("鼠标悬停出现tip", async () => { + render( + + {/* {title} */} + {testIcon.icon && ( +
+ )} + , + ); + const icon = screen.getByTestId("bold-icon"); + expect(icon).toBeInTheDocument(); + + fireEvent.mouseOver(icon); + //异步出现tip + await waitFor(() => { + expect(screen.getByText(testIcon.title)).toBeInTheDocument(); + expect(screen.getByText(testIcon.description)).toBeInTheDocument(); + }); + }); + + it("能响应点击事件", () => { + render( + + {/* {title} */} + {testIcon.icon && ( +
+ )} + , + ); + const icon = screen.getByTestId("bold-icon"); + expect(icon).toBeInTheDocument(); + + fireEvent.click(icon); + expect(handleClick).toHaveBeenCalled(); + }); +}); diff --git a/packages/mini-markdown-editor/vite.config.ts b/packages/mini-markdown-editor/vite.config.ts index 8e2f09d..043f3a0 100644 --- a/packages/mini-markdown-editor/vite.config.ts +++ b/packages/mini-markdown-editor/vite.config.ts @@ -1,3 +1,6 @@ +/// +//^与测试用同一配置 + import { defineConfig, PluginOption } from "vite"; import react from "@vitejs/plugin-react"; import { fileURLToPath } from "node:url"; @@ -63,5 +66,16 @@ export default defineConfig(({ mode }) => { }, }, }, + + //测试 + test: { + environment: "jsdom", + globals: true, + setupFiles: "./src/test/setup.ts", + include: ["src/**/*.{test,spec}.{js,ts,jsx,tsx}"], + coverage: { + include: ["src/components/**", "src/hooks/**", "src/utils/**", "src/store/**"], + }, + }, }; }); diff --git a/packages/mini-markdown-editor/vitest.config.ts b/packages/mini-markdown-editor/vitest.config.ts deleted file mode 100644 index 544198d..0000000 --- a/packages/mini-markdown-editor/vitest.config.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { defineConfig } from "vitest/config"; -import react from "@vitejs/plugin-react"; -import { fileURLToPath } from "node:url"; - -export default defineConfig({ - plugins: [react()], - test: { - environment: "jsdom", - globals: true, - setupFiles: "./src/test/setup.ts", - include: ["src/**/*.{test,spec}.{js,ts,jsx,tsx}"], - coverage: { - include: ["src/components/**", "src/hooks/**", "src/utils/**", "src/store/**"], - }, - }, - resolve: { - alias: { - "@": fileURLToPath(new URL("./src", import.meta.url)), - }, - }, -}); -- Gitee