@orangesk/orange-design-system 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/components/Container/tests/Container.unit.test.js

@@ -24,217 +24,212 @@
  *    - Handles array of children
  *    - Handles React elements as children
  */
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
-import Container from '../';
+import { Container } from "../";
 
-describe('Container Component', () => {
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
+describe("Container Component", () => {
+  describe("Rendering", () => {
+    it("should render without crashing", () => {
       const { container } = render(<Container />);
       expect(container.firstChild).toBeInTheDocument();
     });
 
-    it('should render as a div element', () => {
+    it("should render as a div element", () => {
       const { container } = render(<Container />);
-      expect(container.firstChild.tagName).toBe('DIV');
+      expect(container.firstChild.tagName).toBe("DIV");
     });
 
-    it('should have the correct default class', () => {
+    it("should have the correct default class", () => {
       const { container } = render(<Container />);
-      expect(container.firstChild).toHaveClass('container');
+      expect(container.firstChild).toHaveClass("container");
     });
 
-    it('should render children correctly', () => {
-      const testContent = 'Test content';
+    it("should render children correctly", () => {
+      const testContent = "Test content";
       render(<Container>{testContent}</Container>);
       expect(screen.getByText(testContent)).toBeInTheDocument();
     });
 
-    it('should render multiple children', () => {
+    it("should render multiple children", () => {
       render(
         <Container>
           <div>First child</div>
           <p>Second child</p>
           <span>Third child</span>
-        </Container>
+        </Container>,
       );
-      
-      expect(screen.getByText('First child')).toBeInTheDocument();
-      expect(screen.getByText('Second child')).toBeInTheDocument();
-      expect(screen.getByText('Third child')).toBeInTheDocument();
+
+      expect(screen.getByText("First child")).toBeInTheDocument();
+      expect(screen.getByText("Second child")).toBeInTheDocument();
+      expect(screen.getByText("Third child")).toBeInTheDocument();
     });
 
-    it('should render empty children gracefully', () => {
+    it("should render empty children gracefully", () => {
       const { container } = render(<Container>{}</Container>);
       expect(container.firstChild).toBeInTheDocument();
-      expect(container.firstChild).toHaveClass('container');
+      expect(container.firstChild).toHaveClass("container");
     });
 
-    it('should render null children gracefully', () => {
+    it("should render null children gracefully", () => {
       const { container } = render(<Container>{null}</Container>);
       expect(container.firstChild).toBeInTheDocument();
-      expect(container.firstChild).toHaveClass('container');
+      expect(container.firstChild).toHaveClass("container");
     });
 
-    it('should render undefined children gracefully', () => {
+    it("should render undefined children gracefully", () => {
       const { container } = render(<Container>{undefined}</Container>);
       expect(container.firstChild).toBeInTheDocument();
-      expect(container.firstChild).toHaveClass('container');
+      expect(container.firstChild).toHaveClass("container");
     });
   });
 
-  describe('CSS Classes', () => {
-    it('should apply custom className in addition to default class', () => {
+  describe("CSS Classes", () => {
+    it("should apply custom className in addition to default class", () => {
       const { container } = render(<Container className="custom-class" />);
       const element = container.firstChild;
-      
-      expect(element).toHaveClass('container');
-      expect(element).toHaveClass('custom-class');
+
+      expect(element).toHaveClass("container");
+      expect(element).toHaveClass("custom-class");
     });
 
-    it('should handle multiple custom classes', () => {
+    it("should handle multiple custom classes", () => {
       const { container } = render(
-        <Container className="class1 class2 class3" />
+        <Container className="class1 class2 class3" />,
       );
       const element = container.firstChild;
-      
-      expect(element).toHaveClass('container');
-      expect(element).toHaveClass('class1');
-      expect(element).toHaveClass('class2');
-      expect(element).toHaveClass('class3');
+
+      expect(element).toHaveClass("container");
+      expect(element).toHaveClass("class1");
+      expect(element).toHaveClass("class2");
+      expect(element).toHaveClass("class3");
     });
 
-    it('should handle empty className', () => {
+    it("should handle empty className", () => {
       const { container } = render(<Container className="" />);
       const element = container.firstChild;
-      
-      expect(element).toHaveClass('container');
+
+      expect(element).toHaveClass("container");
     });
 
-    it('should handle whitespace-only className', () => {
+    it("should handle whitespace-only className", () => {
       const { container } = render(<Container className="   " />);
       const element = container.firstChild;
-      
-      expect(element).toHaveClass('container');
+
+      expect(element).toHaveClass("container");
     });
 
-    it('should handle className with special characters', () => {
+    it("should handle className with special characters", () => {
       const { container } = render(
-        <Container className="class-with-dash class_with_underscore" />
+        <Container className="class-with-dash class_with_underscore" />,
       );
       const element = container.firstChild;
-      
-      expect(element).toHaveClass('container');
-      expect(element).toHaveClass('class-with-dash');
-      expect(element).toHaveClass('class_with_underscore');
+
+      expect(element).toHaveClass("container");
+      expect(element).toHaveClass("class-with-dash");
+      expect(element).toHaveClass("class_with_underscore");
     });
   });
 
-  describe('Props Forwarding', () => {
-    it('should forward HTML attributes', () => {
+  describe("Props Forwarding", () => {
+    it("should forward HTML attributes", () => {
       const { container } = render(
-        <Container 
+        <Container
           id="test-id"
           data-testid="container"
           title="Test container"
-        />
+        />,
       );
       const element = container.firstChild;
-      
-      expect(element).toHaveAttribute('id', 'test-id');
-      expect(element).toHaveAttribute('data-testid', 'container');
-      expect(element).toHaveAttribute('title', 'Test container');
-    });
 
-    it('should forward style prop', () => {
-      const customStyle = { backgroundColor: 'red', color: 'white' };
-      const { container } = render(<Container style={customStyle} />);
-      const element = container.firstChild;
-      
-      expect(element).toHaveStyle('background-color: red');
-      expect(element).toHaveStyle('color: white');
+      expect(element).toHaveAttribute("id", "test-id");
+      expect(element).toHaveAttribute("data-testid", "container");
+      expect(element).toHaveAttribute("title", "Test container");
     });
 
-    it('should forward event handlers', async () => {
+    it("should forward event handlers", async () => {
       const user = userEvent.setup();
       const handleClick = jest.fn();
       const handleMouseEnter = jest.fn();
-      
+
       render(
-        <Container 
+        <Container
           onClick={handleClick}
           onMouseEnter={handleMouseEnter}
           data-testid="container"
-        />
+        />,
       );
-      
-      const container = screen.getByTestId('container');
-      
+
+      const container = screen.getByTestId("container");
+
       await user.click(container);
       expect(handleClick).toHaveBeenCalledTimes(1);
-      
+
       // Reset mock before testing mouseEnter
       handleMouseEnter.mockClear();
       fireEvent.mouseEnter(container);
       expect(handleMouseEnter).toHaveBeenCalledTimes(1);
     });
 
-    it('should forward ref correctly', () => {
+    it("should forward ref correctly", () => {
       const ref = React.createRef();
       render(<Container ref={ref} />);
-      
+
       expect(ref.current).toBeInstanceOf(HTMLDivElement);
-      expect(ref.current).toHaveClass('container');
+      expect(ref.current).toHaveClass("container");
     });
 
-    it('should forward all standard HTML div props', () => {
+    it("should forward all standard HTML div props", () => {
       const { container } = render(
-        <Container 
+        <Container
           id="test"
           className="custom"
-          style={{ color: 'red' }}
+          style={{ color: "red" }}
           onClick={() => {}}
           onFocus={() => {}}
           onBlur={() => {}}
           tabIndex={0}
           role="main"
           aria-label="Main content"
-        />
+        />,
       );
       const element = container.firstChild;
-      
-      expect(element).toHaveAttribute('id', 'test');
-      expect(element).toHaveAttribute('tabindex', '0');
-      expect(element).toHaveAttribute('role', 'main');
-      expect(element).toHaveAttribute('aria-label', 'Main content');
+
+      expect(element).toHaveAttribute("id", "test");
+      expect(element).toHaveAttribute("tabindex", "0");
+      expect(element).toHaveAttribute("role", "main");
+      expect(element).toHaveAttribute("aria-label", "Main content");
     });
   });
 
-  describe('Component Behavior', () => {
-    it('should maintain displayName', () => {
-      expect(Container.displayName).toBe('Container');
+  describe("Component Behavior", () => {
+    it("should maintain displayName", () => {
+      expect(Container.displayName).toBe("Container");
     });
 
-    it('should work with React.memo if wrapped', () => {
+    it("should work with React.memo if wrapped", () => {
       const MemoizedContainer = React.memo(Container);
       const { container } = render(<MemoizedContainer />);
-      
+
       expect(container.firstChild).toBeInTheDocument();
-      expect(container.firstChild).toHaveClass('container');
+      expect(container.firstChild).toHaveClass("container");
     });
 
-    it('should handle complex nested structures', () => {
+    it("should handle complex nested structures", () => {
       render(
         <Container>
           <header>
             <h1>Title</h1>
             <nav>
               <ul>
-                <li><a href="#home">Home</a></li>
-                <li><a href="#about">About</a></li>
+                <li>
+                  <a href="#home">Home</a>
+                </li>
+                <li>
+                  <a href="#about">About</a>
+                </li>
               </ul>
             </nav>
           </header>
@@ -244,77 +239,73 @@ describe('Container Component', () => {
               <p>Content</p>
             </section>
           </main>
-        </Container>
+        </Container>,
       );
-      
-      expect(screen.getByText('Title')).toBeInTheDocument();
-      expect(screen.getByText('Home')).toBeInTheDocument();
-      expect(screen.getByText('About')).toBeInTheDocument();
-      expect(screen.getByText('Section')).toBeInTheDocument();
-      expect(screen.getByText('Content')).toBeInTheDocument();
+
+      expect(screen.getByText("Title")).toBeInTheDocument();
+      expect(screen.getByText("Home")).toBeInTheDocument();
+      expect(screen.getByText("About")).toBeInTheDocument();
+      expect(screen.getByText("Section")).toBeInTheDocument();
+      expect(screen.getByText("Content")).toBeInTheDocument();
     });
 
-    it('should handle conditional rendering of children', () => {
+    it("should handle conditional rendering of children", () => {
       const shouldRender = true;
       const { rerender } = render(
-        <Container>
-          {shouldRender && <div>Conditional content</div>}
-        </Container>
+        <Container>{shouldRender && <div>Conditional content</div>}</Container>,
       );
-      
-      expect(screen.getByText('Conditional content')).toBeInTheDocument();
-      
+
+      expect(screen.getByText("Conditional content")).toBeInTheDocument();
+
       rerender(
-        <Container>
-          {false && <div>Conditional content</div>}
-        </Container>
+        <Container>{false && <div>Conditional content</div>}</Container>,
       );
-      
-      expect(screen.queryByText('Conditional content')).not.toBeInTheDocument();
+
+      expect(screen.queryByText("Conditional content")).not.toBeInTheDocument();
     });
   });
 
-  describe('Edge Cases', () => {
-    it('should handle very long className', () => {
-      const longClassName = 'a'.repeat(1000);
+  describe("Edge Cases", () => {
+    it("should handle very long className", () => {
+      const longClassName = "a".repeat(1000);
       const { container } = render(<Container className={longClassName} />);
       const element = container.firstChild;
-      
-      expect(element).toHaveClass('container');
+
+      expect(element).toHaveClass("container");
       expect(element).toHaveClass(longClassName);
     });
 
-    it('should handle className with numbers', () => {
+    it("should handle className with numbers", () => {
       const { container } = render(<Container className="class123 456class" />);
       const element = container.firstChild;
-      
-      expect(element).toHaveClass('container');
-      expect(element).toHaveClass('class123');
-      expect(element).toHaveClass('456class');
+
+      expect(element).toHaveClass("container");
+      expect(element).toHaveClass("class123");
+      expect(element).toHaveClass("456class");
     });
 
-    it('should handle array as children', () => {
+    it("should handle array as children", () => {
       const childrenArray = [
         <div key="1">Array child 1</div>,
-        <div key="2">Array child 2</div>
+        <div key="2">Array child 2</div>,
       ];
-      
+
       render(<Container>{childrenArray}</Container>);
-      
-      expect(screen.getByText('Array child 1')).toBeInTheDocument();
-      expect(screen.getByText('Array child 2')).toBeInTheDocument();
+
+      expect(screen.getByText("Array child 1")).toBeInTheDocument();
+      expect(screen.getByText("Array child 2")).toBeInTheDocument();
     });
 
-    it('should handle React elements as children', () => {
+    it("should handle React elements as children", () => {
       const ChildComponent = () => <div>React component child</div>;
-      
+
       render(
         <Container>
           <ChildComponent />
-        </Container>
+        </Container>,
       );
-      
-      expect(screen.getByText('React component child')).toBeInTheDocument();
+
+      expect(screen.getByText("React component child")).toBeInTheDocument();
     });
   });
 });