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

package/index2.js

@@ -1,9 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import React, { useRef, useMemo, useEffect } from 'react';
+import { AssetSortByProperty, SortOrder } from '@trackunit/react-core-contexts-api';
 import { act, render } from '@testing-library/react';
-import { AssetSortByProperty, SortOrder, UserSubscriptionPackage } from '@trackunit/react-core-contexts-api';
 import { EnvironmentContextProvider, CurrentUserProvider, AnalyticsContext, UserSubscriptionProvider, OemBrandingContextProvider, TokenProvider, ToastProvider, GlobalSelectionProvider, AssetSortingProvider } from '@trackunit/react-core-hooks';
 import { tw } from '@trackunit/tailwind-styled-components';
+import { omit } from 'lodash';
 import { MemoryRouter } from 'react-router-dom';
 import { ApolloLink } from '@apollo/client';
 import { onError } from '@apollo/client/link/error';
@@ -16,14 +17,20 @@ import { GraphQLError } from 'graphql';
  * 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 useDebugger = ({ id, propsToWatch, }) => {
     const prevPropsRef = useRef(propsToWatch);
-    const parentCaller = (_a = new Error().stack) === null || _a === void 0 ? void 0 : _a.split("\n")[2].trim();
+    const uniqueId = useMemo(() => {
+        var _a;
+        return id || ((_a = new Error().stack) === null || _a === void 0 ? void 0 : _a.split("\n")[2].trim()) || "unknown-id";
+    }, [id]);
     useEffect(() => {
-        const changedProps = Object.entries(propsToWatch !== null && propsToWatch !== void 0 ? propsToWatch : {}).reduce((result, [key, value]) => {
+        const changedProps = Object.entries(propsToWatch || {}).reduce((result, [key, value]) => {
             if (prevPropsRef.current && prevPropsRef.current[key] !== value) {
                 result[key + ""] = [prevPropsRef.current[key], value];
             }
@@ -33,7 +40,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];
@@ -53,104 +60,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["__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");
+    console.log(`${uniqueId} Debugger is rendering`);
     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 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 MockLink(mocks);
-    const errorLoggingLink = 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 = ApolloLink.from([errorLoggingLink, mockLink]);
-    return (jsx(MockedProvider, Object.assign({}, otherProps, { link: link, defaultOptions: Object.assign(Object.assign({}, defaultOptions), { watchQuery: { fetchPolicy: "no-cache" } }) })));
-}
-
 /**
  * Do nothing
  */
@@ -177,10 +124,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: {
@@ -225,19 +188,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 MockLink(mocks);
+    const errorLoggingLink = 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 = ApolloLink.from([errorLoggingLink, mockLink]);
+    return (jsx(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.
@@ -280,133 +312,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 = 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), 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 import('./HookRenderer.js');
-            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.
@@ -418,26 +464,38 @@ 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 (jsx(EnvironmentContextProvider, Object.assign({ value: this.selectedEnvironmentContext }, { children: jsx(MemoryRouter, Object.assign({}, this.selectedRouterProps, { children: jsx(CurrentUserProvider, Object.assign({ value: this.selectedCurrentUserContext }, { children: jsx(AnalyticsContext.Provider, Object.assign({ value: this.selectedAnalyticsContext }, { children: jsx(UserSubscriptionProvider, Object.assign({ value: this.selectedUserSubscriptionContext }, { children: jsx(OemBrandingContextProvider, Object.assign({ value: this.selectedOemBrandingContext }, { children: jsx(TokenProvider, Object.assign({ value: this.selectedTokenContext }, { children: jsx(ToastProvider, Object.assign({ value: this.selectedToastContext }, { children: jsx(GlobalSelectionProvider, Object.assign({ value: this.selectedGlobalSelection }, { children: jsx(AssetSortingProvider, Object.assign({ value: this.selectedAssetSortingContext }, { children: jsx(ApolloMockedProviderWithError, Object.assign({ mocks: this.selectedApolloMocks, addTypename: false }, { children: addTestRootContainer ? (jsx(TestRoot, Object.assign({ "data-testid": "testRoot" }, { children: testChildren }))) : (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 import('./HookRenderer.js');
+            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) {
@@ -460,28 +518,16 @@ class MockContextProviderBuilder {
         });
     }
     /**
-     * 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 (jsx(EnvironmentContextProvider, Object.assign({ value: this.selectedEnvironmentContext }, { children: jsx(MemoryRouter, Object.assign({}, this.selectedRouterProps, { children: jsx(CurrentUserProvider, Object.assign({ value: this.selectedCurrentUserContext }, { children: jsx(AnalyticsContext.Provider, Object.assign({ value: this.selectedAnalyticsContext }, { children: jsx(UserSubscriptionProvider, Object.assign({ value: mockUserSubscriptionProviderValue(this.features, this.userSubscriptionPackageType) }, { children: jsx(OemBrandingContextProvider, Object.assign({ value: this.selectedOemBrandingContext }, { children: jsx(TokenProvider, Object.assign({ value: this.selectedTokenContext }, { children: jsx(ToastProvider, Object.assign({ value: this.selectedToastContext }, { children: jsx(GlobalSelectionProvider, Object.assign({ value: this.selectedGlobalSelection }, { children: jsx(AssetSortingProvider, Object.assign({ value: this.selectedAssetSortingContext }, { children: jsx(ApolloMockedProviderWithError, Object.assign({ mocks: this.selectedApolloMocks, addTypename: false }, { children: addTestRootContainer ? (jsx(TestRoot, Object.assign({ "data-testid": "testRoot" }, { children: testChildren }))) : (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 = tw.div `
   --tw-scale-x: 0.99;
   --tw-scale-y: 0.99;
@@ -569,4 +615,4 @@ const validateIrisApp = (irisApp) => __awaiter(void 0, void 0, void 0, function*
     return null;
 });
 
-export { Debugger as D, MockContextProviderBuilder as M, __awaiter as _, mockCurrentUserContext as a, mockEnvironmentContext as b, flushPromisesInAct as c, doNothing as d, flushPromises as f, mockAnalyticsContext as m, queryFor as q, trackunitProviders as t, useLogPropsChanged as u, validateIrisApp as v };
+export { Debugger as D, TrackunitProvidersMockBuilder as T, __awaiter as _, mockAssetSortingContext as a, mockCurrentUserContext as b, mockEnvironmentContext as c, mockOemBrandingContext as d, mockToastContext as e, flushPromises as f, mockUserSubscriptionContext as g, doNothing as h, flushPromisesInAct as i, mockAnalyticsContext as m, queryFor as q, trackunitProviders as t, useDebugger as u, validateIrisApp as v };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-core-contexts-test",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "module": "./index.js",
@@ -13,6 +13,7 @@
     "@trackunit/react-core-hooks": "0.2.60",
     "@trackunit/tailwind-styled-components": "0.0.56",
     "graphql": "15.8.0",
+    "lodash": "4.17.21",
     "react": "18.2.0",
     "react-router-dom": "6.4.5"
   },