Add new test page

exacs · exacs · commit aa797345c6a5 · 2025-11-04T18:09:22.000+01:00
diff --git a/__test__/test-website/src/app/only-tags/[...slug]/page.tsx b/__test__/test-website/src/app/only-tags/[...slug]/page.tsx
@@ -0,0 +1,66 @@
+import { GraphClient, GraphErrors } from '@optimizely/cms-sdk';
+import { OptimizelyComponent } from '@optimizely/cms-sdk/react/server';
+import React from 'react';
+
+type Props = {
+  params: Promise<{
+    slug: string[];
+  }>;
+  // Assume that search params are correct:
+  searchParams: Promise<{ variation?: string }>;
+};
+
+function handleGraphErrors(err: unknown): never {
+  if (err instanceof GraphErrors.GraphResponseError) {
+    console.log('Error message:', err.message);
+    console.log('Query:', err.request.query);
+    console.log('Variables:', err.request.variables);
+  }
+  if (err instanceof GraphErrors.GraphContentResponseError) {
+    console.log('Detailed errors: ', err.errors);
+  }
+
+  throw err;
+}
+
+function getRandomElement<T>(arr: T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)];
+}
+
+export default async function Page({ params, searchParams }: Props) {
+  const { slug } = await params;
+  const path = `/en/${slug.join('/')}/`;
+
+  const client = new GraphClient(process.env.OPTIMIZELY_GRAPH_SINGLE_KEY!, {
+    graphUrl: process.env.OPTIMIZELY_GRAPH_URL,
+  });
+
+  const variation = (await searchParams).variation;
+
+  if (variation) {
+    const list = await client
+      .getContentByPath(path, {
+        variation: { include: 'SOME', value: [variation] },
+      })
+      .catch(handleGraphErrors);
+    return <OptimizelyComponent opti={list[0]} />;
+  }
+
+  const items = await client
+    .getContentByPath(path, {
+      variation: { include: 'SOME', value: [], includeOriginal: true },
+    })
+    .catch(handleGraphErrors);
+
+  console.log('Variations', items.length);
+
+  const content = getRandomElement(items);
+
+  return (
+    <>
+      <p>Number of variations: {items.length}</p>
+      <hr />
+      <OptimizelyComponent opti={content} />
+    </>
+  );
+}
diff --git a/__test__/test-website/src/app/only-tags/layout.tsx b/__test__/test-website/src/app/only-tags/layout.tsx
@@ -0,0 +1,68 @@
+import {
+  BlankSection,
+  BlankSection2,
+  Column,
+  ColumnA,
+  Component1,
+  Component1A,
+  Component1B,
+  Component2,
+  Component2A,
+  Component3,
+  Component3C,
+  ct1,
+  ct2,
+  ct3,
+  dt1,
+  dt2,
+  dt3,
+  dt4,
+  dt5,
+  dt6,
+  Row,
+  RowA,
+} from '@/components/with-display-templates';
+import {
+  initContentTypeRegistry,
+  initDisplayTemplateRegistry,
+} from '@optimizely/cms-sdk';
+import { initReactComponentRegistry } from '@optimizely/cms-sdk/react/server';
+
+initContentTypeRegistry([ct1, ct2, ct3]);
+initDisplayTemplateRegistry([dt1, dt2, dt3, dt4, dt5, dt6]);
+initReactComponentRegistry({
+  // In this example, all content types have components but only with tags
+  resolver: {
+    test_c1: {
+      tags: {
+        tagA: Component1A,
+        tagB: Component1B,
+      },
+    },
+    'test_c2:tagA': Component2A,
+    test_c3: {
+      tags: {
+        tagC: Component3C,
+      },
+    },
+    'BlankSection:tagA': BlankSection2,
+    _Row: {
+      tags: {
+        tagA: RowA,
+      },
+    },
+    '_Column:tagA': ColumnA,
+  },
+});
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
