chore: rename 'incrementUjNavigation' to 'trackUJNavigation' (#235)

lkuangPR · web-flow · commit 273ac7704313 · 2023-08-07T15:58:25.000-07:00
diff --git a/README.md b/README.md
@@ -100,7 +100,7 @@ initPerfume({
       data,
       navigatorInformation,
       rating,
-      navigationType
+      navigationType,
     } = options;
     switch (metricName) {
       case 'navigationTiming':
@@ -147,7 +147,7 @@ initPerfume({
         myAnalyticsTool.track('userJourneyStep', {
           duration: data,
           stepName: attribution.step_name,
-          vitals_score: rating
+          vitals_score: rating,
         });
         break;
       default:
@@ -398,11 +398,12 @@ const ScreenB = () => {
 ```
 
 #### Defining Steps
+
 In order for Perfume to be able to track metrics for Steps, we need to configure the steps and provide them when initializing Perfume.
 
 Below you can find an example of how to do this.
 
-``` typescript
+```typescript
 export const steps = {
   load_screen_A: {
     threshold: ThresholdTier.quick,
@@ -415,33 +416,31 @@ export const steps = {
 };
 
 initPerfume({ steps });
-
 ```
 
 #### MarkStep
+
 `markStep` is the function used to start and end steps in applications.
 
 For example, if we wanted to mark the beginning of load_screen_B step above, we would add in `markStep('navigate_to_screen_B')` to our code.
 
-#### `enableNavigationTracking`
+#### `trackUJNavigation`
 
-`enableNavigationTracking` is a boolean in the config that will tell Perfume to take into account page navigation changes or not. By default this is `true`, but it can be set to false if needed.
-
-The purpose of this feature is to only account for active steps that the user is working on. The feature will remove any inactive or 'stale' steps that are not currently in progress.
+The purpose of this function is to only account for active steps that the user is working on. The feature will remove any inactive or 'stale' steps that are not currently in progress.
 
 Stale steps can be created by navigating away from a page before it fully loads, this would cause the start mark to be triggered, but the end mark to not be called. This would affect the `active` steps being returned to `onMarkStep` as well as would create incorrect data if we returned back to the end mark much later than expected.
 
-`enableNavigationTracking` works together with the `incrementUjNavigation` function. The `incrementUjNavigation` function is to be called anytime there is a navigation change in your application. Below is an example for how this would work in a React Application:
+The `trackUJNavigation` function is to be called anytime there is a navigation change in your application. Below is an example for how this would work in a React Application:
 
-``` typescript
+```typescript
 import { useLocation } from 'react-router-dom';
 
 const MyComponent = () => {
   const location = useLocation()
 
   React.useEffect(() => {
     // runs on location, i.e. route, change
-    incrementUjNavigation();
+    trackUJNavigation();
   }, [location])
   ...
 }
@@ -476,7 +475,6 @@ Below are the thresholds available for each step:
 | SLOW        | [1000, 2000]     |
 | UNAVOIDABLE | [2000, 5000]     |
 
-
 ## Perfume custom options
 
 Default options provided to Perfume.js constructor.
diff --git a/__tests__/steps/navSteps.spec.ts b/__tests__/steps/navSteps.spec.ts
@@ -5,12 +5,10 @@ import { WP } from '../../src/constants';
 import mock from '../_mock';
 import { initPerfume } from '../../src/initPerfume';
 import { markStep } from '../../src/steps/markStep';
-import {
-  getNavigationState
-} from '../../src/steps/steps';
+import { getNavigationState } from '../../src/steps/steps';
 import {
   getActiveStepsFromNavigationSteps,
-  incrementUjNavigation,
+  trackUJNavigation,
 } from '../../src/steps/navigationSteps';
 
 import { navigationTestConfig } from '../stepsTestConstants';
@@ -55,9 +53,9 @@ describe('navSteps', () => {
     });
 
     it('incrementCujNavigation the navigation state on page navigations', () => {
-      incrementUjNavigation();
+      trackUJNavigation();
       expect(getNavigationState()).toMatchObject({ 0: {} });
-      incrementUjNavigation();
+      trackUJNavigation();
       expect(getNavigationState()).toMatchObject({ 0: {}, 1: {} });
     });
   });
@@ -98,7 +96,7 @@ describe('navSteps', () => {
 
     it('returns the active steps for the last navigation step', () => {
       // load app
-      incrementUjNavigation();
+      trackUJNavigation();
 
       markStep('start_navigate_to_second_screen_first_journey');
       expect(getNavigationState()).toMatchObject({
@@ -114,10 +112,10 @@ describe('navSteps', () => {
     it('returns the active steps for the last 2 navigation steps', () => {
       markStep('start_navigate_to_second_screen_first_journey');
       // load some next page
-      incrementUjNavigation();
+      trackUJNavigation();
       markStep('start_navigate_to_third_screen_first_journey');
 
-      incrementUjNavigation();
+      trackUJNavigation();
       markStep('start_navigate_to_fourth_screen_first_journey');
       expect(getNavigationState()).toMatchObject({
         0: {
@@ -133,15 +131,15 @@ describe('navSteps', () => {
 
     it('does not return stale steps - i.e. steps older than the last 2 navigations', () => {
       // navigate to some page
-      incrementUjNavigation();
+      trackUJNavigation();
       markStep('start_navigate_to_second_screen_first_journey');
 
       // navigate to next page
-      incrementUjNavigation();
+      trackUJNavigation();
       markStep('start_navigate_to_third_screen_first_journey');
 
       // navigate to a third page
-      incrementUjNavigation();
+      trackUJNavigation();
       markStep('start_navigate_to_fourth_screen_first_journey');
 
       expect(getNavigationState()).toMatchObject({
diff --git a/__tests__/stepsTestConstants.ts b/__tests__/stepsTestConstants.ts
@@ -43,7 +43,8 @@ const steps: IStepsConfig = {
       'loaded_second_screen_first_journey',
     ],
   },
-  test_load_reusing_marks: { // step with the same start and end mark as another
+  test_load_reusing_marks: {
+    // step with the same start and end mark as another
     threshold: IThresholdTier.instant,
     marks: [
       'start_navigate_to_fourth_screen_second_journey',
@@ -94,7 +95,6 @@ const steps: IStepsConfig = {
 export const testConfig: IPerfumeOptions = {
   steps,
   onMarkStep: jest.fn(),
-  enableNavigationTracking: false,
 };
 export const navigationTestConfig: IPerfumeOptions = {
   steps,
diff --git a/src/config.ts b/src/config.ts
@@ -8,5 +8,4 @@ export const config: IPerfumeConfig = {
   maxTime: 30000,
   // web-vitals report options
   reportOptions: {},
-  enableNavigationTracking: true,
 };
diff --git a/src/initPerfume.ts b/src/initPerfume.ts
@@ -5,19 +5,19 @@
  *
  * @license
  */
- import { config } from './config';
- import { W, WN } from './constants';
- import { getNavigationTiming } from './getNavigationTiming';
- import { getNetworkInformation } from './getNetworkInformation';
- import { isPerformanceSupported } from './isSupported';
- import { logData, logMetric } from './log';
- import { initPerformanceObserver } from './observe';
- import { didVisibilityChange } from './onVisibilityChange';
- import { reportStorageEstimate } from './storageEstimate';
- import { IPerfumeOptions } from './types';
- import { getVitalsScore } from './vitalsScore';
- import { setStepsMap } from './steps/setStepsMap';
- 
+import { config } from './config';
+import { W, WN } from './constants';
+import { getNavigationTiming } from './getNavigationTiming';
+import { getNetworkInformation } from './getNetworkInformation';
+import { isPerformanceSupported } from './isSupported';
+import { logData, logMetric } from './log';
+import { initPerformanceObserver } from './observe';
+import { didVisibilityChange } from './onVisibilityChange';
+import { reportStorageEstimate } from './storageEstimate';
+import { IPerfumeOptions } from './types';
+import { getVitalsScore } from './vitalsScore';
+import { setStepsMap } from './steps/setStepsMap';
+
 export const initPerfume = (options: IPerfumeOptions = {}) => {
   // Extend default config with external options
   config.analyticsTracker = options.analyticsTracker;
@@ -27,7 +27,6 @@ export const initPerfume = (options: IPerfumeOptions = {}) => {
   config.reportOptions = options.reportOptions || config.reportOptions;
   config.steps = options.steps;
   config.onMarkStep = options.onMarkStep;
-  config.enableNavigationTracking = options.enableNavigationTracking;
 
   // Exit from Perfume when basic Web Performance APIs aren't supported
   if (!isPerformanceSupported()) {
diff --git a/src/perfume.ts b/src/perfume.ts
@@ -2,15 +2,15 @@ import { initPerfume } from './initPerfume';
 
 import { clear, end, endPaint, markStep, start } from './steps/markStep';
 import { markStepOnce } from './steps/markStepOnce';
-import { incrementUjNavigation } from './steps/navigationSteps';
+import { trackUJNavigation } from './steps/navigationSteps';
 
-export { 
+export {
   clear,
   end,
   endPaint,
   initPerfume,
   markStep,
   markStepOnce,
-  incrementUjNavigation,
-  start
+  trackUJNavigation,
+  start,
 };
diff --git a/src/steps/measureSteps.ts b/src/steps/measureSteps.ts
@@ -29,10 +29,6 @@ export const measureSteps = (mark: string) => {
     recordStartMark(mark);
     addActiveSteps(mark);
   }
-  if (config.enableNavigationTracking) {
-    const navigationBasedActiveSteps = getActiveStepsFromNavigationSteps();
-    config.onMarkStep?.(mark, Object.keys(navigationBasedActiveSteps));
-  } else {
-    config.onMarkStep?.(mark, Object.keys(steps.active));
-  }
+  const navigationBasedActiveSteps = getActiveStepsFromNavigationSteps();
+  config.onMarkStep?.(mark, Object.keys(navigationBasedActiveSteps));
 };
diff --git a/src/steps/navigationSteps.ts b/src/steps/navigationSteps.ts
@@ -117,7 +117,7 @@ export const recordEndMark = (endMark: string) => {
  * steps that don't hit their final mark because the users navigates
  * backwards in journey.
  */
-export const incrementUjNavigation = () => {
+export const trackUJNavigation = () => {
   // navigationSteps are 0-index based, so size will give us the next key value
   const navigationLength = Object.keys(steps.navigationSteps).length;
   steps.navigationSteps[navigationLength] = {};
diff --git a/src/types.ts b/src/types.ts
@@ -97,8 +97,6 @@ export interface IPerfumeConfig {
   steps?: IStepsConfig;
   // Callback that will run each time a mark is called
   onMarkStep?: (mark: string, steps: string[]) => void;
-  // Boolean to decide to utilize navigation based steps
-  enableNavigationTracking?: boolean;
 }
 
 export interface IPerfumeOptions {
@@ -115,8 +113,6 @@ export interface IPerfumeOptions {
   steps?: IStepsConfig;
   // Callback that will run each time a mark is called
   onMarkStep?: (mark: string, steps: string[]) => void;
-  // Boolean to decide to utilize navigation based steps
-  enableNavigationTracking?: boolean;
 }
 
 export interface IMetricMap {
