Merge branch 'tests'

Dodanie testów jednostkowych dla komponentów.

Author: gmaxsoft

package-lock.json

@@ -9,7 +9,9 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:ui": "vitest --ui"
   },
   "dependencies": {
     "@supabase/supabase-js": "^2.89.0",
@@ -20,6 +22,9 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
@@ -30,6 +35,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "jsdom": "^27.4.0",
     "postcss": "^8.5.6",
     "supabase": "^2.70.5",
     "tailwindcss": "^3.4.19",

package.json

@@ -0,0 +1,66 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import Login from './Login'
+
+// Mock auth store
+vi.mock('../store/authStore', () => ({
+  useAuthStore: vi.fn(() => ({
+    signIn: vi.fn().mockResolvedValue({ error: null }),
+  })),
+}))
+
+describe('Login', () => {
+  const mockOnSwitchToRegister = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders login form', () => {
+    render(<Login onSwitchToRegister={mockOnSwitchToRegister} />)
+
+    expect(screen.getByText('Menadżer Zadań')).toBeInTheDocument()
+    expect(screen.getByText('Zaloguj się do swojego konta')).toBeInTheDocument()
+    expect(screen.getByLabelText(/Email/)).toBeInTheDocument()
+    expect(screen.getByLabelText(/Hasło/)).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Zaloguj się/ })).toBeInTheDocument()
+  })
+
+  it('calls onSwitchToRegister when register link is clicked', () => {
+    render(<Login onSwitchToRegister={mockOnSwitchToRegister} />)
+
+    const registerButton = screen.getByRole('button', { name: /Zarejestruj się/ })
+    fireEvent.click(registerButton)
+
+    expect(mockOnSwitchToRegister).toHaveBeenCalledTimes(1)
+  })
+
+  it('updates email and password inputs', () => {
+    render(<Login onSwitchToRegister={mockOnSwitchToRegister} />)
+
+    const emailInput = screen.getByLabelText(/Email/)
+    const passwordInput = screen.getByLabelText(/Hasło/)
+
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } })
+    fireEvent.change(passwordInput, { target: { value: 'password123' } })
+
+    expect(emailInput).toHaveValue('test@example.com')
+    expect(passwordInput).toHaveValue('password123')
+  })
+
+  it('submits form when button is clicked', () => {
+    render(<Login onSwitchToRegister={mockOnSwitchToRegister} />)
+
+    const emailInput = screen.getByLabelText(/Email/)
+    const passwordInput = screen.getByLabelText(/Hasło/)
+    const submitButton = screen.getByRole('button', { name: /Zaloguj się/ })
+
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } })
+    fireEvent.change(passwordInput, { target: { value: 'password123' } })
+    fireEvent.click(submitButton)
+
+    // Form submission is handled by component, mock prevents actual API call
+    expect(emailInput).toHaveValue('test@example.com')
+    expect(passwordInput).toHaveValue('password123')
+  })
+})

