Skip to content

Commit 939611c

Browse files
Lms24Lms24
committed
fix tests
1 parent 362bd03 commit 939611c

File tree

2 files changed

+62
-59
lines changed

2 files changed

+62
-59
lines changed

‎dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing/test.ts‎

Lines changed: 60 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -26,24 +26,24 @@ sentryTest(
2626

2727
// Check image-fast span (this is served with a 100ms delay)
2828
const imageFastSpan = elementTimingSpans?.find(({ description }) => description === 'element[image-fast]');
29-
const imageFastRenderTime = imageFastSpan?.data['element.render_time'];
30-
const imageFastLoadTime = imageFastSpan?.data['element.load_time'];
29+
const imageFastRenderTime = imageFastSpan?.data['ui.element.render_time'];
30+
const imageFastLoadTime = imageFastSpan?.data['ui.element.load_time'];
3131
const duration = imageFastSpan!.timestamp! - imageFastSpan!.start_timestamp;
3232

3333
expect(imageFastSpan).toBeDefined();
3434
expect(imageFastSpan?.data).toEqual({
3535
'sentry.op': 'ui.elementtiming',
3636
'sentry.origin': 'auto.ui.browser.elementtiming',
3737
'sentry.source': 'component',
38-
'sentry.span_start_time_source': 'load-time',
39-
'element.id': 'image-fast-id',
40-
'element.identifier': 'image-fast',
41-
'element.type': 'img',
42-
'element.size': '600x179',
43-
'element.url': 'https://sentry-test-site.example/path/to/image-fast.png',
44-
'element.render_time': expect.any(Number),
45-
'element.load_time': expect.any(Number),
46-
'element.paint_type': 'image-paint',
38+
'ui.element.id': 'image-fast-id',
39+
'ui.element.identifier': 'image-fast',
40+
'ui.element.type': 'img',
41+
'ui.element.width': 600,
42+
'ui.element.height': 179,
43+
'ui.element.url': 'https://sentry-test-site.example/path/to/image-fast.png',
44+
'ui.element.render_time': expect.any(Number),
45+
'ui.element.load_time': expect.any(Number),
46+
'ui.element.paint_type': 'image-paint',
4747
'sentry.transaction_name': '/index.html',
4848
});
4949
expect(imageFastRenderTime).toBeGreaterThan(90);
@@ -55,22 +55,23 @@ sentryTest(
5555
expect(duration).toBeLessThan(20);
5656

5757
// Check text1 span
58-
const text1Span = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'text1');
59-
const text1RenderTime = text1Span?.data['element.render_time'];
60-
const text1LoadTime = text1Span?.data['element.load_time'];
58+
const text1Span = elementTimingSpans?.find(({ data }) => data?.['ui.element.identifier'] === 'text1');
59+
const text1RenderTime = text1Span?.data['ui.element.render_time'];
60+
const text1LoadTime = text1Span?.data['ui.element.load_time'];
6161
const text1Duration = text1Span!.timestamp! - text1Span!.start_timestamp;
6262
expect(text1Span).toBeDefined();
6363
expect(text1Span?.data).toEqual({
6464
'sentry.op': 'ui.elementtiming',
6565
'sentry.origin': 'auto.ui.browser.elementtiming',
6666
'sentry.source': 'component',
67-
'sentry.span_start_time_source': 'render-time',
68-
'element.id': 'text1-id',
69-
'element.identifier': 'text1',
70-
'element.type': 'p',
71-
'element.render_time': expect.any(Number),
72-
'element.load_time': expect.any(Number),
73-
'element.paint_type': 'text-paint',
67+
'ui.element.id': 'text1-id',
68+
'ui.element.identifier': 'text1',
69+
'ui.element.type': 'p',
70+
'ui.element.width': 0,
71+
'ui.element.height': 0,
72+
'ui.element.render_time': expect.any(Number),
73+
'ui.element.load_time': expect.any(Number),
74+
'ui.element.paint_type': 'text-paint',
7475
'sentry.transaction_name': '/index.html',
7576
});
7677
expect(text1RenderTime).toBeGreaterThan(0);
@@ -80,35 +81,35 @@ sentryTest(
8081
expect(text1Duration).toBe(0);
8182

8283
// Check button1 span (no need for a full assertion)
83-
const button1Span = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'button1');
84+
const button1Span = elementTimingSpans?.find(({ data }) => data?.['ui.element.identifier'] === 'button1');
8485
expect(button1Span).toBeDefined();
8586
expect(button1Span?.data).toMatchObject({
86-
'element.identifier': 'button1',
87-
'element.type': 'button',
88-
'element.paint_type': 'text-paint',
87+
'ui.element.identifier': 'button1',
88+
'ui.element.type': 'button',
89+
'ui.element.paint_type': 'text-paint',
8990
'sentry.transaction_name': '/index.html',
9091
});
9192

9293
// Check image-slow span
93-
const imageSlowSpan = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'image-slow');
94+
const imageSlowSpan = elementTimingSpans?.find(({ data }) => data?.['ui.element.identifier'] === 'image-slow');
9495
expect(imageSlowSpan).toBeDefined();
9596
expect(imageSlowSpan?.data).toEqual({
96-
'element.id': '',
97-
'element.identifier': 'image-slow',
98-
'element.type': 'img',
99-
'element.size': '600x179',
100-
'element.url': 'https://sentry-test-site.example/path/to/image-slow.png',
101-
'element.paint_type': 'image-paint',
102-
'element.render_time': expect.any(Number),
103-
'element.load_time': expect.any(Number),
97+
'ui.element.id': '',
98+
'ui.element.identifier': 'image-slow',
99+
'ui.element.type': 'img',
100+
'ui.element.width': 600,
101+
'ui.element.height': 179,
102+
'ui.element.url': 'https://sentry-test-site.example/path/to/image-slow.png',
103+
'ui.element.paint_type': 'image-paint',
104+
'ui.element.render_time': expect.any(Number),
105+
'ui.element.load_time': expect.any(Number),
104106
'sentry.op': 'ui.elementtiming',
105107
'sentry.origin': 'auto.ui.browser.elementtiming',
106108
'sentry.source': 'component',
107-
'sentry.span_start_time_source': 'load-time',
108109
'sentry.transaction_name': '/index.html',
109110
});
110-
const imageSlowRenderTime = imageSlowSpan?.data['element.render_time'];
111-
const imageSlowLoadTime = imageSlowSpan?.data['element.load_time'];
111+
const imageSlowRenderTime = imageSlowSpan?.data['ui.element.render_time'];
112+
const imageSlowLoadTime = imageSlowSpan?.data['ui.element.load_time'];
112113
const imageSlowDuration = imageSlowSpan!.timestamp! - imageSlowSpan!.start_timestamp;
113114
expect(imageSlowRenderTime).toBeGreaterThan(1400);
114115
expect(imageSlowRenderTime).toBeLessThan(2000);
@@ -118,25 +119,25 @@ sentryTest(
118119
expect(imageSlowDuration).toBeLessThan(20);
119120

120121
// Check lazy-image span
121-
const lazyImageSpan = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'lazy-image');
122+
const lazyImageSpan = elementTimingSpans?.find(({ data }) => data?.['ui.element.identifier'] === 'lazy-image');
122123
expect(lazyImageSpan).toBeDefined();
123124
expect(lazyImageSpan?.data).toEqual({
124-
'element.id': '',
125-
'element.identifier': 'lazy-image',
126-
'element.type': 'img',
127-
'element.size': '600x179',
128-
'element.url': 'https://sentry-test-site.example/path/to/image-lazy.png',
129-
'element.paint_type': 'image-paint',
130-
'element.render_time': expect.any(Number),
131-
'element.load_time': expect.any(Number),
125+
'ui.element.id': '',
126+
'ui.element.identifier': 'lazy-image',
127+
'ui.element.type': 'img',
128+
'ui.element.width': 600,
129+
'ui.element.height': 179,
130+
'ui.element.url': 'https://sentry-test-site.example/path/to/image-lazy.png',
131+
'ui.element.paint_type': 'image-paint',
132+
'ui.element.render_time': expect.any(Number),
133+
'ui.element.load_time': expect.any(Number),
132134
'sentry.op': 'ui.elementtiming',
133135
'sentry.origin': 'auto.ui.browser.elementtiming',
134136
'sentry.source': 'component',
135-
'sentry.span_start_time_source': 'load-time',
136137
'sentry.transaction_name': '/index.html',
137138
});
138-
const lazyImageRenderTime = lazyImageSpan?.data['element.render_time'];
139-
const lazyImageLoadTime = lazyImageSpan?.data['element.load_time'];
139+
const lazyImageRenderTime = lazyImageSpan?.data['ui.element.render_time'];
140+
const lazyImageLoadTime = lazyImageSpan?.data['ui.element.load_time'];
140141
const lazyImageDuration = lazyImageSpan!.timestamp! - lazyImageSpan!.start_timestamp;
141142
expect(lazyImageRenderTime).toBeGreaterThan(1000);
142143
expect(lazyImageRenderTime).toBeLessThan(1500);
@@ -146,15 +147,15 @@ sentryTest(
146147
expect(lazyImageDuration).toBeLessThan(20);
147148

148149
// Check lazy-text span
149-
const lazyTextSpan = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'lazy-text');
150+
const lazyTextSpan = elementTimingSpans?.find(({ data }) => data?.['ui.element.identifier'] === 'lazy-text');
150151
expect(lazyTextSpan?.data).toMatchObject({
151-
'element.id': '',
152-
'element.identifier': 'lazy-text',
153-
'element.type': 'p',
152+
'ui.element.id': '',
153+
'ui.element.identifier': 'lazy-text',
154+
'ui.element.type': 'p',
154155
'sentry.transaction_name': '/index.html',
155156
});
156-
const lazyTextRenderTime = lazyTextSpan?.data['element.render_time'];
157-
const lazyTextLoadTime = lazyTextSpan?.data['element.load_time'];
157+
const lazyTextRenderTime = lazyTextSpan?.data['ui.element.render_time'];
158+
const lazyTextLoadTime = lazyTextSpan?.data['ui.element.load_time'];
158159
const lazyTextDuration = lazyTextSpan!.timestamp! - lazyTextSpan!.start_timestamp;
159160
expect(lazyTextRenderTime).toBeGreaterThan(1000);
160161
expect(lazyTextRenderTime).toBeLessThan(1500);
@@ -202,15 +203,15 @@ sentryTest('emits element timing spans on navigation', async ({ getLocalTestUrl,
202203

203204
// Image started loading after navigation, but render-time and load-time still start from the time origin
204205
// of the pageload. This is somewhat a limitation (though by design according to the ElementTiming spec)
205-
expect((imageSpan!.data['element.render_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
206+
expect((imageSpan!.data['ui.element.render_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
206207
navigationStartTime,
207208
);
208-
expect((imageSpan!.data['element.load_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
209+
expect((imageSpan!.data['ui.element.load_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
209210
navigationStartTime,
210211
);
211212

212-
expect(textSpan?.data['element.load_time']).toBe(0);
213-
expect((textSpan!.data['element.render_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
213+
expect(textSpan?.data['ui.element.load_time']).toBe(0);
214+
expect((textSpan!.data['ui.element.render_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
214215
navigationStartTime,
215216
);
216217
});

‎packages/browser-utils/test/metrics/elementTiming.test.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ describe('_onElementTiming', () => {
4545
entryType: 'element',
4646
startTime: 0,
4747
duration: 0,
48+
identifier: 'test-element',
4849
} as Partial<PerformanceEntry>;
4950

5051
// @ts-expect-error - only passing a partial entry. This is fine for the test.
@@ -59,6 +60,7 @@ describe('_onElementTiming', () => {
5960
entryType: 'element',
6061
startTime,
6162
duration: 0,
63+
identifier: 'test-element',
6264
} as Partial<PerformanceEntry>;
6365

6466
// @ts-expect-error - only passing a partial entry. This is fine for the test.

0 commit comments

Comments
 (0)