@simplysm/solid 13.0.74 → 13.0.76

package/tests/components/form-control/date-range-picker/DateRangePicker.spec.tsx

@@ -2,7 +2,7 @@ import { render } from "@solidjs/testing-library";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { DateOnly } from "@simplysm/core-common";
 import { DateRangePicker } from "../../../../src/components/form-control/date-range-picker/DateRangePicker";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("DateRangePicker component", () => {
@@ -15,23 +15,6 @@ describe("DateRangePicker component", () => {
   });
 
   describe("basic rendering", () => {
-    it("renders Select and DatePicker", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <DateRangePicker />
-        </I18nProvider></ConfigProvider>
-      ));
-
-      const wrapper = container.querySelector("[data-date-range-picker]");
-      expect(wrapper).toBeTruthy();
-
-      const select = wrapper?.querySelector("[data-select]");
-      expect(select).toBeTruthy();
-
-      const inputs = wrapper?.querySelectorAll("input");
-      expect(inputs?.length).toBeGreaterThan(0);
-    });
-
     it("defaults periodType to 'range'", () => {
       const { container } = render(() => (
         <ConfigProvider clientName="test"><I18nProvider>
@@ -165,44 +148,4 @@ describe("DateRangePicker component", () => {
     });
   });
 
-  describe("disabled state", () => {
-    it("applies aria-disabled to Select", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateRangePicker disabled /></I18nProvider></ConfigProvider>);
-      const wrapper = container.querySelector("[data-date-range-picker]");
-
-      const select = wrapper?.querySelector("[data-select]");
-      const combobox = select?.querySelector("[role='combobox']") ?? select;
-
-      expect(
-        combobox?.getAttribute("aria-disabled") === "true" ||
-          select?.getAttribute("aria-disabled") === "true",
-      ).toBe(true);
-    });
-  });
-
-  describe("period type labels", () => {
-    it("displays 'Range' label for default periodType 'range'", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider>
-          <DateRangePicker />
-        </I18nProvider></ConfigProvider>
-      ));
-
-      const wrapper = container.querySelector("[data-date-range-picker]");
-      const select = wrapper?.querySelector("[data-select]");
-
-      expect(select?.textContent).toContain("Range");
-    });
-  });
-
-  describe("class merging", () => {
-    it("applies custom class to wrapper", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateRangePicker class="my-custom-class" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.querySelector("[data-date-range-picker]") as HTMLElement;
-
-      expect(wrapper).toBeTruthy();
-      expect(wrapper.classList.contains("my-custom-class")).toBe(true);
-    });
-  });
 });

package/tests/components/form-control/field/DatePicker.spec.tsx

