fix: <TodoSliceComponent /> compat with Slice Mapper (#202)

Co-authored-by: lihbr <lihbr@users.noreply.github.com>
prismicio · Mar 27, 2024 · 0fd4313 · 0fd4313
1 parent a012ad0
commit 0fd4313
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 29 deletions.
diff --git a/src/SliceZone.tsx b/src/SliceZone.tsx
@@ -247,9 +247,11 @@ export type SliceZoneProps<TContext = unknown> = {
  * This is also the default React component rendered when a component mapping
  * cannot be found in `<SliceZone>`.
  */
-export const TODOSliceComponent = <TSlice extends SliceLike, TContext>({
+export const TODOSliceComponent = <TSlice extends SliceLike>({
 	slice,
-}: SliceComponentProps<TSlice, TContext>): JSX.Element | null => {
+}: {
+	slice: TSlice;
+}): JSX.Element | null => {
 	if (
 		typeof process !== "undefined" &&
 		process.env.NODE_ENV === "development"
@@ -291,7 +293,7 @@ export function SliceZone<TContext>({
 	slices = [],
 	components = {},
 	resolver,
-	defaultComponent = TODOSliceComponent,
+	defaultComponent,
 	context = {} as TContext,
 }: SliceZoneProps<TContext>) {
 	// TODO: Remove in v3 when the `resolver` prop is removed.
@@ -326,20 +328,24 @@ export function SliceZone<TContext>({
 				? slice.id
 				: `${index}-${JSON.stringify(slice)}`;
 
-		if (slice.__mapped) {
-			const { __mapped, ...mappedProps } = slice;
-
-			return <Comp key={key} {...mappedProps} />;
+		if (Comp) {
+			if (slice.__mapped) {
+				const { __mapped, ...mappedProps } = slice;
+
+				return <Comp key={key} {...mappedProps} />;
+			} else {
+				return (
+					<Comp
+						key={key}
+						slice={slice}
+						index={index}
+						slices={slices}
+						context={context}
+					/>
+				);
+			}
 		} else {
-			return (
-				<Comp
-					key={key}
-					slice={slice}
-					index={index}
-					slices={slices}
-					context={context}
-				/>
-			);
+			return <TODOSliceComponent key={key} slice={slice} />;
 		}
 	});
 

diff --git a/test/SliceZone.test.tsx b/test/SliceZone.test.tsx
@@ -133,7 +133,9 @@ it("renders TODO component if component mapping is missing", (ctx) => {
 		ctx.mock.value.slice(),
 		// Testing a GraphQL Slice
 		{ type: "baz" },
-	];
+		// Testing a mapped Slice
+		{ __mapped: true, id: "4", slice_type: "qux", abc: "123" },
+	] as const;
 	(slices[0] as Slice).slice_type = "foo";
 	(slices[1] as Slice).slice_type = "bar";
 
@@ -156,18 +158,9 @@ it("renders TODO component if component mapping is missing", (ctx) => {
 				slices={slices}
 				context={{}}
 			/>
-			<TODOSliceComponent
-				slice={slices[1]}
-				index={0}
-				slices={slices}
-				context={{}}
-			/>
-			<TODOSliceComponent
-				slice={slices[2]}
-				index={0}
-				slices={slices}
-				context={{}}
-			/>
+			<TODOSliceComponent slice={slices[1]} />
+			<TODOSliceComponent slice={slices[2]} />
+			<TODOSliceComponent slice={slices[3]} />
 		</>,
 	);
 
@@ -180,6 +173,10 @@ it("renders TODO component if component mapping is missing", (ctx) => {
 		expect.stringMatching(/could not find a component/i),
 		slices[2],
 	);
+	expect(consoleWarnSpy).toHaveBeenCalledWith(
+		expect.stringMatching(/could not find a component/i),
+		slices[3],
+	);
 
 	consoleWarnSpy.mockRestore();
 	process.env.NODE_ENV = originalNodeEnv;