Reapply "Merge pull request #1 from monikMononoke/feature/laboratorio…

.gitignore

@@ -8,3 +8,4 @@ junit.xml
 *.orig
 .awcache
 public
+./package-lock.json

README.md

@@ -1 +1,52 @@
 TESTING LABORATORY - LEMONCODE MASTER FRONT END
+
+# First steps
+
+- Create remote repository in GitHub
+- Clone repository in local machine
+- Create a branch for your work
+
+## Installation and testing commands
+
+- Install dependencies: `npm install`
+- Run tests: `npm test`
+
+## TODO
+
+1. Add test to the mapper `./src/pods/project/project.mapper.ts`
+
+2. Add test to the component `./src/common/components/confirmation-dialog/confirmation-dialog.component.tsx`
+
+3. Add test to hook: `./src/common/components/confirmation-dialog/confirmation-dialog.hook.ts`
+
+### What to test in the mapper `./src/pods/project/project.mapper.ts`
+
+- When the input is null or undefined, the output is an empty project.
+- When the input has employees, they are correctly mapped to the output project.
+- The fn createEmptyProject is called when the input is null or undefined.
+- The fn createEmptyProject is not called when the input has employees.
+- Return a project with empty employees when the input project has no employees.
+- The output project is correctly mapped from the input project, when data is provided.
+
+### What to test in the component `./src/common/components/confirmation-dialog/confirmation-dialog.component.tsx`
+
+First we need to install the user-event library to simulate user interactions in our tests:
+
+```bash
+npm install --save-dev @testing-library/user-event
+```
+
+- Check if there is a button with the text "Confirm" in the component.
+- Check if there is a button with the text "Cancel" in the component.
+- Check if the confirm button calls the onConfirm function when clicked.
+- Check if the cancel button calls the onCancel function when clicked.
+- Check if the title and message props are rendered correctly in the component.
+
+### What to test in hook: `./src/common/components/confirmation-dialog/confirmation-dialog.hook.ts`
+
+- Check if the hook returns the expected default state values when initialized.
+- Check if isOpen and itemToDelete are updated correctly when onOpenDialog is called with an item.
+- Check if isOpen is set to false when onClose is called.
+- Check if itemToDelete is reset when there is a sequence of onOpenDialog and onAccept calls (with updated item).
+- Check if itemToDelete is set to default value when onAccept is called.
+- Check if isOpen is set to true and itemToDelete is updated when onOpenDialog is called.

package.json

@@ -46,6 +46,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",
     "@vitejs/plugin-react": "^4.4.1",

src/common/components/confirmation-dialog/confirmation-dialog.hook.spec.ts

