diff --git a/src/internal/analytics-metadata/__tests__/page-scanner-utils.test.tsx b/src/internal/analytics-metadata/__tests__/page-scanner-utils.test.tsx index df6b636..d6998e9 100644 --- a/src/internal/analytics-metadata/__tests__/page-scanner-utils.test.tsx +++ b/src/internal/analytics-metadata/__tests__/page-scanner-utils.test.tsx @@ -23,7 +23,7 @@ describe('getComponentsTree', () => { ); const target = container.querySelector('#outer-target') as HTMLElement; expect(getComponentsTree(target)).toEqual([ - { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' }, children: [] }, + { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } }, ]); }); test('only includes components inside the specified element', () => { @@ -38,10 +38,10 @@ describe('getComponentsTree', () => { ); expect(getComponentsTree(container.querySelector('#outer-target-1') as HTMLElement)).toEqual([ - { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' }, children: [] }, + { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } }, ]); expect(getComponentsTree(container.querySelector('#outer-target-2') as HTMLElement)).toEqual([ - { name: 'ComponentTwo', label: 'sub label', children: [] }, + { name: 'ComponentTwo', label: 'sub label' }, ]); }); test('can include multiple components', () => { @@ -55,11 +55,11 @@ describe('getComponentsTree', () => { { name: 'ComponentThree', children: [ - { name: 'ComponentTwo', label: 'sub label', children: [] }, - { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' }, children: [] }, + { name: 'ComponentTwo', label: 'sub label' }, + { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } }, ], }, - { name: 'ComponentTwo', label: 'sub label', children: [] }, + { name: 'ComponentTwo', label: 'sub label' }, ]); }); test('can include multiple nested components', () => { @@ -74,13 +74,13 @@ describe('getComponentsTree', () => { { name: 'ComponentThree', children: [ - { name: 'ComponentTwo', label: 'sub label', children: [] }, - { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' }, children: [] }, + { name: 'ComponentTwo', label: 'sub label' }, + { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } }, { name: 'ComponentThree', children: [ - { name: 'ComponentTwo', label: 'sub label', children: [] }, - { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' }, children: [] }, + { name: 'ComponentTwo', label: 'sub label' }, + { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } }, ], }, ], @@ -98,11 +98,11 @@ describe('getComponentsTree', () => { { name: 'ComponentThree', children: [ - { name: 'ComponentTwo', label: 'sub label', children: [] }, - { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' }, children: [] }, + { name: 'ComponentTwo', label: 'sub label' }, + { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } }, ], }, - { name: 'ComponentTwo', label: 'sub label', children: [] }, + { name: 'ComponentTwo', label: 'sub label' }, ]); }); test('skips malformed metadata', () => { @@ -113,7 +113,7 @@ describe('getComponentsTree', () => { ); const target = container.querySelector('#outer-target') as HTMLElement; expect(getComponentsTree(target)).toEqual([ - { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' }, children: [] }, + { name: 'ComponentOne', label: 'component label', properties: { multi: 'true' } }, ]); }); }); diff --git a/src/internal/analytics-metadata/interfaces.ts b/src/internal/analytics-metadata/interfaces.ts index 297e244..383dd3c 100644 --- a/src/internal/analytics-metadata/interfaces.ts +++ b/src/internal/analytics-metadata/interfaces.ts @@ -12,7 +12,7 @@ export interface GeneratedAnalyticsMetadata { contexts: Array; } -export interface GeneratedAnalyticsMetadataComponent { +interface GeneratedAnalyticsMetadataComponent { // name of the component. For example: "awsui.RadioGroup". We prefix the actual name with awsui to account for future tagging of custom components name: string; diff --git a/src/internal/analytics-metadata/page-scanner-utils.ts b/src/internal/analytics-metadata/page-scanner-utils.ts index 615b32e..e90f645 100644 --- a/src/internal/analytics-metadata/page-scanner-utils.ts +++ b/src/internal/analytics-metadata/page-scanner-utils.ts @@ -3,10 +3,12 @@ import { METADATA_ATTRIBUTE } from './attributes'; import { isNodeComponent } from './dom-utils'; -import { GeneratedAnalyticsMetadataComponent } from './interfaces'; import { getGeneratedAnalyticsMetadata } from './utils'; -interface GeneratedAnalyticsMetadataComponentTree extends GeneratedAnalyticsMetadataComponent { +interface GeneratedAnalyticsMetadataComponentTree { + name: string; + label: string; + properties?: Record; children?: Array; } @@ -26,10 +28,14 @@ const getComponentsTreeRecursive = ( return; } visited.add(componentNode); - tree.push({ + const treeItem: GeneratedAnalyticsMetadataComponentTree = { ...getGeneratedAnalyticsMetadata(componentNode).contexts[0].detail, - children: getComponentsTreeRecursive(componentNode, visited), - }); + }; + const children = getComponentsTreeRecursive(componentNode, visited); + if (children.length > 0) { + treeItem.children = children; + } + tree.push(treeItem); }); return tree; };