created Task.test.js, 100% coverge for Task.js

package.json

@@ -37,6 +37,7 @@
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "identity-obj-proxy": "^3.0.0",
     "web-vitals": "^3.5.0"
   }
-}
+}

packages/studywell-frontend/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

packages/studywell-frontend/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

packages/studywell-frontend/assetsTransformer.js

@@ -0,0 +1,7 @@
+const path = require('path');
+
+module.exports = {
+  process(src, filename, config, options) {
+    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+  },
+};

packages/studywell-frontend/package.json

@@ -12,12 +12,16 @@
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
+  "type": "module",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "npx eslint . && npx prettier --check ."
+    "lint": "npx eslint . && npx prettier --check .",
+    "test:comp": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
+    "test:coverage": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --coverage"
+
   },
   "eslintConfig": {
     "extends": [
@@ -38,6 +42,26 @@
     ]
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-env": "^7.23.5",
+    "@babel/preset-react": "^7.23.3",
+    "babel": "^6.23.0",
+    "babel-jest": "^29.7.0",
+    "cross-env": "^7.0.3",
+    "jest": "^29.7.0",
+    "jest-css-modules-transform": "^4.4.2",
+    "jest-environment-jsdom": "^29.7.0"
+  },
+  "jest": {
+    "testEnvironment": "jest-environment-jsdom",
+    "moduleNameMapper": {
+      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
+
+    }
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-react"
+    ]
   }
 }

packages/studywell-frontend/src/Form.js

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+
+function Form(props) {
+    const [person, setPerson] = useState({
+        name: "",
+        job: ""
+    });
+
+    return (
+    <form>
+        <label htmlFor="name">Name</label>
+        <input type="text" name="name" id="name"
+            value={person.name} onChange={handleChange}
+        />
+        <label htmlFor="job">Job</label>
+        <input type="text" name="job" id="job"
+            value={person.job} onChange={handleChange}
+        />
+        <input type="button" value="Submit"
+        onClick={submitForm}
+        />
+    </form>
+);
+
+function handleChange(event) {
+    const { name, value } = event.target;
+    if (name === "job")
+    setPerson({
+    name: person["name"],
+    job: value
+    });
+    else setPerson({
+    name: value,
+    job: person["job"] });
+    }
+    function submitForm() {
+    props.handleSubmit(person);
+    setPerson({ name: "", job: "" });
+    }
+}
+export default Form;

packages/studywell-frontend/src/Form.test.js

@@ -0,0 +1,44 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import '@testing-library/jest-dom'
+import React from "react";
+import Form from "./Form";
+
+
+
+test("renders the empty form correctly", () => {
+    render(<Form />);
+    expect(screen.getByLabelText("Name")).toBeInTheDocument();
+    expect(screen.getByLabelText("Job")).toBeInTheDocument();
+    expect(screen.getByText("Submit")).toBeInTheDocument();
+    });
+
+const testUser = { name: "Ken Kubiak", job: "Educator" };
+test("accepts name input", () => {
+    render(<Form />);
+    const input = screen.getByLabelText("Name");
+    fireEvent.change(input, { target: { value: testUser.name } });
+    expect(input).toHaveValue(testUser.name);
+});
+
+test("accepts job input", () => {
+    render(<Form />);
+    const input = screen.getByLabelText("Job");
+    fireEvent.change(input, { target: { value: testUser.job } });
+    expect(input).toHaveValue(testUser.job);
+});
+
+test("handles form submission", () => {
+    let formData = {};
+    const mockUpdate = (data) => {
+    formData = data;
+    };
+    render(<Form handleSubmit={mockUpdate} />);
+    let input = screen.getByLabelText("Name");
+    fireEvent.change(input, { target: { value: testUser.name } });
+    input = screen.getByLabelText("Job");
+    fireEvent.change(input, { target: { value: testUser.job } });
+    const button = screen.getByRole("button", { type: "submit" });
+    fireEvent.click(button);
+    expect(formData).toHaveProperty("name", testUser.name);
+    expect(formData).toHaveProperty("job", testUser.job);
+});

packages/studywell-frontend/src/components/taskbar/Task.js

