テストコードを追加

uzabase · Dec 22, 2024 · a2c4791 · a2c4791
1 parent d483195
commit a2c4791
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 5 deletions.
diff --git a/src/components/notificationMessage/sp-notification-message.ts b/src/components/notificationMessage/sp-notification-message.ts
@@ -20,14 +20,14 @@ const variantClasses: Record<Variant, string> = {
   success: "variant__success",
 };
 
-const iconPaths: Record<Variant, string> = {
+export const iconPaths: Record<Variant, string> = {
   error:
-    '<path fill-rule="evenodd" clip-rule="evenodd" d="M2.58 18.8574L11.3416 3.99902H12.6459L21.4075 18.8574L20.7554 19.999H3.23212L2.58 18.8574ZM11.2 9.5V14.5H12.8V9.5H11.2ZM11.2 16V17.5H12.8V16H11.2Z" fill="#CA3232"/>',
-  info: '<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM11.2 7.71997V9.49997H12.8V7.71997H11.2ZM10.5 16.2V16.72H13.5V16.2L12.8 16V11H10.5V11.8L11.2 12V16L10.5 16.2Z" fill="#3978BF"/>',
+    '<path fill-rule="evenodd" clip-rule="evenodd" d="M2.58 18.8574L11.3416 3.99902H12.6459L21.4075 18.8574L20.7554 19.999H3.23212L2.58 18.8574ZM11.2 9.5V14.5H12.8V9.5H11.2ZM11.2 16V17.5H12.8V16H11.2Z" fill="#CA3232"></path>',
+  info: '<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM11.2 7.71997V9.49997H12.8V7.71997H11.2ZM10.5 16.2V16.72H13.5V16.2L12.8 16V11H10.5V11.8L11.2 12V16L10.5 16.2Z" fill="#3978BF"></path>',
   success:
-    '<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM15.5303 10.5303L14.4697 9.46967L11 12.9393L9.53033 11.4697L8.46967 12.5303L10.4697 14.5303L11 15.0607L11.5303 14.5303L15.5303 10.5303Z" fill="#1A7037"/>',
+    '<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM15.5303 10.5303L14.4697 9.46967L11 12.9393L9.53033 11.4697L8.46967 12.5303L10.4697 14.5303L11 15.0607L11.5303 14.5303L15.5303 10.5303Z" fill="#1A7037"></path>',
   warning:
-    '<path fill-rule="evenodd" clip-rule="evenodd" d="M2.58 18.8574L11.3416 3.99902H12.6459L21.4075 18.8574L20.7554 19.999H3.23212L2.58 18.8574ZM11.2 9.5V14.5H12.8V9.5H11.2ZM11.2 16V17.5H12.8V16H11.2Z" fill="#EAB100"/>',
+    '<path fill-rule="evenodd" clip-rule="evenodd" d="M2.58 18.8574L11.3416 3.99902H12.6459L21.4075 18.8574L20.7554 19.999H3.23212L2.58 18.8574ZM11.2 9.5V14.5H12.8V9.5H11.2ZM11.2 16V17.5H12.8V16H11.2Z" fill="#EAB100"></path>',
 };
 
 const styles = new CSSStyleSheet();
@@ -47,6 +47,7 @@ export class SpNotificationMessage extends HTMLElement {
   set variant(value: Variant) {
     this.#baseElement.classList.remove(variantClasses[this.#variant]);
     this.#baseElement.classList.add(variantClasses[value]);
+    this.#iconElement.innerHTML = iconPaths[value];
     this.#variant = value;
   }
 

diff --git a/tests/notificationMessage/sp-notification-message.test.ts b/tests/notificationMessage/sp-notification-message.test.ts
@@ -0,0 +1,78 @@
+import { describe, expect, test } from "vitest";
+import { screen } from "shadow-dom-testing-library";
+import {
+  iconPaths,
+  SpNotificationMessage,
+  Variant,
+} from "../../src/components/notificationMessage/sp-notification-message";
+import "../../src/components/notificationMessage/sp-notification-message";
+
+function getSpNotificationMessage() {
+  return document.querySelector(
+    "sp-notification-message",
+  ) as SpNotificationMessage;
+}
+
+function getIcon() {
+  return screen.getByShadowRole("img");
+}
+
+function queryContentByText(text: string) {
+  return screen.queryByShadowText(text);
+}
+
+describe("sp-notification-message", () => {
+  describe("variant属性", () => {
+    test.each<[Variant]>([["error"], ["warning"], ["info"], ["success"]])(
+      "variant属性に%sを設定すると、その値に対応するアイコンが表示される",
+      async (variant) => {
+        document.body.innerHTML = `<sp-notification-message variant='${variant}'></sp-notification-message>`;
+
+        const icon = getIcon();
+
+        expect(icon.innerHTML).toBe(iconPaths[variant]);
+      },
+    );
+
+    test("variant属性を設定しない場合、デフォルトのインフォメーションアイコンが表示される", async () => {
+      document.body.innerHTML = `<sp-notification-message></sp-notification-message>`;
+
+      const icon = getIcon();
+
+      expect(icon.innerHTML).toBe(iconPaths["info"]);
+    });
+
+    test("variant属性を更新すると、新しいアイコンが設定される", async () => {
+      document.body.innerHTML = `<sp-notification-message variant='info'></sp-notification-message>`;
+
+      const spNotificationMessage = getSpNotificationMessage();
+      const icon = getIcon();
+
+      spNotificationMessage.setAttribute("variant", "error");
+
+      expect(icon.innerHTML).toBe(iconPaths["error"]);
+    });
+
+    test("無効なvariant属性を設定すると、デフォルトのインフォメーションアイコンが表示される", async () => {
+      document.body.innerHTML = `<sp-notification-message variant='invalid'></sp-notification-message>`;
+
+      const icon = getIcon();
+
+      expect(icon.innerHTML).toBe(iconPaths["info"]);
+    });
+  });
+
+  describe("子要素の表示", () => {
+    test("子要素を持つと、その内容が表示される", async () => {
+      document.body.innerHTML = `
+        <sp-notification-message>
+          Hello, World!
+        </sp-notification-message>
+      `;
+
+      const content = queryContentByText("Hello, World!");
+
+      expect(content).not.toBeNull();
+    });
+  });
+});