@cosmicdrift/kumiko-renderer-web 0.1.0

package/src/__tests__/render-edit.test.tsx

@@ -0,0 +1,178 @@
+// @vitest-environment jsdom
+import type {
+  EntityDefinition,
+  EntityEditScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import type { Dispatcher, SubmitResult } from "@cosmicdrift/kumiko-headless";
+import { DispatcherProvider, RenderEdit } from "@cosmicdrift/kumiko-renderer";
+import { describe, expect, test, vi } from "vitest";
+import { act, createMockDispatcher, fireEvent, render, screen } from "./test-utils";
+
+const orderEntity = {
+  fields: {
+    title: { type: "text", required: true },
+    count: { type: "number" },
+    isUrgent: { type: "boolean" },
+    notes: { type: "text" },
+  },
+} as unknown as EntityDefinition;
+
+function makeScreen(): EntityEditScreenDefinition {
+  return {
+    id: "orders:screen:order-edit",
+    type: "entityEdit",
+    entity: "order",
+    layout: {
+      sections: [
+        {
+          title: "Basics",
+          columns: 2,
+          fields: [
+            { field: "title", span: 2 },
+            "count",
+            "isUrgent",
+            {
+              field: "notes",
+              visible: (d) => (d as { isUrgent?: boolean }).isUrgent === true,
+              required: (d) => (d as { isUrgent?: boolean }).isUrgent === true,
+            },
+          ],
+        },
+      ],
+    },
+  };
+}
+
+function makeDispatcher(writeFn?: Dispatcher["write"]): Dispatcher {
+  return createMockDispatcher({
+    write:
+      writeFn ?? ((async () => ({ isSuccess: true, data: { id: "1" } })) as Dispatcher["write"]),
+  });
+}
+
+type TestValues = {
+  title: string;
+  count?: number;
+  isUrgent?: boolean;
+  notes?: string;
+};
+
+describe("RenderEdit", () => {
+  test("renders a field per visible section entry with its resolved label", () => {
+    const dispatcher = makeDispatcher();
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "", count: 0, isUrgent: false }}
+          writeCommand="order:create"
+        />
+      </DispatcherProvider>,
+    );
+
+    // Visible: title, count, isUrgent. notes hidden because isUrgent=false.
+    expect(screen.getByTestId("field-title")).toBeTruthy();
+    expect(screen.getByTestId("field-count")).toBeTruthy();
+    expect(screen.getByTestId("field-isUrgent")).toBeTruthy();
+    expect(screen.queryByTestId("field-notes")).toBeNull();
+  });
+
+  test("typing in an input updates the form snapshot (controller + view-model round-trip)", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "", count: 0, isUrgent: false }}
+          writeCommand="order:create"
+        />
+      </DispatcherProvider>,
+    );
+
+    const titleInput = screen.getByTestId("field-title").querySelector("input");
+    expect(titleInput).toBeTruthy();
+    fireEvent.change(titleInput as HTMLInputElement, { target: { value: "Acme" } });
+    expect((titleInput as HTMLInputElement).value).toBe("Acme");
+  });
+
+  test("toggling isUrgent reveals the notes field (conditional predicate re-evaluates)", () => {
+    render(
+      <DispatcherProvider dispatcher={makeDispatcher()}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "", count: 0, isUrgent: false }}
+          writeCommand="order:create"
+        />
+      </DispatcherProvider>,
+    );
+
+    expect(screen.queryByTestId("field-notes")).toBeNull();
+    const urgentCheckbox = screen
+      .getByTestId("field-isUrgent")
+      .querySelector("input[type=checkbox]");
+    fireEvent.click(urgentCheckbox as HTMLInputElement);
+    expect(screen.queryByTestId("field-notes")).toBeTruthy();
+  });
+
+  test("submit fires dispatcher.write with the current values; onSubmit receives the result", async () => {
+    const write = vi.fn(async () => ({ isSuccess: true, data: { id: "42" } }) as never);
+    const dispatcher = makeDispatcher(write);
+    const seenResults: SubmitResult<unknown>[] = [];
+
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "", count: 0, isUrgent: false }}
+          writeCommand="order:create"
+          onSubmit={(r) => seenResults.push(r)}
+        />
+      </DispatcherProvider>,
+    );
+
+    const titleInput = screen.getByTestId("field-title").querySelector("input") as HTMLInputElement;
+    fireEvent.change(titleInput, { target: { value: "Hello" } });
+
+    const form = screen.getByTestId("render-edit-form");
+    // `act` so the async state update React does after submit resolves
+    // (flipping isDirty back to false after rebase) is flushed before
+    // the assertions run.
+    await act(async () => {
+      fireEvent.submit(form);
+      // microtask boundary for the handleSubmit promise chain
+      await Promise.resolve();
+    });
+
+    expect(write).toHaveBeenCalledOnce();
+    expect(write).toHaveBeenCalledWith("order:create", expect.anything());
+    expect(seenResults).toHaveLength(1);
+    expect(seenResults[0]?.isSuccess).toBe(true);
+  });
+
+  test("title resolved aus i18n-Key `screen:<id>.title` mit screenId als Fallback", () => {
+    const dispatcher = makeDispatcher();
+    render(
+      <DispatcherProvider dispatcher={dispatcher}>
+        <RenderEdit<TestValues>
+          screen={makeScreen()}
+          entity={orderEntity}
+          featureName="orders"
+          initial={{ title: "", count: 0, isUrgent: false }}
+          writeCommand="order:create"
+        />
+      </DispatcherProvider>,
+    );
+    // Default-Translate (Test-Setup hat keinen Bundle für screen:*.title)
+    // → i18n returnt den Key selber, RenderEdit detected das + zeigt
+    // den screenId. Beweist die Convention: kein Hardcoded "Untitled".
+    const actionsBar = screen.getByTestId("render-edit-form-actions");
+    expect(actionsBar.textContent).toContain("orders:screen:order-edit");
+  });
+});

