From 18352fa9aedb7797b4ed25d309735c035dec9506 Mon Sep 17 00:00:00 2001 From: Francesco Longo Date: Fri, 13 Sep 2024 16:43:53 +0200 Subject: [PATCH 1/4] feat: Allow to specify a root class name as a label identifier in analytics metadata --- .../__tests__/components.tsx | 1 + .../__tests__/dom-utils.test.tsx | 50 +++++++++++++++++-- .../__tests__/labels-utils.test.tsx | 37 ++++++++++++++ .../__tests__/testing-utils.test.tsx | 4 ++ .../__tests__/utils.test.tsx | 1 + src/internal/analytics-metadata/dom-utils.ts | 11 ++++ src/internal/analytics-metadata/interfaces.ts | 1 + .../analytics-metadata/labels-utils.ts | 22 ++++++-- .../analytics-metadata/testing-utils.ts | 19 ++++--- 9 files changed, 132 insertions(+), 14 deletions(-) diff --git a/src/internal/analytics-metadata/__tests__/components.tsx b/src/internal/analytics-metadata/__tests__/components.tsx index 1e09ca2..233307d 100644 --- a/src/internal/analytics-metadata/__tests__/components.tsx +++ b/src/internal/analytics-metadata/__tests__/components.tsx @@ -52,6 +52,7 @@ export const ComponentThree = () => ( position: '2', columnLabel: { selector: '.invalid-selector', root: 'self' }, anotherLabel: { root: 'self' }, + yetAnotherLabel: { rootClassName: 'root-class-name' }, }, }, })} diff --git a/src/internal/analytics-metadata/__tests__/dom-utils.test.tsx b/src/internal/analytics-metadata/__tests__/dom-utils.test.tsx index a66ae81..7acbdcf 100644 --- a/src/internal/analytics-metadata/__tests__/dom-utils.test.tsx +++ b/src/internal/analytics-metadata/__tests__/dom-utils.test.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import { activateAnalyticsMetadata, getAnalyticsMetadataAttribute, METADATA_ATTRIBUTE } from '../attributes'; -import { findLogicalParent, isNodeComponent, findComponentUp } from '../dom-utils'; +import { findLogicalParent, isNodeComponent, findComponentUp, findByClassNameUp } from '../dom-utils'; beforeAll(() => { activateAnalyticsMetadata(true); @@ -18,7 +18,7 @@ describe('findLogicalParent', () => { ); const child = container.querySelector('#child'); - expect(findLogicalParent(child as HTMLElement)?.id).toEqual('parent'); + expect(findLogicalParent(child as HTMLElement)!.id).toEqual('parent'); }); test('returns null when child does not exist', () => { const { container } = render( @@ -88,7 +88,7 @@ describe('findComponentUp', () => {
); - expect(findComponentUp(container.querySelector('#target-element'))?.id).toBe('component-element'); + expect(findComponentUp(container.querySelector('#target-element'))!.id).toBe('component-element'); }); test('returns parent component element with portals', () => { const { container } = render( @@ -101,7 +101,7 @@ describe('findComponentUp', () => { ); - expect(findComponentUp(container.querySelector('#target-element'))?.id).toBe('component-element'); + expect(findComponentUp(container.querySelector('#target-element'))!.id).toBe('component-element'); }); test('returns null when element has no parent component', () => { const { container } = render( @@ -112,3 +112,45 @@ describe('findComponentUp', () => { expect(findComponentUp(container.querySelector('#target-element'))).toBeNull(); }); }); + +describe('findByClassNameUp', () => { + test('returns null when the node is null and/or the className is empty', () => { + expect(findByClassNameUp(null, 'abcd')).toBeNull(); + expect(findByClassNameUp(null, '')).toBeNull(); + const { container } = render( +
+
+
+ ); + expect(findByClassNameUp(container.querySelector('#target-element'), '')).toBeNull(); + }); + test('returns root element', () => { + const { container } = render( +
+
+
+ ); + expect(findByClassNameUp(container.querySelector('#target-element'), 'test-class')!.id).toBe('root-element'); + }); + test('returns parent component element with portals', () => { + const { container } = render( +
+
+
+
+
+
+
+
+ ); + expect(findByClassNameUp(container.querySelector('#target-element'), 'test-class')!.id).toBe('root-element'); + }); + test('returns null when element has no parent element with className', () => { + const { container } = render( +
+
+
+ ); + expect(findByClassNameUp(container.querySelector('#target-element'), 'test-class')).toBeNull(); + }); +}); diff --git a/src/internal/analytics-metadata/__tests__/labels-utils.test.tsx b/src/internal/analytics-metadata/__tests__/labels-utils.test.tsx index fb61071..005b13d 100644 --- a/src/internal/analytics-metadata/__tests__/labels-utils.test.tsx +++ b/src/internal/analytics-metadata/__tests__/labels-utils.test.tsx @@ -225,6 +225,43 @@ describe('processLabel', () => { expect(processLabel(target, { selector: '.outer-class', root: 'body' })).toEqual('label outside of the component'); }); + test('respects the rootClassName property', () => { + const { container } = render( +
+
outer label
+
+
inner label
+
+
+ ); + const target = container.querySelector('#target') as HTMLElement; + expect(processLabel(target, { selector: '.label-class', rootClassName: 'root-class' })).toEqual('outer label'); + }); + test('rootClassName prevails over root property', () => { + const { container } = render( + <> +
+
root class label
+
+
component label
+
+
inner label
+
+
+
+
label outside of the component
+ + ); + const target = container.querySelector('#target') as HTMLElement; + expect(processLabel(target, { selector: '.label-class', root: 'self', rootClassName: 'root-class' })).toEqual( + 'root class label' + ); + expect(processLabel(target, { selector: '.label-class', root: 'component', rootClassName: 'root-class' })).toEqual( + 'root class label' + ); + expect(processLabel(target, { selector: '.outer-class', root: 'body', rootClassName: 'root-class' })).toEqual(''); + }); + test('forwards the label resolution with data-awsui-analytics-label', () => { const { container } = render(
diff --git a/src/internal/analytics-metadata/__tests__/testing-utils.test.tsx b/src/internal/analytics-metadata/__tests__/testing-utils.test.tsx index 2a29dde..121b558 100644 --- a/src/internal/analytics-metadata/__tests__/testing-utils.test.tsx +++ b/src/internal/analytics-metadata/__tests__/testing-utils.test.tsx @@ -59,6 +59,9 @@ describe('getRawAnalyticsMetadata', () => { anotherLabel: { root: 'self', }, + yetAnotherLabel: { + rootClassName: 'root-class-name', + }, }, }, }, @@ -74,6 +77,7 @@ describe('getRawAnalyticsMetadata', () => { '.component-label', '.component-label', '.invalid-selector', + '.root-class-name', ], }); }); diff --git a/src/internal/analytics-metadata/__tests__/utils.test.tsx b/src/internal/analytics-metadata/__tests__/utils.test.tsx index 2a1ec7d..88e6946 100644 --- a/src/internal/analytics-metadata/__tests__/utils.test.tsx +++ b/src/internal/analytics-metadata/__tests__/utils.test.tsx @@ -70,6 +70,7 @@ describe('getGeneratedAnalyticsMetadata', () => { position: '2', columnLabel: '', anotherLabel: 'sub labelanother text content to ignorecontentcomponent labelevent label', + yetAnotherLabel: '', }, }, }, diff --git a/src/internal/analytics-metadata/dom-utils.ts b/src/internal/analytics-metadata/dom-utils.ts index 96010b3..c503925 100644 --- a/src/internal/analytics-metadata/dom-utils.ts +++ b/src/internal/analytics-metadata/dom-utils.ts @@ -35,3 +35,14 @@ export const isNodeComponent = (node: HTMLElement): boolean => { return false; } }; + +export function findByClassNameUp(node: HTMLElement | null, className: string): HTMLElement | null { + if (!node || !className) { + return null; + } + let current: HTMLElement | null = node; + while (current && current.tagName !== 'body' && !current.classList.contains(className)) { + current = findLogicalParent(current); + } + return current && current.tagName !== 'body' ? current : null; +} diff --git a/src/internal/analytics-metadata/interfaces.ts b/src/internal/analytics-metadata/interfaces.ts index 27e1527..dbd39fd 100644 --- a/src/internal/analytics-metadata/interfaces.ts +++ b/src/internal/analytics-metadata/interfaces.ts @@ -37,6 +37,7 @@ interface GeneratedAnalyticsMetadataComponentContext { export interface LabelIdentifier { selector?: string | Array; root?: 'component' | 'self' | 'body'; + rootClassName?: string; } export interface GeneratedAnalyticsMetadataFragment extends Omit, 'detail'> { diff --git a/src/internal/analytics-metadata/labels-utils.ts b/src/internal/analytics-metadata/labels-utils.ts index a44eeea..f6f0389 100644 --- a/src/internal/analytics-metadata/labels-utils.ts +++ b/src/internal/analytics-metadata/labels-utils.ts @@ -2,7 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import { LABEL_DATA_ATTRIBUTE } from './attributes'; -import { findComponentUp } from './dom-utils'; +import { findByClassNameUp, findComponentUp } from './dom-utils'; import { LabelIdentifier } from './interfaces'; export const processLabel = (node: HTMLElement | null, labelIdentifier: string | LabelIdentifier | null): string => { @@ -13,13 +13,23 @@ export const processLabel = (node: HTMLElement | null, labelIdentifier: string | const selector = formattedLabelIdentifier.selector; if (Array.isArray(selector)) { for (const labelSelector of selector) { - const label = processSingleLabel(node, labelSelector, formattedLabelIdentifier.root); + const label = processSingleLabel( + node, + labelSelector, + formattedLabelIdentifier.root, + formattedLabelIdentifier.rootClassName + ); if (label) { return label; } } } - return processSingleLabel(node, selector as string, formattedLabelIdentifier.root); + return processSingleLabel( + node, + selector as string, + formattedLabelIdentifier.root, + formattedLabelIdentifier.rootClassName + ); }; const formatLabelIdentifier = (labelIdentifier: string | LabelIdentifier): LabelIdentifier => { @@ -32,11 +42,15 @@ const formatLabelIdentifier = (labelIdentifier: string | LabelIdentifier): Label const processSingleLabel = ( node: HTMLElement | null, labelSelector: string, - root: LabelIdentifier['root'] = 'self' + root: LabelIdentifier['root'] = 'self', + rootClassName?: string ): string => { if (!node) { return ''; } + if (rootClassName) { + return processSingleLabel(findByClassNameUp(node, rootClassName), labelSelector); + } if (root === 'component') { return processSingleLabel(findComponentUp(node), labelSelector); } diff --git a/src/internal/analytics-metadata/testing-utils.ts b/src/internal/analytics-metadata/testing-utils.ts index 6e6b32d..ad74a8e 100644 --- a/src/internal/analytics-metadata/testing-utils.ts +++ b/src/internal/analytics-metadata/testing-utils.ts @@ -44,13 +44,20 @@ const getLabelSelectors = (localMetadata: any): Array => { }; const getLabelSelectorsFromLabelIdentifier = (label: string | LabelIdentifier): Array => { + let labels: Array = []; if (typeof label === 'string') { - return [label]; - } else if (label.selector) { - if (typeof label.selector === 'string') { - return [label.selector]; + labels.push(label); + } else { + if (label.selector) { + if (typeof label.selector === 'string') { + labels.push(label.selector); + } else { + labels = [...label.selector]; + } + } + if (label.rootClassName) { + labels.push(`.${label.rootClassName}`); } - return label.selector; } - return []; + return labels; }; From 420a9b1a8197d40edbd465de0b1f1af3aad08002 Mon Sep 17 00:00:00 2001 From: Francesco Longo Date: Mon, 16 Sep 2024 08:38:45 +0200 Subject: [PATCH 2/4] chore: Address PR feedback --- .../analytics-metadata/__tests__/components.tsx | 2 +- .../analytics-metadata/__tests__/dom-utils.test.tsx | 6 +++--- .../__tests__/labels-utils.test.tsx | 12 ++++++------ .../__tests__/testing-utils.test.tsx | 2 +- src/internal/analytics-metadata/dom-utils.ts | 6 +++--- src/internal/analytics-metadata/interfaces.ts | 2 +- src/internal/analytics-metadata/labels-utils.ts | 10 +++++----- src/internal/analytics-metadata/testing-utils.ts | 4 ++-- 8 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/internal/analytics-metadata/__tests__/components.tsx b/src/internal/analytics-metadata/__tests__/components.tsx index 233307d..2005400 100644 --- a/src/internal/analytics-metadata/__tests__/components.tsx +++ b/src/internal/analytics-metadata/__tests__/components.tsx @@ -52,7 +52,7 @@ export const ComponentThree = () => ( position: '2', columnLabel: { selector: '.invalid-selector', root: 'self' }, anotherLabel: { root: 'self' }, - yetAnotherLabel: { rootClassName: 'root-class-name' }, + yetAnotherLabel: { rootSelector: '.root-class-name' }, }, }, })} diff --git a/src/internal/analytics-metadata/__tests__/dom-utils.test.tsx b/src/internal/analytics-metadata/__tests__/dom-utils.test.tsx index 7acbdcf..cbcdc98 100644 --- a/src/internal/analytics-metadata/__tests__/dom-utils.test.tsx +++ b/src/internal/analytics-metadata/__tests__/dom-utils.test.tsx @@ -130,7 +130,7 @@ describe('findByClassNameUp', () => {
); - expect(findByClassNameUp(container.querySelector('#target-element'), 'test-class')!.id).toBe('root-element'); + expect(findByClassNameUp(container.querySelector('#target-element'), '.test-class')!.id).toBe('root-element'); }); test('returns parent component element with portals', () => { const { container } = render( @@ -143,7 +143,7 @@ describe('findByClassNameUp', () => { ); - expect(findByClassNameUp(container.querySelector('#target-element'), 'test-class')!.id).toBe('root-element'); + expect(findByClassNameUp(container.querySelector('#target-element'), '.test-class')!.id).toBe('root-element'); }); test('returns null when element has no parent element with className', () => { const { container } = render( @@ -151,6 +151,6 @@ describe('findByClassNameUp', () => {
); - expect(findByClassNameUp(container.querySelector('#target-element'), 'test-class')).toBeNull(); + expect(findByClassNameUp(container.querySelector('#target-element'), '.test-class')).toBeNull(); }); }); diff --git a/src/internal/analytics-metadata/__tests__/labels-utils.test.tsx b/src/internal/analytics-metadata/__tests__/labels-utils.test.tsx index 005b13d..e5d2264 100644 --- a/src/internal/analytics-metadata/__tests__/labels-utils.test.tsx +++ b/src/internal/analytics-metadata/__tests__/labels-utils.test.tsx @@ -225,7 +225,7 @@ describe('processLabel', () => { expect(processLabel(target, { selector: '.outer-class', root: 'body' })).toEqual('label outside of the component'); }); - test('respects the rootClassName property', () => { + test('respects the rootSelector property', () => { const { container } = render(
outer label
@@ -235,9 +235,9 @@ describe('processLabel', () => {
); const target = container.querySelector('#target') as HTMLElement; - expect(processLabel(target, { selector: '.label-class', rootClassName: 'root-class' })).toEqual('outer label'); + expect(processLabel(target, { selector: '.label-class', rootSelector: '.root-class' })).toEqual('outer label'); }); - test('rootClassName prevails over root property', () => { + test('rootSelector prevails over root property', () => { const { container } = render( <>
@@ -253,13 +253,13 @@ describe('processLabel', () => { ); const target = container.querySelector('#target') as HTMLElement; - expect(processLabel(target, { selector: '.label-class', root: 'self', rootClassName: 'root-class' })).toEqual( + expect(processLabel(target, { selector: '.label-class', root: 'self', rootSelector: '.root-class' })).toEqual( 'root class label' ); - expect(processLabel(target, { selector: '.label-class', root: 'component', rootClassName: 'root-class' })).toEqual( + expect(processLabel(target, { selector: '.label-class', root: 'component', rootSelector: '.root-class' })).toEqual( 'root class label' ); - expect(processLabel(target, { selector: '.outer-class', root: 'body', rootClassName: 'root-class' })).toEqual(''); + expect(processLabel(target, { selector: '.outer-class', root: 'body', rootSelector: '.root-class' })).toEqual(''); }); test('forwards the label resolution with data-awsui-analytics-label', () => { diff --git a/src/internal/analytics-metadata/__tests__/testing-utils.test.tsx b/src/internal/analytics-metadata/__tests__/testing-utils.test.tsx index 121b558..99be044 100644 --- a/src/internal/analytics-metadata/__tests__/testing-utils.test.tsx +++ b/src/internal/analytics-metadata/__tests__/testing-utils.test.tsx @@ -60,7 +60,7 @@ describe('getRawAnalyticsMetadata', () => { root: 'self', }, yetAnotherLabel: { - rootClassName: 'root-class-name', + rootSelector: '.root-class-name', }, }, }, diff --git a/src/internal/analytics-metadata/dom-utils.ts b/src/internal/analytics-metadata/dom-utils.ts index c503925..fde443a 100644 --- a/src/internal/analytics-metadata/dom-utils.ts +++ b/src/internal/analytics-metadata/dom-utils.ts @@ -36,12 +36,12 @@ export const isNodeComponent = (node: HTMLElement): boolean => { } }; -export function findByClassNameUp(node: HTMLElement | null, className: string): HTMLElement | null { - if (!node || !className) { +export function findByClassNameUp(node: HTMLElement | null, selector: string): HTMLElement | null { + if (!selector) { return null; } let current: HTMLElement | null = node; - while (current && current.tagName !== 'body' && !current.classList.contains(className)) { + while (current && current.tagName !== 'body' && !current.matches(selector)) { current = findLogicalParent(current); } return current && current.tagName !== 'body' ? current : null; diff --git a/src/internal/analytics-metadata/interfaces.ts b/src/internal/analytics-metadata/interfaces.ts index dbd39fd..383dd3c 100644 --- a/src/internal/analytics-metadata/interfaces.ts +++ b/src/internal/analytics-metadata/interfaces.ts @@ -37,7 +37,7 @@ interface GeneratedAnalyticsMetadataComponentContext { export interface LabelIdentifier { selector?: string | Array; root?: 'component' | 'self' | 'body'; - rootClassName?: string; + rootSelector?: string; } export interface GeneratedAnalyticsMetadataFragment extends Omit, 'detail'> { diff --git a/src/internal/analytics-metadata/labels-utils.ts b/src/internal/analytics-metadata/labels-utils.ts index f6f0389..74099a6 100644 --- a/src/internal/analytics-metadata/labels-utils.ts +++ b/src/internal/analytics-metadata/labels-utils.ts @@ -17,7 +17,7 @@ export const processLabel = (node: HTMLElement | null, labelIdentifier: string | node, labelSelector, formattedLabelIdentifier.root, - formattedLabelIdentifier.rootClassName + formattedLabelIdentifier.rootSelector ); if (label) { return label; @@ -28,7 +28,7 @@ export const processLabel = (node: HTMLElement | null, labelIdentifier: string | node, selector as string, formattedLabelIdentifier.root, - formattedLabelIdentifier.rootClassName + formattedLabelIdentifier.rootSelector ); }; @@ -43,13 +43,13 @@ const processSingleLabel = ( node: HTMLElement | null, labelSelector: string, root: LabelIdentifier['root'] = 'self', - rootClassName?: string + rootSelector?: string ): string => { if (!node) { return ''; } - if (rootClassName) { - return processSingleLabel(findByClassNameUp(node, rootClassName), labelSelector); + if (rootSelector) { + return processSingleLabel(findByClassNameUp(node, rootSelector), labelSelector); } if (root === 'component') { return processSingleLabel(findComponentUp(node), labelSelector); diff --git a/src/internal/analytics-metadata/testing-utils.ts b/src/internal/analytics-metadata/testing-utils.ts index ad74a8e..a4033a3 100644 --- a/src/internal/analytics-metadata/testing-utils.ts +++ b/src/internal/analytics-metadata/testing-utils.ts @@ -55,8 +55,8 @@ const getLabelSelectorsFromLabelIdentifier = (label: string | LabelIdentifier): labels = [...label.selector]; } } - if (label.rootClassName) { - labels.push(`.${label.rootClassName}`); + if (label.rootSelector) { + labels.push(label.rootSelector); } } return labels; From 38021e3e3f5a28a6ae8f2f3bf177fdfa943f376b Mon Sep 17 00:00:00 2001 From: Francesco Longo Date: Mon, 16 Sep 2024 09:34:47 +0200 Subject: [PATCH 3/4] chore: Rename method --- .../__tests__/dom-utils.test.tsx | 16 ++++++++-------- src/internal/analytics-metadata/dom-utils.ts | 2 +- src/internal/analytics-metadata/labels-utils.ts | 4 ++-- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/internal/analytics-metadata/__tests__/dom-utils.test.tsx b/src/internal/analytics-metadata/__tests__/dom-utils.test.tsx index cbcdc98..9f96df2 100644 --- a/src/internal/analytics-metadata/__tests__/dom-utils.test.tsx +++ b/src/internal/analytics-metadata/__tests__/dom-utils.test.tsx @@ -4,7 +4,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import { activateAnalyticsMetadata, getAnalyticsMetadataAttribute, METADATA_ATTRIBUTE } from '../attributes'; -import { findLogicalParent, isNodeComponent, findComponentUp, findByClassNameUp } from '../dom-utils'; +import { findLogicalParent, isNodeComponent, findComponentUp, findSelectorUp } from '../dom-utils'; beforeAll(() => { activateAnalyticsMetadata(true); @@ -113,16 +113,16 @@ describe('findComponentUp', () => { }); }); -describe('findByClassNameUp', () => { +describe('findSelectorUp', () => { test('returns null when the node is null and/or the className is empty', () => { - expect(findByClassNameUp(null, 'abcd')).toBeNull(); - expect(findByClassNameUp(null, '')).toBeNull(); + expect(findSelectorUp(null, 'abcd')).toBeNull(); + expect(findSelectorUp(null, '')).toBeNull(); const { container } = render(
); - expect(findByClassNameUp(container.querySelector('#target-element'), '')).toBeNull(); + expect(findSelectorUp(container.querySelector('#target-element'), '')).toBeNull(); }); test('returns root element', () => { const { container } = render( @@ -130,7 +130,7 @@ describe('findByClassNameUp', () => {
); - expect(findByClassNameUp(container.querySelector('#target-element'), '.test-class')!.id).toBe('root-element'); + expect(findSelectorUp(container.querySelector('#target-element'), '.test-class')!.id).toBe('root-element'); }); test('returns parent component element with portals', () => { const { container } = render( @@ -143,7 +143,7 @@ describe('findByClassNameUp', () => { ); - expect(findByClassNameUp(container.querySelector('#target-element'), '.test-class')!.id).toBe('root-element'); + expect(findSelectorUp(container.querySelector('#target-element'), '.test-class')!.id).toBe('root-element'); }); test('returns null when element has no parent element with className', () => { const { container } = render( @@ -151,6 +151,6 @@ describe('findByClassNameUp', () => {
); - expect(findByClassNameUp(container.querySelector('#target-element'), '.test-class')).toBeNull(); + expect(findSelectorUp(container.querySelector('#target-element'), '.test-class')).toBeNull(); }); }); diff --git a/src/internal/analytics-metadata/dom-utils.ts b/src/internal/analytics-metadata/dom-utils.ts index fde443a..726efed 100644 --- a/src/internal/analytics-metadata/dom-utils.ts +++ b/src/internal/analytics-metadata/dom-utils.ts @@ -36,7 +36,7 @@ export const isNodeComponent = (node: HTMLElement): boolean => { } }; -export function findByClassNameUp(node: HTMLElement | null, selector: string): HTMLElement | null { +export function findSelectorUp(node: HTMLElement | null, selector: string): HTMLElement | null { if (!selector) { return null; } diff --git a/src/internal/analytics-metadata/labels-utils.ts b/src/internal/analytics-metadata/labels-utils.ts index 74099a6..1ac173e 100644 --- a/src/internal/analytics-metadata/labels-utils.ts +++ b/src/internal/analytics-metadata/labels-utils.ts @@ -2,7 +2,7 @@ // SPDX-License-Identifier: Apache-2.0 import { LABEL_DATA_ATTRIBUTE } from './attributes'; -import { findByClassNameUp, findComponentUp } from './dom-utils'; +import { findSelectorUp, findComponentUp } from './dom-utils'; import { LabelIdentifier } from './interfaces'; export const processLabel = (node: HTMLElement | null, labelIdentifier: string | LabelIdentifier | null): string => { @@ -49,7 +49,7 @@ const processSingleLabel = ( return ''; } if (rootSelector) { - return processSingleLabel(findByClassNameUp(node, rootSelector), labelSelector); + return processSingleLabel(findSelectorUp(node, rootSelector), labelSelector); } if (root === 'component') { return processSingleLabel(findComponentUp(node), labelSelector); From 3fcd7b9a4efd22f0e27d8e2eab697a5b37fbf453 Mon Sep 17 00:00:00 2001 From: Francesco Longo Date: Mon, 16 Sep 2024 09:55:25 +0200 Subject: [PATCH 4/4] chore: Address additional PR comments --- src/internal/analytics-metadata/__tests__/dom-utils.test.tsx | 5 ++--- src/internal/analytics-metadata/dom-utils.ts | 3 --- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/src/internal/analytics-metadata/__tests__/dom-utils.test.tsx b/src/internal/analytics-metadata/__tests__/dom-utils.test.tsx index 9f96df2..05bb1d4 100644 --- a/src/internal/analytics-metadata/__tests__/dom-utils.test.tsx +++ b/src/internal/analytics-metadata/__tests__/dom-utils.test.tsx @@ -114,15 +114,14 @@ describe('findComponentUp', () => { }); describe('findSelectorUp', () => { - test('returns null when the node is null and/or the className is empty', () => { + test('returns null when the node is null or the className is invalid', () => { expect(findSelectorUp(null, 'abcd')).toBeNull(); - expect(findSelectorUp(null, '')).toBeNull(); const { container } = render(
); - expect(findSelectorUp(container.querySelector('#target-element'), '')).toBeNull(); + expect(findSelectorUp(container.querySelector('#target-element'), '.dummy')).toBeNull(); }); test('returns root element', () => { const { container } = render( diff --git a/src/internal/analytics-metadata/dom-utils.ts b/src/internal/analytics-metadata/dom-utils.ts index 726efed..6cfd160 100644 --- a/src/internal/analytics-metadata/dom-utils.ts +++ b/src/internal/analytics-metadata/dom-utils.ts @@ -37,9 +37,6 @@ export const isNodeComponent = (node: HTMLElement): boolean => { }; export function findSelectorUp(node: HTMLElement | null, selector: string): HTMLElement | null { - if (!selector) { - return null; - } let current: HTMLElement | null = node; while (current && current.tagName !== 'body' && !current.matches(selector)) { current = findLogicalParent(current);