Merge branch 'jejacks0n/fix/enable-form-tracking-load-issue' into 'master'

Fix load timing with snowplow form tracking

See merge request gitlab-org/gitlab!64822

app/assets/javascripts/tracking/index.js

@@ -34,6 +34,12 @@ const addExperimentContext = (opts) => {
   return options;
 };
 
+const renameKey = (o, oldKey, newKey) => {
+  const ret = {};
+  delete Object.assign(ret, o, { [newKey]: o[oldKey] })[oldKey];
+  return ret;
+};
+
 const createEventPayload = (el, { suffix = '' } = {}) => {
   const {
     trackAction,
@@ -186,15 +192,18 @@ export default class Tracking {
       (context) => context.schema !== standardContext.schema,
     );
 
-    const mappedConfig = {
-      forms: { whitelist: config.forms?.allow || [] },
-      fields: { whitelist: config.fields?.allow || [] },
-    };
+    const mappedConfig = {};
+    if (config.forms) mappedConfig.forms = renameKey(config.forms, 'allow', 'whitelist');
+    if (config.fields) mappedConfig.fields = renameKey(config.fields, 'allow', 'whitelist');
 
     const enabler = () => window.snowplow('enableFormTracking', mappedConfig, userProvidedContexts);
 
-    if (document.readyState !== 'loading') enabler();
-    else document.addEventListener('DOMContentLoaded', enabler);
+    if (document.readyState === 'complete') enabler();
+    else {
+      document.addEventListener('readystatechange', () => {
+        if (document.readyState === 'complete') enabler();
+      });
+    }
   }
 
   static mixin(opts = {}) {

spec/frontend/tracking_spec.js

@@ -197,6 +197,52 @@ describe('Tracking', () => {
         expectedError,
       );
     });
+
+    it('does not add empty form whitelist rules', () => {
+      Tracking.enableFormTracking({ fields: { allow: ['input-class1'] } });
+
+      expect(snowplowSpy).toHaveBeenCalledWith(
+        'enableFormTracking',
+        { fields: { whitelist: ['input-class1'] } },
+        [],
+      );
+    });
+
+    describe('when `document.readyState` does not equal `complete`', () => {
+      const originalReadyState = document.readyState;
+      const setReadyState = (value) => {
+        Object.defineProperty(document, 'readyState', {
+          value,
+          configurable: true,
+        });
+      };
+      const fireReadyStateChangeEvent = () => {
+        document.dispatchEvent(new Event('readystatechange'));
+      };
+
+      beforeEach(() => {
+        setReadyState('interactive');
+      });
+
+      afterEach(() => {
+        setReadyState(originalReadyState);
+      });
+
+      it('does not call `window.snowplow` until `readystatechange` is fired and `document.readyState` equals `complete`', () => {
+        Tracking.enableFormTracking({ fields: { allow: ['input-class1'] } });
+
+        expect(snowplowSpy).not.toHaveBeenCalled();
+
+        fireReadyStateChangeEvent();
+
+        expect(snowplowSpy).not.toHaveBeenCalled();
+
+        setReadyState('complete');
+        fireReadyStateChangeEvent();
+
+        expect(snowplowSpy).toHaveBeenCalled();
+      });
+    });
   });
 
   describe('.flushPendingEvents', () => {