package/src/__tests__/render-list-column-renderer.test.tsx

@@ -0,0 +1,124 @@
+// @vitest-environment jsdom
+import type {
+  EntityDefinition,
+  EntityListScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import {
+  type ColumnRendererProps,
+  ColumnRenderersProvider,
+  RenderList,
+} from "@cosmicdrift/kumiko-renderer";
+import type { ReactElement, ReactNode } from "react";
+import { afterAll, beforeEach, describe, expect, type MockInstance, test, vi } from "vitest";
+import { render, screen } from "./test-utils";
+
+// Tests für die JSX-Renderer-Form von ListColumn-Spalten:
+// `{ react: { __component: "Name" } }` wird via ColumnRenderersProvider
+// auf eine echte React-Component aufgelöst. Function- und Default-Pfad
+// sind in render-list.test.tsx abgedeckt — hier geht es um die drei
+// Cases die mit dem Provider-Lookup zusammenhängen.
+
+const taskEntity = {
+  fields: {
+    title: { type: "text" },
+    color: { type: "text" },
+  },
+} as unknown as EntityDefinition;
+
+const baseScreen: EntityListScreenDefinition = {
+  id: "tasks:screen:task-list",
+  type: "entityList",
+  entity: "task",
+  columns: ["title", "color"],
+};
+
+function ColorSwatch({ value, row, column }: ColumnRendererProps): ReactNode {
+  return (
+    <span data-testid="swatch">
+      <span data-testid="swatch-value">{String(value)}</span>
+      <span data-testid="swatch-field">{column.field}</span>
+      <span data-testid="swatch-row-title">{String(row["title"] ?? "")}</span>
+    </span>
+  );
+}
+
+function withRenderers(ui: ReactNode, map: Record<string, typeof ColorSwatch>): ReactElement {
+  return <ColumnRenderersProvider value={map}>{ui}</ColumnRenderersProvider>;
+}
+
+describe("RenderList — column-renderer registry", () => {
+  // Spy lokal pro Test installieren + global zurückbauen, damit die
+  // Mock-Implementation nicht in andere Test-Dateien leakt (Console-Spy
+  // auf File-Level würde den ganzen Vitest-Worker betreffen).
+  let warnSpy: MockInstance<typeof console.warn>;
+  beforeEach(() => {
+    warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+  afterAll(() => {
+    warnSpy.mockRestore();
+  });
+
+  test("function-renderer pfad bleibt unverändert (Bestand)", () => {
+    const screenWithFn: EntityListScreenDefinition = {
+      ...baseScreen,
+      columns: ["title", { field: "color", renderer: (v) => `[${String(v)}]` }],
+    };
+    render(
+      <RenderList
+        screen={screenWithFn}
+        entity={taskEntity}
+        rows={[{ id: "r1", title: "Alpha", color: "#fff" }]}
+        featureName="tasks"
+      />,
+    );
+    expect(screen.getByTestId("cell-r1-color").textContent).toBe("[#fff]");
+  });
+
+  test("__component-renderer mit Provider → Component wird gemountet, value+row+column kommen an", () => {
+    const screenWithComp: EntityListScreenDefinition = {
+      ...baseScreen,
+      columns: ["title", { field: "color", renderer: { react: { __component: "ColorSwatch" } } }],
+    };
+    render(
+      withRenderers(
+        <RenderList
+          screen={screenWithComp}
+          entity={taskEntity}
+          rows={[{ id: "r1", title: "Alpha", color: "#abcdef" }]}
+          featureName="tasks"
+        />,
+        { ColorSwatch },
+      ),
+    );
+    expect(screen.getByTestId("swatch")).toBeTruthy();
+    expect(screen.getByTestId("swatch-value").textContent).toBe("#abcdef");
+    expect(screen.getByTestId("swatch-field").textContent).toBe("color");
+    expect(screen.getByTestId("swatch-row-title").textContent).toBe("Alpha");
+  });
+
+  test("__component-renderer ohne Registry-Eintrag → console.warn + Default-Fallback", () => {
+    const screenWithUnknown: EntityListScreenDefinition = {
+      ...baseScreen,
+      columns: [
+        "title",
+        { field: "color", renderer: { react: { __component: "MissingRenderer" } } },
+      ],
+    };
+    render(
+      withRenderers(
+        <RenderList
+          screen={screenWithUnknown}
+          entity={taskEntity}
+          rows={[{ id: "r1", title: "Alpha", color: "#abc" }]}
+          featureName="tasks"
+        />,
+        {},
+      ),
+    );
+    // Default-Renderer für type=text → roher Wert
+    expect(screen.getByTestId("cell-r1-color").textContent).toBe("#abc");
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('columnRenderer "MissingRenderer" not registered'),
+    );
+  });
+});

package/src/__tests__/render-list-debounce.test.tsx

@@ -0,0 +1,128 @@
+// @vitest-environment jsdom
+//
+// RenderList puffert Tipps im Search-Input lokal und schickt
+// onSearchChange erst nach 300ms ohne weitere Tasten. Vor dieser Suite
+// nur durch Code-Read bewiesen — bei der nächsten Refactor-Welle wäre
+// die Race-Condition (Sync-Effect auf searchValue + Debounce-Effect)
+// wahrscheinlich kaputt gegangen ohne dass eine CI das fängt.
+
+import type {
+  EntityDefinition,
+  EntityListScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import {
+  createStaticLocaleResolver,
+  LocaleProvider,
+  PrimitivesProvider,
+  RenderList,
+} from "@cosmicdrift/kumiko-renderer";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { defaultPrimitives } from "../primitives";
+
+// Minimal-Entity damit RenderList nicht über fehlende Felder stolpert.
+// Eine Spalte reicht — wir testen nur den Search-Debounce-Pfad, nicht
+// die DataTable-Render-Tiefe.
+const entity: EntityDefinition = {
+  fields: { title: { type: "text" } },
+} as EntityDefinition;
+
+const screenDef: EntityListScreenDefinition = {
+  id: "items",
+  type: "entityList",
+  entity: "item",
+  columns: ["title"],
+};
+
+function renderRL(props: {
+  readonly searchValue?: string;
+  readonly onSearchChange?: (next: string) => void;
+}) {
+  return render(
+    <LocaleProvider resolver={createStaticLocaleResolver({ locale: "de" })}>
+      <PrimitivesProvider value={defaultPrimitives}>
+        <RenderList
+          screen={screenDef}
+          entity={entity}
+          rows={[]}
+          featureName="t"
+          searchable
+          {...props}
+        />
+      </PrimitivesProvider>
+    </LocaleProvider>,
+  );
+}
+
+describe("RenderList — Search-Debounce", () => {
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  test("Tippen unter 300ms feuert NICHT mehrfach onSearchChange", () => {
+    const onSearchChange = vi.fn();
+    renderRL({ searchValue: "", onSearchChange });
+
+    const input = screen.getByPlaceholderText(/kumiko\.list\.search-placeholder|suchen/i);
+    fireEvent.change(input, { target: { value: "a" } });
+    fireEvent.change(input, { target: { value: "ac" } });
+    fireEvent.change(input, { target: { value: "acm" } });
+    fireEvent.change(input, { target: { value: "acme" } });
+
+    // Vor Debounce-Ablauf: kein call (jeder Keypress hat den Timer
+    // resettet).
+    act(() => {
+      vi.advanceTimersByTime(299);
+    });
+    expect(onSearchChange).not.toHaveBeenCalled();
+
+    // 300ms: jetzt feuert es exakt einmal mit dem letzten Wert.
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(onSearchChange).toHaveBeenCalledTimes(1);
+    expect(onSearchChange).toHaveBeenCalledWith("acme");
+  });
+
+  test("searchValue-Update von außen syncs lokalen Buffer (Browser-Back)", () => {
+    const onSearchChange = vi.fn();
+    const { rerender } = renderRL({ searchValue: "first", onSearchChange });
+    const input = screen.getByDisplayValue("first") as HTMLInputElement;
+    expect(input.value).toBe("first");
+
+    // Externe Quelle (Browser-Back, Cross-Component-Reset) ändert
+    // searchValue → RenderList soll den Input-Wert spiegeln.
+    rerender(
+      <LocaleProvider resolver={createStaticLocaleResolver({ locale: "de" })}>
+        <PrimitivesProvider value={defaultPrimitives}>
+          <RenderList
+            screen={screenDef}
+            entity={entity}
+            rows={[]}
+            featureName="t"
+            searchable
+            searchValue="second"
+            onSearchChange={onSearchChange}
+          />
+        </PrimitivesProvider>
+      </LocaleProvider>,
+    );
+    expect((screen.getByDisplayValue("second") as HTMLInputElement).value).toBe("second");
+  });
+
+  test("onSearchChange wird NICHT gerufen wenn lokal === searchValue (kein Echo)", () => {
+    // Wenn der Parent searchValue auf "x" setzt UND der lokale Buffer
+    // schon "x" ist (z.B. Cleanup-Timing), darf RenderList nicht den
+    // Wert nochmal zurückrufen — sonst wäre's eine Loop.
+    const onSearchChange = vi.fn();
+    renderRL({ searchValue: "x", onSearchChange });
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(onSearchChange).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/render-list.test.tsx

@@ -0,0 +1,151 @@
+// @vitest-environment jsdom
+import type {
+  EntityDefinition,
+  EntityListScreenDefinition,
+} from "@cosmicdrift/kumiko-framework/ui-types";
+import { RenderList } from "@cosmicdrift/kumiko-renderer";
+import { describe, expect, test, vi } from "vitest";
+import { fireEvent, render, screen } from "./test-utils";
+
+const taskEntity = {
+  fields: {
+    title: { type: "text", sortable: true },
+    status: { type: "text" },
+    isUrgent: { type: "boolean" },
+    priority: { type: "number" },
+  },
+} as unknown as EntityDefinition;
+
+const listScreen: EntityListScreenDefinition = {
+  id: "tasks:screen:task-list",
+  type: "entityList",
+  entity: "task",
+  columns: [
+    "title",
+    "status",
+    "isUrgent",
+    { field: "priority", renderer: (v: unknown) => `P${v}` },
+  ],
+};
+
+describe("RenderList", () => {
+  test("empty state when rows is empty", () => {
+    render(<RenderList screen={listScreen} entity={taskEntity} rows={[]} featureName="tasks" />);
+    // Default-Primitive hängt "-empty" an die testId der DataTable.
+    expect(screen.getByTestId("render-list-table-empty")).toBeTruthy();
+    expect(screen.queryByTestId("render-list-table")).toBeNull();
+  });
+
+  test("custom emptyState overrides the default message", () => {
+    render(
+      <RenderList
+        screen={listScreen}
+        entity={taskEntity}
+        rows={[]}
+        featureName="tasks"
+        emptyState={<span data-testid="custom-empty">nix da</span>}
+      />,
+    );
+    expect(screen.getByTestId("custom-empty")).toBeTruthy();
+  });
+
+  test("renders a thead with one <th> per column, labeled via translate", () => {
+    render(
+      <RenderList
+        screen={listScreen}
+        entity={taskEntity}
+        rows={[]}
+        featureName="tasks"
+        translate={(key) => `T(${key})`}
+        emptyState={<span />}
+      />,
+    );
+    // Empty-state branch short-circuits before thead; push a row in.
+    render(
+      <RenderList
+        screen={listScreen}
+        entity={taskEntity}
+        rows={[{ id: "1", title: "Foo", status: "open", isUrgent: false, priority: 3 }]}
+        featureName="tasks"
+        translate={(key) => `T(${key})`}
+      />,
+    );
+    expect(screen.getByTestId("column-title").textContent).toBe("T(tasks:entity:task:field:title)");
+    expect(screen.getByTestId("column-priority").textContent).toBe(
+      "T(tasks:entity:task:field:priority)",
+    );
+  });
+
+  test("sortable column gets data-sortable attribute; non-sortable does not", () => {
+    render(
+      <RenderList
+        screen={listScreen}
+        entity={taskEntity}
+        rows={[{ id: "1", title: "Foo", status: "open", isUrgent: false, priority: 3 }]}
+        featureName="tasks"
+      />,
+    );
+    expect(screen.getByTestId("column-title").getAttribute("data-sortable")).toBe("true");
+    expect(screen.getByTestId("column-status").getAttribute("data-sortable")).toBeNull();
+  });
+
+  test("renders one row per item, one cell per column, with formatted values", () => {
+    render(
+      <RenderList
+        screen={listScreen}
+        entity={taskEntity}
+        rows={[
+          { id: "r1", title: "Alpha", status: "open", isUrgent: true, priority: 3 },
+          { id: "r2", title: "Beta", status: "done", isUrgent: false, priority: 1 },
+        ]}
+        featureName="tasks"
+      />,
+    );
+
+    // Row 1
+    expect(screen.getByTestId("cell-r1-title").textContent).toBe("Alpha");
+    expect(screen.getByTestId("cell-r1-isUrgent").textContent).toBe("✓");
+    expect(screen.getByTestId("cell-r1-priority").textContent).toBe("P3"); // custom renderer
+
+    // Row 2
+    expect(screen.getByTestId("cell-r2-isUrgent").textContent).toBe(""); // false → empty
+    expect(screen.getByTestId("cell-r2-priority").textContent).toBe("P1");
+  });
+
+  test("onRowClick fires with the ListRowViewModel when present; no-op without", () => {
+    const onClick = vi.fn();
+    render(
+      <RenderList
+        screen={listScreen}
+        entity={taskEntity}
+        rows={[{ id: "r1", title: "A", status: "open", isUrgent: false, priority: 0 }]}
+        featureName="tasks"
+        onRowClick={onClick}
+      />,
+    );
+    fireEvent.click(screen.getByTestId("row-r1"));
+    expect(onClick).toHaveBeenCalledOnce();
+    const arg = onClick.mock.lastCall?.[0] as { id: string; values: Record<string, unknown> };
+    expect(arg.id).toBe("r1");
+    expect(arg.values["title"]).toBe("A");
+  });
+
+  test("throws on unknown field in a column — boot-validator miss should fail loud", () => {
+    const badScreen: EntityListScreenDefinition = {
+      id: "tasks:screen:bad-list",
+      type: "entityList",
+      entity: "task",
+      columns: ["ghost"],
+    };
+    expect(() =>
+      render(
+        <RenderList
+          screen={badScreen}
+          entity={taskEntity}
+          rows={[{ id: "r1", ghost: "x" }]}
+          featureName="tasks"
+        />,
+      ),
+    ).toThrow(/unknown field "ghost"/);
+  });
+});

package/src/__tests__/sidebar.test.tsx

@@ -0,0 +1,59 @@
+// @vitest-environment jsdom
+//
+// Sidebar: 4-Slot-Layout (header, actions, children, footer). Pinnt
+// dass die Sektionen conditional rendern UND in der richtigen
+// Reihenfolge stehen — header → actions → nav → footer.
+
+import { describe, expect, test } from "vitest";
+import { Sidebar } from "../layout/sidebar";
+import { render, screen } from "./test-utils";
+
+describe("Sidebar", () => {
+  test("alle 4 Slots gesetzt — rendern in Header → Actions → Nav → Footer Reihenfolge", () => {
+    render(
+      <Sidebar
+        header={<span data-testid="h">brand</span>}
+        actions={<span data-testid="a">icons</span>}
+        footer={<span data-testid="f">profile</span>}
+        testId="sidebar"
+      >
+        <span data-testid="n">nav-content</span>
+      </Sidebar>,
+    );
+    const sidebar = screen.getByTestId("sidebar");
+    const header = sidebar.querySelector('[data-kumiko-layout="sidebar-header"]');
+    const actions = sidebar.querySelector('[data-kumiko-layout="sidebar-actions"]');
+    const nav = sidebar.querySelector('[data-kumiko-layout="sidebar-nav"]');
+    const footer = sidebar.querySelector('[data-kumiko-layout="sidebar-footer"]');
+
+    expect(header).not.toBeNull();
+    expect(actions).not.toBeNull();
+    expect(nav).not.toBeNull();
+    expect(footer).not.toBeNull();
+
+    // Reihenfolge im DOM: header < actions < nav < footer
+    const children = Array.from(sidebar.children);
+    expect(children.indexOf(header as Element)).toBeLessThan(children.indexOf(actions as Element));
+    expect(children.indexOf(actions as Element)).toBeLessThan(children.indexOf(nav as Element));
+    expect(children.indexOf(nav as Element)).toBeLessThan(children.indexOf(footer as Element));
+
+    // Inhalte landen im richtigen Slot
+    expect(header?.contains(screen.getByTestId("h"))).toBe(true);
+    expect(actions?.contains(screen.getByTestId("a"))).toBe(true);
+    expect(nav?.contains(screen.getByTestId("n"))).toBe(true);
+    expect(footer?.contains(screen.getByTestId("f"))).toBe(true);
+  });
+
+  test("nur children gesetzt — Header/Actions/Footer nicht gerendert", () => {
+    render(
+      <Sidebar testId="sidebar">
+        <span data-testid="n">nav</span>
+      </Sidebar>,
+    );
+    const sidebar = screen.getByTestId("sidebar");
+    expect(sidebar.querySelector('[data-kumiko-layout="sidebar-header"]')).toBeNull();
+    expect(sidebar.querySelector('[data-kumiko-layout="sidebar-actions"]')).toBeNull();
+    expect(sidebar.querySelector('[data-kumiko-layout="sidebar-footer"]')).toBeNull();
+    expect(sidebar.querySelector('[data-kumiko-layout="sidebar-nav"]')).not.toBeNull();
+  });
+});