@trackunit/react-core-contexts-test 0.1.68 → 0.1.70

package/index2.cjs

@@ -1,31 +1,42 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var react$1 = require('@testing-library/react');
+var React = require('react');
 var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
+var react = require('@testing-library/react');
 var reactCoreHooks = require('@trackunit/react-core-hooks');
 var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
+var lodash = require('lodash');
 var reactRouterDom = require('react-router-dom');
 var client = require('@apollo/client');
 var error = require('@apollo/client/link/error');
 var testing = require('@apollo/client/testing');
 var graphql = require('graphql');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
 /**
  * Logs props that have changed.
  * Use this for debugging which props force a component to re-render.
  * This is a hook version of the class component lifecycle method `componentDidUpdate`.
  * ALWAYS wrap in your own object.
  *
+ * @param id optional id to use for logging or it will guess the id from the stack trace
  * @param propsToWatch all the props to watch for changes
+ * @example
+ * const propsToWatch = { foo: props.foo, bar: props.bar };
+ * useDebugger({ id: "MyComponent", propsToWatch });
  */
-const useLogPropsChanged = (propsToWatch) => {
-    var _a;
-    const prevPropsRef = react.useRef(propsToWatch);
-    const parentCaller = (_a = new Error().stack) === null || _a === void 0 ? void 0 : _a.split("\n")[2].trim();
-    react.useEffect(() => {
-        const changedProps = Object.entries(propsToWatch !== null && propsToWatch !== void 0 ? propsToWatch : {}).reduce((result, [key, value]) => {
+const useDebugger = ({ id, propsToWatch, }) => {
+    const prevPropsRef = React.useRef(propsToWatch);
+    const uniqueId = React.useMemo(() => {
+        var _a;
+        return id || ((_a = new Error().stack) === null || _a === void 0 ? void 0 : _a.split("\n")[2].trim()) || "unknown-id";
+    }, [id]);
+    React.useEffect(() => {
+        const changedProps = Object.entries(propsToWatch || {}).reduce((result, [key, value]) => {
             if (prevPropsRef.current && prevPropsRef.current[key] !== value) {
                 result[key + ""] = [prevPropsRef.current[key], value];
             }
@@ -35,7 +46,7 @@ const useLogPropsChanged = (propsToWatch) => {
             // eslint-disable-next-line no-console
             Object.keys(changedProps).forEach(changedProp => {
                 // eslint-disable-next-line no-console
-                console.log("Props changed:", changedProp, parentCaller);
+                console.log(`${uniqueId} changed property: ${changedProp}`);
                 // JSON stringify is used to avoid console.table from logging the object reference
                 const result = JSON.parse(JSON.stringify(changedProps[changedProp]));
                 const result0 = result[0];
@@ -55,104 +66,44 @@ const useLogPropsChanged = (propsToWatch) => {
             console.dir(changedProps);
         }
         prevPropsRef.current = propsToWatch;
-    }, [parentCaller, propsToWatch]);
+    }, [propsToWatch, uniqueId]);
 };
 /**
- *  Debugger component for debugging state changes and re-renders.
- * This component will log when it is mounted and unmounted.
+ * Debugger component for debugging state changes and re-renders.
+ *
+ * This component will log when it is mounted, re-renders or unmounted.
  * It will also log when any of its props change.
  *
- * @param logPropsChanges the props to watch for changes
+ * @param id optional id to use for logging
+ * @param stop if true, will stop execution and open debugger
+ * @param logPropsChanges optional object with props to watch for changes
  * @param children the children to render
  */
-const Debugger = ({ logPropsChanges, children }) => {
-    useLogPropsChanged(logPropsChanges);
+const Debugger = ({ id, logPropsChanges, stop, children, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const uniqueId = id ||
+        ((_e = (_d = (_c = (_b = (_a = React__default["default"]["__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED"]) === null || _a === void 0 ? void 0 : _a.ReactCurrentOwner) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c._debugOwner) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.name) ||
+        ((_f = new Error().stack) === null || _f === void 0 ? void 0 : _f.split("\n")[2].trim()) ||
+        "unknown-id";
+    useDebugger({ id: uniqueId, propsToWatch: logPropsChanges || {} });
     // eslint-disable-next-line no-console
-    console.log("Debugger is rendering");
-    react.useEffect(() => {
+    console.log(`${uniqueId} Debugger is rendering`);
+    React.useEffect(() => {
         // eslint-disable-next-line no-console
-        console.log("Debugger is mounting");
+        console.log(`${uniqueId} Debugger is mounting`);
         return () => {
             // eslint-disable-next-line no-console
-            console.log("Debugger is unmounting");
+            console.log(`${uniqueId} Debugger is unmounting`);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    if (stop === true) {
+        // eslint-disable-next-line no-debugger
+        debugger;
+    }
     return jsxRuntime.jsx("div", Object.assign({ className: "Debugger" }, { children: children }));
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-const defaultOptions = {
-    mutate: {
-        errorPolicy: "all",
-    },
-    query: {
-        errorPolicy: "all",
-    },
-};
-/**
- * This is a wrapper around the MockedProvider that logs errors to the console.
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function ApolloMockedProviderWithError(props) {
-    const { mocks } = props, otherProps = __rest(props, ["mocks"]);
-    const mockLink = new testing.MockLink(mocks);
-    const errorLoggingLink = error.onError(({ graphQLErrors, networkError }) => {
-        if (graphQLErrors) {
-            // eslint-disable-next-line array-callback-return
-            graphQLErrors.map(({ message, locations, path }) => {
-                if (process.env.VSCODE_INSPECTOR_OPTIONS || process.env.DEBUG) {
-                    // eslint-disable-next-line no-console
-                    console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
-                }
-            });
-        }
-        if (networkError) {
-            if (process.env.VSCODE_INSPECTOR_OPTIONS || process.env.DEBUG) {
-                // eslint-disable-next-line no-console
-                console.log(`[Network error]: ${networkError}`);
-            }
-        }
-    });
-    const link = client.ApolloLink.from([errorLoggingLink, mockLink]);
-    return (jsxRuntime.jsx(testing.MockedProvider, Object.assign({}, otherProps, { link: link, defaultOptions: Object.assign(Object.assign({}, defaultOptions), { watchQuery: { fetchPolicy: "no-cache" } }) })));
-}
-
 /**
  * Do nothing
  */
@@ -179,10 +130,26 @@ const mockAssetSortingContext = {
 /**
  * Mocks the current user context
  *
- * @param overrides - The overrides to apply to the mock
  * @returns {ICurrentUserContext} - Returns the mocked current user context
  */
-const mockCurrentUserContext = (overrides = {}) => (Object.assign({ userName: "", userRole: "", customerId: 12345, userId: 154312, tasUserId: "751ea227-f199-4d00-925f-a608312c5e45", email: "", name: "", accountId: "", assumedUser: null, jobTitle: "", isAuthenticated: true, isVerified: true, isTrackunitUser: false, isAssuming: false, isAccountOwner: true, subscriptionPackage: "EXPAND_FLEET_OWNER" }, overrides));
+const mockCurrentUserContext = {
+    userName: "",
+    userRole: "",
+    customerId: 12345,
+    userId: 154312,
+    tasUserId: "751ea227-f199-4d00-925f-a608312c5e45",
+    email: "",
+    name: "",
+    accountId: "",
+    assumedUser: null,
+    jobTitle: "",
+    isAuthenticated: true,
+    isVerified: true,
+    isTrackunitUser: false,
+    isAssuming: false,
+    isAccountOwner: true,
+    subscriptionPackage: "EXPAND_FLEET_OWNER",
+};
 
 const mockEnvironmentContext = {
     auth: {
@@ -227,19 +194,88 @@ const mockToastContext = {
 /**
  * This is a mock for the UserSubscriptionContext.
  *
- * @param features - array of features
- * @param packageType - package type
  * @returns { IUserSubscriptionContext }- mock for the UserSubscriptionContext
  */
-const mockUserSubscriptionProviderValue = (features, packageType) => {
-    return {
-        numberOfDaysWithAccessToHistoricalData: 30,
-        numberOfDaysWithAccessToHistoricalInsights: 30,
-        features,
-        packageType,
-    };
+const mockUserSubscriptionContext = {
+    numberOfDaysWithAccessToHistoricalData: 30,
+    numberOfDaysWithAccessToHistoricalInsights: 30,
+    features: [],
+    packageType: "EXPAND_FLEET_OWNER",
 };
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+const defaultOptions = {
+    mutate: {
+        errorPolicy: "all",
+    },
+    query: {
+        errorPolicy: "all",
+    },
+};
+/**
+ * This is a wrapper around the MockedProvider that logs errors to the console.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function ApolloMockedProviderWithError(props) {
+    const { mocks } = props, otherProps = __rest(props, ["mocks"]);
+    const mockLink = new testing.MockLink(mocks);
+    const errorLoggingLink = error.onError(({ graphQLErrors, networkError }) => {
+        if (graphQLErrors) {
+            // eslint-disable-next-line array-callback-return
+            graphQLErrors.map(({ message, locations, path }) => {
+                if (process.env.VSCODE_INSPECTOR_OPTIONS || process.env.DEBUG) {
+                    // eslint-disable-next-line no-console
+                    console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
+                }
+            });
+        }
+        if (networkError) {
+            if (process.env.VSCODE_INSPECTOR_OPTIONS || process.env.DEBUG) {
+                // eslint-disable-next-line no-console
+                console.log(`[Network error]: ${networkError}`);
+            }
+        }
+    });
+    const link = client.ApolloLink.from([errorLoggingLink, mockLink]);
+    return (jsxRuntime.jsx(testing.MockedProvider, Object.assign({}, otherProps, { link: link, defaultOptions: Object.assign(Object.assign({}, defaultOptions), { watchQuery: { fetchPolicy: "no-cache" } }) })));
+}
+
 /**
  * Flushes all promises in the queue.
  * This is useful when testing async code.
@@ -267,7 +303,7 @@ const flushPromises = (waitTimeInMS = 0) => {
  * @returns {Promise<void>} - Returns a promise that resolves after the wait time.
  */
 const flushPromisesInAct = (waitTimeInMS = 0) => {
-    return react$1.act(() => {
+    return react.act(() => {
         return new Promise(resolve => {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             if (global.ORG_setTimeout) {
@@ -282,133 +318,147 @@ const flushPromisesInAct = (waitTimeInMS = 0) => {
 };
 
 /**
- * This builder allows you to enable providers using the builder pattern, and then call 1 of either:
+ * This builder allows you to enable trackunit providers using the builder pattern, and then call 1 of either:
+ * For React Components:
  * - render
- * - mount
+ * For React Hooks:
+ * - renderHook
+ * For Storybook:
+ * - storybook
  */
-class MockContextProviderBuilder {
+class TrackunitProvidersMockBuilder {
     constructor() {
         this.selectedEnvironmentContext = mockEnvironmentContext;
         this.selectedTokenContext = { token: "fakeToken" };
-        this.userSubscriptionPackageType = reactCoreContextsApi.UserSubscriptionPackage.INSIGHT;
-        this.features = [];
         this.selectedApolloMocks = [];
         this.selectedRouterProps = {};
         this.selectedToastContext = mockToastContext;
         this.selectedGlobalSelection = { selection: null };
         this.selectedAssetSortingContext = mockAssetSortingContext;
-        this.selectedCurrentUserContext = mockCurrentUserContext();
+        this.selectedCurrentUserContext = mockCurrentUserContext;
         this.selectedAnalyticsContext = mockAnalyticsContext;
         this.selectedOemBrandingContext = mockOemBrandingContext;
+        this.selectedUserSubscriptionContext = mockUserSubscriptionContext;
     }
     /**
      * Use this Analytics Context.
+     * Defaults to mockAnalyticsContext.
      *
+     * @see mockAnalyticsContext
      * @param analyticsContext - The analytics context to use.
-     * @returns { MockContextProviderBuilder } - The builder.
+     * @returns { TrackunitProvidersMockBuilder } - The builder.
      */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     analytics(analyticsContext) {
-        this.selectedAnalyticsContext = analyticsContext;
+        this.selectedAnalyticsContext = Object.assign(Object.assign({}, mockAnalyticsContext), analyticsContext);
         return this;
     }
     /**
      * Use this Environment Context.
+     * Defaults to mockEnvironmentContext.
      *
+     * @see mockEnvironmentContext
      * @param environmentContext - The environment context to use.
-     * @returns { MockContextProviderBuilder } - The builder.
+     * @returns { TrackunitProvidersMockBuilder } - The builder.
      */
     environment(environmentContext) {
-        this.selectedEnvironmentContext = environmentContext || mockEnvironmentContext;
+        this.selectedEnvironmentContext = Object.assign(Object.assign({}, mockEnvironmentContext), environmentContext);
         return this;
     }
     /**
-     * Use this token.
+     * Use this to pass in a differerent current user.
+     * Defaults to mockCurrentUserContext.
      *
-     * @param token - The token to use.
-     * @returns { MockContextProviderBuilder } - The builder.
+     * @see mockCurrentUserContext
+     * @returns { TrackunitProvidersMockBuilder } - The builder.
      */
-    token(token) {
-        this.selectedTokenContext = { token };
+    currentUser(currentUserContext) {
+        this.selectedCurrentUserContext = Object.assign(Object.assign({}, mockCurrentUserContext), currentUserContext);
         return this;
     }
     /**
-     * User this to pass in a differerent current user.
+     * Use this to pass in a differerent current user subscription.
+     * Defaults to mockUserSubscriptionContext.
      *
-     * @returns { MockContextProviderBuilder } - The builder.
+     * @see mockUserSubscriptionContext
+     * @returns { TrackunitProvidersMockBuilder } - The builder.
      */
-    currentUser(currentUserContext) {
-        this.selectedCurrentUserContext = currentUserContext;
+    userSubscription(userSubscription) {
+        var _a;
+        //TODO DONT SUPPORT THE WIERD WAY OF PASSING FEATURES
+        const featuresConverted = ((_a = userSubscription === null || userSubscription === void 0 ? void 0 : userSubscription.features) === null || _a === void 0 ? void 0 : _a.map(f => {
+            if (typeof f === "string") {
+                return { id: f, name: f };
+            }
+            return f;
+        })) || [];
+        this.selectedUserSubscriptionContext = Object.assign(Object.assign(Object.assign({}, mockUserSubscriptionContext), lodash.omit(userSubscription, "features")), { features: [...(mockUserSubscriptionContext.features || []), ...featuresConverted] });
         return this;
     }
     /**
-     * Use this to pass in userSubscriptionPackage.
+     * Set global asset sorting context.
+     * Defaults to mockAssetSortingContext.
      *
-     * @param userSubscriptionPackage - The developer settings context to use.
-     * @returns { MockContextProviderBuilder } - The builder.
+     * @see mockAssetSortingContext
+     * @param assetSortingContext - Override the default context.
+     * @returns { TrackunitProvidersMockBuilder } - The builder.
      */
-    userSubscriptionPackage(userSubscriptionPackage) {
-        if (userSubscriptionPackage) {
-            this.userSubscriptionPackageType = userSubscriptionPackage;
-        }
+    assetSorting(assetSortingContext) {
+        this.selectedAssetSortingContext = Object.assign(Object.assign({}, mockAssetSortingContext), assetSortingContext);
         return this;
     }
     /**
-     * Use this to pass in SupportedFeatures.
+     * Set OEM Branding context.
+     * Defaults to mockOemBrandingContext.
      *
-     * @param features - The developer settings context to use.
-     * @returns { MockContextProviderBuilder } - The builder.
+     * @see mockOemBrandingContext
+     * @param oemBrandingContext - Override the default context.
      */
-    supportedFeatures(features) {
-        if (features) {
-            this.features = features.map(feature => {
-                return {
-                    id: feature,
-                    name: feature,
-                };
-            });
-        }
+    oemBrandingContext(oemBrandingContext) {
+        this.selectedOemBrandingContext = Object.assign(Object.assign({}, mockOemBrandingContext), oemBrandingContext);
         return this;
     }
     /**
-     * Use this Router Props with the given mocks.
+     * Use this ToastContext with the given mocks.
+     * Defaults to mockToastContext.
      *
-     * @param routerProps - The router props to use.
-     * @returns { MockContextProviderBuilder } - The builder.
+     * @see mockToastContext
+     * @param toastContext - Override the default toast context.
      */
-    routerProps(routerProps) {
-        this.selectedRouterProps = routerProps || {};
+    toast(toastContext) {
+        this.selectedToastContext = Object.assign(Object.assign({}, mockToastContext), toastContext);
         return this;
     }
     /**
      * Use this global selection.
+     * Defaults to null.
      *
      * @param globalSelection - The global selection to use.
-     * @returns { MockContextProviderBuilder } - The builder.
+     * @returns { TrackunitProvidersMockBuilder } - The builder.
      */
     globalSelection(globalSelection) {
         this.selectedGlobalSelection = { selection: globalSelection };
         return this;
     }
     /**
-     * Set global asset sorting context.
+     * Use this token.
      *
-     * @param overrides - Override the default context.
-     * @returns { MockContextProviderBuilder } - The builder.
+     * @param token - The token to use.
+     * @returns { TrackunitProvidersMockBuilder } - The builder.
      */
-    assetSorting(overrides) {
-        this.selectedAssetSortingContext = Object.assign(Object.assign({}, mockAssetSortingContext), overrides);
+    token(token) {
+        this.selectedTokenContext = { token };
         return this;
     }
     /**
-     * This will return the mocked composition root.
+     * Use this Router Props with the given mocks.
+     *
+     * @param routerProps - The router props to use.
+     * @returns { TrackunitProvidersMockBuilder } - The builder.
      */
-    renderHook(callback, parentElement) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.validateSuppliedMocks();
-            // This ensures correct act loading when using hooks
-            const hookRenderer = yield Promise.resolve().then(function () { return require('./HookRenderer.cjs'); });
-            return hookRenderer.reactHooksRenderHook(callback, children => this.getMockedCompositionRoot(parentElement ? parentElement(children) : children));
-        });
+    routerProps(routerProps) {
+        this.selectedRouterProps = routerProps;
+        return this;
     }
     /**
      * Use this Manager Apollo Context Provider with the given mocks.
@@ -420,70 +470,70 @@ class MockContextProviderBuilder {
         return this;
     }
     /**
-     * Use this ToastContext with the given mocks.
+     * Validate the mocks that has been supplied to make sure they make sense.
+     * Note: This function is overriden in builders extending this one.
      *
-     * @param toastContext - Override the default toast context.
+     * @returns {boolean} true or throws error if any invalid mocks
      */
-    toast(toastContext) {
-        this.selectedToastContext = Object.assign(Object.assign({}, mockToastContext), toastContext);
-        return this;
+    validateSuppliedMocks() {
+        return true;
     }
     /**
-     * Set irisOemApp SDK context.
+     * Make sure this represent the same structure as the main index.tsx does.
      *
-     * @param overrides - Override the default context.
+     * @param testChildren - the child element being tested.
+     * @param addTestRootContainer - if you want to add a root container to the test.
      */
-    oemBrandingContext(overrides) {
-        this.selectedOemBrandingContext = Object.assign(Object.assign({}, mockOemBrandingContext), overrides);
-        return this;
+    getMockedCompositionRoot(testChildren, addTestRootContainer = true) {
+        return (jsxRuntime.jsx(reactCoreHooks.EnvironmentContextProvider, Object.assign({ value: this.selectedEnvironmentContext }, { children: jsxRuntime.jsx(reactRouterDom.MemoryRouter, Object.assign({}, this.selectedRouterProps, { children: jsxRuntime.jsx(reactCoreHooks.CurrentUserProvider, Object.assign({ value: this.selectedCurrentUserContext }, { children: jsxRuntime.jsx(reactCoreHooks.AnalyticsContext.Provider, Object.assign({ value: this.selectedAnalyticsContext }, { children: jsxRuntime.jsx(reactCoreHooks.UserSubscriptionProvider, Object.assign({ value: this.selectedUserSubscriptionContext }, { children: jsxRuntime.jsx(reactCoreHooks.OemBrandingContextProvider, Object.assign({ value: this.selectedOemBrandingContext }, { children: jsxRuntime.jsx(reactCoreHooks.TokenProvider, Object.assign({ value: this.selectedTokenContext }, { children: jsxRuntime.jsx(reactCoreHooks.ToastProvider, Object.assign({ value: this.selectedToastContext }, { children: jsxRuntime.jsx(reactCoreHooks.GlobalSelectionProvider, Object.assign({ value: this.selectedGlobalSelection }, { children: jsxRuntime.jsx(reactCoreHooks.AssetSortingProvider, Object.assign({ value: this.selectedAssetSortingContext }, { children: jsxRuntime.jsx(ApolloMockedProviderWithError, Object.assign({ mocks: this.selectedApolloMocks, addTypename: false }, { children: addTestRootContainer ? (jsxRuntime.jsx(TestRoot, Object.assign({ "data-testid": "testRoot" }, { children: testChildren }))) : (jsxRuntime.jsx("div", { children: testChildren })) })) })) })) })) })) })) })) })) })) })) })));
+    }
+    /**
+     * This will return the mocked composition root.
+     */
+    renderHook(callback, parentElement) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.validateSuppliedMocks();
+            // This ensures correct act loading when using hooks and not loaded if this build is used for storybook
+            const hookRenderer = yield Promise.resolve().then(function () { return require('./HookRenderer.cjs'); });
+            return hookRenderer.reactHooksRenderHook(callback, children => this.getMockedCompositionRoot(parentElement ? parentElement(children) : children));
+        });
     }
     /**
-     * This will use RTL.render the child in the correct mocked hierarchy of context providers.
+     * This will use react-testing-library.render the child in the correct mocked hierarchy of context providers.
      *
+     * @see https://testing-library.com/docs/react-testing-library/api#render
      * @param child - the child element being tested.
      */
     render(child) {
         return __awaiter(this, void 0, void 0, function* () {
             this.validateSuppliedMocks();
             let mountedcomponent;
-            yield react$1.act(() => __awaiter(this, void 0, void 0, function* () {
-                mountedcomponent = react$1.render(child, {
+            yield react.act(() => __awaiter(this, void 0, void 0, function* () {
+                mountedcomponent = react.render(child, {
                     wrapper: ({ children }) => this.getMockedCompositionRoot(children),
                 });
                 yield flushPromises();
             }));
-            yield react$1.act(() => __awaiter(this, void 0, void 0, function* () {
+            yield react.act(() => __awaiter(this, void 0, void 0, function* () {
                 yield flushPromises();
             }));
-            yield react$1.act(() => __awaiter(this, void 0, void 0, function* () {
+            yield react.act(() => __awaiter(this, void 0, void 0, function* () {
                 yield flushPromises();
             }));
             return mountedcomponent;
         });
     }
     /**
-     * Validate the mocks that has been supplied to make sure they make sense.
-     * Note: This function is overriden in builders extending this one.
-     *
-     * @returns {boolean} true or throws error if any invalid mocks
-     */
-    validateSuppliedMocks() {
-        return true;
-    }
-    /**
-     * Make sure this represent the same structure as the main index.tsx does.
-     *
-     * @param testChildren - the child element being tested.
-     * @param addTestRootContainer - if you want to add a root container to the test.
+     *  This will return the children in the correct mocked hierarchy of context providers.
      */
-    getMockedCompositionRoot(testChildren, addTestRootContainer = true) {
-        return (jsxRuntime.jsx(reactCoreHooks.EnvironmentContextProvider, Object.assign({ value: this.selectedEnvironmentContext }, { children: jsxRuntime.jsx(reactRouterDom.MemoryRouter, Object.assign({}, this.selectedRouterProps, { children: jsxRuntime.jsx(reactCoreHooks.CurrentUserProvider, Object.assign({ value: this.selectedCurrentUserContext }, { children: jsxRuntime.jsx(reactCoreHooks.AnalyticsContext.Provider, Object.assign({ value: this.selectedAnalyticsContext }, { children: jsxRuntime.jsx(reactCoreHooks.UserSubscriptionProvider, Object.assign({ value: mockUserSubscriptionProviderValue(this.features, this.userSubscriptionPackageType) }, { children: jsxRuntime.jsx(reactCoreHooks.OemBrandingContextProvider, Object.assign({ value: this.selectedOemBrandingContext }, { children: jsxRuntime.jsx(reactCoreHooks.TokenProvider, Object.assign({ value: this.selectedTokenContext }, { children: jsxRuntime.jsx(reactCoreHooks.ToastProvider, Object.assign({ value: this.selectedToastContext }, { children: jsxRuntime.jsx(reactCoreHooks.GlobalSelectionProvider, Object.assign({ value: this.selectedGlobalSelection }, { children: jsxRuntime.jsx(reactCoreHooks.AssetSortingProvider, Object.assign({ value: this.selectedAssetSortingContext }, { children: jsxRuntime.jsx(ApolloMockedProviderWithError, Object.assign({ mocks: this.selectedApolloMocks, addTypename: false }, { children: addTestRootContainer ? (jsxRuntime.jsx(TestRoot, Object.assign({ "data-testid": "testRoot" }, { children: testChildren }))) : (jsxRuntime.jsx("div", { children: testChildren })) })) })) })) })) })) })) })) })) })) })) })));
+    storybook(child) {
+        return this.getMockedCompositionRoot(child, false);
     }
 }
 /**
- *
+ * This is the default mock builder for the TrackunitProviders.
  */
-const trackunitProviders = () => new MockContextProviderBuilder();
+const trackunitProviders = () => new TrackunitProvidersMockBuilder();
 const TestRoot = tailwindStyledComponents.tw.div `
   --tw-scale-x: 0.99;
   --tw-scale-y: 0.99;
@@ -572,15 +622,19 @@ const validateIrisApp = (irisApp) => __awaiter(void 0, void 0, void 0, function*
 });
 
 exports.Debugger = Debugger;
-exports.MockContextProviderBuilder = MockContextProviderBuilder;
+exports.TrackunitProvidersMockBuilder = TrackunitProvidersMockBuilder;
 exports.__awaiter = __awaiter;
 exports.doNothing = doNothing;
 exports.flushPromises = flushPromises;
 exports.flushPromisesInAct = flushPromisesInAct;
 exports.mockAnalyticsContext = mockAnalyticsContext;
+exports.mockAssetSortingContext = mockAssetSortingContext;
 exports.mockCurrentUserContext = mockCurrentUserContext;
 exports.mockEnvironmentContext = mockEnvironmentContext;
+exports.mockOemBrandingContext = mockOemBrandingContext;
+exports.mockToastContext = mockToastContext;
+exports.mockUserSubscriptionContext = mockUserSubscriptionContext;
 exports.queryFor = queryFor;
 exports.trackunitProviders = trackunitProviders;
-exports.useLogPropsChanged = useLogPropsChanged;
+exports.useDebugger = useDebugger;
 exports.validateIrisApp = validateIrisApp;