Fixed test issues

Author: EnhancedJax

README.md

@@ -1,6 +1,6 @@
 # react-browser-containers
 
-A component library with React, Typescript and Storybook.
+Browser containers.
 
 ### Run Locally
 

src/components/ChromeBrowser/ChromeBrowser.tsx

@@ -39,7 +39,7 @@ const ChromeBrowser: React.FC<ChromeBrowserProps> = ({
     },
   ],
   shadow = false,
-  useContentSize = false,
+  usecontentsize = false,
   leftIcons = (
     <>
       <img src="/arrowback.svg" width={16} height={16} />
@@ -57,8 +57,8 @@ const ChromeBrowser: React.FC<ChromeBrowserProps> = ({
     <ThemeProvider theme={theme === "dark" ? darkTheme : lightTheme}>
       <BrowserContainer
         {...props}
-        shadow={shadow}
-        useContentSize={useContentSize}
+        $shadow={shadow}
+        $usecontentsize={usecontentsize}
       >
         <Bar>
           <TitleRow>
@@ -74,14 +74,19 @@ const ChromeBrowser: React.FC<ChromeBrowserProps> = ({
                   if (index === selectedTab) {
                     return (
                       <>
-                        <TabDecorator before />
-                        <Tab selected>{tab.name}</Tab>
-                        <TabDecorator after />
+                        <TabDecorator
+                          $before
+                          key={`${index}-decorator-before`}
+                        />
+                        <Tab selected key={index}>
+                          {tab.name}
+                        </Tab>
+                        <TabDecorator $after key={`${index}-decorator-after`} />
                       </>
                     );
                   } else {
                     return (
-                      <Tab onClick={() => setSelectedTab(index)}>
+                      <Tab onClick={() => setSelectedTab(index)} key={index}>
                         {tab.name}
                       </Tab>
                     );

src/components/ChromeBrowser/__docs__/Example.tsx

@@ -6,7 +6,7 @@ const Example: FC<ChromeBrowserProps> = ({
   theme,
   tabs,
   shadow,
-  useContentSize,
+  usecontentsize,
   leftIcons,
   rightIcons,
   children,
@@ -23,7 +23,7 @@ const Example: FC<ChromeBrowserProps> = ({
       <ChromeBrowser
         theme={theme}
         tabs={tabs}
-        useContentSize={useContentSize}
+        usecontentsize={usecontentsize}
         shadow={shadow}
         leftIcons={leftIcons}
         rightIcons={rightIcons}

src/components/ChromeBrowser/__test__/ChromeBrowser.test.tsx

@@ -1,13 +1,14 @@
-//ChromeBrowser/__test__/ChromeBrowser.test.tsx
 import { render, screen } from "@testing-library/react";
 import React from "react";
 import { describe, expect, it } from "vitest";
-import ChromeBrowser from "../ChromeBrowser"; // Import the ChromeBrowser component
+import ChromeBrowser from "../ChromeBrowser";
 
-describe("ChromeBrowser component", () => {
-  it("ChromeBrowser should render correctly", () => {
+describe("ChromeBrowser", () => {
+  it("renders correctly", () => {
     render(<ChromeBrowser />);
-    const chromeBrowserElement = screen.getByRole("ChromeBrowser"); // Declare the chromeBrowserElement variable
-    expect(chromeBrowserElement).toBeTruthy(); // Use the correct assertion method
+
+    // Assuming the ChromeBrowser component has a title or some identifiable text
+    const browserElement = screen.getByText(/Hello/i);
+    expect(browserElement).toBeInTheDocument();
   });
 });

src/components/ChromeBrowser/props.ts

@@ -6,7 +6,7 @@ export type ChromeBrowserProps = {
     content: React.ReactNode;
   }>;
   shadow?: boolean;
-  useContentSize?: boolean;
+  usecontentsize?: boolean;
   leftIcons?: React.ReactNode;
   rightIcons?: React.ReactNode;
   children?: React.ReactNode;

src/components/ChromeBrowser/styles.ts

@@ -33,17 +33,17 @@ export const darkTheme: Theme = {
 
 export const BrowserContainer = styled.div<{
   theme: Theme;
-  shadow?: boolean;
-  useContentSize?: boolean;
+  $shadow?: boolean;
+  $usecontentsize?: boolean;
 }>`
   border: 1px solid ${({ theme }) => theme.border};
   border-radius: 8px;
   background-color: ${({ theme }) => theme.bg};
-  width: ${({ useContentSize }) => (useContentSize ? "inherit" : "100%")};
-  height: ${({ useContentSize }) => (useContentSize ? "inherit" : "100%")};
+  width: ${({ $usecontentsize }) => ($usecontentsize ? "inherit" : "100%")};
+  height: ${({ $usecontentsize }) => ($usecontentsize ? "inherit" : "100%")};
   position: relative;
-  box-shadow: ${(props) =>
-    props.shadow ? "0 0 40px rgba(0,0,0,0.1)" : "none"};
+  box-shadow: ${({ $shadow }) =>
+    $shadow ? "0 0 40px rgba(0,0,0,0.1)" : "none"};
   font-family:
     system-ui,
     -apple-system,
@@ -139,24 +139,24 @@ export const Tab = styled.button<{ selected?: boolean; theme: Theme }>`
 `;
 
 export const TabDecorator = styled.div<{
-  before?: boolean;
-  after?: boolean;
+  $before?: boolean;
+  $after?: boolean;
   theme: Theme;
 }>`
   width: 8px;
   height: 8px;
   margin-top: auto;
   background-color: ${({ theme }) => theme.bg};
-  margin-right: ${({ after }) => (after ? "-4px" : "0")};
+  margin-right: ${({ $after }) => ($after ? "-4px" : "0")};
   transition: background-color 0.3s;
 
   &::after {
     content: "";
     display: block;
     width: 8px;
     height: 8px;
-    border-bottom-left-radius: ${(props) => (props.before ? "0" : "8px")};
-    border-bottom-right-radius: ${(props) => (props.after ? "0" : "8px")};
+    border-bottom-left-radius: ${(props) => (props.$before ? "0" : "8px")};
+    border-bottom-right-radius: ${(props) => (props.$after ? "0" : "8px")};
     background-color: ${({ theme }) => theme.tabBarBg};
   }
 `;