-
- Todo List App
- Welcome to the ClearPoint frontend technical test. We like to keep things simple, yet clean so your
- task(s) are as follows:
-
-
-
-
Add the ability to add (POST) a Todo Item by calling the backend API
-
- Display (GET) all the current Todo Items in the below grid and display them in any order you wish
-
-
- Bonus points for completing the 'Mark as completed' button code for allowing users to update and mark
- a specific Todo Item as completed and for displaying any relevant validation errors/ messages from the
- API in the UI
-
-
Feel free to add unit tests and refactor the component(s) as best you see fit
-
-
+
-
-
{renderAddTodoItemContent()}
-
-
{renderTodoItemsContent()}
+
+
+
-
+
)
}
diff --git a/Frontend-React/src/App.test.js b/Frontend-React/src/App.test.js
index 1e2077f1..dca209ae 100644
--- a/Frontend-React/src/App.test.js
+++ b/Frontend-React/src/App.test.js
@@ -1,8 +1,33 @@
-import { render, screen } from '@testing-library/react'
-import App from './App'
-
-test('renders the footer text', () => {
- render()
- const footerElement = screen.getByText(/clearpoint.digital/i)
- expect(footerElement).toBeInTheDocument()
-})
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import App from './App';
+
+
+const mock = new MockAdapter(axios);
+
+describe('App Component', () => {
+ beforeEach(() => {
+ mock.reset();
+ });
+
+ test('fetches and displays todo items', async () => {
+ const items = [{ id: 1, description: 'Test Item', isCompleted: false }];
+ mock.onGet('https://localhost:44397/api/TodoItems').reply(200, items);
+
+ render();
+
+ await waitFor(() => expect(screen.getByText(/Test Item/i)).toBeInTheDocument());
+ });
+
+ test('displays an error message on fetch failure', async () => {
+ mock.onGet('https://localhost:44397/api/TodoItems').reply(500);
+
+ render();
+
+ await waitFor(() => expect(screen.getByText(/Failed to fetch Todo items. Please try again./i)).toBeInTheDocument());
+ });
+
+});
\ No newline at end of file
diff --git a/Frontend-React/src/components/addTodoItem.js b/Frontend-React/src/components/addTodoItem.js
new file mode 100644
index 00000000..88e78622
--- /dev/null
+++ b/Frontend-React/src/components/addTodoItem.js
@@ -0,0 +1,68 @@
+import { Container, Row, Col, Form, Button, Stack } from 'react-bootstrap';
+import React, { useState } from 'react';
+import axios from 'axios'
+
+
+const AddTodoItem = ({ getItems, handleErrorMessage }) => {
+
+ const [description, setDescription] = useState('')
+
+ const handleDescriptionChange = (event) => {
+ setDescription(event.target.value)
+ }
+
+ function handleClear() {
+ setDescription('')
+ }
+
+ function generateUUID() {
+ // The template string where 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' will be replaced
+ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+ var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
+ return v.toString(16);
+ });
+ }
+
+ async function handleAdd() {
+ try {
+ const response = await axios.post('https://localhost:44397/api/TodoItems', { id: generateUUID(), description: description, isCompleted: false });
+ if (response.status === 200) {
+ setDescription('');
+ getItems()
+ }
+ } catch (error) {
+ handleErrorMessage(error.response?.data?.message || 'Failed to add Todo item. Please try again.')
+ }
+ }
+
+ return (
+
+
+
+ Todo List App
+ Welcome to the ClearPoint frontend technical test. We like to keep things simple, yet clean so your
+ task(s) are as follows:
+
+
+
+
Add the ability to add (POST) a Todo Item by calling the backend API
+
+ Display (GET) all the current Todo Items in the below grid and display them in any order you wish
+
+
+ Bonus points for completing the 'Mark as completed' button code for allowing users to update and mark
+ a specific Todo Item as completed and for displaying any relevant validation errors/ messages from the
+ API in the UI
+
+
Feel free to add unit tests and refactor the component(s) as best you see fit