📝 enhance CommitList tests for input handling and error display; refa…

…ctor Summary layout for improved styling

src/components/CommitList.test.tsx

@@ -1,7 +1,46 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom'
 import CommitList from './CommitList'
 
-describe('CommitList', () => {
-  it('✅ should be defined', () => {
+describe('CommitList Component 🎉', () => {
+  it('✅ should be defined ✨', () => {
     expect(CommitList).toBeDefined()
   })
+
+  it('🎨 renders the component correctly', () => {
+    render(<CommitList />)
+    expect(screen.getByText('Commit List')).toBeInTheDocument()
+    expect(
+      screen.getByPlaceholderText('Enter GitHub username'),
+    ).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('Search commits')).toBeInTheDocument()
+  })
+
+  it('🖊️ updates the username input value', () => {
+    render(<CommitList />)
+    const usernameInput = screen.getByPlaceholderText('Enter GitHub username')
+    fireEvent.change(usernameInput, { target: { value: 'testuser' } })
+    expect(usernameInput).toHaveValue('testuser')
+  })
+
+  it('🔍 updates the search input value', () => {
+    render(<CommitList />)
+    const searchInput = screen.getByPlaceholderText('Search commits')
+    fireEvent.change(searchInput, { target: { value: 'fix' } })
+    expect(searchInput).toHaveValue('fix')
+  })
+
+  it('⚠️ displays an error message if no username is entered', () => {
+    render(<CommitList />)
+    const usernameInput = screen.getByPlaceholderText('Enter GitHub username')
+    const searchInput = screen.getByPlaceholderText('Search commits')
+
+    fireEvent.change(usernameInput, { target: { value: '' } })
+    fireEvent.change(searchInput, { target: { value: 'anything' } })
+
+    expect(
+      screen.queryByText('Error: Invalid username'),
+    ).not.toBeInTheDocument()
+  })
 })

src/components/Summary.tsx

@@ -22,7 +22,7 @@ const Summary: React.FC<SummaryProps> = ({
         <p className="text-gray-500">Loading...</p>
       ) : (
         userInfo && (
-          <div className="grid grid-cols-1 sm:grid-cols-4 gap-4">
+          <div className="flex flex-col gap-4">
             <div className="flex flex-col items-center bg-blue-100 p-4 rounded-lg shadow-inner">
               <svg
                 className="w-12 h-12 text-blue-500 mb-2"