@truedat/test 7.5.9 → 7.5.10

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@truedat/test",
-  "version": "7.5.9",
+  "version": "7.5.10",
   "description": "Truedat Web Test",
   "sideEffects": false,
-  "jsnext:main": "src/index.js",
   "module": "src/index.js",
   "files": [
     "src",
@@ -17,64 +16,22 @@
   "scripts": {
     "clean": "rimraf yarn-error.log",
     "test": "TZ=UTC jest --coverage",
-    "test:watch": "TZ=UTC jest --watch",
     "eslint": "eslint src/**",
     "eslint:fix": "eslint --fix src/**"
   },
-  "devDependencies": {
-    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.20.5",
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
-    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "^7.19.6",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^13.2.1",
-    "babel-jest": "^28.1.0",
-    "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-react-intl": "^5.1.18",
-    "babel-plugin-transform-semantic-ui-react-imports": "^1.4.1",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.7",
-    "enzyme-to-json": "^3.6.2",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.0.0",
-    "jest-environment-jsdom": "^29.0.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "rimraf": "^3.0.2"
-  },
   "jest": {
     "maxWorkers": "50%",
     "testTimeout": 10000,
     "moduleDirectories": [
-      "<rootDir>/src",
-      "../../node_modules"
+      "<rootDir>/src"
     ],
     "moduleNameMapper": {
-      "\\.(css|less|png)$": "identity-obj-proxy",
-      "^@truedat/([^/]+)$": "<rootDir>/../$1/src/index",
-      "^@truedat/([^/]+)/(.*)$": "<rootDir>/../$1/src/$2"
+      "\\.(css|less|png)$": "identity-obj-proxy"
     },
-    "setupFiles": [
-      "jest-localstorage-mock"
-    ],
     "setupFilesAfterEnv": [
       "@truedat/test/setup"
     ],
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ],
     "testEnvironment": "jsdom",
-    "testPathIgnorePatterns": [
-      "<rootDir>/node_modules/"
-    ],
     "transform": {
       "\\.js$": [
         "babel-jest",
@@ -82,23 +39,24 @@
           "rootMode": "upward"
         }
       ]
-    },
-    "transformIgnorePatterns": [
-      "/node_modules/(?!@truedat).*"
-    ]
+    }
   },
-  "dependencies": {
-    "@apollo/client": "^3.7.1",
-    "lodash": "^4.17.21",
-    "prop-types": "^15.8.1",
-    "react-intl": "^5.20.10",
-    "react-redux": "^7.2.4",
-    "react-router-dom": "^5.2.0",
-    "redux": "^4.1.1"
-  },
-  "peerDependencies": {
-    "react": ">= 16.8.6 < 17",
-    "react-dom": ">= 16.8.6 < 17"
+  "devDependencies": {
+    "@apollo/client": "^3.13.5",
+    "@reduxjs/toolkit": "^2.6.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "graphql": "^16.10.0",
+    "jest": "^29.7.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-intl": "^7.1.10",
+    "react-redux": "^9.2.0",
+    "react-router": "^7.4.0",
+    "react-test-renderer": "^19.0.0",
+    "redux": "^5.0.1"
   },
-  "gitHead": "03770e3241daa955de2e6e40fdaea91e3d147860"
+  "gitHead": "8a8c49e9d5d6bb4e5f2b503b063bfd6dd20a503d"
 }

package/setup.js

@@ -1,5 +1,5 @@
-import "@testing-library/jest-dom";
-import Enzyme from "enzyme";
-import Adapter from "enzyme-adapter-react-16";
+const { TextEncoder, TextDecoder } = require("util");
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder;
 
-Enzyme.configure({ adapter: new Adapter() });
+import "@testing-library/jest-dom";

package/src/__tests__/render.spec.js

