Merge pull request #251 from alan-turing-institute/testing/react

Testing/react

frontend/src/components/Login.js

@@ -57,23 +57,27 @@ const Login = () => {
   return (
     <Box overflow="auto">
       <Box flex={false} gap="medium" pad="medium" width="medium">
-        {loading === false && <Heading level={2}>Login</Heading>}
+        {loading === false && <Heading level={2}>Login to platform</Heading>}
         {errors === true && (
           <Heading level={2}>Cannot log in with provided credentials</Heading>
         )}
         {loading === false && (
           <Form onSubmit={onSubmit}>
-            <FormField htmlFor="username" label="User name">
+            <FormField label="User name" htmlFor="usernameInput">
               <TextInput
+                id="usernameInput"
                 name="username"
                 type="text"
                 value={username}
-                required
                 onChange={(e) => setUsername(e.target.value)}
+                required
               />
             </FormField>
-            <FormField htmlFor="password" label="Password">
+            <FormField label="Password" htmlFor="passwordInput">
+              {" "}
+              {/* Added htmlFor value */}
               <TextInput
+                id="passwordInput"
                 name="password"
                 type="password"
                 value={password}

frontend/src/components/Signup.js

@@ -82,13 +82,14 @@ const Signup = () => {
 
   return (
     <Box width={{ max: "large" }} gap="medium" pad="medium" overflow="auto">
-      {loading === false && <Heading level={2}>Sign up</Heading>}
+      {loading === false && <Heading level={2}>Sign up for an account</Heading>}
       {errors === true && (
         <Heading level={2}>Cannot sign up with provided credentials</Heading>
       )}
       <Form onSubmit={onSubmit}>
-        <FormField htmlFor="username" label="User name">
+        <FormField label="User name" htmlFor="usernameInput">
           <TextInput
+            id="usernameInput"
             name="username"
             type="text"
             value={username}
@@ -97,20 +98,22 @@ const Signup = () => {
           />
         </FormField>
         <FormField
-          htmlFor="password1"
           label="Password"
           info="At least 8 characters"
+          htmlFor="password1Input"
         >
           <TextInput
+            id="password1Input"
             name="password1"
             type="password"
             value={password1}
             onChange={(e) => setPassword1(e.target.value)}
             required
           />
         </FormField>
-        <FormField htmlFor="password2" label="Confirm password">
+        <FormField label="Confirm password" htmlFor="password2Input">
           <TextInput
+            id="password2Input"
             name="password2"
             type="password"
             value={password2}

frontend/src/components/tests/CaseSelector.test.js

@@ -4,6 +4,7 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import React from "react";
 import "regenerator-runtime/runtime";
+import { fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import CaseSelector from "../CaseSelector.js";
 
@@ -31,3 +32,37 @@ test("renders selector screen", async () => {
     ).toBeInTheDocument(),
   );
 });
+
+// test("loads and displays fetched cases", async () => {
+//   render(<CaseSelector />);
+
+//   await waitFor(() =>
+//     expect(screen.getByText("Test case 1")).toBeInTheDocument(),
+//   );
+//   expect(screen.getByText("Test case 2")).toBeInTheDocument();
+// });
+
+// test("navigates to the correct path when a case is selected", async () => {
+//   render(<CaseSelector />);
+
+//   await waitFor(() =>
+//     expect(screen.getByText("Test case 1")).toBeInTheDocument(),
+//   );
+
+//   fireEvent.click(screen.getByPlaceholderText("Select or create a case"));
+//   fireEvent.click(screen.getByText("Test case 1"));
+
+//   expect(mockedUsedNavigate).toHaveBeenCalledWith("/case/1");
+// });
+
+// test("contains 'Create new case' option", async () => {
+//   render(<CaseSelector />);
+
+//   await waitFor(() =>
+//     expect(screen.getByText("Test case 1")).toBeInTheDocument(),
+//   );
+
+//   fireEvent.click(screen.getByPlaceholderText("Select or create a case"));
+
+//   expect(screen.getByText("Create new case")).toBeInTheDocument();
+// });

frontend/src/components/tests/CreateGroup.test.js

@@ -4,6 +4,7 @@
 import "regenerator-runtime/runtime";
 import { render, screen } from "@testing-library/react";
 import "@testing-library/jest-dom";
+import { fireEvent } from "@testing-library/react";
 import React from "react";
 import CreateGroup from "../CreateGroup.js";
 
@@ -19,3 +20,9 @@ test("renders group creator layer", () => {
   const button = screen.getByText("Create group");
   expect(button).toBeInTheDocument();
 });
+
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve({}),
+  }),
+);

frontend/src/components/tests/Groups.test.js

@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 import "regenerator-runtime/runtime";
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import React from "react";
 import Groups from "../Groups.js";
@@ -38,3 +38,43 @@ test("renders groups layer", () => {
   const text = screen.getByText("Groups you own");
   expect(text).toBeInTheDocument();
 });
+
+test("renders owner groups", async () => {
+  render(<Groups />);
+  const groupNames = await screen.findAllByText("Group 1");
+  expect(groupNames[0]).toBeInTheDocument();
+});
+
+test("renders member groups", async () => {
+  render(<Groups />);
+  const memberGroupNames = await screen.findAllByText("Group 1");
+  expect(memberGroupNames[0]).toBeInTheDocument();
+});
+
+test("renders group creation button", () => {
+  render(<Groups />);
+  const createButton = screen.getByRole("button", {
+    name: /create group/i,
+  });
+  expect(createButton).toBeInTheDocument();
+});
+
+test("renders manage members button for owned groups", async () => {
+  render(<Groups />);
+  const manageButton = await screen.findByRole("button", {
+    name: /manage members/i,
+  });
+  expect(manageButton).toBeInTheDocument();
+});
+
+test("renders delete button for owned groups", async () => {
+  render(<Groups />);
+  const deleteButton = await screen.findByRole("button", { name: /delete/i });
+  expect(deleteButton).toBeInTheDocument();
+});
+
+test("renders 'Groups you are member of' section", () => {
+  render(<Groups />);
+  const text = screen.getByText("Groups you are member of");
+  expect(text).toBeInTheDocument();
+});

frontend/src/components/tests/ItemCreator.test.js

@@ -1,7 +1,7 @@
 /**
  * @jest-environment jsdom
  */
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import React from "react";
 import ItemCreator from "../ItemCreator.js";
@@ -11,3 +11,45 @@ test("renders item creator layer", () => {
   const textElement = screen.getByText("Create a new TopLevelNormativeGoal");
   expect(textElement).toBeInTheDocument();
 });
+
+test("renders input fields correctly", () => {
+  render(<ItemCreator type="TopLevelNormativeGoal" />);
+  const nameInput = screen.getByPlaceholderText("Name");
+  const sdescInput = screen.getByPlaceholderText("Short description");
+  const ldescInput = screen.getByPlaceholderText("Long description");
+  const keywordsInput = screen.getByPlaceholderText(
+    "Keywords (comma-separated)",
+  );
+
+  expect(nameInput).toBeInTheDocument();
+  expect(sdescInput).toBeInTheDocument();
+  expect(ldescInput).toBeInTheDocument();
+  expect(keywordsInput).toBeInTheDocument();
+});
+
+test("updates input fields on change", () => {
+  render(<ItemCreator type="TopLevelNormativeGoal" />);
+  const nameInput = screen.getByPlaceholderText("Name");
+  const sdescInput = screen.getByPlaceholderText("Short description");
+
+  fireEvent.change(nameInput, { target: { value: "Updated name" } });
+  fireEvent.change(sdescInput, {
+    target: { value: "Updated short description" },
+  });
+
+  expect(nameInput.value).toBe("Updated name");
+  expect(sdescInput.value).toBe("Updated short description");
+});
+
+test("renders Evidence specific property", () => {
+  render(<ItemCreator type="Evidence" />);
+  const urlInput = screen.getByPlaceholderText("www.some-evidence.com");
+  fireEvent.change(urlInput, { target: { value: "https://updated.url" } });
+  expect(urlInput.value).toBe("https://updated.url");
+});
+
+test("renders submit button", () => {
+  render(<ItemCreator type="TopLevelNormativeGoal" />);
+  const submitButton = screen.getByText("Submit");
+  expect(submitButton).toBeInTheDocument();
+});

frontend/src/components/tests/ItemEditor.test.js

@@ -1,7 +1,7 @@
 /**
  * @jest-environment jsdom
  */
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import "regenerator-runtime/runtime";
 import React from "react";
@@ -20,9 +20,40 @@ global.fetch = jest.fn(() =>
   }),
 );
 
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
 test("renders item editor layer", async () => {
   render(<ItemEditor type="TopLevelNormativeGoal" id="1" />);
   await waitFor(() =>
     expect(screen.getByDisplayValue("Test goal")).toBeInTheDocument(),
   );
 });
+
+test("updates item properties correctly", async () => {
+  render(<ItemEditor type="TopLevelNormativeGoal" id="1" />);
+
+  await waitFor(() => screen.getByDisplayValue("Test goal"));
+  const nameInput = screen.getByDisplayValue("Test goal");
+  const shortDescInput = screen.getByDisplayValue("short");
+  const longDescInput = screen.getByDisplayValue("long");
+  const keywordsInput = screen.getByDisplayValue("key");
+
+  fireEvent.change(nameInput, { target: { value: "Updated name" } });
+  fireEvent.change(shortDescInput, { target: { value: "Updated short" } });
+  fireEvent.change(longDescInput, { target: { value: "Updated long" } });
+  fireEvent.change(keywordsInput, { target: { value: "Updated key" } });
+
+  expect(nameInput.value).toBe("Updated name");
+  expect(shortDescInput.value).toBe("Updated short");
+  expect(longDescInput.value).toBe("Updated long");
+  expect(keywordsInput.value).toBe("Updated key");
+});
+
+test("renders delete item button", async () => {
+  render(<ItemEditor type="TopLevelNormativeGoal" id="1" />);
+  await waitFor(() => screen.getByText("Delete item"));
+  const deleteButton = screen.getByText("Delete item");
+  expect(deleteButton).toBeInTheDocument();
+});

frontend/src/components/tests/ItemViewer.test.js

@@ -6,7 +6,6 @@ import "@testing-library/jest-dom";
 import "regenerator-runtime/runtime";
 import { act } from "react-dom/test-utils";
 import React from "react";
-import "@testing-library/jest-dom";
 import ItemViewer from "../ItemViewer.js";
 
 global.fetch = jest.fn(() =>
@@ -18,13 +17,64 @@ global.fetch = jest.fn(() =>
         short_description: "Test short",
         long_description: "Test long",
         keywords: "Test keywords",
+        claim_type: "PropertyClaim test type",
+        URL: "https://test.url",
       }),
   }),
 );
 
