Skip to content

Commit a55841c

Browse files
author
Francesco Longo
committed
chore: Add unit tests
1 parent 26344fd commit a55841c

2 files changed

Lines changed: 108 additions & 3 deletions

File tree

‎src/internal/analytics-metadata/__tests__/components.tsx‎

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
22
// SPDX-License-Identifier: Apache-2.0
33

4-
import React, { ReactNode } from 'react';
4+
import React, { ReactNode, useEffect, useRef } from 'react';
55
import { METADATA_ATTRIBUTE, getAnalyticsMetadataAttribute, getAnalyticsLabelAttribute } from '../attributes';
6+
import ReactDOM from 'react-dom';
67

78
export const ComponentOne = ({ malformed }: { malformed?: boolean }) => (
89
<div
@@ -65,3 +66,76 @@ export const ComponentThree = ({ children }: { children?: ReactNode }) => (
6566
</div>
6667
</div>
6768
);
69+
70+
const NestedIframe = () => {
71+
const ref = useRef<HTMLDivElement>(null);
72+
73+
useEffect(() => {
74+
const container = ref.current;
75+
if (!container) {
76+
return;
77+
}
78+
const iframeEl = container.ownerDocument.createElement('iframe');
79+
iframeEl.id = 'iframe-2';
80+
container.appendChild(iframeEl);
81+
82+
const iframeDocument = iframeEl.contentDocument!;
83+
iframeDocument.open();
84+
iframeDocument.writeln('<!DOCTYPE html>');
85+
iframeDocument.close();
86+
iframeDocument.body.innerHTML =
87+
'<div><div data-awsui-analytics="{&quot;component&quot;:{&quot;name&quot;:&quot;ComponentThree&quot;}}"><div id="sub-sub-target">inside iframe inside iframe</div><div id="id:portal-2"></div></div><div data-awsui-referrer-id="id:portal-2"><div data-awsui-analytics="{&quot;component&quot;:{&quot;name&quot;:&quot;ComponentThreeInPortal&quot;}}"> </div></div></div>';
88+
89+
return () => {
90+
container.removeChild(iframeEl);
91+
};
92+
});
93+
94+
return (
95+
<>
96+
<div {...getAnalyticsMetadataAttribute({ component: { name: 'ComponentTwo' } })}>
97+
<div>inside iframe</div>
98+
<div id="sub-target">
99+
<div ref={ref}></div>;<div id="id:portal-1"></div>
100+
</div>
101+
</div>
102+
<div data-awsui-referrer-id="id:portal-1">
103+
<div {...getAnalyticsMetadataAttribute({ component: { name: 'ComponentTwoInPortal' } })}> </div>
104+
</div>
105+
</>
106+
);
107+
};
108+
109+
export const AppWithIframe = () => {
110+
const ref = useRef<HTMLDivElement>(null);
111+
112+
useEffect(() => {
113+
const container = ref.current;
114+
if (!container) {
115+
return;
116+
}
117+
const iframeEl = container.ownerDocument.createElement('iframe');
118+
iframeEl.id = 'iframe-1';
119+
container.appendChild(iframeEl);
120+
121+
const iframeDocument = iframeEl.contentDocument!;
122+
iframeDocument.open();
123+
iframeDocument.writeln('<!DOCTYPE html>');
124+
iframeDocument.close();
125+
126+
const innerAppRoot = iframeDocument.createElement('div');
127+
iframeDocument.body.appendChild(innerAppRoot);
128+
ReactDOM.render(<NestedIframe />, innerAppRoot);
129+
return () => {
130+
ReactDOM.unmountComponentAtNode(innerAppRoot);
131+
container.removeChild(iframeEl);
132+
};
133+
});
134+
135+
return (
136+
<div {...getAnalyticsMetadataAttribute({ component: { name: 'ComponentOne' } })}>
137+
<div ref={ref}></div>;
138+
<iframe src="https://www.amazon.com/" />
139+
</div>
140+
);
141+
};

‎src/internal/analytics-metadata/__tests__/page-scanner-utils.test.tsx‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
// SPDX-License-Identifier: Apache-2.0
33

44
import React from 'react';
5-
import { render } from '@testing-library/react';
5+
import { render, waitFor } from '@testing-library/react';
66
import { getComponentsTree } from '../utils';
77
import { METADATA_ATTRIBUTE, activateAnalyticsMetadata, getAnalyticsMetadataAttribute } from '../attributes';
8-
import { ComponentOne, ComponentTwo, ComponentThree } from './components';
8+
import { AppWithIframe, ComponentOne, ComponentTwo, ComponentThree } from './components';
99

1010
describe('getComponentsTree', () => {
1111
describe('with active analytics metadata', () => {
@@ -196,6 +196,37 @@ describe('getComponentsTree', () => {
196196
]);
197197
});
198198
});
199+
test('with iframes', async () => {
200+
const { container } = render(<AppWithIframe />);
201+
await waitFor(() => {
202+
(
203+
(document.querySelector('#iframe-1') as HTMLIFrameElement)?.contentDocument?.querySelector(
204+
'#iframe-2'
205+
) as HTMLIFrameElement
206+
)?.contentDocument?.querySelector('#sub-sub-target');
207+
});
208+
expect(getComponentsTree()).toEqual([
209+
{
210+
name: 'ComponentOne',
211+
children: [
212+
{
213+
name: 'ComponentTwo',
214+
children: [
215+
{ name: 'ComponentTwoInPortal' },
216+
{ name: 'ComponentThree', children: [{ name: 'ComponentThreeInPortal' }] },
217+
],
218+
},
219+
],
220+
},
221+
]);
222+
const subTarget = (container.querySelector('#iframe-1') as HTMLIFrameElement)!.contentDocument!.querySelector(
223+
'#sub-target'
224+
)!;
225+
expect(getComponentsTree(subTarget as HTMLElement)).toEqual([
226+
{ name: 'ComponentTwoInPortal' },
227+
{ name: 'ComponentThree', children: [{ name: 'ComponentThreeInPortal' }] },
228+
]);
229+
});
199230
});
200231

201232
describe('with inactive analytics metadata', () => {

0 commit comments

Comments
 (0)