Skip to content

Commit eec5f5e

Browse files
Lms24Lms24
committed
adjust unit and integration tests
1 parent e9a5327 commit eec5f5e

File tree

3 files changed

+76
-67
lines changed

3 files changed

+76
-67
lines changed

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

Lines changed: 72 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -26,25 +26,26 @@ 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',
47-
'sentry.transaction_name': '/index.html',
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',
47+
'sentry.transaction': '/index.html',
48+
'sentry.segment.name': '/index.html',
4849
});
4950
expect(imageFastRenderTime).toBeGreaterThan(90);
5051
expect(imageFastRenderTime).toBeLessThan(400);
@@ -55,23 +56,25 @@ sentryTest(
5556
expect(duration).toBeLessThan(20);
5657

5758
// 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'];
59+
const text1Span = elementTimingSpans?.find(({ data }) => data?.['ui.element.identifier'] === 'text1');
60+
const text1RenderTime = text1Span?.data['ui.element.render_time'];
61+
const text1LoadTime = text1Span?.data['ui.element.load_time'];
6162
const text1Duration = text1Span!.timestamp! - text1Span!.start_timestamp;
6263
expect(text1Span).toBeDefined();
6364
expect(text1Span?.data).toEqual({
6465
'sentry.op': 'ui.elementtiming',
6566
'sentry.origin': 'auto.ui.browser.elementtiming',
6667
'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',
74-
'sentry.transaction_name': '/index.html',
68+
'ui.element.id': 'text1-id',
69+
'ui.element.identifier': 'text1',
70+
'ui.element.type': 'p',
71+
'ui.element.render_time': expect.any(Number),
72+
'ui.element.load_time': expect.any(Number),
73+
'ui.element.paint_type': 'text-paint',
74+
'ui.element.width': 0,
75+
'ui.element.height': 0,
76+
'sentry.transaction': '/index.html',
77+
'sentry.segment.name': '/index.html',
7578
});
7679
expect(text1RenderTime).toBeGreaterThan(0);
7780
expect(text1RenderTime).toBeLessThan(300);
@@ -80,35 +83,37 @@ sentryTest(
8083
expect(text1Duration).toBe(0);
8184

8285
// Check button1 span (no need for a full assertion)
83-
const button1Span = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'button1');
86+
const button1Span = elementTimingSpans?.find(({ data }) => data?.['ui.element.identifier'] === 'button1');
8487
expect(button1Span).toBeDefined();
8588
expect(button1Span?.data).toMatchObject({
86-
'element.identifier': 'button1',
87-
'element.type': 'button',
88-
'element.paint_type': 'text-paint',
89-
'sentry.transaction_name': '/index.html',
89+
'ui.element.identifier': 'button1',
90+
'ui.element.type': 'button',
91+
'ui.element.paint_type': 'text-paint',
92+
'sentry.transaction': '/index.html',
93+
'sentry.segment.name': '/index.html',
9094
});
9195

9296
// Check image-slow span
93-
const imageSlowSpan = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'image-slow');
97+
const imageSlowSpan = elementTimingSpans?.find(({ data }) => data?.['ui.element.identifier'] === 'image-slow');
9498
expect(imageSlowSpan).toBeDefined();
9599
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),
100+
'ui.element.id': '',
101+
'ui.element.identifier': 'image-slow',
102+
'ui.element.type': 'img',
103+
'ui.element.width': 600,
104+
'ui.element.height': 179,
105+
'ui.element.url': 'https://sentry-test-site.example/path/to/image-slow.png',
106+
'ui.element.paint_type': 'image-paint',
107+
'ui.element.render_time': expect.any(Number),
108+
'ui.element.load_time': expect.any(Number),
104109
'sentry.op': 'ui.elementtiming',
105110
'sentry.origin': 'auto.ui.browser.elementtiming',
106111
'sentry.source': 'component',
107-
'sentry.span_start_time_source': 'load-time',
108-
'sentry.transaction_name': '/index.html',
112+
'sentry.transaction': '/index.html',
113+
'sentry.segment.name': '/index.html',
109114
});
110-
const imageSlowRenderTime = imageSlowSpan?.data['element.render_time'];
111-
const imageSlowLoadTime = imageSlowSpan?.data['element.load_time'];
115+
const imageSlowRenderTime = imageSlowSpan?.data['ui.element.render_time'];
116+
const imageSlowLoadTime = imageSlowSpan?.data['ui.element.load_time'];
112117
const imageSlowDuration = imageSlowSpan!.timestamp! - imageSlowSpan!.start_timestamp;
113118
expect(imageSlowRenderTime).toBeGreaterThan(1400);
114119
expect(imageSlowRenderTime).toBeLessThan(2000);
@@ -118,25 +123,26 @@ sentryTest(
118123
expect(imageSlowDuration).toBeLessThan(20);
119124

120125
// Check lazy-image span
121-
const lazyImageSpan = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'lazy-image');
126+
const lazyImageSpan = elementTimingSpans?.find(({ data }) => data?.['ui.element.identifier'] === 'lazy-image');
122127
expect(lazyImageSpan).toBeDefined();
123128
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),
129+
'ui.element.id': '',
130+
'ui.element.identifier': 'lazy-image',
131+
'ui.element.type': 'img',
132+
'ui.element.width': 600,
133+
'ui.element.height': 179,
134+
'ui.element.url': 'https://sentry-test-site.example/path/to/image-lazy.png',
135+
'ui.element.paint_type': 'image-paint',
136+
'ui.element.render_time': expect.any(Number),
137+
'ui.element.load_time': expect.any(Number),
132138
'sentry.op': 'ui.elementtiming',
133139
'sentry.origin': 'auto.ui.browser.elementtiming',
134140
'sentry.source': 'component',
135-
'sentry.span_start_time_source': 'load-time',
136-
'sentry.transaction_name': '/index.html',
141+
'sentry.transaction': '/index.html',
142+
'sentry.segment.name': '/index.html',
137143
});
138-
const lazyImageRenderTime = lazyImageSpan?.data['element.render_time'];
139-
const lazyImageLoadTime = lazyImageSpan?.data['element.load_time'];
144+
const lazyImageRenderTime = lazyImageSpan?.data['ui.element.render_time'];
145+
const lazyImageLoadTime = lazyImageSpan?.data['ui.element.load_time'];
140146
const lazyImageDuration = lazyImageSpan!.timestamp! - lazyImageSpan!.start_timestamp;
141147
expect(lazyImageRenderTime).toBeGreaterThan(1000);
142148
expect(lazyImageRenderTime).toBeLessThan(1500);
@@ -146,15 +152,16 @@ sentryTest(
146152
expect(lazyImageDuration).toBeLessThan(20);
147153

148154
// Check lazy-text span
149-
const lazyTextSpan = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'lazy-text');
155+
const lazyTextSpan = elementTimingSpans?.find(({ data }) => data?.['ui.element.identifier'] === 'lazy-text');
150156
expect(lazyTextSpan?.data).toMatchObject({
151-
'element.id': '',
152-
'element.identifier': 'lazy-text',
153-
'element.type': 'p',
154-
'sentry.transaction_name': '/index.html',
157+
'ui.element.id': '',
158+
'ui.element.identifier': 'lazy-text',
159+
'ui.element.type': 'p',
160+
'sentry.transaction': '/index.html',
161+
'sentry.segment.name': '/index.html',
155162
});
156-
const lazyTextRenderTime = lazyTextSpan?.data['element.render_time'];
157-
const lazyTextLoadTime = lazyTextSpan?.data['element.load_time'];
163+
const lazyTextRenderTime = lazyTextSpan?.data['ui.element.render_time'];
164+
const lazyTextLoadTime = lazyTextSpan?.data['ui.element.load_time'];
158165
const lazyTextDuration = lazyTextSpan!.timestamp! - lazyTextSpan!.start_timestamp;
159166
expect(lazyTextRenderTime).toBeGreaterThan(1000);
160167
expect(lazyTextRenderTime).toBeLessThan(1500);
@@ -202,15 +209,15 @@ sentryTest('emits element timing spans on navigation', async ({ getLocalTestUrl,
202209

203210
// Image started loading after navigation, but render-time and load-time still start from the time origin
204211
// 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(
212+
expect((imageSpan!.data['ui.element.render_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
206213
navigationStartTime,
207214
);
208-
expect((imageSpan!.data['element.load_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
215+
expect((imageSpan!.data['ui.element.load_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
209216
navigationStartTime,
210217
);
211218

212-
expect(textSpan?.data['element.load_time']).toBe(0);
213-
expect((textSpan!.data['element.render_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
219+
expect(textSpan?.data['ui.element.load_time']).toBe(0);
220+
expect((textSpan!.data['ui.element.render_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
214221
navigationStartTime,
215222
);
216223
});

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,8 @@ export const _onElementTiming = ({ entries }: { entries: PerformanceEntry[] }):
8181
[SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.elementtiming',
8282
// name must be user-entered, so we can assume low cardinality
8383
[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'component',
84-
'sentry.transaction_name': transactionName,
84+
'sentry.transaction': transactionName,
85+
'sentry.segment.name': transactionName,
8586
'ui.element.id': id,
8687
'ui.element.type': element?.tagName?.toLowerCase() || 'unknown',
8788
'ui.element.width': naturalWidth,

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -327,7 +327,8 @@ describe('_onElementTiming', () => {
327327
'sentry.op': 'ui.elementtiming',
328328
'sentry.origin': 'auto.ui.browser.elementtiming',
329329
'sentry.source': 'component',
330-
'sentry.transaction_name': undefined,
330+
'sentry.transaction': undefined,
331+
'sentry.segment.name': undefined,
331332
}),
332333
}),
333334
expect.any(Function),

0 commit comments

Comments
 (0)