@@ -0,0 +1,53 @@
+import { render, waitForLoad } from "../render";
+import { screen, waitFor } from "@testing-library/react";
+
+describe("render utility", () => {
+  it("renders components with default options", () => {
+    const TestComponent = () => <div>Test Component</div>;
+    render(<TestComponent />);
+    expect(screen.getByText("Test Component")).toBeInTheDocument();
+  });
+
+  it("provides redux store with initial state", () => {
+    const initialState = { user: { name: "Test User" } };
+    const TestComponent = () => {
+      return <div>State Test</div>;
+    };
+
+    render(<TestComponent />, { state: initialState });
+    expect(screen.getByText("State Test")).toBeInTheDocument();
+  });
+
+  it("handles routing with MemoryRouter", () => {
+    const TestComponent = () => <div>Route Test</div>;
+    render(<TestComponent />, { routes: ["/test-route"] });
+    expect(screen.getByText("Route Test")).toBeInTheDocument();
+  });
+
+  it("handles Apollo mocks", async () => {
+    const TestComponent = () => <div>Apollo Test</div>;
+    render(<TestComponent />, { mocks: [] });
+    expect(screen.getByText("Apollo Test")).toBeInTheDocument();
+  });
+
+  describe("waitForLoad", () => {
+    it("waits for loading indicators to disappear", async () => {
+      const TestComponent = () => (
+        <div><div className="loader" data-testid="loader">
+            Loading...
+          </div><div>Content</div></div>
+      );
+
+      const renderResult = render(<TestComponent />);
+
+      // Simulate loader disappearing
+      setTimeout(() => {
+        const loader = screen.getByTestId("loader");
+        loader.remove();
+      }, 100);
+
+      await waitForLoad(renderResult);
+      expect(screen.getByText("Content")).toBeInTheDocument();
+    });
+  });
+});

package/src/mocks.js

@@ -39,6 +39,11 @@ export const singleTemplateMock = (variables) => ({
   result: { data: { templates: [template1] } },
 });
 
