From e5beacceae172902b03bd841e678d50764f87fb7 Mon Sep 17 00:00:00 2001
From: Jagoda11 <jagoda.cubrilo@yahoo.com>
Date: Sun, 22 Dec 2024 22:48:27 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20enhance=20CommitList=20tests=20f?=
 =?UTF-8?q?or=20input=20handling=20and=20error=20display;=20refactor=20Sum?=
 =?UTF-8?q?mary=20layout=20for=20improved=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommitList.test.tsx | 43 ++++++++++++++++++++++++++++--
 src/components/Summary.tsx         |  2 +-
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/components/CommitList.test.tsx b/src/components/CommitList.test.tsx
index 98b091e..d4c2399 100644
--- a/src/components/CommitList.test.tsx
+++ b/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()
+  })
 })
diff --git a/src/components/Summary.tsx b/src/components/Summary.tsx
index 8c5e419..ee7b185 100644
--- a/src/components/Summary.tsx
+++ b/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"