@@ -3,7 +3,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import { DateOnly } from "@simplysm/core-common";
 import { DatePicker } from "../../../../src/components/form-control/field/DatePicker";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("DatePicker component", () => {
@@ -11,41 +11,6 @@ describe("DatePicker component", () => {
     localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
   });
 
-  describe("basic rendering", () => {
-    it("renders input type=number when unit=year", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="year" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("number");
-    });
-
-    it("renders input type=month when unit=month", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="month" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("month");
-    });
-
-    it("renders input type=date when unit=date", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="date" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("date");
-    });
-
-    it("defaults autocomplete to one-time-code", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.autocomplete).toBe("one-time-code");
-    });
-
-    it("defaults unit to date", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.type).toBe("date");
-    });
-  });
-
   describe("value conversion", () => {
     it("displays DateOnly in yyyy format for year type", () => {
       const dateOnly = new DateOnly(2025, 3, 15);
@@ -214,16 +179,11 @@ describe("DatePicker component", () => {
       expect(getByText("2025-03-15")).toBeTruthy();
     });
 
-    it("applies disabled style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker disabled value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>);
-      const div = container.querySelector("div.sd-date-field") as HTMLElement;
-      expect(div.classList.contains("bg-base-100")).toBe(true);
-    });
   });
 
   describe("readonly state", () => {
     it("renders as div when readonly=true", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker readonly value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker readOnly value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input:not([aria-hidden])");
       const div = container.querySelector("div.sd-date-field");
 
@@ -233,41 +193,16 @@ describe("DatePicker component", () => {
 
     it("displays value when readonly", () => {
       const { getByText } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="date" readonly value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>
+        <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="date" readOnly value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>
       ));
       expect(getByText("2025-03-15")).toBeTruthy();
     });
   });
 
-  describe("size option", () => {
-    it("applies small padding when size=sm", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker size="sm" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("py-0.5")).toBe(true);
-    });
-
-    it("applies large padding when size=lg", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker size="lg" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("py-2")).toBe(true);
-    });
-  });
-
   describe("inset style", () => {
-    it("applies relative to outer and inset style to content when inset=true", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker inset /></I18nProvider></ConfigProvider>);
-      const outer = container.firstChild as HTMLElement;
-      expect(outer.classList.contains("relative")).toBe(true);
-      expect(outer.classList.contains("border-none")).toBe(false);
-
-      const contentDiv = outer.querySelector("[data-date-field-content]") as HTMLElement;
-      expect(contentDiv.classList.contains("border-none")).toBe(true);
-      expect(contentDiv.classList.contains("bg-primary-50")).toBe(true);
-    });
-
     it("shows content div and no input when inset + readonly", () => {
       const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><DatePicker inset readonly value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>
+        <ConfigProvider clientName="test"><I18nProvider><DatePicker inset readOnly value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>
       ));
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
@@ -293,36 +228,13 @@ describe("DatePicker component", () => {
     });
 
     it("shows NBSP in content div when inset + empty value", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker inset readonly /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker inset readOnly /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-date-field-content]") as HTMLElement;
       expect(contentDiv.textContent).toBe("\u00A0");
     });
   });
 
-  describe("dark mode style", () => {
-    it("applies dark mode border style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("dark:border-base-700")).toBe(true);
-    });
-
-    it("applies dark mode background style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("dark:bg-primary-950/30")).toBe(true);
-    });
-  });
-
-  describe("class merging", () => {
-    it("merges custom class with existing styles", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker class="my-custom-class" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("my-custom-class")).toBe(true);
-    });
-  });
-
   describe("validation", () => {
     it("sets error message when required and value is empty", () => {
       const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker required value={undefined} /></I18nProvider></ConfigProvider>);

package/tests/components/form-control/field/DateTimePicker.spec.tsx

@@ -3,7 +3,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import { DateTime } from "@simplysm/core-common";
 import { DateTimePicker } from "../../../../src/components/form-control/field/DateTimePicker";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("DateTimePicker component", () => {
@@ -12,32 +12,6 @@ describe("DateTimePicker component", () => {
   });
 
   describe("basic rendering", () => {
-    it("renders input type=datetime-local when unit=minute", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("datetime-local");
-    });
-
-    it("renders input type=datetime-local when unit=second", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="second" /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("datetime-local");
-    });
-
-    it("defaults unit to minute", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.type).toBe("datetime-local");
-    });
-
-    it("defaults autocomplete to one-time-code", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker /></I18nProvider></ConfigProvider>);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.autocomplete).toBe("one-time-code");
-    });
-
     it("sets step=1 when unit=second", () => {
       const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="second" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
@@ -198,19 +172,12 @@ describe("DateTimePicker component", () => {
       expect(getByText("2025-03-15T10:30")).toBeTruthy();
     });
 
-    it("applies disabled style", () => {
-      const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker disabled value={new DateTime(2025, 3, 15, 10, 30, 0)} /></I18nProvider></ConfigProvider>
-      ));
-      const div = container.querySelector("div.sd-datetime-field") as HTMLElement;
-      expect(div.classList.contains("bg-base-100")).toBe(true);
-    });
   });
 
   describe("readonly state", () => {
     it("renders as div when readonly=true", () => {
       const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker readonly value={new DateTime(2025, 3, 15, 10, 30, 0)} /></I18nProvider></ConfigProvider>
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker readOnly value={new DateTime(2025, 3, 15, 10, 30, 0)} /></I18nProvider></ConfigProvider>
       ));
       const input = container.querySelector("input:not([aria-hidden])");
       const div = container.querySelector("div.sd-datetime-field");
@@ -221,41 +188,16 @@ describe("DateTimePicker component", () => {
 
     it("displays value when readonly", () => {
       const { getByText } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" readonly value={new DateTime(2025, 3, 15, 10, 30, 0)} /></I18nProvider></ConfigProvider>
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" readOnly value={new DateTime(2025, 3, 15, 10, 30, 0)} /></I18nProvider></ConfigProvider>
       ));
       expect(getByText("2025-03-15T10:30")).toBeTruthy();
     });
   });
 