+export const templatesMockWith = (variables, templates) => ({
+  request: { query: TEMPLATES_QUERY, variables },
+  result: { data: { templates } },
+});
+
 export const templateByNameMock = (variables) => ({
   request: { query: TEMPLATE_QUERY, variables },
   result: { data: { template: template1 } },
@@ -46,7 +51,7 @@ export const templateByNameMock = (variables) => ({
 
 export const emptyTemplateByNameMock = () => ({
   request: { query: TEMPLATE_QUERY, variables: { name: "", domainIds: null } },
-  result: { data: null },
+  result: { data: { template: null } },
 });
 
 export const errorTemplateMock = (variables) => ({
@@ -66,48 +71,47 @@ export const rolesMock = (variables) => ({
   },
 });
 
-export const domainsMock = (variables) => ({
+const defaultDomains = [
+  {
+    __typename: "Domain",
+    name: "fooDomain",
+    id: "1",
+    externalId: "foo",
+    parentId: null,
+    actions: null,
+  },
+  {
+    __typename: "Domain",
+    name: "barDomain",
+    id: "2",
+    externalId: "bar",
+    parentId: null,
+    actions: null,
+  },
+  {
+    __typename: "Domain",
+    name: "bazDomain",
+    id: "3",
+    externalId: "baz",
+    parentId: null,
+    actions: null,
+  },
+  {
+    __typename: "Domain",
+    name: "xyzzy",
+    id: "33",
+    externalId: "d1",
+    parentId: "2",
+    actions: null,
+  },
+];
+export const domainsMock = (variables, domains = defaultDomains) => ({
   request: {
     query: DOMAINS_QUERY,
     variables,
   },
   result: {
-    data: {
-      domains: [
-        {
-          __typename: "Domain",
-          name: "fooDomain",
-          id: "1",
-          externalId: "foo",
-          parentId: null,
-          actions: null,
-        },
-        {
-          __typename: "Domain",
-          name: "barDomain",
-          id: "2",
-          externalId: "bar",
-          parentId: null,
-          actions: null,
-        },
-        {
-          __typename: "Domain",
-          name: "bazDomain",
-          id: "3",
-          externalId: "baz",
-          parentId: null,
-          actions: null,
-        },
-        {
-          __typename: "Domain",
-          name: "xyzzy",
-          id: "33",
-          externalId: "d1",
-          parentId: "2",
-          actions: null,
-        },
-      ],
-    },
+    data: { domains },
   },
 });
 

package/src/render.js

@@ -1,11 +1,38 @@
-import React from "react";
+import { Suspense } from "react";
 import { MockedProvider } from "@apollo/client/testing";
-import { render } from "@testing-library/react";
+import { render, waitFor } from "@testing-library/react";
 import { IntlProvider } from "react-intl";
-import { createStore } from "redux";
+import { configureStore } from "@reduxjs/toolkit";
 import { Provider } from "react-redux";
-import { MemoryRouter } from "react-router-dom";
-import defaultMessages from "./messages";
+import { MemoryRouter } from "react-router";
+
+const originalXHR = window.XMLHttpRequest;
+const mockXHR = function () {
+  const xhr = new originalXHR();
+
+  // Save the original open method
+  const originalOpen = xhr.open;
+
+  // Override open to log the URL being requested
+  xhr.open = function () {
+    console.log("XHR requested URL:", arguments[1]);
+    return originalOpen.apply(this, arguments);
+  };
+
+  return xhr;
+};
+
+// Setup mock date for all tests
+beforeAll(() => {
+  jest.useFakeTimers();
+  jest.setSystemTime(new Date("2025-01-01"));
+  window.XMLHttpRequest = mockXHR;
+});
+
+afterAll(() => {
+  jest.useRealTimers();
+  window.XMLHttpRequest = originalXHR;
+});
 
 const customRender = (
   component,
@@ -13,15 +40,20 @@ const customRender = (
     locale = "en",
     mocks = [],
     state = {},
-    messages = defaultMessages,
+    reducer = (x) => x,
+    messages = { en: {} },
     routes = ["/"],
-    routeIndex,
-    fallback = false,
+    routeIndex = 0,
+    fallback = <div>loading</div>,
     dispatch,
     ...renderOptions
   } = {}
 ) => {
-  const store = createStore(() => state);
+  const store = configureStore({
+    preloadedState: state,
+    reducer,
+  });
+
   // eslint-disable-next-line react/prop-types
   function Wrapper({ children }) {
     const content = (
@@ -41,7 +73,7 @@ const customRender = (
       </MemoryRouter>
     );
     return fallback ? (
-      <React.Suspense fallback={fallback}>{content}</React.Suspense>
+      <Suspense fallback={fallback}>{content}</Suspense>
     ) : (
       content
     );
@@ -51,4 +83,15 @@ const customRender = (
   return render(component, { wrapper: Wrapper, ...renderOptions });
 };
 
+export const waitForLoad = async (
+  { container, queryByText },
+  fallback = /loading/i
+) => {
+  await waitFor(() => {
+    if (fallback) expect(queryByText(fallback)).not.toBeInTheDocument();
+    expect(container.querySelector(".loader")).not.toBeInTheDocument();
+    expect(container.querySelector(".loading")).not.toBeInTheDocument();
+  });
+};
+
 export { customRender as render };

package/src/__tests__/intl-stub.spec.js

@@ -1,12 +0,0 @@
-import React from "react";
-import { shallowWithIntl } from "@truedat/test/intl-stub";
-
-describe("shallowWithIntl", () => {
-  it("injects the intl context into the wrapped component", () => {
-    const wrapper = shallowWithIntl(<p>Hello</p>);
-    expect(wrapper.find("p").prop("intl")).toMatchObject({
-      locale: "en",
-      messages: expect.objectContaining({ foo: "foo" })
-    });
-  });
-});

package/src/intl-stub.js

@@ -1,55 +0,0 @@
-import _ from "lodash/fp";
-import React from "react";
-import { createIntl, createIntlCache } from "react-intl";
-import { shallow, mount } from "enzyme";
-import audit from "@truedat/audit/messages/es";
-import auth from "@truedat/auth/messages/es";
-import bg from "@truedat/bg/messages/es";
-import core from "@truedat/core/messages/es";
-import cx from "@truedat/cx/messages/es";
-import dd from "@truedat/dd/messages/es";
-import df from "@truedat/df/messages/es";
-import dq from "@truedat/dq/messages/es";
-import ie from "@truedat/ie/messages/es";
-import lm from "@truedat/lm/messages/es";
-import se from "@truedat/se/messages/es";
-
-const cache = createIntlCache();
-
-const messages = _.flow(
-  _.mergeAll,
-  _.keys,
-  _.map(x => [x, x]),
-  _.fromPairs
-)([audit, auth, bg, core, cx, dd, df, dq, ie, lm, se, { foo: "bar" }]);
-
-export const intl = createIntl(
-  {
-    locale: "en",
-    defaultLocale: "en",
-    messages
-  },
-  cache
-);
-
-/**
- * Equivalent to enzyme's 'shallow' method.
- * @param {string} node React Component that requires reactintl.
- * @return {object}
- */
-export const shallowWithIntl = node => {
-  return shallow(React.cloneElement(node, { intl }), {
-    context: { intl, useIntl: () => intl }
-  });
-};
-
-/**
- * Equivalent to enzyme's 'mount' method.
- * @param {string} node React Component that requires reactintl.
- * @return {object}
- */
-export const mountWithIntl = node => {
-  return mount(React.cloneElement(node, { intl }), {
-    context: { intl, useIntl: () => intl }
-  });
-};