test(submodel detail) check carbon footprint submodel visualization

jest.frontend.config.ts

@@ -1,5 +1,6 @@
 import nextJest from 'next/jest';
 import { Config } from 'jest';
+import { TextDecoder, TextEncoder } from 'util';
 
 export {};
 const createJestConfig = nextJest({
@@ -11,6 +12,13 @@ const config: Config = {
     setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
     testEnvironment: 'jsdom',
     modulePathIgnorePatterns: ['cypress'],
+    globals: {
+        'ts-jest': {
+            tsConfigFile: 'tsconfig.json',
+        },
+        TextEncoder: TextEncoder,
+        TextDecoder: TextDecoder,
+    },
     // mock all svg files
     moduleNameMapper: {
         '^.+\\.(svg)$': '<rootDir>/__mocks__/svg.tsx',
@@ -28,7 +36,7 @@ const jestConfigWithOverrides = async (...args) => {
     // Don't ignore specific node_modules during transformation. This is needed if a node_module doesn't return valid JavaScript files.
     res.transformIgnorePatterns = res.transformIgnorePatterns!.map((pattern) => {
         if (pattern === '/node_modules/') {
-            return '/node_modules/(?!flat|jose|ol|color-space|color-rgba|color-parse|color-name|quick-lru)';
+            return '/node_modules/(?!.+)';
         }
         return pattern;
     });

src/app/[locale]/viewer/_components/submodel/SubmodelDetail.spec.tsx

@@ -0,0 +1,49 @@
+import { screen } from '@testing-library/react';
+import { expect } from '@jest/globals';
+import { SubmodelDetail } from 'app/[locale]/viewer/_components/submodel/SubmodelDetail';
+import testSubmodel from '../submodel/carbon-footprint/test-submodel/carbonFootprint-test.json';
+import { Submodel } from '@aas-core-works/aas-core3.0-typescript/types';
+import { CustomRenderReactIntl } from 'test-utils/CustomRenderReactIntl';
+
+window.ResizeObserver =
+    window.ResizeObserver ||
+    jest.fn().mockImplementation(() => ({
+        disconnect: jest.fn(),
+        observe: jest.fn(),
+        unobserve: jest.fn(),
+    }));
+
+jest.mock('recharts', () => {
+    const OriginalRechartsModule = jest.requireActual('recharts');
+
+    return {
+        ...OriginalRechartsModule,
+        ResponsiveContainer: ({ height, children }: never) => (
+            <div className="recharts-responsive-container" style={{ width: 800, height }}>
+                {children}
+            </div>
+        ),
+    };
+});
+
+jest.mock('next-auth', jest.fn());
+
+describe('Submodel Detail', () => {
+    it('should render CarbonFootprintVisualizations for irdi id', async () => {
+        CustomRenderReactIntl(
+            <SubmodelDetail submodel={testSubmodel['carbonFootprint-IrdiId'] as unknown as Submodel} />,
+        );
+        const map = screen.getByTestId('carbonFootprintVisualizations');
+        expect(map).toBeDefined();
+        expect(map).toBeInTheDocument();
+    });
+
+    it('should render CarbonFootprintVisualizations for URL id', async () => {
+        CustomRenderReactIntl(
+            <SubmodelDetail submodel={testSubmodel['carbonFootprint-UrlId'] as unknown as Submodel} />,
+        );
+        const map = screen.getByTestId('carbonFootprintVisualizations');
+        expect(map).toBeDefined();
+        expect(map).toBeInTheDocument();
+    });
+});

src/app/[locale]/viewer/_components/submodel/carbon-footprint/CarbonFootprintVisualizations.tsx

@@ -53,7 +53,7 @@ export function CarbonFootprintVisualizations(props: { submodel: Submodel }) {
     const calculationMethod = extractCalculationMethod(pcfSubmodelElements);
 
     return (
-        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column' }} data-testid="carbonFootprintVisualizations">
             <StyledDataRow title={intl.formatMessage(messages.mnestix.productCarbonFootprint.totalCO2Equivalents)}>
                 <CO2Equivalents totalCO2Equivalents={totalCO2Equivalents} />
             </StyledDataRow>