Merge pull request #34 from JoseHerminioCollas/main

Add color functionality, refactor, test

.babelrc

@@ -0,0 +1,7 @@
+{
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react",
+      "@babel/preset-typescript"
+    ]
+  }

.gitignore

@@ -1,38 +1,16 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
-.yarn/install-state.gz
 
 # testing
 /coverage
 
-# next.js
-/.next/
-/out/
-
 # production
 /build
 
-# misc
-.DS_Store
-*.pem
-
 # debug
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 # local env files
 .env*.local
 
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
-
 .env

__tests__ /App.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from '../src/App';
+import '@testing-library/jest-dom';
+
+// Test suite for the App component
+describe('App', () => {
+  // Test to check if the Header component is rendered
+  test('renders Header component', () => {
+    render(<App />);
+    expect(screen.getByText(/aaarto/i)).toBeInTheDocument();
+  });
+
+  // Test to check if the Canvas component is rendered with initial props
+  test('renders Canvas component with initial props', () => {
+    render(<App />);
+    const canvasElement = screen.getByTestId('canvas');
+    expect(canvasElement).toHaveAttribute('data-shape', 'circle');
+    expect(canvasElement).toHaveAttribute('data-size', '70');
+    expect(canvasElement).toHaveAttribute('data-color', '#cccccc');
+  });
+
+  // Test to check if the ControlPanel component is rendered with initial props
+  test('renders ControlPanel component with initial props', () => {
+    render(<App />);
+    expect(screen.getByLabelText('Circle')).toBeChecked();
+    expect(screen.getByLabelText('Size')).toHaveValue('70');
+    expect(screen.getByLabelText('Color')).toHaveValue('#cccccc');
+  });
+});

__tests__ /Canvas.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Canvas from '../src/Canvas';
+import '@testing-library/jest-dom';
+
+describe('Canvas', () => {
+  test('renders the canvas with the correct shape, size, and color', () => {
+    render(<Canvas shape="circle" size={70} color="#cccccc" />);
+
+    const canvasElement = screen.getByTestId('canvas');
+    expect(canvasElement).toHaveAttribute('data-shape', 'circle');
+    expect(canvasElement).toHaveAttribute('data-size', '70');
+    expect(canvasElement).toHaveAttribute('data-color', '#cccccc');
+  });
+
+  test('applies the correct styles', () => {
+    render(<Canvas shape="circle" size={70} color="#cccccc" />);
+
+    const canvasElement = screen.getByTestId('canvas');
+
+  });
+});

__tests__ /ControlPanel.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ControlPanel from '../src/ControlPanel';
+
+// Mock props
+const mockSetShape = jest.fn();
+const mockSetSize = jest.fn();
+const mockSetColor = jest.fn();
+
+const defaultProps = {
+    shape: 'circle',
+    setShape: mockSetShape,
+    size: 70,
+    setSize: mockSetSize,
+    color: '#cccccc',
+    setColor: mockSetColor,
+};
+
+describe('ControlPanel', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('renders the ControlPanel component', () => {
+        render(<ControlPanel {...defaultProps} />);
+
+        // Check if the labels are rendered
+        expect(screen.getByLabelText('Circle')).toBeInTheDocument();
+        expect(screen.getByLabelText('Square')).toBeInTheDocument();
+        expect(screen.getByLabelText('Erase')).toBeInTheDocument();
+        expect(screen.getByLabelText('Size')).toBeInTheDocument();
+        expect(screen.getByLabelText('Color')).toBeInTheDocument();
+    });
+
+    test('calls setShape when shape radio buttons are clicked', () => {
+        render(<ControlPanel {...defaultProps} />);
+
+        const squareRadio = screen.getByLabelText('Square');
+        fireEvent.click(squareRadio);
+        expect(mockSetShape).toHaveBeenCalledWith('square');
+
+        const eraseRadio = screen.getByLabelText('Erase');
+        fireEvent.click(eraseRadio);
+        expect(mockSetShape).toHaveBeenCalledWith('erase');
+    });
+
+    test('calls setSize when size slider is changed', () => {
+        render(<ControlPanel {...defaultProps} />);
+
+        const sizeSlider = screen.getByLabelText('Size');
+        fireEvent.change(sizeSlider, { target: { value: '100' } });
+        expect(mockSetSize).toHaveBeenCalledWith(100);
+    });
+
+    test('calls setColor when color input is changed', () => {
+        render(<ControlPanel {...defaultProps} />);
+
+        const colorInput = screen.getByLabelText('Color');
+        fireEvent.change(colorInput, { target: { value: '#ff0000' } });
+        expect(mockSetColor).toHaveBeenCalledWith('#ff0000');
+    });
+
+    test('renders Open Wallet and disabled Create buttons', () => {
+        render(<ControlPanel {...defaultProps} />);
+
+        expect(screen.getByText('Open Wallet')).toBeInTheDocument();
+        expect(screen.getByText('Create')).toBeDisabled();
+    });
+});

__tests__ /Header.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Header from '../src/Header';
+import '@testing-library/jest-dom';
+
+describe('Header', () => {
+  test('renders the header with the correct text', () => {
+    render(<Header />);
+    expect(screen.getByText(/aaarto/i)).toBeInTheDocument();
+  });
+});