Fe image

frontend/sonar-project.properties

@@ -3,7 +3,7 @@ sonar.organization=dev-madhurendra
 sonar.projectName=Short-My-Url-Frontend
 sonar.host.url=https://sonarcloud.io
 sonar.projectVersion=1.0
-sonar.exclusions=**/node_modules/**,**/src/main.tsx, **/src/App.tsx
+sonar.exclusions=**/node_modules/**,**/src/main.tsx, **/src/App.tsx,**/*.stories.tsx
 sonar.sourceEncoding=UTF-8
 sonar.sources=./src
 sonar.tests=./src

frontend/src/components/atoms/image/index.stories.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import ImageComponent from "./index";
+import { Meta, StoryObj } from "@storybook/react";
+import facebook from '../../../../public/assets/images/facebook.svg';
+import graph from '../../../../public/assets/images/graph.svg';
+import rupee from '../../../../public/assets/images/rupee.svg';
+
+export default {
+  title: 'atoms/Image',
+  component: ImageComponent,
+} as Meta<typeof ImageComponent>;
+
+export const Facebook: StoryObj<typeof ImageComponent> = {
+  args: {
+    src: facebook,
+    height: '60px',
+    width: '60px',
+  }
+};
+
+export const Graph: StoryObj<typeof ImageComponent> = {
+  args: {
+    src: graph,
+    height: '60px',
+    width: '60px',
+  }
+};
+
+export const Rupee: StoryObj<typeof ImageComponent> = {
+  args: {
+    src: rupee,
+    height: '60px',
+    width: '60px',
+  }
+};

frontend/src/components/atoms/image/index.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/react";
+import ImageComponent from "./index";
+import facebook from "../../../../public/assets/images/facebook.svg";
+import graph from "../../../../public/assets/images/graph.svg";
+import "@testing-library/jest-dom";
+
+describe("ImageComponent", () => {
+  it("renders the image with the provided source", () => {
+    const src = facebook;
+    render(<ImageComponent src={src} />);
+
+    const imageElement = screen.getByTestId("image");
+
+    expect(imageElement).toBeInTheDocument();
+
+  });
+
+  it("sets the width and height attributes if provided", () => {
+    const src = graph;
+    const width = "200";
+    const height = "150";
+    render(<ImageComponent src={src} width={width} height={height} />);
+
+    const imageElement = screen.getByTestId("image");
+
+    expect(imageElement).toHaveAttribute("width", width);
+    expect(imageElement).toHaveAttribute("height", height);
+  });
+});

frontend/src/components/atoms/image/index.tsx

@@ -0,0 +1,20 @@
+import { IMAGE_DATATESTID } from "../../../utils/constants";
+
+interface ImageComponentProps {
+  src: string;
+  height?: string;
+  width?: string;
+}
+
+const ImageComponent = ({ src, height, width }: ImageComponentProps) => {
+  return (
+    <img
+      data-testid={IMAGE_DATATESTID}
+      src={src}
+      width={width}
+      height={height}
+    ></img>
+  );
+};
+
+export default ImageComponent;

frontend/src/components/atoms/typography/index.test.tsx

@@ -1,8 +1,8 @@
 import { render } from "@testing-library/react";
 import MuiTypography from "."; 
-import { typography_DataTestId } from "../../../utils/constants";
+import { TYPOGRAPHY_DATATESTID } from "../../../utils/constants";
 
 test("renders Typography", () => {
     const { getByTestId } = render(<MuiTypography text="hello" variant="h1" />);
-    expect(getByTestId(typography_DataTestId)).toBeDefined();
+    expect(getByTestId(TYPOGRAPHY_DATATESTID)).toBeDefined();
 });

frontend/src/components/atoms/typography/index.tsx

@@ -1,13 +1,13 @@
 import  { ReactNode } from "react";
 import { Typography, TypographyProps } from "@mui/material";
-import { typography_DataTestId } from "../../../utils/constants";
+import { TYPOGRAPHY_DATATESTID } from "../../../utils/constants";
 
 interface CustomTypographyProps extends TypographyProps {
   text: ReactNode;
 
 }
 const MuiTypography = ({ variant, sx, text, ...rest }: CustomTypographyProps) => (
-  <Typography data-testid={typography_DataTestId} variant={variant} sx={sx} {...rest}>
+  <Typography data-testid={TYPOGRAPHY_DATATESTID} variant={variant} sx={sx} {...rest}>
     {text}
   </Typography>
 );

frontend/src/utils/constants.ts

@@ -1,2 +1,3 @@
 
-export const typography_DataTestId='typography-component'
+export const TYPOGRAPHY_DATATESTID='typography-component'
+export const  IMAGE_DATATESTID='image'