-test("renders item viewer layer", () => {
-  act(() => {
+beforeEach(() => {
+  jest.clearAllMocks();
+});
+
+test("renders item viewer layer", async () => {
+  await act(async () => {
     render(<ItemViewer type="TopLevelNormativeGoal" id="1" />);
   });
   expect(screen.getByText("Name")).toBeInTheDocument();
 });
+
+test("renders item properties correctly", async () => {
+  await act(async () => {
+    render(<ItemViewer type="TopLevelNormativeGoal" id="1" />);
+  });
+
+  const goalText = await screen.findByText("Test goal 1");
+  expect(goalText).toBeInTheDocument();
+
+  const shortDescText = await screen.findByText("Test short");
+  expect(shortDescText).toBeInTheDocument();
+
+  const longDescText = await screen.findByText("Test long");
+  expect(longDescText).toBeInTheDocument();
+
+  const keywordText = await screen.findByText("Test keywords");
+  expect(keywordText).toBeInTheDocument();
+});
+
+test("renders PropertyClaim specific property", async () => {
+  await act(async () => {
+    render(<ItemViewer type="PropertyClaim" id="1" />);
+  });
+
+  const claimTypeText = await screen.findByText("PropertyClaim test type");
+  expect(claimTypeText).toBeInTheDocument();
+});
+
+test("renders Evidence specific property", async () => {
+  await act(async () => {
+    render(<ItemViewer type="Evidence" id="1" />);
+  });
+
+  const urlText = await screen.findByText("https://test.url");
+  expect(urlText).toBeInTheDocument();
+});
+
+test("renders edit button in edit mode", async () => {
+  await act(async () => {
+    render(<ItemViewer type="TopLevelNormativeGoal" id="1" editMode={true} />);
+  });
+
+  const editButton = screen.getByText("Edit");
+  expect(editButton).toBeInTheDocument();
+});