@trackunit/react-core-contexts-test 0.1.34 → 0.1.35

package/HookRenderer.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var index = require('./index2.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@testing-library/react');
+var pure = require('@testing-library/react/pure');
+require('@trackunit/react-core-contexts-api');
+require('@trackunit/react-core-hooks');
+require('@trackunit/tailwind-styled-components');
+require('react-router-dom');
+require('@apollo/client');
+require('@apollo/client/link/error');
+require('@apollo/client/testing');
+require('graphql');
+
+const reactHooksRenderHook = (callback, getMockedCompositionRoot) => index.__awaiter(void 0, void 0, void 0, function* () {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const wrapper = ({ children }) => {
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return getMockedCompositionRoot(jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }));
+    };
+    let renderedHook;
+    // This is added here to make storybook work and to ensure the right act is loaded for hooks.
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    yield react.act(() => index.__awaiter(void 0, void 0, void 0, function* () {
+        renderedHook = yield pure.renderHook(callback, { wrapper });
+    }));
+    yield react.act(() => index.__awaiter(void 0, void 0, void 0, function* () {
+        yield index.flushPromises();
+    }));
+    return renderedHook;
+});
+
+exports.reactHooksRenderHook = reactHooksRenderHook;

package/index.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('./index2.cjs');
+require('react/jsx-runtime');
+require('@testing-library/react');
+require('@trackunit/react-core-contexts-api');
+require('@trackunit/react-core-hooks');
+require('@trackunit/tailwind-styled-components');
+require('react-router-dom');
+require('@apollo/client');
+require('@apollo/client/link/error');
+require('@apollo/client/testing');
+require('graphql');
+
+
+
+exports.MockContextProviderBuilder = index.MockContextProviderBuilder;
+exports.doNothing = index.doNothing;
+exports.flushPromises = index.flushPromises;
+exports.flushPromisesInAct = index.flushPromisesInAct;
+exports.mockCurrentUserContext = index.mockCurrentUserContext;
+exports.mockEnvironmentContext = index.mockEnvironmentContext;
+exports.queryFor = index.queryFor;
+exports.rootContext = index.rootContext;
+exports.validateIrisApp = index.validateIrisApp;

package/index2.cjs