src/components/Login.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import Register from './Register'
+
+// Mock auth store
+const mockSignUp = vi.fn()
+vi.mock('../store/authStore', () => ({
+  useAuthStore: vi.fn(() => ({
+    signUp: mockSignUp,
+  })),
+}))
+
+describe('Register', () => {
+  const mockOnSwitchToLogin = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders registration form', () => {
+    render(<Register onSwitchToLogin={mockOnSwitchToLogin} />)
+
+    expect(screen.getByText('IT Task Manager')).toBeInTheDocument()
+    expect(screen.getByText('Utwórz nowe konto')).toBeInTheDocument()
+    expect(screen.getByLabelText(/Imię i nazwisko/)).toBeInTheDocument()
+    expect(screen.getByLabelText(/Email/)).toBeInTheDocument()
+    expect(screen.getByLabelText(/^Hasło$/)).toBeInTheDocument()
+    expect(screen.getByLabelText(/Potwierdź hasło/)).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Zarejestruj się/ })).toBeInTheDocument()
+  })
+
+  it('calls onSwitchToLogin when login link is clicked', () => {
+    render(<Register onSwitchToLogin={mockOnSwitchToLogin} />)
+
+    const loginButton = screen.getByRole('button', { name: /Zaloguj się/ })
+    fireEvent.click(loginButton)
+
+    expect(mockOnSwitchToLogin).toHaveBeenCalledTimes(1)
+  })
+
+  it('updates form inputs', () => {
+    render(<Register onSwitchToLogin={mockOnSwitchToLogin} />)
+
+    const nameInput = screen.getByLabelText(/Imię i nazwisko/)
+    const emailInput = screen.getByLabelText(/Email/)
+    const passwordInput = screen.getByLabelText(/^Hasło$/)
+    const confirmPasswordInput = screen.getByLabelText(/Potwierdź hasło/)
+
+    fireEvent.change(nameInput, { target: { value: 'Jan Kowalski' } })
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } })
+    fireEvent.change(passwordInput, { target: { value: 'password123' } })
+    fireEvent.change(confirmPasswordInput, { target: { value: 'password123' } })
+
+    expect(nameInput).toHaveValue('Jan Kowalski')
+    expect(emailInput).toHaveValue('test@example.com')
+    expect(passwordInput).toHaveValue('password123')
+    expect(confirmPasswordInput).toHaveValue('password123')
+  })
+
+  it('validates password confirmation', () => {
+    render(<Register onSwitchToLogin={mockOnSwitchToLogin} />)
+
+    const passwordInput = screen.getByLabelText(/^Hasło$/)
+    const confirmPasswordInput = screen.getByLabelText(/Potwierdź hasło/)
+
+    fireEvent.change(passwordInput, { target: { value: 'password123' } })
+    fireEvent.change(confirmPasswordInput, { target: { value: 'different' } })
+
+    expect(passwordInput).toHaveValue('password123')
+    expect(confirmPasswordInput).toHaveValue('different')
+  })
+
+  it('validates password length', () => {
+    render(<Register onSwitchToLogin={mockOnSwitchToLogin} />)
+
+    const passwordInput = screen.getByLabelText(/^Hasło$/)
+
+    fireEvent.change(passwordInput, { target: { value: '123' } })
+
+    expect(passwordInput).toHaveValue('123')
+  })
+
+  it('submits form when all fields are filled', () => {
+    render(<Register onSwitchToLogin={mockOnSwitchToLogin} />)
+
+    const nameInput = screen.getByLabelText(/Imię i nazwisko/)
+    const emailInput = screen.getByLabelText(/Email/)
+    const passwordInput = screen.getByLabelText(/^Hasło$/)
+    const confirmPasswordInput = screen.getByLabelText(/Potwierdź hasło/)
+    const termsCheckbox = screen.getByLabelText(/Akceptuję/)
+    const submitButton = screen.getByRole('button', { name: /Zarejestruj się/ })
+
+    fireEvent.change(nameInput, { target: { value: 'Jan Kowalski' } })
+    fireEvent.change(emailInput, { target: { value: 'test@example.com' } })
+    fireEvent.change(passwordInput, { target: { value: 'password123' } })
+    fireEvent.change(confirmPasswordInput, { target: { value: 'password123' } })
+    fireEvent.click(termsCheckbox)
+    fireEvent.click(submitButton)
+
+    // Form submission is handled by component, mock prevents actual API call
+    expect(nameInput).toHaveValue('Jan Kowalski')
+    expect(emailInput).toHaveValue('test@example.com')
+  })
+})

src/components/Register.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import Contact from './Contact'
+
+describe('Contact', () => {
+  it('renders contact title', () => {
+    render(<Contact />)
+
+    expect(screen.getByText('Kontakt')).toBeInTheDocument()
+  })
+
+  it('renders contact content', () => {
+    render(<Contact />)
+
+    expect(screen.getByText('Skontaktuj się z nami')).toBeInTheDocument()
+  })
+
+  it('renders contact information', () => {
+    render(<Contact />)
+
+    expect(screen.getByText('Email')).toBeInTheDocument()
+    expect(screen.getByText('biuro@maxsoft.pl')).toBeInTheDocument()
+    expect(screen.getByText('Telefon')).toBeInTheDocument()
+    expect(screen.getByText('+48791821908')).toBeInTheDocument()
+    expect(screen.getByText('Godziny pracy')).toBeInTheDocument()
+  })
+
+  it('renders warning message', () => {
+    render(<Contact />)
+
+    expect(screen.getByText(/W przypadku problemów technicznych/)).toBeInTheDocument()
+  })
+})

src/components/contact/Contact.test.tsx

@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import Help from './Help'
+
+describe('Help', () => {
+  it('renders help title', () => {
+    render(<Help />)
+
+    expect(screen.getByText('Pomoc')).toBeInTheDocument()
+  })
+
+  it('renders help content', () => {
+    render(<Help />)
+
+    expect(screen.getByText('Jak korzystać z aplikacji')).toBeInTheDocument()
+    expect(screen.getByText('Zarządzanie zadaniami')).toBeInTheDocument()
+    expect(screen.getByText('Zarządzanie użytkownikami (tylko administratorzy)')).toBeInTheDocument()
+  })
+
+  it('renders help sections', () => {
+    render(<Help />)
+
+    expect(screen.getByText(/Przejdź do sekcji "Zadania"/)).toBeInTheDocument()
+    expect(screen.getByText(/Użyj przycisku "Dodaj zadanie"/)).toBeInTheDocument()
+    expect(screen.getByText(/Dashboard/)).toBeInTheDocument()
+  })
+})

