Skip to content

Commit 127effd

Browse files
s1gr1ds1gr1d
committed
fix tests
1 parent 5ac1874 commit 127effd

File tree

2 files changed

+80
-66
lines changed
  • dev-packages/browser-integration-tests/suites/tracing/metrics/element-timing
  • packages/browser-utils/test/instrument/metrics

2 files changed

+80
-66
lines changed

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

Lines changed: 37 additions & 37 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['element.render_time'];
30+
const imageFastLoadTime = imageFastSpan?.data['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',
38+
'sentry.span_start_time_source': 'load-time',
3939
'element.identifier': 'image-fast',
4040
'element.type': 'img',
4141
'element.size': '600x179',
4242
'element.url': 'https://sentry-test-site.example/path/to/image-fast.png',
43-
'element.render-time': expect.any(Number),
44-
'element.load-time': expect.any(Number),
45-
'element.paint-type': 'image-paint',
46-
route: '/index.html',
43+
'element.render_time': expect.any(Number),
44+
'element.load_time': expect.any(Number),
45+
'element.paint_type': 'image-paint',
46+
'sentry.transaction_name': '/index.html',
4747
});
4848
expect(imageFastRenderTime).toBeGreaterThan(90);
4949
expect(imageFastRenderTime).toBeLessThan(400);
@@ -55,21 +55,21 @@ sentryTest(
5555

5656
// Check text1 span
5757
const text1Span = elementTimingSpans?.find(({ data }) => data?.['element.identifier'] === 'text1');
58-
const text1RenderTime = text1Span?.data['element.render-time'];
59-
const text1LoadTime = text1Span?.data['element.load-time'];
58+
const text1RenderTime = text1Span?.data['element.render_time'];
59+
const text1LoadTime = text1Span?.data['element.load_time'];
6060
const text1Duration = text1Span!.timestamp! - text1Span!.start_timestamp!;
6161
expect(text1Span).toBeDefined();
6262
expect(text1Span?.data).toEqual({
6363
'sentry.op': 'ui.elementtiming',
6464
'sentry.origin': 'auto.ui.browser.elementtiming',
6565
'sentry.source': 'component',
66-
'sentry.span-start-time-source': 'render-time',
66+
'sentry.span_start_time_source': 'render-time',
6767
'element.identifier': 'text1',
6868
'element.type': 'p',
69-
'element.render-time': expect.any(Number),
70-
'element.load-time': expect.any(Number),
71-
'element.paint-type': 'text-paint',
72-
route: '/index.html',
69+
'element.render_time': expect.any(Number),
70+
'element.load_time': expect.any(Number),
71+
'element.paint_type': 'text-paint',
72+
'sentry.transaction_name': '/index.html',
7373
});
7474
expect(text1RenderTime).toBeGreaterThan(0);
7575
expect(text1RenderTime).toBeLessThan(300);
@@ -83,8 +83,8 @@ sentryTest(
8383
expect(button1Span?.data).toMatchObject({
8484
'element.identifier': 'button1',
8585
'element.type': 'button',
86-
'element.paint-type': 'text-paint',
87-
route: '/index.html',
86+
'element.paint_type': 'text-paint',
87+
'sentry.transaction_name': '/index.html',
8888
});
8989

9090
// Check image-slow span
@@ -95,17 +95,17 @@ sentryTest(
9595
'element.type': 'img',
9696
'element.size': '600x179',
9797
'element.url': 'https://sentry-test-site.example/path/to/image-slow.png',
98-
'element.paint-type': 'image-paint',
99-
'element.render-time': expect.any(Number),
100-
'element.load-time': expect.any(Number),
98+
'element.paint_type': 'image-paint',
99+
'element.render_time': expect.any(Number),
100+
'element.load_time': expect.any(Number),
101101
'sentry.op': 'ui.elementtiming',
102102
'sentry.origin': 'auto.ui.browser.elementtiming',
103103
'sentry.source': 'component',
104-
'sentry.span-start-time-source': 'load-time',
105-
route: '/index.html',
104+
'sentry.span_start_time_source': 'load-time',
105+
'sentry.transaction_name': '/index.html',
106106
});
107-
const imageSlowRenderTime = imageSlowSpan?.data['element.render-time'];
108-
const imageSlowLoadTime = imageSlowSpan?.data['element.load-time'];
107+
const imageSlowRenderTime = imageSlowSpan?.data['element.render_time'];
108+
const imageSlowLoadTime = imageSlowSpan?.data['element.load_time'];
109109
const imageSlowDuration = imageSlowSpan!.timestamp! - imageSlowSpan!.start_timestamp!;
110110
expect(imageSlowRenderTime).toBeGreaterThan(1400);
111111
expect(imageSlowRenderTime).toBeLessThan(2000);
@@ -122,17 +122,17 @@ sentryTest(
122122
'element.type': 'img',
123123
'element.size': '600x179',
124124
'element.url': 'https://sentry-test-site.example/path/to/image-lazy.png',
125-
'element.paint-type': 'image-paint',
126-
'element.render-time': expect.any(Number),
127-
'element.load-time': expect.any(Number),
125+
'element.paint_type': 'image-paint',
126+
'element.render_time': expect.any(Number),
127+
'element.load_time': expect.any(Number),
128128
'sentry.op': 'ui.elementtiming',
129129
'sentry.origin': 'auto.ui.browser.elementtiming',
130130
'sentry.source': 'component',
131-
'sentry.span-start-time-source': 'load-time',
132-
route: '/index.html',
131+
'sentry.span_start_time_source': 'load-time',
132+
'sentry.transaction_name': '/index.html',
133133
});
134-
const lazyImageRenderTime = lazyImageSpan?.data['element.render-time'];
135-
const lazyImageLoadTime = lazyImageSpan?.data['element.load-time'];
134+
const lazyImageRenderTime = lazyImageSpan?.data['element.render_time'];
135+
const lazyImageLoadTime = lazyImageSpan?.data['element.load_time'];
136136
const lazyImageDuration = lazyImageSpan!.timestamp! - lazyImageSpan!.start_timestamp!;
137137
expect(lazyImageRenderTime).toBeGreaterThan(1000);
138138
expect(lazyImageRenderTime).toBeLessThan(1500);
@@ -146,10 +146,10 @@ sentryTest(
146146
expect(lazyTextSpan?.data).toMatchObject({
147147
'element.identifier': 'lazy-text',
148148
'element.type': 'p',
149-
route: '/index.html',
149+
'sentry.transaction_name': '/index.html',
150150
});
151-
const lazyTextRenderTime = lazyTextSpan?.data['element.render-time'];
152-
const lazyTextLoadTime = lazyTextSpan?.data['element.load-time'];
151+
const lazyTextRenderTime = lazyTextSpan?.data['element.render_time'];
152+
const lazyTextLoadTime = lazyTextSpan?.data['element.load_time'];
153153
const lazyTextDuration = lazyTextSpan!.timestamp! - lazyTextSpan!.start_timestamp!;
154154
expect(lazyTextRenderTime).toBeGreaterThan(1000);
155155
expect(lazyTextRenderTime).toBeLessThan(1500);
@@ -197,15 +197,15 @@ sentryTest('emits element timing spans on navigation', async ({ getLocalTestUrl,
197197

198198
// Image started loading after navigation, but render-time and load-time still start from the time origin
199199
// of the pageload. This is somewhat a limitation (though by design according to the ElementTiming spec)
200-
expect((imageSpan!.data['element.render-time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
200+
expect((imageSpan!.data['element.render_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
201201
navigationStartTime,
202202
);
203-
expect((imageSpan!.data['element.load-time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
203+
expect((imageSpan!.data['element.load_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
204204
navigationStartTime,
205205
);
206206

207-
expect(textSpan?.data['element.load-time']).toBe(0);
208-
expect((textSpan!.data['element.render-time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
207+
expect(textSpan?.data['element.load_time']).toBe(0);
208+
expect((textSpan!.data['element.render_time']! as number) / 1000 + pageloadStartTime).toBeGreaterThan(
209209
navigationStartTime,
210210
);
211211
});

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

Lines changed: 43 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -49,16 +49,20 @@ describe('_onElementTiming', () => {
4949
_onElementTiming({ entries: [entry] });
5050

5151
expect(startSpanSpy).toHaveBeenCalledWith(
52-
{
52+
expect.objectContaining({
5353
name: 'element[test-element]',
5454
startTime: 0.05,
5555
attributes: expect.objectContaining({
5656
'sentry.op': 'ui.elementtiming',
57-
'sentry.span-start-time-source': 'load-time',
58-
'element.render-time': 100,
59-
'element.load-time': 50,
57+
'sentry.origin': 'auto.ui.browser.elementtiming',
58+
'sentry.source': 'component',
59+
'sentry.span_start_time_source': 'load-time',
60+
'element.render_time': 100,
61+
'element.load_time': 50,
62+
'element.identifier': 'test-element',
63+
'element.paint_type': 'image-paint',
6064
}),
61-
},
65+
}),
6266
expect.any(Function),
6367
);
6468
});
@@ -77,15 +81,20 @@ describe('_onElementTiming', () => {
7781
_onElementTiming({ entries: [entry] });
7882

7983
expect(startSpanSpy).toHaveBeenCalledWith(
80-
{
84+
expect.objectContaining({
8185
name: 'element[test-element]',
8286
startTime: 0.1,
8387
attributes: expect.objectContaining({
84-
'sentry.span-start-time-source': 'render-time',
85-
'element.render-time': 100,
86-
'element.load-time': undefined,
88+
'sentry.op': 'ui.elementtiming',
89+
'sentry.origin': 'auto.ui.browser.elementtiming',
90+
'sentry.source': 'component',
91+
'sentry.span_start_time_source': 'render-time',
92+
'element.render_time': 100,
93+
'element.load_time': undefined,
94+
'element.identifier': 'test-element',
95+
'element.paint_type': 'image-paint',
8796
}),
88-
},
97+
}),
8998
expect.any(Function),
9099
);
91100
});
@@ -103,15 +112,20 @@ describe('_onElementTiming', () => {
103112
_onElementTiming({ entries: [entry] });
104113

105114
expect(startSpanSpy).toHaveBeenCalledWith(
106-
{
115+
expect.objectContaining({
107116
name: 'element[test-element]',
108117
startTime: expect.any(Number),
109118
attributes: expect.objectContaining({
110-
'sentry.span-start-time-source': 'entry-emission',
111-
'element.render-time': undefined,
112-
'element.load-time': undefined,
119+
'sentry.op': 'ui.elementtiming',
120+
'sentry.origin': 'auto.ui.browser.elementtiming',
121+
'sentry.source': 'component',
122+
'sentry.span_start_time_source': 'entry-emission',
123+
'element.render_time': undefined,
124+
'element.load_time': undefined,
125+
'element.identifier': 'test-element',
126+
'element.paint_type': 'image-paint',
113127
}),
114-
},
128+
}),
115129
expect.any(Function),
116130
);
117131
});
@@ -137,9 +151,9 @@ describe('_onElementTiming', () => {
137151
name: 'element[test-element]',
138152
startTime: 1.5,
139153
attributes: expect.objectContaining({
140-
'element.render-time': 1505,
141-
'element.load-time': 1500,
142-
'element.paint-type': 'image-paint',
154+
'element.render_time': 1505,
155+
'element.load_time': 1500,
156+
'element.paint_type': 'image-paint',
143157
}),
144158
}),
145159
expect.any(Function),
@@ -167,9 +181,9 @@ describe('_onElementTiming', () => {
167181
name: 'element[test-element]',
168182
startTime: 1.6,
169183
attributes: expect.objectContaining({
170-
'element.paint-type': 'text-paint',
171-
'element.render-time': 1600,
172-
'element.load-time': 0,
184+
'element.paint_type': 'text-paint',
185+
'element.render_time': 1600,
186+
'element.load_time': 0,
173187
}),
174188
}),
175189
expect.any(Function),
@@ -198,9 +212,9 @@ describe('_onElementTiming', () => {
198212
name: 'element[test-element]',
199213
startTime: 1.7,
200214
attributes: expect.objectContaining({
201-
'element.paint-type': 'somethingelse',
202-
'element.render-time': 1700,
203-
'element.load-time': 0,
215+
'element.paint_type': 'somethingelse',
216+
'element.render_time': 1700,
217+
'element.load_time': 0,
204218
}),
205219
}),
206220
expect.any(Function),
@@ -232,9 +246,9 @@ describe('_onElementTiming', () => {
232246
attributes: expect.objectContaining({
233247
'element.type': 'img',
234248
'element.identifier': 'my-image',
235-
'element.paint-type': 'image-paint',
236-
'element.render-time': 100,
237-
'element.load-time': undefined,
249+
'element.paint_type': 'image-paint',
250+
'element.render_time': 100,
251+
'element.load_time': undefined,
238252
'element.size': undefined,
239253
'element.url': undefined,
240254
}),
@@ -312,8 +326,8 @@ describe('_onElementTiming', () => {
312326
'sentry.op': 'ui.elementtiming',
313327
'sentry.origin': 'auto.ui.browser.elementtiming',
314328
'sentry.source': 'component',
315-
'sentry.span-start-time-source': 'render-time',
316-
route: undefined,
329+
'sentry.span_start_time_source': 'render-time',
330+
'sentry.transaction_name': undefined,
317331
}),
318332
}),
319333
expect.any(Function),

0 commit comments

Comments
 (0)