@trackunit/react-core-contexts-test 1.0.5 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/HookRenderer.cjs.js +0 -3
- package/HookRenderer.esm.js +0 -3
- package/index.cjs.js +36 -45
- package/index.esm.js +15 -24
- package/package.json +4 -4
- package/src/HookRenderer.d.ts +2 -2
- package/src/TrackunitProvidersMockBuilder.d.ts +6 -6
- package/src/debugger.d.ts +2 -2
- package/src/rerenderProvider/RerenderComponent.d.ts +2 -2
- package/src/utils/routingUtils.d.ts +5 -5
package/HookRenderer.cjs.js
CHANGED
|
@@ -25,14 +25,11 @@ require('graphql');
|
|
|
25
25
|
* @returns { Promise<RenderHookResult> } The rendered hook.
|
|
26
26
|
*/
|
|
27
27
|
const reactHooksRenderHook = async (callback, getMockedCompositionRoot) => {
|
|
28
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
29
28
|
const wrapper = ({ children }) => {
|
|
30
|
-
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
31
29
|
return getMockedCompositionRoot(children);
|
|
32
30
|
};
|
|
33
31
|
let renderedHook;
|
|
34
32
|
// This is added here to make storybook work and to ensure the right act is loaded for hooks.
|
|
35
|
-
// eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports
|
|
36
33
|
await react.act(async () => {
|
|
37
34
|
renderedHook = await react.renderHook(callback, { wrapper });
|
|
38
35
|
});
|
package/HookRenderer.esm.js
CHANGED
|
@@ -23,14 +23,11 @@ import 'graphql';
|
|
|
23
23
|
* @returns { Promise<RenderHookResult> } The rendered hook.
|
|
24
24
|
*/
|
|
25
25
|
const reactHooksRenderHook = async (callback, getMockedCompositionRoot) => {
|
|
26
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
27
26
|
const wrapper = ({ children }) => {
|
|
28
|
-
// eslint-disable-next-line react/jsx-no-useless-fragment
|
|
29
27
|
return getMockedCompositionRoot(children);
|
|
30
28
|
};
|
|
31
29
|
let renderedHook;
|
|
32
30
|
// This is added here to make storybook work and to ensure the right act is loaded for hooks.
|
|
33
|
-
// eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports
|
|
34
31
|
await act(async () => {
|
|
35
32
|
renderedHook = await renderHook(callback, { wrapper });
|
|
36
33
|
});
|
package/index.cjs.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var react$
|
|
4
|
+
var react$2 = require('@testing-library/react');
|
|
5
5
|
var reactCoreHooks = require('@trackunit/react-core-hooks');
|
|
6
6
|
var omit = require('lodash/omit');
|
|
7
7
|
var client = require('@apollo/client');
|
|
@@ -10,8 +10,8 @@ var error = require('@apollo/client/link/error');
|
|
|
10
10
|
var testing = require('@apollo/client/testing');
|
|
11
11
|
var reactCoreContextsApi = require('@trackunit/react-core-contexts-api');
|
|
12
12
|
var sharedUtils = require('@trackunit/shared-utils');
|
|
13
|
-
var
|
|
14
|
-
var react = require('@apollo/client/react');
|
|
13
|
+
var react = require('react');
|
|
14
|
+
var react$1 = require('@apollo/client/react');
|
|
15
15
|
var reactRouter = require('@tanstack/react-router');
|
|
16
16
|
var graphql = require('graphql');
|
|
17
17
|
|
|
@@ -34,7 +34,6 @@ function ApolloMockedProviderWithError(props) {
|
|
|
34
34
|
const mockLink = new testing.MockLink(mocks, false, { showWarnings: isDebugging });
|
|
35
35
|
const errorLoggingLink = error.onError(({ graphQLErrors, networkError }) => {
|
|
36
36
|
if (graphQLErrors) {
|
|
37
|
-
// eslint-disable-next-line array-callback-return
|
|
38
37
|
graphQLErrors.map(({ message, locations, path }) => {
|
|
39
38
|
if (isDebugging) {
|
|
40
39
|
// eslint-disable-next-line no-console
|
|
@@ -223,13 +222,13 @@ const mockUserSubscriptionContext = {
|
|
|
223
222
|
packageType: "EXPAND_FLEET_OWNER",
|
|
224
223
|
};
|
|
225
224
|
|
|
226
|
-
const RerenderContext =
|
|
225
|
+
const RerenderContext = react.createContext({ rerenderCounter: 0, setRerenderCounter: (value) => { } });
|
|
227
226
|
/**
|
|
228
227
|
* This provider is used to force re-renders in the test environment, since tanstack router does not support re-render.
|
|
229
228
|
*/
|
|
230
229
|
const RerenderProvider = ({ children, counter }) => {
|
|
231
|
-
const [rerenderCounter, setRerenderCounter] =
|
|
232
|
-
|
|
230
|
+
const [rerenderCounter, setRerenderCounter] = react.useState(0);
|
|
231
|
+
react.useEffect(() => {
|
|
233
232
|
if (counter && rerenderCounter !== counter && rerenderCounter !== 0) {
|
|
234
233
|
setRerenderCounter(counter);
|
|
235
234
|
}
|
|
@@ -240,7 +239,7 @@ const RerenderProvider = ({ children, counter }) => {
|
|
|
240
239
|
* This hook is used to get the rerender counter.
|
|
241
240
|
*/
|
|
242
241
|
const useRerenderCounter = () => {
|
|
243
|
-
return
|
|
242
|
+
return react.useContext(RerenderContext);
|
|
244
243
|
};
|
|
245
244
|
|
|
246
245
|
/**
|
|
@@ -248,8 +247,8 @@ const useRerenderCounter = () => {
|
|
|
248
247
|
*/
|
|
249
248
|
const RerenderComponent = ({ children }) => {
|
|
250
249
|
const { rerenderCounter } = useRerenderCounter();
|
|
251
|
-
return (jsxRuntime.jsx("div", { "data-rerender-counter": `rerender-${rerenderCounter}`, children:
|
|
252
|
-
?
|
|
250
|
+
return (jsxRuntime.jsx("div", { "data-rerender-counter": `rerender-${rerenderCounter}`, children: react.Children.map(children, child => react.isValidElement(child)
|
|
251
|
+
? react.createElement(child.type, {
|
|
253
252
|
...child.props,
|
|
254
253
|
key: child.key,
|
|
255
254
|
"data-rerender-counter": rerenderCounter,
|
|
@@ -298,19 +297,17 @@ const TestRenderChildren = ({ addTestRootContainer, children }) => {
|
|
|
298
297
|
* @param selectedRouterProps selected router props
|
|
299
298
|
* @param rootRoute root route
|
|
300
299
|
* @param children children to be wrapped
|
|
301
|
-
* @returns {
|
|
300
|
+
* @returns {ReactElement} children component wrapped in a test root container
|
|
302
301
|
*/
|
|
303
302
|
const RouterContainer = ({ addTestRootContainer, selectedRouterProps, rootRoute, children, }) => {
|
|
304
|
-
|
|
305
|
-
const client = react.useApolloClient();
|
|
303
|
+
const client = react$1.useApolloClient();
|
|
306
304
|
// The current version of createMemoryHistory seem to have issues when NOT ending on / so adding a # will not effect what url is rendered but it seems to work
|
|
307
|
-
const memoryHistory =
|
|
308
|
-
initialEntries:
|
|
305
|
+
const memoryHistory = react.useRef(reactRouter.createMemoryHistory({
|
|
306
|
+
initialEntries: selectedRouterProps?.initialEntries?.map(entry => entry.path + "#") ?? ["/#"],
|
|
309
307
|
initialIndex: 0,
|
|
310
308
|
}));
|
|
311
|
-
const getChildren =
|
|
312
|
-
const router =
|
|
313
|
-
var _a, _b;
|
|
309
|
+
const getChildren = react.useCallback(() => children, [children]);
|
|
310
|
+
const router = react.useMemo(() => {
|
|
314
311
|
let localRootRoute = rootRoute;
|
|
315
312
|
if (!localRootRoute) {
|
|
316
313
|
const route = reactRouter.createRootRoute({ component: RootRouteDebugger });
|
|
@@ -339,8 +336,8 @@ const RouterContainer = ({ addTestRootContainer, selectedRouterProps, rootRoute,
|
|
|
339
336
|
// This ensures / is not redirecting to default home route
|
|
340
337
|
pathsToRoute["/"].options.beforeLoad = () => { };
|
|
341
338
|
}
|
|
342
|
-
if ((
|
|
343
|
-
|
|
339
|
+
if ((selectedRouterProps?.initialEntries?.length || 0) > 0) {
|
|
340
|
+
selectedRouterProps?.initialEntries?.forEach(entry => {
|
|
344
341
|
const route = pathsToRoute[entry.route];
|
|
345
342
|
if (route) {
|
|
346
343
|
if (entry.component) {
|
|
@@ -393,13 +390,13 @@ const RouterContainer = ({ addTestRootContainer, selectedRouterProps, rootRoute,
|
|
|
393
390
|
// This causes unexpected state updates in Tanstack router which make the test fail
|
|
394
391
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
395
392
|
}, [rootRoute]);
|
|
396
|
-
const context =
|
|
393
|
+
const context = react.useMemo(() => ({
|
|
397
394
|
hasAccessTo: async () => true,
|
|
398
395
|
isAuthenticated: true,
|
|
399
396
|
client,
|
|
400
397
|
defaultUserRoute: "/",
|
|
401
|
-
...(
|
|
402
|
-
}), [client, selectedRouterProps
|
|
398
|
+
...(selectedRouterProps?.context || {}),
|
|
399
|
+
}), [client, selectedRouterProps?.context]);
|
|
403
400
|
const ErrorComponent = ({ error }) => {
|
|
404
401
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: ["UNCAUGHT ERROR IN TEST: ", error instanceof Error ? error.message : error] });
|
|
405
402
|
};
|
|
@@ -433,7 +430,7 @@ const flushPromises = (waitTimeInMS = 0) => {
|
|
|
433
430
|
* @returns {Promise<void>} - Returns a promise that resolves after the wait time.
|
|
434
431
|
*/
|
|
435
432
|
const flushPromisesInAct = (waitTimeInMS = 0) => {
|
|
436
|
-
return react$
|
|
433
|
+
return react$2.act(() => {
|
|
437
434
|
return new Promise(resolve => {
|
|
438
435
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
439
436
|
if (global.ORG_setTimeout) {
|
|
@@ -654,14 +651,13 @@ class TrackunitProvidersMockBuilder {
|
|
|
654
651
|
* @returns { TrackunitProvidersMockBuilder } - The builder.
|
|
655
652
|
*/
|
|
656
653
|
userSubscription(userSubscription) {
|
|
657
|
-
var _a;
|
|
658
654
|
//TODO DONT SUPPORT THE WIERD WAY OF PASSING FEATURES
|
|
659
|
-
const featuresConverted =
|
|
655
|
+
const featuresConverted = userSubscription.features?.map(f => {
|
|
660
656
|
if (typeof f === "string") {
|
|
661
657
|
return { id: f, name: f };
|
|
662
658
|
}
|
|
663
659
|
return f;
|
|
664
|
-
})
|
|
660
|
+
}) || [];
|
|
665
661
|
this.selectedUserSubscriptionContext = {
|
|
666
662
|
...mockUserSubscriptionContext,
|
|
667
663
|
...omit(userSubscription, "features"),
|
|
@@ -902,16 +898,16 @@ class TrackunitProvidersMockBuilder {
|
|
|
902
898
|
async render(child) {
|
|
903
899
|
this.validateSuppliedMocks();
|
|
904
900
|
let mountedcomponent;
|
|
905
|
-
await react$
|
|
906
|
-
mountedcomponent = react$
|
|
901
|
+
await react$2.act(async () => {
|
|
902
|
+
mountedcomponent = react$2.render(child, {
|
|
907
903
|
wrapper: ({ children }) => this.getMockedCompositionRootWithRouter(children),
|
|
908
904
|
});
|
|
909
905
|
await flushPromises();
|
|
910
906
|
});
|
|
911
|
-
await react$
|
|
907
|
+
await react$2.act(async () => {
|
|
912
908
|
await flushPromises();
|
|
913
909
|
});
|
|
914
|
-
await react$
|
|
910
|
+
await react$2.act(async () => {
|
|
915
911
|
await flushPromises();
|
|
916
912
|
});
|
|
917
913
|
// eslint-disable-next-line local-rules/no-typescript-assertion
|
|
@@ -935,7 +931,7 @@ const trackunitProviders = () => new TrackunitProvidersMockBuilder();
|
|
|
935
931
|
* @returns {boolean} Returns true if it is the first render, false otherwise.
|
|
936
932
|
*/
|
|
937
933
|
const useIsFirstRender = () => {
|
|
938
|
-
const renderRef =
|
|
934
|
+
const renderRef = react.useRef(true);
|
|
939
935
|
if (renderRef.current === true) {
|
|
940
936
|
renderRef.current = false;
|
|
941
937
|
return true;
|
|
@@ -955,9 +951,8 @@ const useIsFirstRender = () => {
|
|
|
955
951
|
* useDebugger(propsToWatch);
|
|
956
952
|
*/
|
|
957
953
|
const useDebugger = (propsToWatch, id) => {
|
|
958
|
-
const prevPropsRef =
|
|
959
|
-
const uniqueId =
|
|
960
|
-
var _a;
|
|
954
|
+
const prevPropsRef = react.useRef(propsToWatch);
|
|
955
|
+
const uniqueId = react.useMemo(() => {
|
|
961
956
|
// eslint-disable-next-line local-rules/no-typescript-assertion
|
|
962
957
|
let stackId = id || (propsToWatch && propsToWatch.id);
|
|
963
958
|
const stack = new Error().stack;
|
|
@@ -965,8 +960,8 @@ const useDebugger = (propsToWatch, id) => {
|
|
|
965
960
|
const stackLines = stack.split("\n");
|
|
966
961
|
for (let i = 0; i < stackLines.length; i++) {
|
|
967
962
|
const stackLine = stackLines[i];
|
|
968
|
-
if (stackLine
|
|
969
|
-
stackId =
|
|
963
|
+
if (stackLine?.includes("useDebugger")) {
|
|
964
|
+
stackId = stackLines[i + 1]?.trim().split(" ")[1];
|
|
970
965
|
break;
|
|
971
966
|
}
|
|
972
967
|
}
|
|
@@ -976,8 +971,7 @@ const useDebugger = (propsToWatch, id) => {
|
|
|
976
971
|
const isFirstRender = useIsFirstRender();
|
|
977
972
|
// eslint-disable-next-line no-console
|
|
978
973
|
console.log(isFirstRender ? "First-render" : "Re-render", uniqueId, window.location.pathname);
|
|
979
|
-
|
|
980
|
-
// eslint-disable-next-line local-rules/prefer-custom-object-entries
|
|
974
|
+
react.useEffect(() => {
|
|
981
975
|
const changedProps = Object.entries(propsToWatch || {}).reduce((result, [key, value]) => {
|
|
982
976
|
if (prevPropsRef.current && prevPropsRef.current[key] !== value) {
|
|
983
977
|
result[key + ""] = [prevPropsRef.current[key], value];
|
|
@@ -985,7 +979,6 @@ const useDebugger = (propsToWatch, id) => {
|
|
|
985
979
|
return result;
|
|
986
980
|
}, {});
|
|
987
981
|
if (sharedUtils.objectKeys(changedProps).length > 0) {
|
|
988
|
-
// eslint-disable-next-line no-console
|
|
989
982
|
sharedUtils.objectKeys(changedProps).forEach(changedProp => {
|
|
990
983
|
// eslint-disable-next-line no-console
|
|
991
984
|
console.log(`${uniqueId} changed property: ${changedProp}`);
|
|
@@ -1024,15 +1017,13 @@ const useDebugger = (propsToWatch, id) => {
|
|
|
1024
1017
|
* @param children the children to render
|
|
1025
1018
|
*/
|
|
1026
1019
|
const Debugger = ({ id, logPropsChanges, stop, children, }) => {
|
|
1027
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
1028
1020
|
const uniqueId = id ||
|
|
1029
|
-
(
|
|
1030
1021
|
// @ts-ignore
|
|
1031
|
-
|
|
1032
|
-
|
|
1022
|
+
React["__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED"]?.ReactCurrentOwner?.current?._debugOwner?.type?.name ||
|
|
1023
|
+
new Error().stack?.split("\n")[2]?.trim() ||
|
|
1033
1024
|
"unknown-id";
|
|
1034
1025
|
useDebugger(logPropsChanges || {}, id);
|
|
1035
|
-
|
|
1026
|
+
react.useEffect(() => {
|
|
1036
1027
|
// eslint-disable-next-line no-console
|
|
1037
1028
|
console.log(`${uniqueId} Debugger is mounting`);
|
|
1038
1029
|
return () => {
|
package/index.esm.js
CHANGED
|
@@ -8,7 +8,7 @@ import { onError } from '@apollo/client/link/error';
|
|
|
8
8
|
import { MockLink, MockedProvider } from '@apollo/client/testing';
|
|
9
9
|
import { AssetSortByProperty, SortOrder } from '@trackunit/react-core-contexts-api';
|
|
10
10
|
import { doNothing as doNothing$1, objectValues, objectKeys } from '@trackunit/shared-utils';
|
|
11
|
-
import
|
|
11
|
+
import { createContext, useState, useEffect, useContext, Children, isValidElement, createElement, useRef, useCallback, useMemo } from 'react';
|
|
12
12
|
import { useApolloClient } from '@apollo/client/react';
|
|
13
13
|
import { createMemoryHistory, createRootRoute, createRoute, createRouter, RouterProvider, Outlet } from '@tanstack/react-router';
|
|
14
14
|
import { GraphQLError } from 'graphql';
|
|
@@ -32,7 +32,6 @@ function ApolloMockedProviderWithError(props) {
|
|
|
32
32
|
const mockLink = new MockLink(mocks, false, { showWarnings: isDebugging });
|
|
33
33
|
const errorLoggingLink = onError(({ graphQLErrors, networkError }) => {
|
|
34
34
|
if (graphQLErrors) {
|
|
35
|
-
// eslint-disable-next-line array-callback-return
|
|
36
35
|
graphQLErrors.map(({ message, locations, path }) => {
|
|
37
36
|
if (isDebugging) {
|
|
38
37
|
// eslint-disable-next-line no-console
|
|
@@ -246,8 +245,8 @@ const useRerenderCounter = () => {
|
|
|
246
245
|
*/
|
|
247
246
|
const RerenderComponent = ({ children }) => {
|
|
248
247
|
const { rerenderCounter } = useRerenderCounter();
|
|
249
|
-
return (jsx("div", { "data-rerender-counter": `rerender-${rerenderCounter}`, children:
|
|
250
|
-
?
|
|
248
|
+
return (jsx("div", { "data-rerender-counter": `rerender-${rerenderCounter}`, children: Children.map(children, child => isValidElement(child)
|
|
249
|
+
? createElement(child.type, {
|
|
251
250
|
...child.props,
|
|
252
251
|
key: child.key,
|
|
253
252
|
"data-rerender-counter": rerenderCounter,
|
|
@@ -296,19 +295,17 @@ const TestRenderChildren = ({ addTestRootContainer, children }) => {
|
|
|
296
295
|
* @param selectedRouterProps selected router props
|
|
297
296
|
* @param rootRoute root route
|
|
298
297
|
* @param children children to be wrapped
|
|
299
|
-
* @returns {
|
|
298
|
+
* @returns {ReactElement} children component wrapped in a test root container
|
|
300
299
|
*/
|
|
301
300
|
const RouterContainer = ({ addTestRootContainer, selectedRouterProps, rootRoute, children, }) => {
|
|
302
|
-
var _a, _b;
|
|
303
301
|
const client = useApolloClient();
|
|
304
302
|
// The current version of createMemoryHistory seem to have issues when NOT ending on / so adding a # will not effect what url is rendered but it seems to work
|
|
305
303
|
const memoryHistory = useRef(createMemoryHistory({
|
|
306
|
-
initialEntries:
|
|
304
|
+
initialEntries: selectedRouterProps?.initialEntries?.map(entry => entry.path + "#") ?? ["/#"],
|
|
307
305
|
initialIndex: 0,
|
|
308
306
|
}));
|
|
309
307
|
const getChildren = useCallback(() => children, [children]);
|
|
310
308
|
const router = useMemo(() => {
|
|
311
|
-
var _a, _b;
|
|
312
309
|
let localRootRoute = rootRoute;
|
|
313
310
|
if (!localRootRoute) {
|
|
314
311
|
const route = createRootRoute({ component: RootRouteDebugger });
|
|
@@ -337,8 +334,8 @@ const RouterContainer = ({ addTestRootContainer, selectedRouterProps, rootRoute,
|
|
|
337
334
|
// This ensures / is not redirecting to default home route
|
|
338
335
|
pathsToRoute["/"].options.beforeLoad = () => { };
|
|
339
336
|
}
|
|
340
|
-
if ((
|
|
341
|
-
|
|
337
|
+
if ((selectedRouterProps?.initialEntries?.length || 0) > 0) {
|
|
338
|
+
selectedRouterProps?.initialEntries?.forEach(entry => {
|
|
342
339
|
const route = pathsToRoute[entry.route];
|
|
343
340
|
if (route) {
|
|
344
341
|
if (entry.component) {
|
|
@@ -396,8 +393,8 @@ const RouterContainer = ({ addTestRootContainer, selectedRouterProps, rootRoute,
|
|
|
396
393
|
isAuthenticated: true,
|
|
397
394
|
client,
|
|
398
395
|
defaultUserRoute: "/",
|
|
399
|
-
...(
|
|
400
|
-
}), [client, selectedRouterProps
|
|
396
|
+
...(selectedRouterProps?.context || {}),
|
|
397
|
+
}), [client, selectedRouterProps?.context]);
|
|
401
398
|
const ErrorComponent = ({ error }) => {
|
|
402
399
|
return jsxs(Fragment, { children: ["UNCAUGHT ERROR IN TEST: ", error instanceof Error ? error.message : error] });
|
|
403
400
|
};
|
|
@@ -652,14 +649,13 @@ class TrackunitProvidersMockBuilder {
|
|
|
652
649
|
* @returns { TrackunitProvidersMockBuilder } - The builder.
|
|
653
650
|
*/
|
|
654
651
|
userSubscription(userSubscription) {
|
|
655
|
-
var _a;
|
|
656
652
|
//TODO DONT SUPPORT THE WIERD WAY OF PASSING FEATURES
|
|
657
|
-
const featuresConverted =
|
|
653
|
+
const featuresConverted = userSubscription.features?.map(f => {
|
|
658
654
|
if (typeof f === "string") {
|
|
659
655
|
return { id: f, name: f };
|
|
660
656
|
}
|
|
661
657
|
return f;
|
|
662
|
-
})
|
|
658
|
+
}) || [];
|
|
663
659
|
this.selectedUserSubscriptionContext = {
|
|
664
660
|
...mockUserSubscriptionContext,
|
|
665
661
|
...omit(userSubscription, "features"),
|
|
@@ -955,7 +951,6 @@ const useIsFirstRender = () => {
|
|
|
955
951
|
const useDebugger = (propsToWatch, id) => {
|
|
956
952
|
const prevPropsRef = useRef(propsToWatch);
|
|
957
953
|
const uniqueId = useMemo(() => {
|
|
958
|
-
var _a;
|
|
959
954
|
// eslint-disable-next-line local-rules/no-typescript-assertion
|
|
960
955
|
let stackId = id || (propsToWatch && propsToWatch.id);
|
|
961
956
|
const stack = new Error().stack;
|
|
@@ -963,8 +958,8 @@ const useDebugger = (propsToWatch, id) => {
|
|
|
963
958
|
const stackLines = stack.split("\n");
|
|
964
959
|
for (let i = 0; i < stackLines.length; i++) {
|
|
965
960
|
const stackLine = stackLines[i];
|
|
966
|
-
if (stackLine
|
|
967
|
-
stackId =
|
|
961
|
+
if (stackLine?.includes("useDebugger")) {
|
|
962
|
+
stackId = stackLines[i + 1]?.trim().split(" ")[1];
|
|
968
963
|
break;
|
|
969
964
|
}
|
|
970
965
|
}
|
|
@@ -975,7 +970,6 @@ const useDebugger = (propsToWatch, id) => {
|
|
|
975
970
|
// eslint-disable-next-line no-console
|
|
976
971
|
console.log(isFirstRender ? "First-render" : "Re-render", uniqueId, window.location.pathname);
|
|
977
972
|
useEffect(() => {
|
|
978
|
-
// eslint-disable-next-line local-rules/prefer-custom-object-entries
|
|
979
973
|
const changedProps = Object.entries(propsToWatch || {}).reduce((result, [key, value]) => {
|
|
980
974
|
if (prevPropsRef.current && prevPropsRef.current[key] !== value) {
|
|
981
975
|
result[key + ""] = [prevPropsRef.current[key], value];
|
|
@@ -983,7 +977,6 @@ const useDebugger = (propsToWatch, id) => {
|
|
|
983
977
|
return result;
|
|
984
978
|
}, {});
|
|
985
979
|
if (objectKeys(changedProps).length > 0) {
|
|
986
|
-
// eslint-disable-next-line no-console
|
|
987
980
|
objectKeys(changedProps).forEach(changedProp => {
|
|
988
981
|
// eslint-disable-next-line no-console
|
|
989
982
|
console.log(`${uniqueId} changed property: ${changedProp}`);
|
|
@@ -1022,12 +1015,10 @@ const useDebugger = (propsToWatch, id) => {
|
|
|
1022
1015
|
* @param children the children to render
|
|
1023
1016
|
*/
|
|
1024
1017
|
const Debugger = ({ id, logPropsChanges, stop, children, }) => {
|
|
1025
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
1026
1018
|
const uniqueId = id ||
|
|
1027
|
-
(
|
|
1028
1019
|
// @ts-ignore
|
|
1029
|
-
|
|
1030
|
-
|
|
1020
|
+
React["__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED"]?.ReactCurrentOwner?.current?._debugOwner?.type?.name ||
|
|
1021
|
+
new Error().stack?.split("\n")[2]?.trim() ||
|
|
1031
1022
|
"unknown-id";
|
|
1032
1023
|
useDebugger(logPropsChanges || {}, id);
|
|
1033
1024
|
useEffect(() => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-core-contexts-test",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
"lodash": "4.17.21",
|
|
14
14
|
"graphql": "^16.9.0",
|
|
15
15
|
"@tanstack/react-router": "1.47.1",
|
|
16
|
-
"@trackunit/react-core-contexts-api": "
|
|
17
|
-
"@trackunit/react-core-hooks": "
|
|
18
|
-
"@trackunit/shared-utils": "
|
|
16
|
+
"@trackunit/react-core-contexts-api": "1.0.9",
|
|
17
|
+
"@trackunit/react-core-hooks": "1.0.9",
|
|
18
|
+
"@trackunit/shared-utils": "1.2.1"
|
|
19
19
|
},
|
|
20
20
|
"module": "./index.esm.js",
|
|
21
21
|
"main": "./index.cjs.js",
|
package/src/HookRenderer.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { RenderHookResult } from "@testing-library/react";
|
|
2
|
-
import
|
|
2
|
+
import { ReactElement, ReactNode } from "react";
|
|
3
3
|
/**
|
|
4
4
|
* This is a wrapper around the react testing library renderHook function.
|
|
5
5
|
* It will make sure that the act function is called and that the promises are flushed.
|
|
@@ -8,4 +8,4 @@ import * as React from "react";
|
|
|
8
8
|
* @param getMockedCompositionRoot A function that will return the mocked composition root.
|
|
9
9
|
* @returns { Promise<RenderHookResult> } The rendered hook.
|
|
10
10
|
*/
|
|
11
|
-
export declare const reactHooksRenderHook: <TProps, TResult>(callback: (props: TProps) => TResult, getMockedCompositionRoot: (children:
|
|
11
|
+
export declare const reactHooksRenderHook: <TProps, TResult>(callback: (props: TProps) => TResult, getMockedCompositionRoot: (children: ReactNode) => ReactElement) => Promise<RenderHookResult<TResult, TProps>>;
|
|
@@ -2,7 +2,7 @@ import { MockedResponse } from "@apollo/client/testing";
|
|
|
2
2
|
import { AnyRoute } from "@tanstack/react-router";
|
|
3
3
|
import { RenderResult } from "@testing-library/react";
|
|
4
4
|
import { AssetSortingContextValue, ConfirmationDialogContextValue, ErrorHandlingContextValue, FilterBarValues, IAnalyticsContext, ICurrentUserContext, IEnvironmentContext, INavigationContext, OemBrandingContext, IToastContext, ITokenContext, IUserPreferencesContext, IUserSubscriptionContext, ModalDialogContextValue } from "@trackunit/react-core-contexts-api";
|
|
5
|
-
import
|
|
5
|
+
import { ReactElement, ReactNode } from "react";
|
|
6
6
|
import { MemoryRouterProps } from "./utils/routingUtils";
|
|
7
7
|
/**
|
|
8
8
|
* This builder allows you to enable trackunit providers using the builder pattern, and then call 1 of either:
|
|
@@ -357,12 +357,12 @@ export declare class TrackunitProvidersMockBuilder<T extends AnyRoute> {
|
|
|
357
357
|
*
|
|
358
358
|
* @param testChildren - the child element being tested.
|
|
359
359
|
*/
|
|
360
|
-
protected getMockedCompositionRoot(testChildren:
|
|
361
|
-
protected getMockedCompositionRootWithRouter(testChildren:
|
|
360
|
+
protected getMockedCompositionRoot(testChildren: ReactNode): import("react/jsx-runtime").JSX.Element;
|
|
361
|
+
protected getMockedCompositionRootWithRouter(testChildren: ReactNode): import("react/jsx-runtime").JSX.Element;
|
|
362
362
|
/**
|
|
363
363
|
* This will return the mocked composition root.
|
|
364
364
|
*/
|
|
365
|
-
renderHook<TProps, TResult>(callback: (props: TProps) => TResult, parentElement?: (children:
|
|
365
|
+
renderHook<TProps, TResult>(callback: (props: TProps) => TResult, parentElement?: (children: ReactNode) => ReactElement): Promise<{
|
|
366
366
|
rerender: (props?: TProps) => Promise<void>;
|
|
367
367
|
result: {
|
|
368
368
|
current: TResult;
|
|
@@ -375,11 +375,11 @@ export declare class TrackunitProvidersMockBuilder<T extends AnyRoute> {
|
|
|
375
375
|
* @see https://testing-library.com/docs/react-testing-library/api#render
|
|
376
376
|
* @param child - the child element being tested.
|
|
377
377
|
*/
|
|
378
|
-
render(child:
|
|
378
|
+
render(child: ReactElement): Promise<RenderResult>;
|
|
379
379
|
/**
|
|
380
380
|
* This will return the children in the correct mocked hierarchy of context providers.
|
|
381
381
|
*/
|
|
382
|
-
storybook(child:
|
|
382
|
+
storybook(child: ReactNode): import("react/jsx-runtime").JSX.Element;
|
|
383
383
|
}
|
|
384
384
|
/**
|
|
385
385
|
* This is the default mock builder for the TrackunitProviders.
|
package/src/debugger.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
2
|
type PropsToWatch<P> = P extends object ? P : never;
|
|
3
3
|
/**
|
|
4
4
|
* Differentiate between the first and subsequent renders.
|
|
@@ -31,7 +31,7 @@ export declare const useDebugger: <P extends object>(propsToWatch: PropsToWatch<
|
|
|
31
31
|
* @param children the children to render
|
|
32
32
|
*/
|
|
33
33
|
export declare const Debugger: ({ id, logPropsChanges, stop, children, }: {
|
|
34
|
-
children?:
|
|
34
|
+
children?: ReactNode;
|
|
35
35
|
id?: string;
|
|
36
36
|
stop?: boolean;
|
|
37
37
|
logPropsChanges?: Record<string, unknown>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ReactNode } from "react";
|
|
2
2
|
/**
|
|
3
3
|
* This component is used to force re-renders in the test environment, since tanstack router does not support re-render.
|
|
4
4
|
*/
|
|
5
5
|
export declare const RerenderComponent: ({ children }: {
|
|
6
|
-
children:
|
|
6
|
+
children: ReactNode;
|
|
7
7
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { AnyRoute, RegisteredRouter, RouteIds } from "@tanstack/react-router";
|
|
2
|
-
import
|
|
2
|
+
import { ReactElement, ReactNode } from "react";
|
|
3
3
|
export type MemoryRouterProps<T extends AnyRoute> = {
|
|
4
4
|
routeTree?: T;
|
|
5
5
|
initialEntries?: {
|
|
@@ -18,7 +18,7 @@ export declare const RootRouteDebugger: () => import("react/jsx-runtime").JSX.El
|
|
|
18
18
|
*/
|
|
19
19
|
export interface TestRenderChildrenProps {
|
|
20
20
|
addTestRootContainer: boolean;
|
|
21
|
-
children:
|
|
21
|
+
children: ReactNode;
|
|
22
22
|
}
|
|
23
23
|
/**
|
|
24
24
|
* This component is used to wrap the children of the RouterContainer to add a test root container.
|
|
@@ -32,7 +32,7 @@ export interface RouterContainerProps<T extends AnyRoute = AnyRoute> {
|
|
|
32
32
|
addTestRootContainer: boolean;
|
|
33
33
|
rootRoute?: T | null;
|
|
34
34
|
selectedRouterProps: MemoryRouterProps<T> | null;
|
|
35
|
-
children:
|
|
35
|
+
children: ReactNode;
|
|
36
36
|
}
|
|
37
37
|
/**
|
|
38
38
|
* This component is used to wrap the children of the RouterContainer to add a test root container.
|
|
@@ -41,6 +41,6 @@ export interface RouterContainerProps<T extends AnyRoute = AnyRoute> {
|
|
|
41
41
|
* @param selectedRouterProps selected router props
|
|
42
42
|
* @param rootRoute root route
|
|
43
43
|
* @param children children to be wrapped
|
|
44
|
-
* @returns {
|
|
44
|
+
* @returns {ReactElement} children component wrapped in a test root container
|
|
45
45
|
*/
|
|
46
|
-
export declare const RouterContainer: ({ addTestRootContainer, selectedRouterProps, rootRoute, children, }: RouterContainerProps) =>
|
|
46
|
+
export declare const RouterContainer: ({ addTestRootContainer, selectedRouterProps, rootRoute, children, }: RouterContainerProps) => ReactElement;
|