Basic form

package.json

@@ -4,15 +4,17 @@
   "private": true,
   "dependencies": {
     "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^30.0.0",
-    "@types/node": "^24.10.1",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.126",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-scripts": "5.0.1",
-    "typescript": "^5.9.3",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -38,9 +40,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0"
   }
 }

src/App.test.tsx

@@ -0,0 +1,14 @@
+import "@testing-library/jest-dom";
+import { title_test_title } from "./components/Title/Title.testFunctions";
+import { 
+    form_test_placeholder, 
+    form_test_artist_label, 
+    form_test_input, 
+    form_test_submit 
+} from "./components/Form/Form.testFunctions";
+
+test("Displays the title 'Harmonise'", title_test_title);
+test("Displays field with placeholder text 'Dawn of the Squid'", form_test_placeholder);
+test("Displays 'Artist Name' field label", form_test_artist_label);
+test("Accepts user input", form_test_input);
+test("Calls handleSubmit with input data", form_test_submit);

src/App.tsx

@@ -1,10 +1,13 @@
 import './App.css';
 import Title from './components/Title/Title';
+import Form from './components/Form/Form';
+
 
 function App() {
   return (
     <div className="App">
       <Title />
+      <Form />
     </div>
   );
 }

src/components/Form/Form.test.tsx

@@ -0,0 +1,12 @@
+import "@testing-library/jest-dom";
+import { 
+  form_test_placeholder, 
+  form_test_artist_label, 
+  form_test_input, 
+  form_test_submit 
+} from "./Form.testFunctions";
+
+test("Displays field with placeholder text 'Dawn of the Squid'", form_test_placeholder);
+test("Displays 'Artist Name' field label", form_test_artist_label);
+test("Accepts user input", form_test_input);
+test("Calls handleSubmit with input data", form_test_submit);

src/components/Form/Form.testFunctions.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import Form from "./Form";
+import userEvent from "@testing-library/user-event";
+import { handleSubmit } from "../../functions/handleSubmit";
+
+jest.mock("../../functions/handleSubmit", () => ({
+
+  handleSubmit: jest.fn()
+
+}));
+
+
+export const form_test_placeholder = () => {
+
+  render(<Form />);
+  const text = screen.getByPlaceholderText('Dawn of the Squid')
+
+  expect(text).toBeInTheDocument();
+
+};
+
+export const form_test_artist_label = () => {
+
+  render(<Form />);
+  const text = screen.getByLabelText('Artist Name')
+
+  expect(text).toBeInTheDocument();
+
+};
+
+export const form_test_input: () => Promise<void> = async () => {
+
+  render(<Form />);
+  const artistNameField = screen.getByLabelText("Artist Name");
+
+  await userEvent.type(artistNameField, "Music Research Unit");
+
+  expect(artistNameField).toHaveValue("Music Research Unit");
+
+};
+
+export const form_test_submit: () => Promise<void> = async () => {
+
+  render(<Form />);
+  const artistNameField = screen.getByLabelText("Artist Name");
+  const button = screen.getByRole("button", { name: /submit/i });
+
+  await userEvent.type(artistNameField, 'Music Research Unit')
+  await userEvent.click(button);
+
+  expect(handleSubmit).toHaveBeenCalledWith({ artistName: 'Music Research Unit'});
+};

src/components/Form/Form.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { handleSubmit } from "../../functions/handleSubmit"
+
+export default function Form() {
+
+  const [artistName, setArtistName] = useState("");
+
+  const metadata = {
+    inputId     : 'artist-name',
+    fieldLabel  : 'Artist Name',
+    type        : 'text',
+    placeholder : 'Dawn of the Squid',
+    buttonText  : 'Submit'
+  }
+
+  return (
+    <form>
+
+      <label htmlFor={metadata.inputId}>
+        {metadata.fieldLabel}
+      </label>
+
+      <input 
+        type        ={metadata.type}
+        placeholder ={metadata.placeholder} 
+        id          ={metadata.inputId} 
+        onChange    ={e => setArtistName(e.target.value)}
+      />
+
+      <button 
+        type        ="button"
+        onClick     ={() => handleSubmit({artistName})}
+      >
+        {metadata.buttonText}
+      </button>
+
+    </form>
+  );
+}

src/components/Title/Title.test.tsx

@@ -1,9 +1,4 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import Title from "./Title";
 import "@testing-library/jest-dom";
+import { title_test_title } from "./Title.testFunctions";
 
-test("increments the count on click", async () => {
-  render(<Title />);
-  expect(screen.getByText('Harmonise')).toBeInTheDocument();
-});
+test("Displays the title 'Harmonise'", title_test_title);

src/components/Title/Title.testFunctions.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from "@testing-library/react";
+import Title from "./Title";
+
+export const title_test_title: () => Promise<void> = async () => {
+
+    render(<Title />);
+    const text = screen.getByText('Harmonise')
+
+    expect(text).toBeInTheDocument();
+
+};

src/components/Title/Title.tsx

@@ -1,14 +1,12 @@
-import { useState } from "react";
-
 export default function Title() {
 
-  return (
-    <div>
-      Harmonise
-    </div>
-  );
-}
-
+  const title = 'Harmonise'
 
+  return (
 
+    <>
+      {title}
+    </>
 
+  );
+}

src/functions/handleSubmit.tsx

@@ -0,0 +1,3 @@
+export function handleSubmit(formData: {}) {
+    // Data will be sent to the server here, thence to the database
+}

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}