テストコードをリファクタリング

uzabase · Oct 22, 2024 · 8c0cf82 · 8c0cf82
1 parent 0f815d7
commit 8c0cf82
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 32 deletions.
diff --git a/tests/button/sp-button.test.ts b/tests/button/sp-button.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 import { getByShadowRole, queryByShadowRole } from "shadow-dom-testing-library";
 import { SpButton } from "../../src/components/button/sp-button";
 import { isElementMatchingSpeedaIcon } from "../utils/icon";
@@ -17,39 +17,41 @@ function queryIcon() {
 }
 
 describe("ub-button", () => {
-  it("icon属性を設定すると、そのアイコンが表示される", async () => {
-    document.body.innerHTML = "<sp-button icon='edit'></sp-button>";
+  describe("icon属性", () => {
+    test("icon属性を設定すると、そのアイコンが表示される", async () => {
+      document.body.innerHTML = "<sp-button icon='edit'></sp-button>";
 
-    const icon = getIcon();
+      const icon = getIcon();
 
-    expect(isElementMatchingSpeedaIcon(icon, "edit")).toBeTruthy();
-  });
+      expect(isElementMatchingSpeedaIcon(icon, "edit")).toBeTruthy();
+    });
 
-  it("icon属性を設定しない場合、アイコンは表示されない", async () => {
-    document.body.innerHTML = "<sp-button icon='edit'></sp-button>";
+    test("icon属性を設定しない場合、アイコンは表示されない", async () => {
+      document.body.innerHTML = "<sp-button icon='edit'></sp-button>";
 
-    const icon = queryIcon();
+      const icon = queryIcon();
 
-    expect(icon).not.toBeNull();
-  });
+      expect(icon).not.toBeNull();
+    });
 
-  it("icon属性を空文字に設定すると、アイコンは表示されない", async () => {
-    document.body.innerHTML = "<sp-button icon=''></sp-button>";
+    test("icon属性を空文字に設定すると、アイコンは表示されない", async () => {
+      document.body.innerHTML = "<sp-button icon=''></sp-button>";
 
-    const icon = queryIcon();
+      const icon = queryIcon();
 
-    expect(icon).toBeNull();
-  });
+      expect(icon).toBeNull();
+    });
 
-  it("icon属性を更新すると、更新後のアイコンが表示される", async () => {
-    document.body.innerHTML = "<sp-button icon='edit'></sp-button>";
+    test("icon属性を更新すると、更新後のアイコンが表示される", async () => {
+      document.body.innerHTML = "<sp-button icon='edit'></sp-button>";
 
-    const spButton = getSpButton();
-    const icon = getIcon();
+      const spButton = getSpButton();
+      const icon = getIcon();
 
-    spButton.setAttribute("icon", "search");
+      spButton.setAttribute("icon", "search");
 
-    expect(isElementMatchingSpeedaIcon(icon, "edit")).toBeFalsy();
-    expect(isElementMatchingSpeedaIcon(icon, "search")).toBeTruthy();
+      expect(isElementMatchingSpeedaIcon(icon, "edit")).toBeFalsy();
+      expect(isElementMatchingSpeedaIcon(icon, "search")).toBeTruthy();
+    });
   });
 });
diff --git a/tests/icon/sp-icon.test.ts b/tests/icon/sp-icon.test.ts
@@ -8,19 +8,21 @@ function getIcon() {
 }
 
 describe("sp-icon", () => {
-  test("type属性を設定すると、そのアイコンが表示される", async () => {
-    document.body.innerHTML = "<sp-icon type='edit'></sp-icon>";
+  describe("type属性", () => {
+    test("type属性を設定すると、そのアイコンが表示される", async () => {
+      document.body.innerHTML = "<sp-icon type='edit'></sp-icon>";
 
-    const icon = getIcon();
+      const icon = getIcon();
 
-    expect(isElementMatchingSpeedaIcon(icon, "edit")).toBeTruthy();
-  });
+      expect(isElementMatchingSpeedaIcon(icon, "edit")).toBeTruthy();
+    });
 
-  test("無効なtype属性を設定すると、空のアイコンが表示される", async () => {
-    document.body.innerHTML = "<sp-icon type='invalid'></sp-icon>";
+    test("無効なtype属性を設定すると、空のアイコンが表示される", async () => {
+      document.body.innerHTML = "<sp-icon type='invalid'></sp-icon>";
 
-    const icon = getIcon();
+      const icon = getIcon();
 
-    expect(icon.innerHTML).toBe("");
+      expect(icon.innerHTML).toBe("");
+    });
   });
 });