Skip to content

Commit 5ff133c

Browse files
ZizzamiaZizzamia
committed
feat: bye bye new Perfume, welcome initPerfume
1 parent 243e139 commit 5ff133c

14 files changed

+383
-300
lines changed

Diff for: ‎README.md

+10-10
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ Metrics like **Navigation Timing**, **Network Information**, **TTFB**, **FCP**,
9292
🚀 Visit [perfumejs.com](http://perfumejs.com/) for a live demo on how the metrics work. 🌕
9393

9494
```javascript
95-
const perfume = new Perfume({
95+
initPerfume({
9696
analyticsTracker: options => {
9797
const {
9898
attribution,
@@ -261,7 +261,7 @@ If this method is called before the 2s window ends; it will trigger a new NTBT m
261261
import { createBrowserHistory } from 'history';
262262
export const history = createBrowserHistory();
263263

264-
const perfume = new Perfume({
264+
initPerfume({
265265
analyticsTracker: ({ metricName, data }) => {
266266
myAnalyticsTool.track(metricName, data);
267267
})
@@ -282,7 +282,7 @@ Resource Timing collects performance metrics for document-dependent resources. S
282282
Perfume helps expose all PerformanceResourceTiming entries and groups data data consumption by Kb used.
283283

284284
```javascript
285-
const perfume = new Perfume({
285+
initPerfume({
286286
resourceTiming: true,
287287
analyticsTracker: ({ metricName, data }) => {
288288
myAnalyticsTool.track(metricName, data);
@@ -296,14 +296,14 @@ const perfume = new Perfume({
296296
**Performance.mark** ([User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API)) is used to create an application-defined peformance entry in the browser's performance entry buffer.
297297

298298
```javascript
299-
const perfume = new Perfume({
299+
initPerfume({
300300
analyticsTracker: ({ metricName, data }) => {
301301
myAnalyticsTool.track(metricName, data);
302302
})
303303
});
304-
perfume.start('fibonacci');
304+
start('fibonacci');
305305
fibonacci(400);
306-
perfume.end('fibonacci');
306+
end('fibonacci');
307307
// Perfume.js: fibonacci 0.14 ms
308308
```
309309

@@ -314,7 +314,7 @@ perfume.end('fibonacci');
314314
This metric mark the point, immediately after creating a **new component**, when the browser renders pixels to the screen.
315315

316316
```javascript
317-
const perfume = new Perfume({
317+
initPerfume({
318318
analyticsTracker: ({ metricName, data }) => {
319319
myAnalyticsTool.track(metricName, data);
320320
})
@@ -341,7 +341,7 @@ Track when image elements and text nodes are displayed on screen using the [emer
341341
```
342342

343343
```javascript
344-
const perfume = new Perfume({
344+
initPerfume({
345345
elementTiming: true,
346346
analyticsTracker: ({ metricName, data }) => {
347347
myAnalyticsTool.track(metricName, data);
@@ -414,7 +414,7 @@ export const steps = {
414414
},
415415
};
416416

417-
new Perfume ({ steps });
417+
initPerfume({ steps });
418418

419419
```
420420

@@ -499,7 +499,7 @@ Have fun ✨
499499

500500
```javascript
501501
const metricNames = ['TTFB', 'RT', 'FCP', 'LCP', 'FID', 'CLS', 'TBT'];
502-
new Perfume({
502+
initPerfume({
503503
analyticsTracker: ({ attribution, metricName, data, navigatorInformation, rating, navigationType }) => {
504504
if (metricNames.includes(metricName)) {
505505
ga('send', 'event', {

Diff for: ‎__tests__/perfume.spec.ts renamed to ‎__tests__/initPerfume.spec.ts

+13-112
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
* @jest-environment jsdom
33
*/
44
import { C, WN, WP } from '../src/constants';
5-
import * as log from '../src/log';
6-
import { metrics, ntbt } from '../src/metrics';
7-
import { Perfume } from '../src/perfume';
5+
import { initPerfume } from '../src/initPerfume';
86
import * as observe from '../src/observe';
97
import { visibility } from '../src/onVisibilityChange';
108
import { IThresholdTier } from '../src/types';
@@ -13,13 +11,12 @@ import { testConfig } from './stepsTestConstants';
1311
import mock from './_mock';
1412

1513
describe('Perfume', () => {
16-
let perfume: Perfume;
1714
let spy: jest.SpyInstance;
1815

1916
beforeEach(() => {
2017
(WN as any) = mock.navigator();
2118
(WP as any) = mock.performance();
22-
perfume = new Perfume({ ...mock.defaultPerfumeConfig });
19+
initPerfume({ ...mock.defaultPerfumeConfig });
2320
(window as any).PerformanceObserver = mock.PerformanceObserver;
2421
(C as any).log = (n: any) => n;
2522
(window as any).console.warn = (n: any) => n;
@@ -36,30 +33,30 @@ describe('Perfume', () => {
3633

3734
describe('constructor', () => {
3835
it('should run with config version A', () => {
39-
new Perfume({});
36+
initPerfume({});
4037
});
4138

4239
it('should run with config version B', () => {
43-
new Perfume({
40+
initPerfume({
4441
resourceTiming: true,
4542
});
4643
});
4744

4845
it('should run with config version C', () => {
49-
new Perfume({
46+
initPerfume({
5047
elementTiming: true,
5148
});
5249
});
5350

5451
it('should run with config version D', () => {
55-
new Perfume({
52+
initPerfume({
5653
resourceTiming: true,
5754
elementTiming: true,
5855
});
5956
});
6057

6158
it('should run with steps config version B', () => {
62-
new Perfume({
59+
initPerfume({
6360
steps: {
6461
load_first_screen_first_journey: {
6562
threshold: IThresholdTier.unavoidable,
@@ -77,13 +74,13 @@ describe('Perfume', () => {
7774
});
7875

7976
it('should run with steps config version D', () => {
80-
new Perfume({
77+
initPerfume({
8178
onMarkStep: () => {},
8279
});
8380
});
8481

8582
it('should run with steps config version E', () => {
86-
new Perfume({
83+
initPerfume({
8784
steps: {
8885
load_first_screen_first_journey: {
8986
threshold: IThresholdTier.unavoidable,
@@ -102,127 +99,31 @@ describe('Perfume', () => {
10299

103100
it('should run with all userJourney config', () => {
104101
expect(config).not.toMatchObject(testConfig);
105-
new Perfume(testConfig);
102+
initPerfume(testConfig);
106103
expect(config).toMatchObject(testConfig);
107104
});
108105

109106
it('when navigator is not supported should not call WN.storage.estimate()', () => {
110107
(WN as any) = mock.navigator();
111108
const spy = jest.spyOn(WN.storage, 'estimate');
112109
(WN as any).storage = undefined;
113-
new Perfume();
110+
initPerfume();
114111
expect(spy.mock.calls.length).toEqual(0);
115112
});
116113

117114
it('when WN.storage.estimate() is not defined should not call it', () => {
118115
(WN as any) = mock.navigator();
119116
const spy = jest.spyOn(WN.storage, 'estimate');
120117
(WN as any).storage.estimate = undefined;
121-
expect(() => new Perfume()).not.toThrow(TypeError);
118+
expect(() => initPerfume()).not.toThrow(TypeError);
122119
expect(spy.mock.calls.length).toEqual(0);
123120
});
124121

125122
it('when navigator is supported should call WN.storage.estimate()', () => {
126123
(WN as any) = mock.navigator();
127124
const spy = jest.spyOn(WN.storage, 'estimate');
128-
new Perfume();
125+
initPerfume();
129126
expect(spy.mock.calls.length).toEqual(1);
130127
});
131128
});
132-
133-
describe('.start()', () => {
134-
beforeEach(() => {
135-
perfume = new Perfume({ ...mock.defaultPerfumeConfig });
136-
delete metrics.metric_moon;
137-
});
138-
139-
it('should call window.performance.mark with the correct argument', () => {
140-
spy = jest.spyOn(WP, 'mark');
141-
perfume.start('metric_moon');
142-
expect(spy.mock.calls.length).toBe(1);
143-
expect(spy).toHaveBeenCalledWith('mark_metric_moon_start');
144-
});
145-
});
146-
147-
describe('.end()', () => {
148-
beforeEach(() => {
149-
delete metrics.metric_moon;
150-
});
151-
152-
it('should call window.performance.mark with the correct argument', () => {
153-
spy = jest.spyOn(WP, 'mark');
154-
perfume.start('metric_moon');
155-
perfume.end('metric_moon');
156-
expect(spy.mock.calls.length).toBe(2);
157-
expect(spy).toHaveBeenCalledWith('mark_metric_moon_start');
158-
expect(spy).toHaveBeenCalledWith('mark_metric_moon_end');
159-
});
160-
161-
it('should call logData() with correct params', () => {
162-
spy = jest.spyOn(log, 'logData');
163-
perfume.start('metricName');
164-
perfume.end('metricName');
165-
expect(spy.mock.calls.length).toEqual(1);
166-
expect(spy).toHaveBeenCalledWith('metricName', 12346, {});
167-
});
168-
169-
it('should add metrics properly', () => {
170-
perfume = new Perfume();
171-
perfume.start('metricName');
172-
expect(metrics['metricName']).toBeDefined();
173-
});
174-
175-
it('should delete metrics properly', () => {
176-
perfume = new Perfume();
177-
perfume.start('metricName');
178-
perfume.end('metricName');
179-
expect(metrics['metricName']).not.toBeDefined();
180-
});
181-
});
182-
183-
describe('.endPaint()', () => {
184-
beforeEach(() => {
185-
jest.useFakeTimers();
186-
});
187-
188-
it('should call end() after the first setTimeout', () => {
189-
spy = jest.spyOn(perfume, 'end');
190-
perfume.endPaint('test');
191-
jest.runAllTimers();
192-
expect(spy.mock.calls.length).toEqual(1);
193-
});
194-
});
195-
196-
describe('.clear()', () => {
197-
beforeEach(() => {
198-
jest.useFakeTimers();
199-
});
200-
201-
it('should not call clearMarks() when not supported', () => {
202-
spy = jest.spyOn(WP, 'clearMarks');
203-
delete (WP as any).clearMarks;
204-
perfume.clear('measure_moon');
205-
expect(spy.mock.calls.length).toEqual(0);
206-
});
207-
208-
it('should call clearMarks() twice and with the correct arguments', () => {
209-
spy = jest.spyOn(WP, 'clearMarks');
210-
perfume.clear('measure_moon');
211-
expect(spy.mock.calls.length).toEqual(2);
212-
expect(spy).toHaveBeenCalledWith('mark_measure_moon_start');
213-
expect(spy).toHaveBeenCalledWith('mark_measure_moon_end');
214-
});
215-
});
216-
217-
describe('.markNTBT()', () => {
218-
beforeEach(() => {
219-
jest.useFakeTimers();
220-
});
221-
222-
it('should set ntbt.value to 0', () => {
223-
ntbt.value = 1234;
224-
perfume.markNTBT();
225-
expect(ntbt.value).toEqual(0);
226-
});
227-
});
228129
});

Diff for: ‎__tests__/markNTBT.spec.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
* @jest-environment jsdom
3+
*/
4+
import { C, WN, WP } from '../src/constants';
5+
import { initPerfume } from '../src/perfume';
6+
import { markNTBT } from '../src/markNTBT';
7+
import { ntbt } from '../src/metrics';
8+
import * as observe from '../src/observe';
9+
import { visibility } from '../src/onVisibilityChange';
10+
import mock from './_mock';
11+
12+
describe('Perfume', () => {
13+
let spy: jest.SpyInstance;
14+
15+
beforeEach(() => {
16+
(WN as any) = mock.navigator();
17+
(WP as any) = mock.performance();
18+
initPerfume({ ...mock.defaultPerfumeConfig });
19+
(window as any).PerformanceObserver = mock.PerformanceObserver;
20+
(C as any).log = (n: any) => n;
21+
(window as any).console.warn = (n: any) => n;
22+
(observe as any).perfObservers = {};
23+
visibility.isHidden = false;
24+
});
25+
26+
afterEach(() => {
27+
if (spy) {
28+
spy.mockReset();
29+
spy.mockRestore();
30+
}
31+
});
32+
33+
describe('markNTBT()', () => {
34+
beforeEach(() => {
35+
jest.useFakeTimers();
36+
});
37+
38+
it('should set ntbt.value to 0', () => {
39+
ntbt.value = 1234;
40+
markNTBT();
41+
expect(ntbt.value).toEqual(0);
42+
});
43+
});
44+
});

Diff for: ‎__tests__/steps/markJourney.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*/
44
import { WP } from '../../src/constants';
55
import mock from '../_mock';
6-
import { Perfume } from '../../src/perfume';
6+
import { initPerfume } from '../../src/initPerfume';
77
import { markStep } from '../../src/steps/markStep';
88
import { steps } from '../../src/steps/steps';
99

@@ -14,7 +14,7 @@ describe('markStep', () => {
1414

1515
beforeEach(() => {
1616
(WP as any) = mock.performance();
17-
const perfume = new Perfume(testConfig);
17+
initPerfume(testConfig);
1818
});
1919

2020
afterEach(() => {

Diff for: ‎__tests__/steps/markJourneyOnce.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55
import { WP } from '../../src/constants';
66
import mock from '../_mock';
7-
import { Perfume } from '../../src/perfume';
7+
import { initPerfume } from '../../src/initPerfume';
88
import { markStepOnce } from '../../src/steps/markStepOnce';
99

1010
import { testConfig } from '../stepsTestConstants';
@@ -14,7 +14,7 @@ describe('markStepOnce', () => {
1414

1515
beforeEach(() => {
1616
(WP as any) = mock.performance();
17-
const perfume = new Perfume(testConfig);
17+
initPerfume(testConfig);
1818
});
1919

2020
afterEach(() => {

0 commit comments

Comments
 (0)