chore: Add documenter tests

Author: taheramr

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -94,3 +94,98 @@ Defaults to \`false\`.",
   "releaseStatus": "stable",
 }
 `;
+
+exports[`definition for code-view matches the snapshot > code-view 1`] = `
+{
+  "dashCaseName": "code-view",
+  "events": [],
+  "functions": [],
+  "name": "CodeView",
+  "properties": [
+    {
+      "description": "Adds an \`aria-label\` to the component. Use this label when there is not enough context around the code snippet to describe its purpose or content.",
+      "name": "ariaLabel",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "Adds \`aria-labelledby\` to the component. Use this property to reference the ID of an existing element that provides a descriptive label for the code snippet.",
+      "name": "ariaLabelledby",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "The code content to be displayed.",
+      "name": "content",
+      "optional": false,
+      "type": "string",
+    },
+    {
+      "description": "A function to perform custom syntax highlighting.",
+      "inlineType": {
+        "name": "(code: string) => React.ReactNode",
+        "parameters": [
+          {
+            "name": "code",
+            "type": "string",
+          },
+        ],
+        "returnType": "React.ReactNode",
+        "type": "function",
+      },
+      "name": "highlight",
+      "optional": true,
+      "type": "((code: string) => React.ReactNode)",
+    },
+    {
+      "description": "An object containing all the necessary localized strings required by the component. The object should contain:
+
+* \`lineNumberLabel\` - Label for the column that displays line numbers (when line numbers are visible)
+* \`codeLabel\` - Label for the column that displays the code content (when line numbers are visible)",
+      "inlineType": {
+        "name": "CodeViewProps.I18nStrings",
+        "properties": [
+          {
+            "name": "codeLabel",
+            "optional": true,
+            "type": "string",
+          },
+          {
+            "name": "lineNumberLabel",
+            "optional": true,
+            "type": "string",
+          },
+        ],
+        "type": "object",
+      },
+      "name": "i18nStrings",
+      "optional": true,
+      "type": "CodeViewProps.I18nStrings",
+    },
+    {
+      "description": "Controls the display of line numbers.
+
+Defaults to \`false\`.",
+      "name": "lineNumbers",
+      "optional": true,
+      "type": "boolean",
+    },
+    {
+      "description": "Controls whether line-wrapping is enabled when content would overflow the component.
+
+Defaults to \`false\`.",
+      "name": "wrapLines",
+      "optional": true,
+      "type": "boolean",
+    },
+  ],
+  "regions": [
+    {
+      "description": "An optional slot to display a button to enable users to perform actions, such as copy or download the code snippet.",
+      "isDefault": false,
+      "name": "actions",
+    },
+  ],
+  "releaseStatus": "stable",
+}
+`;

src/__tests__/documenter.test.ts

@@ -2,8 +2,16 @@
 // SPDX-License-Identifier: Apache-2.0
 import { expect, test } from "vitest";
 
-import apiDocs from "../../lib/components/internal/api-docs/components";
+import componentDefinitions from "../../lib/components/internal/api-docs/components";
+import { getAllComponents } from "./utils";
 
-test.each(Object.entries(apiDocs))("definition for $0 matches the snapshot", (_name, definition) => {
-  expect(definition).toMatchSnapshot();
+test.each<string>(getAllComponents())(`definition for %s matches the snapshot`, (componentName: string) => {
+  const definition = componentDefinitions[componentName];
+
+  // overriding with a fake value so that when there are icon changes in components this test doesn't block it
+  const iconNameDefinition = definition.properties.find(({ name }: { name: string }) => name === "iconName");
+  if (iconNameDefinition && iconNameDefinition.inlineType?.type === "union") {
+    iconNameDefinition.inlineType.values = ["comes from @cloudscape-design/components"];
+  }
+  expect(definition).toMatchSnapshot(componentName);
 });

src/__tests__/utils.ts

@@ -0,0 +1,27 @@
+/* eslint-env node */
+/* eslint-disable header/header */
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+const componentsDir = path.resolve(__dirname, "../../lib/components");
+
+export function getAllComponents(): string[] {
+  return fs
+    .readdirSync(componentsDir)
+    .filter(
+      (name) =>
+        name !== "internal" &&
+        name !== "test-utils" &&
+        !name.includes(".") &&
+        !name.includes("LICENSE") &&
+        !name.includes("NOTICE"),
+    );
+}
+
+export async function requireComponent(componentName: string) {
+  // eslint-disable-next-line no-unsanitized/method
+  const { default: Component } = await import(path.join(componentsDir, componentName));
+  return Component;
+}