updates

.eslintignore

@@ -12,4 +12,3 @@
 *.testjs
 *.testts
 LICENSE
-src/ag-mock.js

.prettierignore

@@ -52,4 +52,3 @@ yarn.lock
 .idea
 .gitkeep
 .yarn/
-src/ag-mock.js

jest.setup.ts

@@ -5,12 +5,10 @@ import { readFileSync } from 'fs';
 import { airgapStub } from './src/playground/airgapStub';
 import { testWindow } from './src/tests/utils'
 
-const mockAg = readFileSync('./src/ag-mock.js').toString();
+import { init as initMockAirgap } from './src/tests/ag-mock'
+import { MOCK_PURPOSES } from './src/tests/constants'
 
-const newScript = document.createElement('script');
-newScript.innerHTML = mockAg;
-
-document.head.append(newScript);
+initMockAirgap(MOCK_PURPOSES)
 
 testWindow.JEST_SETUP_VARS = { messages: {} };
 

src/tests/CompleteOptions.test.tsx

@@ -1,7 +1,8 @@
 import '@testing-library/jest-dom';
 
 import { h } from 'preact';
-import { clickPurposeCheckbox, getPurposeCheckState, render } from './utils';
+import { render } from './utils/render';
+import { clickPurposeCheckbox, getPurposeCheckState } from './utils/checkbox';
 import { test, expect } from '@jest/globals';
 
 import { CompleteOptions } from '../components/CompleteOptions';

src/tests/ag-mock.ts

@@ -0,0 +1,55 @@
+import {
+  AirgapAPI,
+  ConsentOptions,
+  TrackingConsent,
+  TrackingConsentDetails,
+  TrackingPurposesTypes
+} from '@transcend-io/airgap.js-types';
+
+export const init = (purposeTypes: TrackingPurposesTypes): void => {
+  let consentCache: TrackingConsentDetails = {
+    confirmed: false,
+    prompted: false,
+    timestamp: '',
+    purposes: Object.fromEntries(
+      Object.entries(purposeTypes)
+        .map(([key, purpose]) => ([key, purpose.defaultConsent]))
+    ) as TrackingConsent
+  }
+
+  const getPurposeTypes = (): TrackingPurposesTypes => purposeTypes;
+  const optIn = (): void => {
+    const optedInEntries = Object.entries(consentCache.purposes).map(([key]) => ([key, true]))
+    consentCache.purposes = Object.fromEntries(optedInEntries)
+  }
+  const optOut = (): void => {
+    const optedOutEntries = Object.entries(consentCache.purposes).map(([key]) => ([key, false]))
+    consentCache.purposes = Object.fromEntries(optedOutEntries)
+  }
+  const setConsent = (event: Event, purposes: TrackingConsent, options: ConsentOptions): void => {
+    consentCache = {
+      ...consentCache,
+      ...options,
+      purposes: {
+        ...consentCache.purposes,
+        ...purposes
+      }
+    } as TrackingConsentDetails
+  }
+  const getConsent = (): TrackingConsentDetails => ({
+      ...consentCache,
+      purposes: { ...consentCache.purposes }
+    });
+  const getPrivacySignals = (): Set<"DNT" | "GPC"> => new Set()
+  const getRegimePurposes = (): Set<string> => new Set(Object.keys(purposeTypes));
+
+  window.airgap = {
+    getPurposeTypes,
+    optIn,
+    optOut,
+    setConsent,
+    getConsent,
+    getPrivacySignals,
+    getRegimePurposes,
+  } as unknown as AirgapAPI
+}

src/tests/constants.ts

@@ -63,4 +63,4 @@ export const MOCK_PURPOSES = {
     trackingType: 'UniquePurpose',
     optOutSignals: [],
   },
-} as const;
+};

src/tests/utils/checkbox.tsx

@@ -0,0 +1,24 @@
+import {
+  fireEvent,
+  RenderResult,
+} from '@testing-library/preact';
+
+export const getPurposeCheckState = <T extends RenderResult>(
+  screen: T,
+  purposeName: string,
+): boolean => {
+  const checkboxEl = screen
+    .getByText(purposeName, { exact: false })
+    ?.querySelector('input');
+  return !!checkboxEl?.checked;
+};
+
+export const clickPurposeCheckbox = <T extends RenderResult>(
+  screen: T,
+  purposeName: string,
+): void => {
+  const checkboxEl = screen
+    .getByText(purposeName, { exact: false })
+    ?.querySelector('input');
+  if (checkboxEl) fireEvent.click(checkboxEl);
+};

src/tests/utils/render.tsx

@@ -0,0 +1,59 @@
+import { ComponentChild, h } from 'preact';
+import {
+  render,
+  RenderOptions,
+  RenderResult,
+} from '@testing-library/preact';
+import { AirgapProvider } from '../../hooks/useAirgap';
+import { IntlProvider } from 'react-intl';
+import { ConsentManagerLanguageKey } from '@transcend-io/internationalization';
+import { AirgapAPI } from '@transcend-io/airgap.js-types';
+import * as prettier from '@prettier/sync';
+import { TestWindow } from '../types';
+
+export const testWindow = window as unknown as TestWindow;
+
+interface CustomRenderResult extends RenderResult {
+  /** Prettified container outerHTML for use in snapshotting */
+  snapshot: string;
+}
+
+interface RenderWrapperProps {
+  /** Arbitrary children to be provided by the test */
+  children: ComponentChild[]
+}
+
+const wrapper = ({ children }: RenderWrapperProps): ComponentChild => {
+  const { messages } = testWindow.JEST_SETUP_VARS;
+  return (
+    <IntlProvider
+      locale={ConsentManagerLanguageKey.En}
+      messages={messages || {}}
+      defaultLocale={ConsentManagerLanguageKey.En}
+    >
+      {
+        (
+          <AirgapProvider newAirgap={window.airgap as AirgapAPI}>
+            {children}
+          </AirgapProvider>
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ) as any
+      }
+    </IntlProvider>
+  );
+};
+
+const customRender = (
+  ui: ComponentChild,
+  options: RenderOptions = {},
+): CustomRenderResult => {
+  const result = render(ui, { wrapper, ...options });
+  const snapshot = result.container.outerHTML;
+  const prettySnapshot = prettier.format(snapshot, { parser: 'html' })
+  return {
+    snapshot: prettySnapshot,
+    ...result,
+  };
+};
+
+export { customRender as render };