-  describe("size option", () => {
-    it("applies small padding when size=sm", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker size="sm" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("py-0.5")).toBe(true);
-    });
-
-    it("applies large padding when size=lg", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker size="lg" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("py-2")).toBe(true);
-    });
-  });
-
   describe("inset style", () => {
-    it("applies relative to outer and inset style to content when inset=true", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker inset /></I18nProvider></ConfigProvider>);
-      const outer = container.firstChild as HTMLElement;
-      expect(outer.classList.contains("relative")).toBe(true);
-      expect(outer.classList.contains("border-none")).toBe(false);
-
-      const contentDiv = outer.querySelector("[data-datetime-field-content]") as HTMLElement;
-      expect(contentDiv.classList.contains("border-none")).toBe(true);
-      expect(contentDiv.classList.contains("bg-primary-50")).toBe(true);
-    });
-
     it("shows content div and no input when inset + readonly", () => {
       const { container } = render(() => (
-        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker inset readonly value={new DateTime(2025, 3, 15, 14, 30, 0)} /></I18nProvider></ConfigProvider>
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker inset readOnly value={new DateTime(2025, 3, 15, 14, 30, 0)} /></I18nProvider></ConfigProvider>
       ));
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
@@ -281,36 +223,13 @@ describe("DateTimePicker component", () => {
     });
 
     it("shows NBSP in content div when inset + empty value", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker inset readonly /></I18nProvider></ConfigProvider>);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker inset readOnly /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-datetime-field-content]") as HTMLElement;
       expect(contentDiv.textContent).toBe("\u00A0");
     });
   });
 
