Add tests on Card

components/common/Card.tsx

@@ -55,7 +55,7 @@ const ImgArea = styled.div<{ colorEffect?: string }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: ${(props) => props.colorEffect};
+  background-color: ${(props) => props.colorEffect || props.theme.brandDark};
   border-bottom: ${(props) => (props.colorEffect ? '6px' : '0')} solid
     ${(props) => props.colorEffect};
 
@@ -77,10 +77,7 @@ const ImgBg = styled.div<{ background: string; imageAlign: string }>`
 `;
 
 const SvgIcon = styled(SVG)`
-  position: absolute;
-  right: ${(props) => props.theme.spaces.s050};
-  top: ${(props) => props.theme.spaces.s050};
-  width: ${(props) => props.theme.spaces.s300};
+  width: ${(props) => props.theme.spaces.s800};
   fill: white;
 `;
 
@@ -121,22 +118,26 @@ const Card = (props: CardProps) => {
   const ImageComponent = () => {
     if (imageType === 'svgIcon') {
       return (
-        <ImgArea colorEffect={colorEffect}>
+        <ImgArea colorEffect={colorEffect} data-testid="svg-icon">
           {imageUrl && <SvgIcon src={imageUrl} />}
         </ImgArea>
       );
     }
     if (imageType === 'bitmapIcon') {
       return (
-        <ImgArea colorEffect={colorEffect}>
+        <ImgArea colorEffect={colorEffect} data-testid="bitmap-icon">
           {imageUrl && <BitmapIcon imageSrc={imageUrl} />}
         </ImgArea>
       );
     }
     if (imageType === 'image' && imageUrl) {
       return (
         <ImgArea colorEffect={colorEffect}>
-          <ImgBg background={imageUrl} imageAlign={imageAlign} />
+          <ImgBg
+            background={imageUrl}
+            imageAlign={imageAlign}
+            data-testid="image-bg"
+          />
         </ImgArea>
       );
     }

components/contentblocks/CategoryListBlock.tsx

@@ -168,6 +168,7 @@ const CategoryListBlock = (props: CategoryListBlockProps) => {
   /*
     Determine what image to use on category card
     If category has no own image but has icon use icon on colored bg
+    If category has no own color use bradDark color as background
     If category has no own image and no icon use fallback image
     If category has own image use that
   */

tests/common/Card.test.js

@@ -5,24 +5,56 @@ import { screen } from '@testing-library/react';
 
 describe('Card Component', () => {
   it('renders children correctly', () => {
-    render(<Card><div>Test Content</div></Card>);
+    render(
+      <Card>
+        <div>Test Content</div>
+      </Card>
+    );
 
     const content = screen.getByText('Test Content');
     expect(content).toBeInTheDocument();
   });
 
   it('renders with an image when imageUrl is provided', () => {
-    const imageUrl = "image.jpg";
+    const imageUrl = 'image.jpg';
 
     render(
       <Card imageUrl={imageUrl}>
         <div>Test Content</div>
       </Card>
     );
 
-    const image = screen.getByTestId('image-bg');;
+    const image = screen.getByTestId('image-bg');
     expect(image).toBeInTheDocument();
-});
+  });
+
+  it('renders with a svg icon when imageType === svgIcon', () => {
+    const imageType = 'svgIcon';
+    const imageUrl = 'image.svg';
+
+    render(
+      <Card imageUrl={imageUrl} imageType={imageType}>
+        <div>Test Content</div>
+      </Card>
+    );
+
+    const icon = screen.getByTestId('svg-icon');
+    expect(icon).toBeInTheDocument();
+  });
+
+  it('renders with a bitmap icon when imageType === bitmapIcon', () => {
+    const imageType = 'bitmapIcon';
+    const imageUrl = 'image.png';
+
+    render(
+      <Card imageUrl={imageUrl} imageType={imageType}>
+        <div>Test Content</div>
+      </Card>
+    );
+
+    const icon = screen.getByTestId('bitmap-icon');
+    expect(icon).toBeInTheDocument();
+  });
 
   it('uses customcolor when provided', () => {
     const customColorValue = 'rgb(212, 235, 255)';
@@ -45,16 +77,5 @@ describe('Card Component', () => {
     );
     const card = screen.getByTestId('card');
     expect(card).toHaveStyle(`background-color: ${defaultColor}`);
-
   });
 });
-
-
-
-
-
-
-
-
-
-