feat: todolist component

.github/workflows/node.js.yml

@@ -23,8 +23,15 @@ jobs:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
     - run: npm ci
-    - run: npm run build --if-present
-    - run: npm test
+
+    - name: Build
+      env:
+        CI: false
+      run: npm run build --if-present
+
+    - name: Run tests
+      run: npm test
+
 
     # I don't need CD
     # - name: Deploy 🚀

jest.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+    testEnvironment: 'jsdom', 
+    moduleFileExtensions: ['js', 'jsx', 'json', 'node'],
+    transform: {
+      '^.+\\.(js|jsx)?$': 'babel-jest', 
+    },
+    moduleNameMapper: {
+      '\\.(css|less|scss|sass)$': 'identity-obj-proxy', 
+    },
+    setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'], 
+  };

package.json

@@ -4,8 +4,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
+    "@reduxjs/toolkit": "^1.8.1",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -39,6 +42,19 @@
     ]
   },
   "devDependencies": {
-    "gh-pages": "^6.1.1"
+    "@babel/core": "^7.24.1",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-env": "^7.24.1",
+    "@babel/preset-react": "^7.24.1",
+    "@testing-library/react": "^14.2.1",
+    "babel-jest": "^29.7.0",
+    "gh-pages": "^6.1.1",
+    "jest": "^27.5.1"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
   }
 }

src/App.js

@@ -1,24 +1,11 @@
-import logo from './logo.svg';
 import './App.css';
+import TodoList from './features/todos/TodoList';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <TodoList />
+    </>
   );
 }
 

src/App.test.js

@@ -1,8 +1,28 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import TodoList from './features/todos/TodoList';
 
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+test('renders todo list', () => {
+  render(<TodoList />);
+
+  render(<TodoList />);
+
+  const headingElement = screen.getAllByRole('heading', { name: /todo list/i })[0];
+  expect(headingElement).toBeInTheDocument();
+
+  const inputElement = screen.getByLabelText(/Add to list/i);
+  expect(inputElement).toBeInTheDocument();
+
+  // eslint-disable-next-line testing-library/no-node-access
+  const submitButton = document.getElementsByClassName('submit')[0];
+  expect(submitButton).toBeInTheDocument();
+});
+
+
+test('allows user to type in a new todo', () => {
+  render(<TodoList />);
+
+  const inputElement = screen.getByLabelText(/Add to list/i);
+  fireEvent.change(inputElement, { target: { value: 'New Todo Item' } });
+  expect(inputElement.value).toBe('New Todo Item');
 });

src/features/todos/TodoList.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faTrash, faUpload } from '@fortawesome/free-solid-svg-icons'
+import { useState } from 'react'
+
+const TodoList = () => {
+    const [ newTodo, setNewTodo ] = useState('')
+
+    const handleSubmit = (e)=> {
+        e.preventDefault()
+        //addTodo
+        setNewTodo('')
+    }
+
+    const newItemSection = 
+    <form onSubmit={handleSubmit}>
+        <label htmlFor="new-todo">Add to list</label>
+        <div className="new-todo">
+            <input 
+            type="text"
+            id="new-todo"
+            value={newTodo}
+            onChange={(e)=> setNewTodo(e.target.value)}
+            placeholder="Add New Todo"
+            />
+        </div>
+        <button className="submit">
+            <FontAwesomeIcon icon={faUpload} />
+        </button>
+    </form>
+
+    let content;
+
+  return (
+    <main>
+        <h1>Todo List</h1>
+        {newItemSection}
+        {content}
+    </main>
+  )
+}
+
+export default TodoList

src/index.js

@@ -2,16 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();