diff --git a/src/common/utils/add-separator/add-separator.ts b/src/common/utils/add-separator/add-separator.ts index d0d87c9a3f..6fd6b14642 100644 --- a/src/common/utils/add-separator/add-separator.ts +++ b/src/common/utils/add-separator/add-separator.ts @@ -3,7 +3,7 @@ * Licensed under MIT License. See LICENSE in root directory for more information. */ -type GetSeparator = (left: Item, right: Item) => Separator; +export type GetSeparator = (left: Item, right: Item) => Separator; export const addSeparator = ( getSeparator: GetSeparator, diff --git a/src/renderer/components/map/__snapshots__/map.test.tsx.snap b/src/renderer/components/map/__snapshots__/map.test.tsx.snap index e6e69f554a..0cd7134778 100644 --- a/src/renderer/components/map/__snapshots__/map.test.tsx.snap +++ b/src/renderer/components/map/__snapshots__/map.test.tsx.snap @@ -39,6 +39,38 @@ exports[`Map given more than one item and separator renders 1`] = ` `; +exports[`Map given more than one item and separator using left and right renders 1`] = ` + +
+
+
+ Some separator between + some-item-id + and + some-other-item-id +
+
+
+ Some separator between + some-other-item-id + and + some-another-item-id +
+
+
+ +`; + exports[`Map given no items and placeholder renders 1`] = `
diff --git a/src/renderer/components/map/map.test.tsx b/src/renderer/components/map/map.test.tsx index 4171f1a1c1..cf45c0d7f1 100644 --- a/src/renderer/components/map/map.test.tsx +++ b/src/renderer/components/map/map.test.tsx @@ -118,4 +118,42 @@ describe("Map", () => { expect(rendered.getAllByTestId("separator")).toHaveLength(2); }); }); + + describe("given more than one item and separator using left and right", () => { + let rendered: RenderResult; + + beforeEach(() => { + rendered = render( + ( +
+ Some separator between + {left.id} + and + {right.id} +
+ )} + > + {(item) =>
} + , + ); + }); + + it("renders", () => { + expect(rendered.baseElement).toMatchSnapshot(); + }); + + it("renders items", () => { + expect(rendered.getByTestId("some-item-id")).toBeInTheDocument(); + }); + + it("renders separator", () => { + expect(rendered.getByTestId("separator-between-some-item-id-and-some-other-item-id")).toBeInTheDocument(); + }); + }); }); diff --git a/src/renderer/components/map/map.tsx b/src/renderer/components/map/map.tsx index 748a688c71..f3b660d041 100644 --- a/src/renderer/components/map/map.tsx +++ b/src/renderer/components/map/map.tsx @@ -5,6 +5,7 @@ import { pipeline } from "@ogre-tools/fp"; import { identity, map } from "lodash/fp"; import React from "react"; +import type { GetSeparator } from "../../../common/utils/add-separator/add-separator"; import { addSeparator } from "../../../common/utils/add-separator/add-separator"; interface RequiredPropertiesForItem { @@ -15,7 +16,7 @@ interface MapProps { items: Item[]; children: (item: Item) => React.ReactElement; getPlaceholder?: () => React.ReactElement; - getSeparator?: () => React.ReactElement; + getSeparator?: GetSeparator; } export const Map = ( @@ -42,7 +43,7 @@ export const Map = ( id: `separator-between-${left.item.id}-and-${right.item.id}`, }, - render: getSeparator, + render: () => getSeparator(left.item, right.item), }), items,