@@ -37,7 +37,7 @@ function Task(props) {
             <input
               type="text"
               task="task"
-              class="task_form"
+              className="task_form"
               style={task.task === "type here..." ? placeholderStyle : {}}
               value={task.task}
               onChange={handleTaskChange}
@@ -46,14 +46,14 @@ function Task(props) {
             <input
               type="number"
               placeholder="# of pomodoros"
-              class="pomodoro_form"
+              className="pomodoro_form"
               onChange={handlePomodoroChange}
               value={task.pomodoros}
             />
           </div>
           <input
             type="button"
-            class="submit_task"
+            className="submit_task"
             value="+"
             onClick={submitTask}
           />

packages/studywell-frontend/src/components/taskbar/Task.test.js

@@ -0,0 +1,50 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import '@testing-library/jest-dom'
+import React from "react";
+import Task from "./Task";
+
+test("renders the pomodoro counter correctly", () => {
+    const {getAllByPlaceholderText } = render(<Task />);  
+
+    const pomInputs = getAllByPlaceholderText('# of pomodoros'); 
+    const pomInput = pomInputs[0];
+    expect(pomInput).toBeInTheDocument();
+    });
+
+test('renders "type here..." initially with placeholder style', () => {
+    const taskInput = document.querySelector('input[task="task"]');
+
+    expect(taskInput).toHaveStyle({
+        fontStyle: 'italic' 
+    });
+});
+
+
+test('handles task submission', () => {
+    const testTask = { task: 'write essay', pomodoros: 2 }; // Define the test task data
+
+    let formData = {};
+    const mockUpdate = (data) => {
+      formData = data;
+    };
+
+    render(<Task handleSubmit={mockUpdate} />);
+
+    const taskInput = document.querySelector('input[task="task"]');
+    fireEvent.change(taskInput, { target: { value: testTask.task } });
+    fireEvent.click(taskInput); // simulate click
+
+    const pomodorosInput = screen.getByPlaceholderText('# of pomodoros');
+    fireEvent.change(pomodorosInput, { target: { value: testTask.pomodoros } });
+
+    const submitButton = screen.getByRole('button', { name: '+' });
+    fireEvent.click(submitButton);
+
+    expect(formData).toHaveProperty('task', testTask.task);
+    expect(formData).toHaveProperty('pomodoros', Number(testTask.pomodoros));
+
+    // retrieve input value after click event
+    const inputValueAfterClick = taskInput.value;
+
+    expect(inputValueAfterClick).toBe('');
+  });

packages/studywell-frontend/src/components/taskbar/TaskCard.js

@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+
+function TaskCard(props) {
+  const [task, setTask] = useState({
+    task: "",
+  });
+
+  const [showModal, setShowModal] = useState(false);
+
+  function submitTask() {
+    props.handleSubmit(task);
+    setTask({ task: "" });
+  }
+
+  function handleChange(event) {
+    const { value } = event.target;
+    setTask({ task: value });
+  }
+
+  function handleShowModal() {
+    setShowModal((prev) => !prev);
+  }
+
+  return (
+    <div>
+      <form>
+        <input
+          type="text"
+          task="task"
+          value={task.task}
+          onChange={handleChange}
+        />
+        <input
+          type="button"
+          class="submit_task"
+          value="Submit"
+          onClick={submitTask}
+        />
+      </form>
+    </div>
+  );
+}
+export default TaskCard;

packages/studywell-frontend/src/components/taskbar/TotalTask.js

@@ -1,7 +1,7 @@
 import Task from "./Task";
 import TaskBar from "./TaskBar";
 import React, { useState } from "react";
-import "../../pages/Page.css";
+// import "../../pages/Page.css";
 
 const CloseButton = ({ onClose, isVisible }) => {
   const handleClick = () => {
@@ -10,7 +10,8 @@ const CloseButton = ({ onClose, isVisible }) => {
   return (
     <button className="closeButton" onClick={handleClick}>
       <div className="task_text">Tasks</div>
-      <div className="close_arrow">{isVisible ? "▲" : "▼"}</div>
+      <div className="clos
+      e_arrow">{isVisible ? "▲" : "▼"}</div>
     </button>
   );
 };