sp-element-title: add unit tests / observe text attribute / tidy stor…

…ybook

src/components/elementTitle/sp-element-title.ts

@@ -18,6 +18,10 @@ export class SpElementTitle extends HTMLElement {
     this.#headingElement.textContent = value;
   }
 
+  static get observedAttributes() {
+    return ["text"];
+  }
+
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
@@ -32,6 +36,12 @@ export class SpElementTitle extends HTMLElement {
     this.shadowRoot.appendChild(this.#createContainer());
   }
 
+  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+    if (name === "text" && oldValue !== newValue) {
+      this.text = newValue;
+    }
+  }
+
   #createContainer() {
     const container = document.createElement("div");
     container.classList.add("container");

stories/elementTitle/sp-element-title.story.ts

@@ -9,23 +9,19 @@ const meta: Meta = {
   argTypes: {
     text: { type: "string" },
   },
+  args: {
+    text: "Element Title",
+  },
 };
 export default meta;
 
 type Story = StoryObj;
 
-export const Basic: Story = {
-  args: {
-    text: "Element Title",
-  },
-};
+export const Basic: Story = {};
 
 export const WithTextLinks: Story = {
-  args: {
-    text: "Element Title",
-  },
   render: (args) => html`
-    <sp-element-title .text=${args.text}>
+    <sp-element-title text=${args.text}>
       <a
         href="#"
         slot="text-links"
@@ -43,23 +39,17 @@ export const WithTextLinks: Story = {
 };
 
 export const WithButtons: Story = {
-  args: {
-    text: "Element Title",
-  },
   render: (args) => html`
-    <sp-element-title .text=${args.text}>
+    <sp-element-title text=${args.text}>
       <sp-button text="Button1" slot="buttons"></sp-button>
       <sp-button text="Button2" slot="buttons"></sp-button>
     </sp-element-title>
   `,
 };
 
 export const WithFullContents: Story = {
-  args: {
-    text: "Element Title",
-  },
   render: (args) => html`
-    <sp-element-title .text=${args.text}>
+    <sp-element-title text=${args.text}>
       <a
         href="#"
         slot="text-links"

tests/elementTitle/sp-element-title.test.ts

@@ -0,0 +1,37 @@
+import { describe, expect, test } from "vitest";
+import { getByShadowRole } from "shadow-dom-testing-library";
+import { SpElementTitle } from "../../src/components/elementTitle/sp-element-title";
+import "../../src/components/elementTitle/sp-element-title";
+
+function getSpElementTitle() {
+  return document.querySelector("sp-element-title") as SpElementTitle;
+}
+
+function getHeadingElement() {
+  return getByShadowRole(document.body, "heading");
+}
+
+describe("sp-element-title", () => {
+  describe("text属性", () => {
+    test("text属性を設定すると、そのテキストが見出しとして表示される", async () => {
+      document.body.innerHTML =
+        "<sp-element-title text='サンプルタイトル'></sp-element-title>";
+
+      const headingElement = getHeadingElement();
+
+      expect(headingElement.textContent).toBe("サンプルタイトル");
+    });
+
+    test("text属性を更新すると、更新後のテキストが表示される", async () => {
+      document.body.innerHTML =
+        "<sp-element-title text='初期タイトル'></sp-element-title>";
+
+      const spElementTitle = getSpElementTitle();
+      const headingElement = getHeadingElement();
+
+      spElementTitle.setAttribute("text", "更新後タイトル");
+
+      expect(headingElement.textContent).toBe("更新後タイトル");
+    });
+  });
+});