Fernando Interview

package.json

@@ -1,6 +1,6 @@
 {
   "name": "engineer-interview",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -12,27 +12,28 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-feather": "^2.0.10"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/ui": "^1.4.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
+    "jsdom": "^24.0.0",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
-    "vitest": "^1.4.0",
-    "@vitest/ui": "^1.4.0",
-    "@testing-library/react": "^14.2.1",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/user-event": "^14.5.2",
-    "jsdom": "^24.0.0"
+    "vitest": "^1.4.0"
   }
 }

src/ChallengeComponent.test.tsx

@@ -0,0 +1,60 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import { ChallengeComponent } from './ChallengeComponent';
+import { act } from 'react';
+import userEvent from '@testing-library/user-event';
+describe('TaskColumn', () => {
+    test('renders with correct title and tasks', () => {
+        render(
+            <ChallengeComponent />
+        );
+
+        expect(screen.getByText('To Do')).toBeInTheDocument();
+        expect(screen.getByText('In Progress')).toBeInTheDocument();
+        expect(screen.getByText('Done')).toBeInTheDocument();
+
+        expect(screen.getByText('Mow The lawn')).toBeInTheDocument();
+        expect(screen.getByText('Rake the leaves')).toBeInTheDocument();
+    });
+
+    test('should move tasks between columns', () => {
+        render(
+            <ChallengeComponent />
+        );
+
+        expect(screen.getByTestId('move-left-task-1')).toBeDisabled()
+        fireEvent.click(screen.getByTestId('move-right-task-1'))
+        expect(screen.getByTestId('move-left-task-1')).toBeEnabled()
+        fireEvent.click(screen.getByTestId('move-right-task-1'))
+        expect(screen.getByTestId('move-left-task-1')).toBeEnabled()
+        expect(screen.getByTestId('move-right-task-1')).toBeDisabled()
+
+        expect(screen.getByTestId('move-right-task-3')).toBeDisabled()
+        fireEvent.click(screen.getByTestId('move-left-task-3'))
+        expect(screen.getByTestId('move-right-task-3')).toBeEnabled()
+        fireEvent.click(screen.getByTestId('move-left-task-3'))
+        expect(screen.getByTestId('move-right-task-3')).toBeEnabled()
+        expect(screen.getByTestId('move-left-task-3')).toBeDisabled()
+    });
+
+    test('should add a new task', async () => {
+        const user = userEvent.setup();
+
+        render(
+            <ChallengeComponent />
+        );
+
+        const input = screen.getByRole('textbox', {
+            name: /new task text/i
+        }) as HTMLInputElement;
+
+        await act(async () => {
+            await user.type(input, 'New task');
+            await user.click(screen.getByRole('button', {
+                name: /new task button/i
+            }));
+        })
+
+        expect(screen.getByText(/new task/i)).toBeInTheDocument()
+    });
+});

src/ChallengeComponent.tsx