-  describe("dark mode style", () => {
-    it("applies dark mode border style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("dark:border-base-700")).toBe(true);
-    });
-
-    it("applies dark mode background style", () => {
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("dark:bg-primary-950/30")).toBe(true);
-    });
-  });
-
-  describe("class merging", () => {
-    it("merges custom class with existing styles", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker class="my-custom-class" /></I18nProvider></ConfigProvider>);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("my-custom-class")).toBe(true);
-    });
-  });
-
   describe("validation", () => {
     it("sets error message when required and value is empty", () => {
       const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker required value={undefined} /></I18nProvider></ConfigProvider>);

package/tests/components/form-control/field/FieldShell.spec.tsx

@@ -0,0 +1,127 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect, beforeEach } from "vitest";
+import { FieldShell } from "../../../../src/components/form-control/field/FieldShell";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
+
+// Minimal wrapperClass stub — returns a predictable class string.
+// The real getFieldWrapperClass (Field.styles.ts) generates Tailwind classes
+// based on size/disabled/inset options.
+const stubWrapperClass = (_includeCustom: boolean) => "wrapper-class";
+
+function wrap(ui: () => import("solid-js").JSX.Element) {
+  return render(() => <ConfigProvider clientName="test"><I18nProvider>{ui()}</I18nProvider></ConfigProvider>);
+}
+
+describe("FieldShell", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
+  it("renders displayContent when standalone-readonly", () => {
+    const { container } = wrap(() => (
+      <FieldShell
+        errorMsg={undefined}
+        invalidVariant="border"
+        inset={false}
+        isEditable={false}
+        wrapperClass={stubWrapperClass}
+        dataAttr="data-test-field"
+        readonlyExtraClass="sd-test-field"
+        displayContent={<span>readonly-text</span>}
+      >
+        <input type="text" />
+      </FieldShell>
+    ));
+    const div = container.querySelector("[data-test-field]") as HTMLElement;
+    expect(div).toBeTruthy();
+    expect(div.classList.contains("sd-test-field")).toBe(true);
+    expect(div.textContent).toContain("readonly-text");
+    expect(container.querySelector("input:not([aria-hidden])")).toBeFalsy();
+  });
+
+  it("renders children when standalone-editable", () => {
+    const { container } = wrap(() => (
+      <FieldShell
+        errorMsg={undefined}
+        invalidVariant="border"
+        inset={false}
+        isEditable={true}
+        wrapperClass={stubWrapperClass}
+        dataAttr="data-test-field"
+        displayContent={<span>readonly-text</span>}
+      >
+        <input type="text" data-testid="my-input" />
+      </FieldShell>
+    ));
+    const input = container.querySelector("[data-testid='my-input']");
+    expect(input).toBeTruthy();
+    expect(container.textContent).not.toContain("readonly-text");
+  });
+
+  it("renders inset sizing + overlay when inset-editable", () => {
+    const { container } = wrap(() => (
+      <FieldShell
+        errorMsg={undefined}
+        invalidVariant="dot"
+        inset={true}
+        isEditable={true}
+        wrapperClass={stubWrapperClass}
+        dataAttr="data-test-field"
+        displayContent={<span>sizing-text</span>}
+      >
+        <input type="text" data-testid="my-input" />
+      </FieldShell>
+    ));
+    const outer = container.querySelector("[data-test-field]") as HTMLElement;
+    expect(outer.classList.contains("relative")).toBe(true);
+
+    const sizingDiv = outer.querySelector("[data-test-field-content]") as HTMLElement;
+    expect(sizingDiv).toBeTruthy();
+    expect(sizingDiv.style.visibility).toBe("hidden");
+
+    const input = outer.querySelector("[data-testid='my-input']");
+    expect(input).toBeTruthy();
+  });
+
+  it("renders inset sizing visible when inset-readonly", () => {
+    const { container } = wrap(() => (
+      <FieldShell
+        errorMsg={undefined}
+        invalidVariant="dot"
+        inset={true}
+        isEditable={false}
+        wrapperClass={stubWrapperClass}
+        dataAttr="data-test-field"
+        displayContent={<span>visible-text</span>}
+      >
+        <input type="text" />
+      </FieldShell>
+    ));
+    const sizingDiv = container.querySelector("[data-test-field-content]") as HTMLElement;
+    expect(sizingDiv).toBeTruthy();
+    expect(sizingDiv.style.visibility).toBe("");
+    expect(sizingDiv.textContent).toContain("visible-text");
+    expect(container.querySelector("input:not([aria-hidden])")).toBeFalsy();
+  });
+
+  it("uses renderSizing for sizing content when provided", () => {
+    const { container } = wrap(() => (
+      <FieldShell
+        errorMsg={undefined}
+        invalidVariant="dot"
+        inset={true}
+        isEditable={true}
+        wrapperClass={stubWrapperClass}
+        dataAttr="data-test-field"
+        displayContent={<span>display</span>}
+        renderSizing={() => <span>custom-sizing</span>}
+      >
+        <input type="text" />
+      </FieldShell>
+    ));
+    const sizingDiv = container.querySelector("[data-test-field-content]") as HTMLElement;
+    expect(sizingDiv.textContent).toContain("custom-sizing");
+    expect(sizingDiv.textContent).not.toContain("display");
+  });
+});