tests: add card error boundary tests => After tests/commonUtils

jest.config.ts

@@ -18,7 +18,7 @@ const config: Config = {
     globals: {
         IS_REACT_ACT_ENVIRONMENT: true,
     },
-    setupFiles: ['<rootDir>/jest.setup.ts'],
+    setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 };
 
 export default config;

jest.setup.ts

@@ -5,6 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
+import '@testing-library/jest-dom'
 import { TextEncoder, TextDecoder } from 'util';
 
 // fix for ReferenceError: TextDecoder / TextEncoder is not defined

package.json

@@ -30,6 +30,7 @@
     "dependencies": {
         "@react-querybuilder/dnd": "^7.2.0",
         "@react-querybuilder/material": "^7.2.0",
+        "@testing-library/user-event": "^14.5.2",
         "autosuggest-highlight": "^3.3.4",
         "clsx": "^2.1.0",
         "jwt-decode": "^4.0.0",
@@ -46,18 +47,18 @@
         "uuid": "^9.0.1"
     },
     "peerDependencies": {
-        "@mui/system": "^5.15.15",
-        "@mui/x-tree-view": "^6.17.0",
-        "papaparse": "^5.4.1",
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.0",
         "@hookform/resolvers": "^3.3.4",
         "@mui/icons-material": "^5.15.14",
         "@mui/lab": "5.0.0-alpha.169",
         "@mui/material": "^5.15.14",
+        "@mui/system": "^5.15.15",
+        "@mui/x-tree-view": "^6.17.0",
         "ag-grid-community": "^31.0.0",
         "ag-grid-react": "^31.2.0",
         "notistack": "^3.0.1",
+        "papaparse": "^5.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.51.2",
@@ -80,10 +81,12 @@
         "@mui/lab": "5.0.0-alpha.169",
         "@mui/material": "^5.15.14",
         "@react-hook/window-size": "^3.1.1",
+        "@testing-library/jest-dom": "^6.5.0",
         "@testing-library/react": "^16.0.0",
         "@types/autosuggest-highlight": "^3.2.3",
         "@types/eslint": "^8.56.7",
         "@types/eslint-config-prettier": "^6.11.3",
+        "@types/jest": "^29.5.13",
         "@types/json-logic-js": "^2.0.7",
         "@types/license-checker": "^25.0.6",
         "@types/localized-countries": "^2.0.3",
@@ -119,6 +122,7 @@
         "glob": "^10.3.12",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
+        "jest-dom": "^4.0.0",
         "jest-environment-jsdom": "^29.7.0",
         "license-checker": "^25.0.1",
         "notistack": "^3.0.1",

src/components/cardErrorBoundary/tests/CardErrorBoundary.test.tsx

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import { screen } from '@testing-library/react';
+import { it } from '@jest/globals';
+import CardErrorBoundary from '../CardErrorBoundary';
+import { RenderBuilder } from '../../../tests/testsUtils';
+
+const RenderBuilderInstance = new RenderBuilder().withTrad();
+
+describe('CardErrorBoundary', () => {
+    it('renders the child component when there is no error', () => {
+        RenderBuilderInstance.render(
+            <CardErrorBoundary>
+                <div>Child Component</div>
+            </CardErrorBoundary>
+        );
+
+        const childComponent = screen.getByText('Child Component');
+        expect(childComponent).toBeInTheDocument();
+    });
+
+    it('renders an error message when there is an error', () => {
+        const errorMessage = 'Something went wrong';
+        const ErrorComponent = () => {
+            throw new Error(errorMessage);
+        };
+
+        RenderBuilderInstance.render(
+            <CardErrorBoundary>
+                <ErrorComponent />
+            </CardErrorBoundary>
+        );
+
+        const errorText = screen.getByText(errorMessage);
+        expect(errorText).toBeInTheDocument();
+    });
+});

src/tests/testsUtils.tsx

@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { render as rtlRender } from '@testing-library/react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { IntlProvider } from 'react-intl';
+import {
+    login_en,
+    report_viewer_en,
+    top_bar_en,
+    table_en,
+    treeview_finder_en,
+    element_search_en,
+    equipment_search_en,
+    filter_en,
+    filter_expert_en,
+    description_en,
+    equipments_en,
+    csv_en,
+    card_error_boundary_en,
+    flat_parameters_en,
+    multiple_selection_dialog_en,
+    common_button_en,
+    directory_items_input_en,
+} from '..';
+
+const fullTrad = {
+    ...report_viewer_en,
+    ...login_en,
+    ...top_bar_en,
+    ...table_en,
+    ...treeview_finder_en,
+    ...element_search_en,
+    ...equipment_search_en,
+    ...filter_en,
+    ...filter_expert_en,
+    ...description_en,
+    ...equipments_en,
+    ...csv_en,
+    ...card_error_boundary_en,
+    ...flat_parameters_en,
+    ...multiple_selection_dialog_en,
+    ...common_button_en,
+    ...directory_items_input_en,
+};
+const renderWithTranslation = (ui: React.ReactElement) => (
+    <IntlProvider locale="en" messages={fullTrad}>
+        {ui}
+    </IntlProvider>
+);
+
+const lightTheme = createTheme(
+    {
+        components: {
+            MuiTab: {
+                styleOverrides: {
+                    root: {
+                        textTransform: 'none',
+                    },
+                },
+            },
+            MuiButton: {
+                styleOverrides: {
+                    root: {
+                        textTransform: 'none',
+                    },
+                },
+            },
+        },
+        palette: {
+            mode: 'light',
+        },
+    },
+    {
+        aggrid: {
+            theme: 'ag-theme-alpine',
+            overlay: {
+                background: '#e6e6e6',
+            },
+        },
+    }
+);
+const renderWithTheme = (ui: React.ReactElement) => <ThemeProvider theme={lightTheme}>{ui}</ThemeProvider>;
+
+// eslint-disable-next-line import/prefer-default-export
+export class RenderBuilder {
+    renderWithTheme: boolean = false;
+
+    renderWithTrad: boolean = false;
+
+    withTrad() {
+        this.renderWithTrad = true;
+        return this;
+    }
+
+    withTheme() {
+        this.renderWithTheme = true;
+        return this;
+    }
+
+    render(ui: React.ReactElement) {
+        let newUi = this.renderWithTrad ? renderWithTranslation(ui) : ui;
+        newUi = this.renderWithTheme ? renderWithTheme(newUi) : newUi;
+        return rtlRender(newUi);
+    }
+}

tsconfig.json

@@ -16,5 +16,6 @@
         "noEmit": true,
         "jsx": "react-jsx"
     },
-    "include": ["src", "demo"] // we can let demo because the file generation is managed my vite and we have noEmit anyway
+    "types":["node","jest", "@testing-library/jest-dom"],
+    "include": ["src", "demo","jest.setup.ts"] // we can let demo because the file generation is managed my vite and we have noEmit anyway
 }