@@ -0,0 +1,420 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@testing-library/react');
+var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
+var reactCoreHooks = require('@trackunit/react-core-hooks');
+var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
+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');
+
+/******************************************************************************
+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",
+    },
+};
+// 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" } }) })));
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const doNothing = () => {
+    /* Do nothing */
+};
+
+const mockAssetSortingContext = {
+    setSortBy: doNothing,
+    sortingState: {
+        sortBy: reactCoreContextsApi.AssetSortByProperty.Criticality,
+        order: reactCoreContextsApi.SortOrder.Desc,
+    },
+};
+
+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, isAccountOwner: true }, overrides));
+
+const mockEnvironmentContext = {
+    auth: {
+        url: "",
+        clientId: "",
+        issuer: "",
+    },
+    managerClassicUrl: "https://sso.trackunit.com",
+    googleMapsApiKey: "",
+    amplitudeApiKey: "",
+    graphqlLegacyUrl: "",
+    graphqlPublicUrl: "",
+    graphqlManagerUrl: "",
+    graphqlManagerImageUploadUrl: "",
+    graphqlReportUrl: "",
+    buildVersion: "",
+    commitNumber: 0,
+    buildDate: "",
+    irisAppSdkServerUrl: "",
+    publicUrl: "",
+    isDev: true,
+    environment: "",
+    sentryDsn: "",
+    sessionId: "",
+    tracingHeaders: {
+        "X-TrackunitAppVersion": "",
+        "session-id": "",
+    },
+    trackunitRestApiUrl: "",
+};
+
+const mockUserSubscriptionProviderValue = (features, packageType) => {
+    return {
+        numberOfDaysWithAccessToHistoricalData: 30,
+        numberOfDaysWithAccessToHistoricalInsights: 30,
+        features,
+        packageType,
+    };
+};
+
+const flushPromises = (waitTimeInMS = 0) => {
+    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);
+        }
+    });
+};
+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);
+            }
+        });
+    });
+};
+
+/**
+ * This builder allows you to enable providers using the builder pattern, and then call 1 of either:
+ * - render
+ * - mount
+ */
+class MockContextProviderBuilder {
+    constructor() {
+        this.selectedEnvironmentContext = mockEnvironmentContext;
+        this.selectedTokenContext = { token: "fakeToken" };
+        this.userSubscriptionPackageType = reactCoreContextsApi.UserSubscriptionPackage.INSIGHT;
+        this.features = [];
+        this.selectedApolloMocks = [];
+        this.selectedRouterProps = {};
+        this.selectedAssumedUser = mockCurrentUserContext().assumedUser;
+        this.selectedGlobalSelection = { selection: null };
+        this.selectedAssetSortingContext = mockAssetSortingContext;
+    }
+    /**
+     * Use this Environment Context.
+     *
+     * @param environmentContext
+     */
+    environment(environmentContext) {
+        this.selectedEnvironmentContext = environmentContext || mockEnvironmentContext;
+        return this;
+    }
+    /**
+     * Use this token.
+     *
+     * @param token
+     */
+    token(token) {
+        this.selectedTokenContext = { token };
+        return this;
+    }
+    /**
+     * Use this to pass in userSubscriptionPackage.
+     *
+     * @param developerSettingsContext
+     */
+    userSubscriptionPackage(userSubscriptionPackage) {
+        if (userSubscriptionPackage) {
+            this.userSubscriptionPackageType = userSubscriptionPackage;
+        }
+        return this;
+    }
+    /**
+     * Use this to pass in SupportedFeatures.
+     *
+     * @param developerSettingsContext
+     */
+    supportedFeatures(features) {
+        if (features) {
+            this.features = features.map(feature => {
+                return {
+                    id: feature,
+                    name: feature,
+                };
+            });
+        }
+        return this;
+    }
+    /**
+     * Assume this user
+     *
+     * @param assumeUser
+     */
+    assumeUser(assumeUser) {
+        this.selectedAssumedUser = assumeUser;
+        return this;
+    }
+    /**
+     * Use this Router Props with the given mocks.
+     *
+     * @param routerProps
+     */
+    routerProps(routerProps) {
+        this.selectedRouterProps = routerProps || {};
+        return this;
+    }
+    /**
+     * Use this global selection.
+     *
+     * @param globalSelection
+     */
+    globalSelection(globalSelection) {
+        this.selectedGlobalSelection = { selection: globalSelection };
+        return this;
+    }
+    /**
+     * Set global asset sorting context.
+     *
+     * @param overrides - Override the default context.
+     */
+    assetSorting(overrides) {
+        this.selectedAssetSortingContext = Object.assign(Object.assign({}, mockAssetSortingContext), overrides);
+        return this;
+    }
+    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));
+        });
+    }
+    /**
+     * Use this Manager Apollo Context Provider with the given mocks.
+     *
+     * @param apolloMocks
+     */
+    apollo(apolloMocks) {
+        this.selectedApolloMocks = apolloMocks || [];
+        return this;
+    }
+    /**
+     * This will use RTL.render the child in the correct mocked hierarchy of context providers.
+     *
+     * @param child - the child element being tested.
+     */
+    render(child) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.validateSuppliedMocks();
+            let mountedcomponent;
+            yield react.act(() => __awaiter(this, void 0, void 0, function* () {
+                mountedcomponent = react.render(child, {
+                    wrapper: ({ children }) => this.getMockedCompositionRoot(children),
+                });
+                yield flushPromises();
+            }));
+            yield react.act(() => __awaiter(this, void 0, void 0, function* () {
+                yield flushPromises();
+            }));
+            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 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.
+     */
+    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: mockCurrentUserContext({ assumedUser: this.selectedAssumedUser }) }, { children: jsxRuntime.jsx(reactCoreHooks.UserSubscriptionProvider, Object.assign({ value: mockUserSubscriptionProviderValue(this.features, this.userSubscriptionPackageType) }, { children: jsxRuntime.jsx(reactCoreHooks.TokenProvider, Object.assign({ value: this.selectedTokenContext }, { children: jsxRuntime.jsx(reactCoreHooks.ToastProvider, Object.assign({ value: { addToast: () => __awaiter(this, void 0, void 0, function* () { }) } }, { 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 })) })) })) })) })) })) })) })) })) })));
+    }
+}
+const rootContext = () => new MockContextProviderBuilder();
+const TestRoot = tailwindStyledComponents.tw.div `
+  --tw-scale-x: 0.99;
+  --tw-scale-y: 0.99;
+  w[1024px];
+  h[1000px];
+  inline-block;
+`;
+
+/**
+ *
+ * @param document Document that represents the specific GQL query / mutation schema.
+ * @param variables Variables that should be passed to the query / mutation.
+ * Note that an *exact* match between the mock and operation is necessary.
+ * @param data Data object to be returned.
+ * Note that *all* properties should be given a value, use `null` in place of `undefined`,
+ * otherwise nothing will be returned.
+ * @param error ApolloError object to be returned.
+ * @returns MockedResponse that can be passed to the mocked ApolloProvider.
+ * @see [Testing React components using MockedProvider and associated APIs](https://www.apollographql.com/docs/react/development-testing/testing/)
+ */
+const queryFor = (document, variables, data, error) => {
+    return {
+        request: {
+            query: document,
+            variables,
+        },
+        newData: () => {
+            if (process.env["VSCODE_INSPECTOR_OPTIONS"] || process.env["DEBUG"]) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const name = document.definitions[0].name.value;
+                // eslint-disable-next-line no-console
+                console.log("Found Response for: " +
+                    name +
+                    " for variables: " +
+                    JSON.stringify(variables, null, 2) +
+                    " Returning: " +
+                    "{ data: " +
+                    JSON.stringify(data, null, 2) +
+                    ", error: " +
+                    JSON.stringify(error, null, 2) +
+                    "}");
+            }
+            return {
+                data,
+                errors: error ? [new graphql.GraphQLError(error.message)] : undefined,
+            };
+        },
+    };
+};
+
+/**
+ * This helps validate the IrisApp is exposed correctly it must expose:
+ * - bootstrap
+ * - mount
+ * - unmount
+ * According to the single spa spec.
+ *
+ * Your test could look like this
+ * @example
+ * import * as IrisApp from "./index";
+    describe("App", () => {
+      it("Should validate", async () => {
+        const result = await validateIrisApp(IrisApp);
+        expect(result).toBeNull();
+      });
+    });
+ *
+ * @param irisApp Import the index ts(x) file as above and pass it in.
+ * @returns null if everything is good - otherwise a string telling you what is wrong.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const validateIrisApp = (irisApp) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!irisApp.bootstrap || typeof irisApp.bootstrap !== "function") {
+        return "Missing a bootstrap function";
+    }
+    if (!irisApp.mount || typeof irisApp.mount !== "function") {
+        return "Missing a mount function";
+    }
+    if (!irisApp.unmount || typeof irisApp.unmount !== "function") {
+        return "Missing an unmount function";
+    }
+    if (irisApp.update && typeof irisApp.update !== "function") {
+        return "Update must be a function";
+    }
+    return null;
+});
+
+exports.MockContextProviderBuilder = MockContextProviderBuilder;
+exports.__awaiter = __awaiter;
+exports.doNothing = doNothing;
+exports.flushPromises = flushPromises;
+exports.flushPromisesInAct = flushPromisesInAct;
+exports.mockCurrentUserContext = mockCurrentUserContext;
+exports.mockEnvironmentContext = mockEnvironmentContext;
+exports.queryFor = queryFor;
+exports.rootContext = rootContext;
+exports.validateIrisApp = validateIrisApp;

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@trackunit/react-core-contexts-test",
-  "version": "0.1.34",
+  "version": "0.1.35",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "module": "./index.js",
-  "main": "./index.js",
+  "main": "./index.cjs",
   "type": "module",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@apollo/client": "3.6.9",
+    "@apollo/client": "3.7.10",
     "react": "18.2.0",
-    "@trackunit/react-core-contexts-api": "0.2.19",
-    "@trackunit/react-core-hooks": "0.2.32",
+    "@trackunit/react-core-contexts-api": "0.2.20",
+    "@trackunit/react-core-hooks": "0.2.33",
     "@trackunit/tailwind-styled-components": "0.0.54",
     "react-router-dom": "6.4.5",
     "graphql": "15.8.0"