@@ -1,10 +1,34 @@
+import { TaskColumn } from "./components/TaskColumn";
+import { TaskForm } from "./components/TaskForm";
+import { useTasks } from "./hooks/useTask";
+import { mockedBoard } from "./mocks";
+
 export function ChallengeComponent() {
-  return (
-    <>
-      {/* Delete this h2, and add your own code here. */}
-      <h2 className="text-center py-48 text-xl text-gray-700">
-        Your code goes here
-      </h2>
-    </>
+  const board = mockedBoard;
+  const { tasks, addTask, moveTask } = useTasks({ board })
+
+  const getTasksForColumn = (columnId: string) => {
+    return tasks.filter(task => task.columnId === columnId)
+  }
+
+  return ( 
+    <div className="flex flex-col justify-around p-8">
+      <div className="flex justify-around">
+        {
+          board.columns.map((column, index) => (
+            <TaskColumn 
+              key={column.id} 
+              column={column} 
+              tasks={getTasksForColumn(column.id)} 
+              onMoveTask={moveTask} 
+              isFirstColumn={index === 0}
+              isLastColumn={index === board.columns.length - 1}
+            />
+          ))
+        }
+      </div>
+
+      <TaskForm onAddTask={addTask} />
+    </div>
   );
 }

src/components/TaskCard/TaskCard.test.tsx

@@ -0,0 +1,101 @@
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { TaskCard } from './index';
+import type { Task } from '../../types';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+describe('TaskCard', () => {
+  const mockTask: Task = {
+    id: '1',
+    text: 'Test task',
+    columnId: 'todo',
+    boardId: 'board-1',
+    updatedAt: '2024-01-01T00:00:00Z'
+  };
+
+  const mockOnMoveLeft = vi.fn();
+  const mockOnMoveRight = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('renders task text correctly', () => {
+    render(
+      <TaskCard
+        task={mockTask}
+        onMoveLeft={mockOnMoveLeft}
+        onMoveRight={mockOnMoveRight}
+        isFirstColumn={false}
+        isLastColumn={false}
+      />
+    );
+
+    expect(screen.getByText('Test task')).toBeInTheDocument();
+  });
+
+  test('calls onMoveLeft when left arrow is clicked', () => {
+    render(
+      <TaskCard
+        task={mockTask}
+        onMoveLeft={mockOnMoveLeft}
+        onMoveRight={mockOnMoveRight}
+        isFirstColumn={false}
+        isLastColumn={false}
+      />
+    );
+
+    const leftButton = screen.getByTestId('move-left-1');
+    fireEvent.click(leftButton);
+
+    expect(mockOnMoveLeft).toHaveBeenCalledWith('1');
+    expect(mockOnMoveLeft).toHaveBeenCalledTimes(1);
+  });
+
+  test('calls onMoveRight when right arrow is clicked', () => {
+    render(
+      <TaskCard
+        task={mockTask}
+        onMoveLeft={mockOnMoveLeft}
+        onMoveRight={mockOnMoveRight}
+        isFirstColumn={false}
+        isLastColumn={false}
+      />
+    );
+
+    const rightButton = screen.getByTestId('move-right-1');
+    fireEvent.click(rightButton);
+
+    expect(mockOnMoveRight).toHaveBeenCalledWith('1');
+    expect(mockOnMoveRight).toHaveBeenCalledTimes(1);
+  });
+
+  test('disables left button when isFirstColumn is true', () => {
+    render(
+      <TaskCard
+        task={mockTask}
+        onMoveLeft={mockOnMoveLeft}
+        onMoveRight={mockOnMoveRight}
+        isFirstColumn={true}
+        isLastColumn={false}
+      />
+    );
+
+    const leftButton = screen.getByTestId('move-left-1');
+    expect(leftButton).toBeDisabled();
+  });
+
+  test('disables right button when isLastColumn is true', () => {
+    render(
+      <TaskCard
+        task={mockTask}
+        onMoveLeft={mockOnMoveLeft}
+        onMoveRight={mockOnMoveRight}
+        isFirstColumn={false}
+        isLastColumn={true}
+      />
+    );
+
+    const rightButton = screen.getByTestId('move-right-1');
+    expect(rightButton).toBeDisabled();
+  });
+});

src/components/TaskCard/index.tsx

@@ -0,0 +1,32 @@
+import { Task } from "../../types"
+ import { ArrowLeft, ArrowRight} from 'react-feather';
+
+interface TaskCardProps {
+    task: Task;
+    onMoveLeft: (taskId: string) => void;
+    onMoveRight: (taskId: string) => void;
+    isFirstColumn: boolean;
+    isLastColumn: boolean;
+}
+
+export function TaskCard({ task, onMoveLeft, onMoveRight, isFirstColumn, isLastColumn }: TaskCardProps) {
+    return <div className="p-4 rounded-lg shadow-xl w-full flex justify-between items-center">
+        <button 
+            onClick={() => onMoveLeft(task.id)}
+            disabled={isFirstColumn}
+            className={`rounded-md h-16 w-12 flex justify-center items-center ${isFirstColumn ? "bg-red-disabled" :"bg-red"}`}
+            data-testid={`move-left-${task.id}`}
+        >
+            <ArrowLeft color="white" size={36}/>
+        </button>
+        <p className="text-2xl">{task.text}</p>
+        <button 
+            onClick={() => onMoveRight(task.id)}
+            disabled={isLastColumn}
+            className={`rounded-md h-16 w-12 flex justify-center items-center ${isLastColumn ? "bg-green-disabled" :"bg-green"}`}
+            data-testid={`move-right-${task.id}`}
+        >
+            <ArrowRight color="white" size={36}/>
+        </button>
+    </div>
+}

src/components/TaskColumn/TaskColumn.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { TaskColumn } from './index';
+import type { Task, Column } from '../../types';
+
+describe('TaskColumn', () => {
+  const mockColumn: Column = {
+    id: 'todo',
+    title: 'Todo',
+    order: 0
+  };
+
+  const mockTasks: Task[] = [
+    { id: '1', text: 'Task 1', columnId: 'todo', boardId: 'board-1', updatedAt: '2024-01-01T00:00:00Z' },
+    { id: '2', text: 'Task 2', columnId: 'todo', boardId: 'board-1', updatedAt: '2024-01-01T00:00:00Z' }
+  ];
+
+  const mockOnMoveTask = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('renders with correct title and tasks', () => {
+    render(
+      <TaskColumn
+        column={mockColumn}
+        tasks={mockTasks}
+        onMoveTask={mockOnMoveTask}
+        isFirstColumn={true}
+        isLastColumn={false}
+      />
+    );
+
+    expect(screen.getByText('Todo')).toBeInTheDocument();
+    expect(screen.getByText('Task 1')).toBeInTheDocument();
+    expect(screen.getByText('Task 2')).toBeInTheDocument();
+  });
+});