@@ -0,0 +1,92 @@
+import { useConfirmationDialog } from './confirmation-dialog.hook';
+import { Lookup, createEmptyLookup } from '#common/models';
+import { renderHook, act } from '@testing-library/react';
+
+describe('useConfirmationDialog', () => {
+  it('Should initialize with default values', () => {
+    // Arrange
+
+    // Act
+    const { result } = renderHook(() => useConfirmationDialog());
+
+    // Assert
+    expect(result.current.isOpen).toBe(false);
+    expect(result.current.itemToDelete).toEqual(createEmptyLookup());
+  });
+
+  it("Should set isOpen to true and itemToDelete to it's new value when onOpenDialog is called", () => {
+    // Arrange
+
+    // Act
+    const { result } = renderHook(() => useConfirmationDialog());
+    const newValue: Lookup = { id: '1', name: 'Item 1' };
+
+    act(() => {
+      result.current.onOpenDialog(newValue);
+    });
+
+    // Assert
+    expect(result.current.isOpen).toBe(true);
+    expect(result.current.itemToDelete).toEqual(newValue);
+  });
+
+  it('Should set isOpen to false when onClose is called', () => {
+    // Arrange
+    const { result } = renderHook(() => useConfirmationDialog());
+
+    // Act
+    act(() => {
+      result.current.onClose();
+    });
+
+    // Assert
+    expect(result.current.isOpen).toBe(false);
+  });
+
+  it('Should reset itemToDelete when onAccept is called (with updated item)', () => {
+    // Arrange
+
+    // Act
+    const { result } = renderHook(() => useConfirmationDialog());
+    const item: Lookup = { id: '1', name: 'Item 1' };
+
+    act(() => {
+      result.current.onOpenDialog(item);
+    });
+
+    act(() => {
+      result.current.onAccept();
+    });
+
+    // Assert
+    expect(result.current.itemToDelete).toEqual(createEmptyLookup());
+  });
+
+  it('Should set the current itemToDelete to default value when onAccept is called', () => {
+    // Arrange
+    const { result } = renderHook(() => useConfirmationDialog());
+
+    // Act
+    act(() => {
+      result.current.onAccept();
+    });
+
+    // Assert
+    expect(result.current.itemToDelete).toEqual(createEmptyLookup());
+  });
+
+  it('Should set isOpen to true and itemToDelete when onOpenDialog is called', () => {
+    // Arrange
+    const { result } = renderHook(() => useConfirmationDialog());
+    const item: Lookup = { id: '1', name: 'Item 1' };
+
+    // Act
+    act(() => {
+      result.current.onOpenDialog(item);
+    });
+
+    // Assert
+    expect(result.current.isOpen).toBe(true);
+    expect(result.current.itemToDelete).toEqual(item);
+  });
+});

src/common/components/confirmation-dialog/confirmation-dialog.spec.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ConfirmationDialogComponent } from './confirmation-dialog.component';
+
+const props: React.ComponentProps<typeof ConfirmationDialogComponent> = {
+  isOpen: true,
+  onAccept: vi.fn(),
+  onClose: vi.fn(),
+  title: 'Confirmation',
+  labels: {
+    closeButton: 'Close',
+    acceptButton: 'Accept',
+  },
+  children: <p>Are you sure?</p>,
+};
+
+describe('ConfirmationDialog', () => {
+  it('Should display a button with text "Accept" ', () => {
+    // Arrange
+
+    // Act
+    render(<ConfirmationDialogComponent {...props} />);
+
+    const acceptButton = screen.getByRole('button', { name: 'Accept' });
+
+    // Assert
+    expect(acceptButton).toBeInTheDocument();
+  });
+
+  it('Should display a button with text "Close"', () => {
+    // Arrange
+
+    // Act
+    render(<ConfirmationDialogComponent {...props} />);
+
+    const closeButton = screen.getByRole('button', { name: 'Close' });
+
+    // Assert
+    expect(closeButton).toBeInTheDocument();
+  });
+
+  it('Should call onAccept when the "Accept" button is clicked', async () => {
+    // Arrange
+
+    render(<ConfirmationDialogComponent {...props} />);
+
+    const acceptButton = screen.getByRole('button', { name: 'Accept' });
+
+    // Act
+    await userEvent.click(acceptButton);
+
+    // Assert
+    expect(props.onAccept).toHaveBeenCalled();
+  });
+
+  it('Should call onClose when the "Close" button is clicked', async () => {
+    // Arrange
+    render(<ConfirmationDialogComponent {...props} />);
+
+    const closeButton = screen.getByRole('button', { name: 'Close' });
+
+    // Act
+    await userEvent.click(closeButton);
+
+    // Assert
+    expect(props.onClose).toHaveBeenCalled();
+  });
+
+  it('Should render title and message passed as props', () => {
+    // Arrange
+    const customProps = {
+      ...props,
+      title: 'Custom Title',
+      children: <p>Custom Message</p>,
+    };
+
+    // Act
+    render(<ConfirmationDialogComponent {...customProps} />);
+
+    const title = screen.getByText('Custom Title');
+    const message = screen.getByText('Custom Message');
+
+    // Assert
+    expect(title).toBeInTheDocument();
+    expect(message).toBeInTheDocument();
+  });
+});