diff --git a/src/app/[locale]/viewer/_components/submodel/carbon-footprint/CarbonFootprintVisualizations.spec.tsx b/src/app/[locale]/viewer/_components/submodel/carbon-footprint/CarbonFootprintVisualizations.spec.tsx
new file mode 100644
index 0000000..47f7e5d
--- /dev/null
+++ b/src/app/[locale]/viewer/_components/submodel/carbon-footprint/CarbonFootprintVisualizations.spec.tsx
@@ -0,0 +1,72 @@
+import { screen } from '@testing-library/react';
+import { expect } from '@jest/globals';
+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';
+import {
+    CarbonFootprintVisualizations
+} from 'app/[locale]/viewer/_components/submodel/carbon-footprint/CarbonFootprintVisualizations';
+
+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>
+        ),
+    };
+});
+
+describe('CarbonFootprintVisualizations Detail', () => {
+    it('should render all submodel visualilzations for irdi id', async () => {
+        CustomRenderReactIntl(
+            <CarbonFootprintVisualizations submodel={testSubmodel['carbonFootprint-IrdiId'] as unknown as Submodel} />,
+        );
+        assertOnElements();
+    });
+
+    it('should render all submodel visualilzations for URL id', async () => {
+        CustomRenderReactIntl(
+            <CarbonFootprintVisualizations submodel={testSubmodel['carbonFootprint-UrlId'] as unknown as Submodel} />,
+        );
+        assertOnElements();
+    });
+});
+
+function assertOnElements() {
+    const totalCo2Equivalents = screen.getByTestId('co2-equivalents');
+    expect(totalCo2Equivalents).toBeDefined();
+    expect(totalCo2Equivalents).toBeInTheDocument();
+
+    const productLifecycle = screen.getByTestId('product-lifecycle-stepper');
+    expect(productLifecycle).toBeDefined();
+    expect(productLifecycle).toBeInTheDocument();
+
+    const co2EquivalentsDistribution = screen.getByTestId('co2-equivalents-distribution-box');
+    expect(co2EquivalentsDistribution).toBeDefined();
+    expect(co2EquivalentsDistribution).toBeInTheDocument();
+
+    const co2Comparison = screen.getByTestId('co2-comparison-box');
+    expect(co2Comparison).toBeDefined();
+    expect(co2Comparison).toBeInTheDocument();
+
+    const productJourney = screen.getByTestId('product-journey-box');
+    expect(productJourney).toBeDefined();
+    expect(productJourney).toBeInTheDocument();
+
+    const calculationMethod = screen.getByTestId('co2-calculation-method-text');
+    expect(calculationMethod).toBeDefined();
+    expect(calculationMethod).toBeInTheDocument();
+}
+
diff --git a/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/CO2EquivalentsDistribution.tsx b/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/CO2EquivalentsDistribution.tsx
index 5df2822..797170c 100644
--- a/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/CO2EquivalentsDistribution.tsx
+++ b/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/CO2EquivalentsDistribution.tsx
@@ -33,7 +33,7 @@ export function CO2EquivalentsDistribution(props: {
     };
 
     return (
-        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column' }} data-testid="co2-equivalents-distribution-box">
             <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                 <Typography sx={{ color: 'primary.main', fontSize: 24 }}>
                     <Typography sx={{ color: 'inherit', fontSize: 'inherit', fontWeight: 600 }} component="span">
diff --git a/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/CalculationMethod.tsx b/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/CalculationMethod.tsx
index 2070f20..0f0842f 100644
--- a/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/CalculationMethod.tsx
+++ b/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/CalculationMethod.tsx
@@ -7,7 +7,8 @@ export function CalculationMethod(props: { calculationMethod: string }) {
     const { calculationMethod } = props;
 
     return (
-        <Typography sx={{ color: 'primary.main', fontSize: 24, fontWeight: 'bold' }}>
+        <Typography sx={{ color: 'primary.main', fontSize: 24, fontWeight: 'bold' }}
+                    data-testid="co2-calculation-method-text">
             {calculationMethod}{' '}
             {calculationMethod === 'GHG Protocol' && (
                 <Link href={LinkGHG} target="_blank">
diff --git a/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/Comparison.tsx b/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/Comparison.tsx
index 7e9f3d2..1abc93c 100644
--- a/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/Comparison.tsx
+++ b/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/Comparison.tsx
@@ -18,7 +18,7 @@ export function Comparison(props: { co2Equivalents: number }) {
     const { value: timePeriod, unit: unitOfTimePeriod } = determineTimePeriod(props.co2Equivalents);
 
     return (
-        <Box>
+        <Box data-testid="co2-comparison-box">
             <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 2 }}>
                 <Tree alt="Tree" />
                 <Box sx={{ display: 'flex', flexDirection: 'column' }}>
diff --git a/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/ProductJourney.spec.tsx b/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/ProductJourney.spec.tsx
index a3f73c3..c3b28a0 100644
--- a/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/ProductJourney.spec.tsx
+++ b/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/ProductJourney.spec.tsx
@@ -41,7 +41,7 @@ describe('ProductJourney', () => {
     it('renders the ProductJourney', async () => {
 
         CustomRender(<ProductJourney addressesPerLifeCyclePhase={[firstAddress, secondAddress]} />);
-        const map = screen.getByTestId('test-map');
+        const map = screen.getByTestId('product-journey-box');
         expect(map).toBeDefined();
         expect(map).toBeInTheDocument();
 
@@ -56,7 +56,7 @@ describe('ProductJourney', () => {
 
         CustomRender(<ProductJourney addressesPerLifeCyclePhase={[firstAddress, secondAddress]} />);
 
-        const map = screen.getByTestId('test-map');
+        const map = screen.getByTestId('product-journey-box');
         expect(map).toBeDefined();
         expect(map).toBeInTheDocument();
 
diff --git a/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/ProductJourney.tsx b/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/ProductJourney.tsx
index 2e18ee3..6e17b7e 100644
--- a/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/ProductJourney.tsx
+++ b/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/ProductJourney.tsx
@@ -90,7 +90,7 @@ export function ProductJourney(props: { addressesPerLifeCyclePhase: AddressPerLi
         <>
             <Box
                 id="map"
-                data-testid="test-map"
+                data-testid="product-journey-box"
                 sx={{
                     height: '320px',
                     width: '100%',
diff --git a/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/ProductLifecycle.tsx b/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/ProductLifecycle.tsx
index 4270a32..a005e79 100644
--- a/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/ProductLifecycle.tsx
+++ b/src/app/[locale]/viewer/_components/submodel/carbon-footprint/visualization-components/ProductLifecycle.tsx
@@ -27,6 +27,7 @@ export function ProductLifecycle(props: { completedStages: ProductLifecycleStage
             activeStep={props.completedStages.length}
             orientation="vertical"
             sx={{ '& .Muistel-root': { color: 'blue' } }}
+            data-testid="product-lifecycle-stepper"
         >
             {props.completedStages.map((step, index) => (
                 <Step key={index}>