import { describe, it } from "@std/testing/bdd"; import { runPatternScenario } from "../pattern-harness.ts"; import type { PatternIntegrationScenario } from "../pattern-harness.ts"; export const componentLibraryCatalogScenario: PatternIntegrationScenario< Record > = { name: "component library catalog updates prop coverage when recipes register", module: new URL("./component-library-catalog.pattern.ts", import.meta.url), exportName: "componentLibraryCatalog", steps: [ { expect: [ { path: "components", value: [ { id: "primary-button", name: "Primary Button", category: "Buttons", categoryKey: "buttons", description: "Primary action button for critical flows.", props: ["disabled", "label", "size", "variant"], }, { id: "secondary-button", name: "Secondary Button", category: "Buttons", categoryKey: "buttons", description: "Secondary emphasis button for supporting actions.", props: ["disabled", "label", "variant"], }, { id: "input-field", name: "Input Field", category: "Forms", categoryKey: "forms", description: "Form input field supporting helper and error states.", props: [ "error", "helper-text", "label", "placeholder", "value", ], }, ], }, { path: "categories", value: [ { key: "buttons", label: "Buttons", componentCount: 2 }, { key: "forms", label: "Forms", componentCount: 1 }, ], }, { path: "registrations", value: [] }, { path: "componentCoverage", value: [ { id: "primary-button", name: "Primary Button", category: "Buttons", props: ["disabled", "label", "size", "variant"], coveredProps: [], uncoveredProps: [ "disabled", "label", "size", "variant", ], coveragePercent: 0, recipeCount: 0, recipes: [], }, { id: "secondary-button", name: "Secondary Button", category: "Buttons", props: ["disabled", "label", "variant"], coveredProps: [], uncoveredProps: ["disabled", "label", "variant"], coveragePercent: 0, recipeCount: 0, recipes: [], }, { id: "input-field", name: "Input Field", category: "Forms", props: [ "error", "helper-text", "label", "placeholder", "value", ], coveredProps: [], uncoveredProps: [ "error", "helper-text", "label", "placeholder", "value", ], coveragePercent: 0, recipeCount: 0, recipes: [], }, ], }, { path: "propCoverage", value: [ { prop: "disabled", declared: 2, covered: 0, coveragePercent: 0, components: ["Primary Button", "Secondary Button"], coveredComponents: [], recipes: [], }, { prop: "error", declared: 1, covered: 0, coveragePercent: 0, components: ["Input Field"], coveredComponents: [], recipes: [], }, { prop: "helper-text", declared: 1, covered: 0, coveragePercent: 0, components: ["Input Field"], coveredComponents: [], recipes: [], }, { prop: "label", declared: 3, covered: 0, coveragePercent: 0, components: [ "Input Field", "Primary Button", "Secondary Button", ], coveredComponents: [], recipes: [], }, { prop: "placeholder", declared: 1, covered: 0, coveragePercent: 0, components: ["Input Field"], coveredComponents: [], recipes: [], }, { prop: "size", declared: 1, covered: 0, coveragePercent: 0, components: ["Primary Button"], coveredComponents: [], recipes: [], }, { prop: "value", declared: 1, covered: 0, coveragePercent: 0, components: ["Input Field"], coveredComponents: [], recipes: [], }, { prop: "variant", declared: 2, covered: 0, coveragePercent: 0, components: ["Primary Button", "Secondary Button"], coveredComponents: [], recipes: [], }, ], }, { path: "stats", value: { componentCount: 3, fullyCovered: 0, partiallyCovered: 0, uncovered: 3, averageCoverage: 0, propCount: 8, propsCovered: 0, }, }, { path: "coverageSummary", value: "0/3 covered | props 0/8" }, { path: "averageCoverageLabel", value: "0% average coverage" }, { path: "registrationTrail", value: "No recipes registered yet" }, { path: "lastRegistration", value: "none" }, ], }, { events: [{ stream: "controls.register", payload: { component: "Primary Button", recipe: "Hero CTA", props: ["Label", "Variant", "Disabled"], }, }], expect: [ { path: "componentCoverage", value: [ { id: "primary-button", name: "Primary Button", category: "Buttons", props: ["disabled", "label", "size", "variant"], coveredProps: ["disabled", "label", "variant"], uncoveredProps: ["size"], coveragePercent: 75, recipeCount: 1, recipes: ["Hero Cta"], }, { id: "secondary-button", name: "Secondary Button", category: "Buttons", props: ["disabled", "label", "variant"], coveredProps: [], uncoveredProps: ["disabled", "label", "variant"], coveragePercent: 0, recipeCount: 0, recipes: [], }, { id: "input-field", name: "Input Field", category: "Forms", props: [ "error", "helper-text", "label", "placeholder", "value", ], coveredProps: [], uncoveredProps: [ "error", "helper-text", "label", "placeholder", "value", ], coveragePercent: 0, recipeCount: 0, recipes: [], }, ], }, { path: "propCoverage", value: [ { prop: "disabled", declared: 2, covered: 1, coveragePercent: 50, components: ["Primary Button", "Secondary Button"], coveredComponents: ["Primary Button"], recipes: ["Hero Cta"], }, { prop: "variant", declared: 2, covered: 1, coveragePercent: 50, components: ["Primary Button", "Secondary Button"], coveredComponents: ["Primary Button"], recipes: ["Hero Cta"], }, { prop: "label", declared: 3, covered: 1, coveragePercent: 33, components: [ "Input Field", "Primary Button", "Secondary Button", ], coveredComponents: ["Primary Button"], recipes: ["Hero Cta"], }, { prop: "error", declared: 1, covered: 0, coveragePercent: 0, components: ["Input Field"], coveredComponents: [], recipes: [], }, { prop: "helper-text", declared: 1, covered: 0, coveragePercent: 0, components: ["Input Field"], coveredComponents: [], recipes: [], }, { prop: "placeholder", declared: 1, covered: 0, coveragePercent: 0, components: ["Input Field"], coveredComponents: [], recipes: [], }, { prop: "size", declared: 1, covered: 0, coveragePercent: 0, components: ["Primary Button"], coveredComponents: [], recipes: [], }, { prop: "value", declared: 1, covered: 0, coveragePercent: 0, components: ["Input Field"], coveredComponents: [], recipes: [], }, ], }, { path: "registrations", value: [ { componentId: "primary-button", recipe: "Hero Cta", props: ["disabled", "label", "variant"], }, ], }, { path: "stats", value: { componentCount: 3, fullyCovered: 0, partiallyCovered: 1, uncovered: 2, averageCoverage: 25, propCount: 8, propsCovered: 3, }, }, { path: "coverageSummary", value: "0/3 covered | props 3/8" }, { path: "averageCoverageLabel", value: "25% average coverage" }, { path: "registrationTrail", value: "Primary Button: Hero Cta (3 props)", }, { path: "lastRegistration", value: "Primary Button: Hero Cta (3 props)", }, ], }, { events: [{ stream: "controls.register", payload: { component: "secondary-button", recipe: "Secondary QA", props: ["label", "variant", "disabled"], }, }], expect: [ { path: "componentCoverage", value: [ { id: "primary-button", name: "Primary Button", category: "Buttons", props: ["disabled", "label", "size", "variant"], coveredProps: ["disabled", "label", "variant"], uncoveredProps: ["size"], coveragePercent: 75, recipeCount: 1, recipes: ["Hero Cta"], }, { id: "secondary-button", name: "Secondary Button", category: "Buttons", props: ["disabled", "label", "variant"], coveredProps: ["disabled", "label", "variant"], uncoveredProps: [], coveragePercent: 100, recipeCount: 1, recipes: ["Secondary Qa"], }, { id: "input-field", name: "Input Field", category: "Forms", props: [ "error", "helper-text", "label", "placeholder", "value", ], coveredProps: [], uncoveredProps: [ "error", "helper-text", "label", "placeholder", "value", ], coveragePercent: 0, recipeCount: 0, recipes: [], }, ], }, { path: "propCoverage", value: [ { prop: "disabled", declared: 2, covered: 2, coveragePercent: 100, components: ["Primary Button", "Secondary Button"], coveredComponents: [ "Primary Button", "Secondary Button", ], recipes: ["Hero Cta", "Secondary Qa"], }, { prop: "variant", declared: 2, covered: 2, coveragePercent: 100, components: ["Primary Button", "Secondary Button"], coveredComponents: [ "Primary Button", "Secondary Button", ], recipes: ["Hero Cta", "Secondary Qa"], }, { prop: "label", declared: 3, covered: 2, coveragePercent: 67, components: [ "Input Field", "Primary Button", "Secondary Button", ], coveredComponents: [ "Primary Button", "Secondary Button", ], recipes: ["Hero Cta", "Secondary Qa"], }, { prop: "error", declared: 1, covered: 0, coveragePercent: 0, components: ["Input Field"], coveredComponents: [], recipes: [], }, { prop: "helper-text", declared: 1, covered: 0, coveragePercent: 0, components: ["Input Field"], coveredComponents: [], recipes: [], }, { prop: "placeholder", declared: 1, covered: 0, coveragePercent: 0, components: ["Input Field"], coveredComponents: [], recipes: [], }, { prop: "size", declared: 1, covered: 0, coveragePercent: 0, components: ["Primary Button"], coveredComponents: [], recipes: [], }, { prop: "value", declared: 1, covered: 0, coveragePercent: 0, components: ["Input Field"], coveredComponents: [], recipes: [], }, ], }, { path: "registrations", value: [ { componentId: "primary-button", recipe: "Hero Cta", props: ["disabled", "label", "variant"], }, { componentId: "secondary-button", recipe: "Secondary Qa", props: ["disabled", "label", "variant"], }, ], }, { path: "stats", value: { componentCount: 3, fullyCovered: 1, partiallyCovered: 1, uncovered: 1, averageCoverage: 58, propCount: 8, propsCovered: 3, }, }, { path: "coverageSummary", value: "1/3 covered | props 3/8" }, { path: "averageCoverageLabel", value: "58% average coverage" }, { path: "registrationTrail", value: "Primary Button: Hero Cta (3 props) | " + "Secondary Button: Secondary Qa (all props)", }, { path: "lastRegistration", value: "Secondary Button: Secondary Qa (all props)", }, ], }, { events: [{ stream: "controls.register", payload: { component: "Input Field", recipe: "Form Baseline", props: ["Label", "Placeholder", "Helper Text"], }, }], expect: [ { path: "componentCoverage", value: [ { id: "primary-button", name: "Primary Button", category: "Buttons", props: ["disabled", "label", "size", "variant"], coveredProps: ["disabled", "label", "variant"], uncoveredProps: ["size"], coveragePercent: 75, recipeCount: 1, recipes: ["Hero Cta"], }, { id: "secondary-button", name: "Secondary Button", category: "Buttons", props: ["disabled", "label", "variant"], coveredProps: ["disabled", "label", "variant"], uncoveredProps: [], coveragePercent: 100, recipeCount: 1, recipes: ["Secondary Qa"], }, { id: "input-field", name: "Input Field", category: "Forms", props: [ "error", "helper-text", "label", "placeholder", "value", ], coveredProps: ["helper-text", "label", "placeholder"], uncoveredProps: ["error", "value"], coveragePercent: 60, recipeCount: 1, recipes: ["Form Baseline"], }, ], }, { path: "propCoverage", value: [ { prop: "label", declared: 3, covered: 3, coveragePercent: 100, components: [ "Input Field", "Primary Button", "Secondary Button", ], coveredComponents: [ "Input Field", "Primary Button", "Secondary Button", ], recipes: ["Form Baseline", "Hero Cta", "Secondary Qa"], }, { prop: "disabled", declared: 2, covered: 2, coveragePercent: 100, components: ["Primary Button", "Secondary Button"], coveredComponents: [ "Primary Button", "Secondary Button", ], recipes: ["Hero Cta", "Secondary Qa"], }, { prop: "variant", declared: 2, covered: 2, coveragePercent: 100, components: ["Primary Button", "Secondary Button"], coveredComponents: [ "Primary Button", "Secondary Button", ], recipes: ["Hero Cta", "Secondary Qa"], }, { prop: "helper-text", declared: 1, covered: 1, coveragePercent: 100, components: ["Input Field"], coveredComponents: ["Input Field"], recipes: ["Form Baseline"], }, { prop: "placeholder", declared: 1, covered: 1, coveragePercent: 100, components: ["Input Field"], coveredComponents: ["Input Field"], recipes: ["Form Baseline"], }, { prop: "error", declared: 1, covered: 0, coveragePercent: 0, components: ["Input Field"], coveredComponents: [], recipes: [], }, { prop: "size", declared: 1, covered: 0, coveragePercent: 0, components: ["Primary Button"], coveredComponents: [], recipes: [], }, { prop: "value", declared: 1, covered: 0, coveragePercent: 0, components: ["Input Field"], coveredComponents: [], recipes: [], }, ], }, { path: "registrations", value: [ { componentId: "input-field", recipe: "Form Baseline", props: ["helper-text", "label", "placeholder"], }, { componentId: "primary-button", recipe: "Hero Cta", props: ["disabled", "label", "variant"], }, { componentId: "secondary-button", recipe: "Secondary Qa", props: ["disabled", "label", "variant"], }, ], }, { path: "stats", value: { componentCount: 3, fullyCovered: 1, partiallyCovered: 2, uncovered: 0, averageCoverage: 78, propCount: 8, propsCovered: 5, }, }, { path: "coverageSummary", value: "1/3 covered | props 5/8" }, { path: "averageCoverageLabel", value: "78% average coverage" }, { path: "registrationTrail", value: "Primary Button: Hero Cta (3 props) | " + "Secondary Button: Secondary Qa (all props) | " + "Input Field: Form Baseline (3 props)", }, { path: "lastRegistration", value: "Input Field: Form Baseline (3 props)", }, ], }, ], }; export const scenarios = [componentLibraryCatalogScenario]; describe("component-library-catalog", () => { for (const scenario of scenarios) { it(scenario.name, async () => { await runPatternScenario(scenario); }); } });