@trackunit/react-test-setup 1.0.0

package/index.cjs.js

@@ -0,0 +1,680 @@
+'use strict';
+
+var failOnConsole = require('jest-fail-on-console');
+var jsxRuntime = require('react/jsx-runtime');
+var reactGoogleMaps = require('@vis.gl/react-google-maps');
+var jestMocks = require('@googlemaps/jest-mocks');
+require('@testing-library/jest-dom');
+var react = require('@testing-library/react');
+var polyfill = require('@js-temporal/polyfill');
+var web = require('@react-spring/web');
+
+/**
+ * Sets up a mock implementation for HTML Canvas API in testing environments.
+ *
+ * This function uses jest-canvas-mock to provide a mock implementation of the
+ * HTML Canvas API, allowing tests to run without requiring a real DOM canvas.
+ * Useful for testing components that use canvas rendering.
+ *
+ * @example
+ * // In your jest setup file
+ * import { setupCanvasMock } from '@trackunit/react-test-setup';
+ *
+ * setupCanvasMock();
+ */
+const setupCanvasMock = () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    require("jest-canvas-mock");
+};
+
+/**
+ * This will make your tests fail if they log to console.error during the tests.
+ * See more details here: https://www.npmjs.com/package/jest-fail-on-console
+ *
+ * If your tests logs to console.error on purpose, you should spy on the console like so:
+ * ```
+ * jest.spyOn(console, 'error').mockImplementation()
+ * // Do your logic ...
+ * expect(console.error).toHaveBeenCalledWith('your error message')
+ * ```
+ */
+const setupFailOnConsole = (overrides = {}) => {
+    failOnConsole({
+        shouldFailOnError: true,
+        shouldFailOnWarn: false,
+        ...overrides,
+    });
+};
+
+const getPlacePredictionsMock = jest.fn();
+/**
+ * Sets up mocks for Google Maps API and @vis.gl/react-google-maps components in testing environments.
+ *
+ * This function mocks both the Google Maps JavaScript API and React components from @vis.gl/react-google-maps.
+ * It provides mock implementations of Maps, Markers, Geocoder, geometry functions, and places services,
+ * allowing tests of map-dependent components to run without requiring the actual Google Maps API.
+ *
+ * Key features:
+ * - Mocks core Map and Marker components with simple test-friendly implementations
+ * - Provides placeholders for Google Maps geometry calculations
+ * - Stubs out Places API services
+ * - Makes map-related hooks always return loaded state
+ *
+ * @example
+ * // In your jest setup file
+ * import { setupGoogleMaps } from '@trackunit/react-test-setup';
+ *
+ * setupGoogleMaps();
+ */
+const setupGoogleMaps = () => {
+    //To create @vis.gl/react-google-maps mock, the initialization needs to be called
+    jestMocks.initialize();
+    jest.mock("@vis.gl/react-google-maps", () => {
+        const originalModule = jest.requireActual("@vis.gl/react-google-maps");
+        const mapOptions = { mapId: "Map 1" };
+        const map = new google.maps.Map(document.createElement("div"), mapOptions);
+        const AdvancedMarkerMock = jest.fn(props => {
+            return (jsxRuntime.jsx("div", { "data-position": JSON.stringify(props.position), "data-testid": "marker", children: props.children }));
+        });
+        const MapMock = jest.fn(props => {
+            return jsxRuntime.jsx("div", { "data-testid": "map", children: props.children });
+        });
+        const MapMarkerMock = jest.fn(props => {
+            return jsxRuntime.jsx("div", { "data-testid": "map", children: props.children });
+        });
+        return {
+            ...originalModule,
+            useApiLoadingStatus: () => reactGoogleMaps.APILoadingStatus.LOADED,
+            useApiIsLoaded: () => true,
+            useMap: () => map,
+            AdvancedMarker: AdvancedMarkerMock,
+            Map: MapMock,
+            Marker: MapMarkerMock,
+        };
+    });
+    beforeEach(() => {
+        jestMocks.initialize();
+        //Adding extras
+        global.window.google.maps = {
+            ...global.window.google.maps,
+            Geocoder: jest.fn(),
+            geometry: {
+                ...global.window.google.maps.geometry,
+                spherical: {
+                    computeDistanceBetween: jest.fn(),
+                    computeArea: jest.fn(),
+                    computeHeading: jest.fn(),
+                    computeLength: jest.fn(),
+                    computeOffset: jest.fn(),
+                    computeOffsetOrigin: jest.fn(),
+                    computeSignedArea: jest.fn(),
+                    interpolate: jest.fn(),
+                },
+            },
+            places: {
+                ...global.window.google.maps.places,
+                AutocompleteService: jest.fn().mockImplementation(() => ({
+                    ...global.window.google.maps.places,
+                    getPlacePredictions: getPlacePredictionsMock,
+                })),
+            },
+        };
+    });
+};
+
+/**
+ * Mock helmet module
+ * See more details here: https://www.npmjs.com/package/react-helmet-async
+ */
+const setupHelmetMock = () => {
+    jest.mock("react-helmet-async", () => ({
+        Helmet: () => null,
+        HelmetProvider: () => null,
+    }));
+};
+
+/* eslint-disable @typescript-eslint/explicit-member-accessibility */
+/**
+ * Mocks the IntersectionObserver API for testing environments.
+ *
+ * This function adds a mock implementation of the IntersectionObserver API to the global window object.
+ * The mock implementation provides all the necessary methods (observe, unobserve, disconnect, takeRecords)
+ * but with empty implementations, allowing tests of components that use IntersectionObserver to run
+ * without errors in Jest's JSDOM environment.
+ *
+ * Useful for testing components that rely on:
+ * - Lazy loading
+ * - Infinite scrolling
+ * - Visibility-based rendering
+ * - Any other intersection-based functionality
+ *
+ * @example
+ * // In your jest setup file
+ * import { setupIntersectionObserver } from '@trackunit/react-test-setup';
+ *
+ * setupIntersectionObserver();
+ */
+const setupIntersectionObserver = () => (window.IntersectionObserver = MockIntersectionObserver);
+class MockIntersectionObserver {
+    constructor() {
+        this.root = null;
+        this.rootMargin = "";
+        this.thresholds = [];
+    }
+    disconnect() {
+        // Empty
+    }
+    observe() {
+        // Empty
+    }
+    takeRecords() {
+        return [];
+    }
+    unobserve() {
+        // Empty
+    }
+}
+
+/**
+ * Mocks the window.matchMedia API for testing environments.
+ *
+ * This function creates a mock implementation of the window.matchMedia method that
+ * is commonly used for responsive design and media queries. The mock always returns
+ * a MediaQueryList-like object with standard methods and properties, but with default
+ * values (matches set to false).
+ *
+ * This allows tests of components that use media queries to run without errors in
+ * Jest's JSDOM environment, which doesn't implement matchMedia natively.
+ *
+ * Ideal for testing:
+ * - Responsive components
+ * - Components that adapt to screen size changes
+ * - Components that use CSS media query matching in JavaScript
+ *
+ * @example
+ * // In your jest setup file
+ * import { setupMatchMediaMock } from '@trackunit/react-test-setup';
+ *
+ * setupMatchMediaMock();
+ */
+const setupMatchMediaMock = () => {
+    Object.defineProperty(window, "matchMedia", {
+        writable: true,
+        value: jest.fn().mockImplementation(query => ({
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: jest.fn(), // Deprecated
+            removeListener: jest.fn(), // Deprecated
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+            dispatchEvent: jest.fn(),
+        })),
+    });
+};
+
+/**
+ * Flushes all promises in the queue.
+ * This is useful when testing async code.
+ *
+ * @param waitTimeInMS - The amount of time to wait before resolving the promise.
+ * @returns {Promise<void>} - Returns a promise that resolves after the wait time.
+ */
+const flushPromisesInAct = (waitTimeInMS = 0) => {
+    return react.act(() => {
+        return new Promise(resolve => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (global.ORG_setTimeout) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                return global.ORG_setTimeout(() => global.ORG_setTimeout(resolve, waitTimeInMS), 1);
+            }
+            else {
+                setTimeout(() => setTimeout(resolve, waitTimeInMS), 1);
+            }
+        });
+    });
+};
+afterEach(async () => {
+    jest.clearAllMocks();
+    react.cleanup();
+    await flushPromisesInAct();
+});
+/**
+ * Sets up React Testing Library and Okta authentication mocks for testing.
+ *
+ * This function configures the testing environment with essential mocks for Okta authentication,
+ * which is necessary for testing components that use Okta for authentication. It creates
+ * mock implementations of Okta authentication objects, tokens, and authentication state,
+ * allowing tests to run without requiring an actual Okta authentication flow.
+ *
+ * The module also imports @testing-library/jest-dom to extend Jest with DOM testing assertions
+ * and sets up afterEach hooks to clear mocks and clean up after each test.
+ *
+ * Key features:
+ * - Mocks Okta tokens and authentication state
+ * - Creates mock implementations of Okta auth methods
+ * - Extends Jest with DOM testing assertions
+ * - Automatically cleans up after each test
+ *
+ * @example
+ * // In your jest setup file
+ * import { setupReactTestingLibrary } from '@trackunit/react-test-setup';
+ *
+ * setupReactTestingLibrary();
+ */
+const setupReactTestingLibrary = () => {
+    const mockedClaims = {
+        sub: "sub",
+        name: "user",
+    };
+    const mockedIdToken = {
+        idToken: "idToken",
+        claims: mockedClaims,
+        expiresAt: Date.now(),
+        authorizeUrl: "authorize.url",
+        scopes: [],
+        issuer: "issuer",
+        clientId: "clientId",
+    };
+    const mockedAccessToken = {
+        accessToken: "accessToken",
+        claims: mockedClaims,
+        tokenType: "tokenType",
+        userinfoUrl: "userinfo.url",
+        expiresAt: Date.now(),
+        authorizeUrl: "authorize.url",
+        scopes: [],
+    };
+    const mockedAuthState = {
+        accessToken: mockedAccessToken,
+        idToken: mockedIdToken,
+        isAuthenticated: true,
+    };
+    const mockedOktaAuth = () => {
+        return {
+            oktaAuth: {
+                tokenManager: {
+                    on: jest.fn(),
+                    renew: jest.fn(),
+                    setTokens: jest.fn(),
+                    clear: jest.fn(),
+                },
+                getOriginalUri: jest.fn(),
+                signOut: jest.fn().mockResolvedValue({ postLogoutRedirectUri: "mocked-url", clearTokensBeforeRedirect: true }),
+                token: {
+                    getWithRedirect: jest.fn(),
+                    getWithoutPrompt: jest.fn(),
+                },
+                session: {
+                    get: () => {
+                        return { status: "ACTIVE" };
+                    },
+                },
+                authStateManager: {
+                    getAuthState: jest.fn(),
+                    subscribe: jest.fn(),
+                    unsubscribe: jest.fn(),
+                },
+                closeSession: jest.fn(),
+                options: {
+                    restoreOriginalUri: "",
+                },
+                start: jest.fn(),
+                setOriginalUri: jest.fn(),
+            },
+            authState: mockedAuthState,
+        };
+    };
+    // This ensures its being mocked in jest.
+    jest.mock("@okta/okta-react", () => {
+        return {
+            useOktaAuth: () => mockedOktaAuth(),
+        };
+    });
+};
+jest.mock("highcharts/modules/boost", () => jest.fn());
+
+/**
+ * Mocks the react-virtualized-auto-sizer component for testing environments.
+ *
+ * This function creates a mock implementation of the AutoSizer component from
+ * react-virtualized-auto-sizer, which is commonly used to measure and adapt to
+ * container dimensions. Instead of actual dimension measurements, the mock provides
+ * fixed dimensions (600x600), allowing tests to run consistently without actual DOM measuring.
+ *
+ * This is especially useful for testing components that use virtualized lists or grids,
+ * as it eliminates the need for setting up complex DOM environments just to get measurements.
+ *
+ * @example
+ * // In your jest setup file
+ * import { setupReactVirtualizedAutoSizer } from '@trackunit/react-test-setup';
+ *
+ * setupReactVirtualizedAutoSizer();
+ */
+const setupReactVirtualizedAutoSizer = () => {
+    jest.mock("react-virtualized-auto-sizer", () => ({ children }) => children({ height: 600, width: 600, scaledWidth: 600, scaledHeight: 600 }));
+};
+
+/**
+ * Mock the ResizeObserver to be able to test components that use a resize observer
+ * Like useGeometry, useContainerBreakpoints, etc.
+ * Also componets that _use_ useGeometry, like <BaseInput/> and many more
+ *
+ * Recommended for all react libs
+ */
+const setupResizeObserver = () => {
+    global.ResizeObserver = jest.fn().mockImplementation((callback) => ({
+        observe: jest.fn(),
+        unobserve: jest.fn(),
+        disconnect: jest.fn(),
+    }));
+};
+
+/**
+ * Mocks the @tanstack/react-virtual library for testing environments.
+ *
+ * This function creates a mock implementation of the useVirtualizer hook from
+ * the @tanstack/react-virtual library, which is used for efficiently rendering
+ * large lists and grids. The mock returns a simplified version that generates
+ * virtual items with deterministic sizes and provides all expected methods.
+ *
+ * Each virtual item has:
+ * - A consistent height (40px)
+ * - Index and key properties matching the item's position
+ * - Empty implementation of the measureRef function
+ *
+ * This allows for testing components that use virtualized lists without requiring
+ * actual DOM measurements or complex setup.
+ *
+ * @example
+ * // In your jest setup file
+ * import { setupTanstackReactVirtual } from '@trackunit/react-test-setup';
+ *
+ * setupTanstackReactVirtual();
+ */
+const setupTanstackReactVirtual = () => {
+    jest.mock("@tanstack/react-virtual", () => ({
+        useVirtualizer: ({ count }) => ({
+            getVirtualItems: () => {
+                const result = [];
+                for (let i = 0; i < count; i++) {
+                    result.push({ index: i, start: i * 40, key: i, measureRef: () => { } });
+                }
+                return result;
+            },
+            getTotalSize: () => count,
+            scrollToIndex: () => { },
+            scrollToOffset: () => { },
+            scrollToAlign: () => { },
+            scrollToItem: () => { },
+            resetAfterIndex: () => { },
+            resetAfterItem: () => { },
+            scrollTo: () => { },
+            measure: () => { },
+        }),
+    }));
+};
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Mocks the Temporal API to use a fixed time zone for testing.
+ *
+ * This function specifically mocks the Temporal.Now.timeZoneId method from the
+ * Temporal library to always return "Europe/Copenhagen", ensuring consistent
+ * time zone-dependent behavior in tests regardless of where they run.
+ *
+ * @example
+ * // In your jest setup file
+ * import { setupTimeZone } from '@trackunit/react-test-setup';
+ *
+ * setupTimeZone();
+ */
+const setupTimeZone = () => {
+    jest.spyOn(polyfill.Temporal.Now, "timeZoneId").mockImplementation(() => "Europe/Copenhagen");
+};
+/**
+ * Sets up time, animation, and language-related mocks for testing environments.
+ *
+ * This function configures multiple aspects of the testing environment:
+ * 1. Sets a fixed time zone using setupTimeZone()
+ * 2. Disables React Spring animations for faster, deterministic tests
+ * 3. Mocks the useDebounce hook to immediately return values without delays
+ * 4. Overrides setTimeout and setInterval to execute immediately (0ms delay)
+ *
+ * These changes make tests faster and more predictable by eliminating real-time
+ * delays, animations, and time zone dependencies that could cause flaky tests.
+ *
+ * @example
+ * // In your jest setup file
+ * import { setupTimeAndLanguage } from '@trackunit/react-test-setup';
+ *
+ * setupTimeAndLanguage();
+ */
+const setupTimeAndLanguage = () => {
+    setupTimeZone();
+    web.Globals.assign({
+        skipAnimation: true,
+    });
+    jest.mock("@trackunit/react-components", () => ({
+        ...jest.requireActual("@trackunit/react-components"),
+        useDebounce: (value) => value,
+    }));
+    const globalSetTimeout = global.setTimeout;
+    global.ORG_setTimeout = globalSetTimeout;
+    const globalSetInterval = global.setInterval;
+    global.ORG_setInterval = globalSetInterval;
+    global.setTimeout = function testSetTimeout(callback, ms, ...args) {
+        return globalSetTimeout.apply(this, [callback, 0]);
+    };
+    global.setInterval = function testSetInterval(callback, ms, ...args) {
+        return globalSetInterval.apply(this, [callback, 0]);
+    };
+};
+
+/**
+ * Sets up internationalization and translation mocks for testing environments.
+ *
+ * This function delegates to the implementation in setupTranslationsImpl.tsx to configure
+ * mock translations for react-i18next and @trackunit/i18n-library-translation. It creates
+ * simple mock implementations that return the key string as the translation, which allows
+ * for testing internationalized components without the complexity of actual translations.
+ *
+ * The mocks support common translation components and hooks like Trans, useTranslation,
+ * NamespaceTrans, and useNamespaceTranslation.
+ *
+ * @example
+ * // In your jest setup file
+ * import { setupTranslations } from '@trackunit/react-test-setup';
+ *
+ * setupTranslations();
+ */
+const setupTranslations = () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports
+    require("./setupTranslationsImpl").setupTranslations();
+};
+
+/**
+ * Sets up Web Streams API polyfills for testing environments.
+ *
+ * This function delegates to the implementation in setupWebStreamsImpl.ts to configure
+ * Web Streams API polyfills from web-streams-polyfill. These polyfills provide implementations
+ * of modern streaming APIs that may not be available in the Jest/JSDOM testing environment.
+ *
+ * The setup enables testing of components and utilities that rely on the Web Streams API,
+ * such as those that process streaming data or implement custom stream transformations.
+ *
+ * @example
+ * // In your jest setup file
+ * import { setupWebStreams } from '@trackunit/react-test-setup';
+ *
+ * setupWebStreams();
+ */
+const setupWebStreams = () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports
+    require("./setupWebStreamsImpl").setupWebStreams();
+};
+
+/**
+ * Sets up all available testing mocks in a single function call.
+ *
+ * This convenience function sets up all the test mocks provided by the library:
+ * - Canvas API mocks
+ * - Console error reporting to fail tests
+ * - Google Maps API and components mocks
+ * - React Helmet mocks
+ * - IntersectionObserver mocks
+ * - MatchMedia API mocks
+ * - React Testing Library and Okta authentication mocks
+ * - React Virtualized AutoSizer mocks
+ * - ResizeObserver mocks
+ * - Tanstack React Virtual mocks
+ * - Time and language related mocks (timezone, timers, etc.)
+ * - Translation mocks (i18n)
+ * - Web Streams API mocks
+ *
+ * Using this function is equivalent to calling each setup function individually.
+ *
+ * @param options Configuration options for individual mocks
+ * @param options.failOnConsoleOptions Options for setupFailOnConsole
+ * @example
+ * // In your jest setup file
+ * import { setupAllMocks } from '@trackunit/react-test-setup';
+ *
+ * setupAllMocks();
+ *
+ * // Or with options for specific mocks:
+ * setupAllMocks({
+ *   failOnConsoleOptions: { shouldFailOnWarn: true }
+ * });
+ */
+const setupAllMocks = (options = {}) => {
+    setupCanvasMock();
+    setupFailOnConsole(options.failOnConsoleOptions);
+    setupGoogleMaps();
+    setupHelmetMock();
+    setupIntersectionObserver();
+    setupMatchMediaMock();
+    setupReactTestingLibrary();
+    setupReactVirtualizedAutoSizer();
+    setupResizeObserver();
+    setupTanstackReactVirtual();
+    setupTimeAndLanguage();
+    setupTranslations();
+    setupWebStreams();
+};
+
+/**
+ * Sets up essential testing mocks that don't have external library dependencies.
+ *
+ * This convenience function configures a minimal set of test mocks that are broadly
+ * applicable for most React testing scenarios without requiring specific external
+ * libraries. It includes:
+ *
+ * - Canvas API mocks
+ * - Console error reporting to fail tests
+ * - IntersectionObserver mocks
+ * - MatchMedia API mocks
+ * - ResizeObserver mocks
+ * - Timer mocks (setTimeout, setInterval)
+ * - Web Streams API mocks
+ *
+ * This is perfect for projects that want essential testing mocks without bringing
+ * in dependencies for libraries they don't use like Google Maps, React Virtual, etc.
+ *
+ * @param options Configuration options for individual mocks
+ * @param options.failOnConsoleOptions Options for setupFailOnConsole
+ * @example
+ * // In your jest setup file
+ * import { setupBasicMocks } from '@trackunit/react-test-setup';
+ *
+ * setupBasicMocks();
+ *
+ * // Or with options for specific mocks:
+ * setupBasicMocks({
+ *   failOnConsoleOptions: { shouldFailOnWarn: true }
+ * });
+ */
+/**
+ * Sets up essential testing mocks with no external library dependencies.
+ *
+ * @param options Configuration options for the mocks
+ */
+const setupBasicMocks = (options = {}) => {
+    // Core DOM and browser APIs
+    setupCanvasMock();
+    setupIntersectionObserver();
+    setupMatchMediaMock();
+    setupResizeObserver();
+    setupWebStreams();
+    // Time and error handling
+    setupTimeAndLanguage();
+    setupFailOnConsole(options.failOnConsoleOptions);
+};
+
+/**
+ * Sets up default testing mocks that cover most common React testing needs.
+ *
+ * This convenience function provides a balanced set of mocks that cover most React
+ * application testing needs. It includes all the basic mocks plus essential React
+ * testing utilities. Specifically, it includes:
+ *
+ * From setupBasicMocks:
+ * - Canvas API mocks
+ * - Console error reporting to fail tests
+ * - IntersectionObserver mocks
+ * - MatchMedia API mocks
+ * - ResizeObserver mocks
+ * - Timer mocks (setTimeout, setInterval)
+ * - Web Streams API mocks
+ *
+ * Plus these additional mocks:
+ * - React Testing Library and Okta authentication mocks
+ * - Translation mocks (i18n)
+ *
+ * This is ideal for most React applications that use i18n translations and need
+ * standard testing environment setup, without requiring specialized mocks for things
+ * like Google Maps or virtualized lists.
+ *
+ * @param options Configuration options for individual mocks
+ * @param options.failOnConsoleOptions Options for setupFailOnConsole
+ * @example
+ * // In your jest setup file
+ * import { setupDefaultMocks } from '@trackunit/react-test-setup';
+ *
+ * setupDefaultMocks();
+ *
+ * // Or with options for specific mocks:
+ * setupDefaultMocks({
+ *   failOnConsoleOptions: { shouldFailOnWarn: true }
+ * });
+ */
+/**
+ * Sets up default testing mocks covering most common React testing scenarios.
+ *
+ * @param options Configuration options for the mocks
+ */
+const setupDefaultMocks = (options = {}) => {
+    // Set up all basic mocks first
+    setupBasicMocks(options);
+    // Add standard React testing utilities
+    setupReactTestingLibrary();
+    setupTranslations();
+};
+
+exports.setupAllMocks = setupAllMocks;
+exports.setupBasicMocks = setupBasicMocks;
+exports.setupCanvasMock = setupCanvasMock;
+exports.setupDefaultMocks = setupDefaultMocks;
+exports.setupFailOnConsole = setupFailOnConsole;
+exports.setupGoogleMaps = setupGoogleMaps;
+exports.setupHelmetMock = setupHelmetMock;
+exports.setupIntersectionObserver = setupIntersectionObserver;
+exports.setupMatchMediaMock = setupMatchMediaMock;
+exports.setupReactTestingLibrary = setupReactTestingLibrary;
+exports.setupReactVirtualizedAutoSizer = setupReactVirtualizedAutoSizer;
+exports.setupResizeObserver = setupResizeObserver;
+exports.setupTanstackReactVirtual = setupTanstackReactVirtual;
+exports.setupTimeAndLanguage = setupTimeAndLanguage;
+exports.setupTimeZone = setupTimeZone;
+exports.setupTranslations = setupTranslations;
+exports.setupWebStreams = setupWebStreams;

package/index.esm.d.ts

@@ -0,0 +1 @@
+export * from "./src/index";