src/components/help/Help.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import Footer from './Footer'
+
+// Mock useNavigation hook
+const mockSetCurrentView = vi.fn()
+vi.mock('../../context/NavigationContext', () => ({
+  useNavigation: () => ({
+    setCurrentView: mockSetCurrentView,
+  }),
+}))
+
+describe('Footer', () => {
+  it('renders copyright text', () => {
+    render(<Footer />)
+    expect(screen.getByText(/© \d{4} Menadżer Zadań/)).toBeInTheDocument()
+  })
+
+  it('renders Pomoc button', () => {
+    render(<Footer />)
+    const helpButton = screen.getByRole('button', { name: /Pomoc/i })
+    expect(helpButton).toBeInTheDocument()
+  })
+
+  it('renders Kontakt button', () => {
+    render(<Footer />)
+    const contactButton = screen.getByRole('button', { name: /Kontakt/i })
+    expect(contactButton).toBeInTheDocument()
+  })
+
+  it('calls setCurrentView when Pomoc button is clicked', () => {
+    render(<Footer />)
+    const helpButton = screen.getByRole('button', { name: /Pomoc/i })
+    helpButton.click()
+    expect(mockSetCurrentView).toHaveBeenCalledWith('help')
+  })
+
+  it('calls setCurrentView when Kontakt button is clicked', () => {
+    render(<Footer />)
+    const contactButton = screen.getByRole('button', { name: /Kontakt/i })
+    contactButton.click()
+    expect(mockSetCurrentView).toHaveBeenCalledWith('contact')
+  })
+})

src/components/layout/Footer.test.tsx

@@ -0,0 +1,72 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+import Settings from './Settings'
+
+// Mock child components
+vi.mock('./TaskTable', () => ({
+  default: () => <div data-testid="task-table">TaskTable Component</div>,
+}))
+
+vi.mock('./AddTask', () => ({
+  default: ({ onSuccess }: { onSuccess: () => void }) => (
+    <div data-testid="add-task">
+      AddTask Component
+      <button onClick={onSuccess} data-testid="add-task-success">Success</button>
+    </div>
+  ),
+}))
+
+describe('Settings', () => {
+  it('renders with default active tab as list', () => {
+    render(<Settings />)
+
+    expect(screen.getByText('Zadania')).toBeInTheDocument()
+    expect(screen.getByText('Lista zadań')).toBeInTheDocument()
+    expect(screen.getByText('Dodaj zadanie')).toBeInTheDocument()
+    expect(screen.getByTestId('task-table')).toBeInTheDocument()
+  })
+
+  it('switches to add task tab when clicked', () => {
+    render(<Settings />)
+
+    const addTaskTab = screen.getByRole('button', { name: /Dodaj zadanie/ })
+    fireEvent.click(addTaskTab)
+
+    expect(screen.getByTestId('add-task')).toBeInTheDocument()
+    expect(screen.queryByTestId('task-table')).not.toBeInTheDocument()
+  })
+
+  it('switches back to list tab when success callback is called', () => {
+    render(<Settings />)
+
+    // Switch to add task
+    const addTaskTab = screen.getByRole('button', { name: /Dodaj zadanie/ })
+    fireEvent.click(addTaskTab)
+
+    expect(screen.getByTestId('add-task')).toBeInTheDocument()
+
+    // Trigger success callback
+    const successButton = screen.getByTestId('add-task-success')
+    fireEvent.click(successButton)
+
+    expect(screen.getByTestId('task-table')).toBeInTheDocument()
+    expect(screen.queryByTestId('add-task')).not.toBeInTheDocument()
+  })
+
+  it('applies active styles to current tab', () => {
+    render(<Settings />)
+
+    const listTab = screen.getByRole('button', { name: /Lista zadań/ })
+    const addTab = screen.getByRole('button', { name: /Dodaj zadanie/ })
+
+    // List tab should be active by default
+    expect(listTab).toHaveClass('border-indigo-500', 'text-indigo-600')
+    expect(addTab).toHaveClass('border-transparent', 'text-gray-500')
+
+    // Switch to add tab
+    fireEvent.click(addTab)
+
+    expect(addTab).toHaveClass('border-indigo-500', 'text-indigo-600')
+    expect(listTab).toHaveClass('border-transparent', 'text-gray-500')
+  })
+})