docs: add testing table for patternhub (#2983)

* docs: add testing table for patternhub

* fix: issue with patternhub build

showcases/patternhub/.gitignore

@@ -59,3 +59,5 @@ components/code-docs/
 !components/06-feedback.mdx
 !.env
 /generated.js
+
+data/testing-table.ts

showcases/patternhub/data/routes.tsx

@@ -222,7 +222,8 @@ export const ROUTES: NavigationItem[] = [
 						path: '/foundations/variables/examples'
 					}
 				]
-			}
+			},
+			{ label: 'Testing Overview Table', path: '/foundations/test-table' }
 		]
 	},
 	{

showcases/patternhub/package.json

@@ -12,6 +12,7 @@
     "compile:02_copy-docs": "cpr ../../docs ./public/docs -o",
     "compile:03_components": "node scripts/esbuild-generate.mjs",
     "compile:04_run": "node generated.js",
+    "compile:05_test-table": "node scripts/generate-test-table.js",
     "dev": "cross-env NEXT_PUBLIC_BASE_PATH=/mono/sub NODE_OPTIONS='--inspect' npm-run-all compile:* -p open next:dev",
     "lint": "next lint",
     "next:dev": "next dev",

showcases/patternhub/pages/foundations/test-table/index.tsx

@@ -0,0 +1,103 @@
+import DefaultPage from '../../../components/default-page';
+import { DBInfotext } from '../../../../../output/react/src';
+import { testTableData } from '../../../data/testing-table'; // This file will be generated at runtime
+
+const tableHeaders = [
+	{
+		label: 'Component'
+	},
+	{
+		label: 'Single Component: Visuals',
+		href: 'https://playwright.dev/docs/screenshots'
+	},
+	{
+		label: 'Single Component: A11y (Axe)',
+		href: 'https://github.com/dequelabs/axe-core'
+	},
+	{
+		label: 'Showcase: Visuals',
+		href: 'https://playwright.dev/docs/screenshots'
+	},
+	{
+		label: 'Showcase: A11y (Axe)',
+		href: 'https://github.com/dequelabs/axe-core'
+	},
+	{
+		label: 'Showcase: A11y (Accessibility-Checker)',
+		href: 'https://github.com/IBMa/equal-access'
+	},
+	{
+		label: 'Showcase: A11y (Screen-Reader)',
+		href: 'https://github.com/guidepup/guidepup'
+	}
+];
+
+const TestTable = () => {
+	return (
+		<DefaultPage>
+			<table>
+				<thead>
+					<tr>
+						{tableHeaders.map((header) => (
+							<th key={header.label}>
+								{header.href ? (
+									<a
+										href={header.href}
+										target="_blank"
+										referrerPolicy="no-referrer">
+										{header.label}
+									</a>
+								) : (
+									header.label
+								)}
+							</th>
+						))}
+					</tr>
+				</thead>
+				<tbody>
+					{testTableData.map(
+						({
+							name,
+							singleComponentVisuals,
+							singleComponentAxe,
+							showcaseVisuals,
+							showcaseAxe,
+							showcaseAC,
+							showcaseGP
+						}) => (
+							<tr key={name}>
+								<td>{name}</td>
+								{[
+									singleComponentVisuals,
+									singleComponentAxe,
+									showcaseVisuals,
+									showcaseAxe,
+									showcaseAC,
+									showcaseGP
+								].map((status, index) => (
+									<td key={`${name}-${index}`}>
+										<DBInfotext
+											semantic={
+												status
+													? 'successful'
+													: 'critical'
+											}
+											icon={
+												status
+													? 'check_circle'
+													: 'cross_circle'
+											}>
+											{status ? 'Done' : 'Missing'}
+										</DBInfotext>
+									</td>
+								))}
+							</tr>
+						)
+					)}
+				</tbody>
+			</table>
+		</DefaultPage>
+	);
+};
+
+export default TestTable;

showcases/patternhub/scripts/generate-test-table.js

@@ -0,0 +1,46 @@
+import FS from 'node:fs';
+import { getComponentName } from './utils.js';
+
+const generateTestTable = () => {
+	const docs = JSON.parse(
+		FS.readFileSync('./../../output/docs.json', 'utf8').toString()
+	);
+	const data = [];
+	for (const key of Object.keys(docs)) {
+		const componentName = getComponentName(key);
+		if (
+			componentName.endsWith('-list') ||
+			componentName.endsWith('-panel') ||
+			componentName.endsWith('-item')
+		) {
+			// We don't want to add something like accordion-item
+			continue;
+		}
+
+		const hasComponentTest = FS.existsSync(
+			`./../../packages/components/src/components/${componentName}/${componentName}.spec.tsx`
+		);
+		const hasShowcaseTest = FS.existsSync(
+			`./../../showcases/e2e/${componentName}/showcase-${componentName}.spec.ts`
+		);
+		const hasScreenReaderTest = FS.existsSync(
+			`./../../showcases/screen-reader/tests/${componentName}.spec.ts`
+		);
+		data.push({
+			name: componentName,
+			singleComponentVisuals: hasComponentTest,
+			singleComponentAxe: hasComponentTest,
+			showcaseVisuals: hasShowcaseTest,
+			showcaseAxe: hasShowcaseTest,
+			showcaseAC: hasShowcaseTest,
+			showcaseGP: hasScreenReaderTest
+		});
+	}
+
+	FS.writeFileSync(
+		`./data/testing-table.ts`,
+		'export const testTableData: any[] = ' + JSON.stringify(data)
+	);
+};
+
+generateTestTable();