Adding of tests initially

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

@@ -6,6 +6,7 @@ import "regenerator-runtime/runtime";
 import React from "react";
 import "@testing-library/jest-dom";
 import fetchMock from "jest-fetch-mock";
+import { fireEvent } from "@testing-library/react";
 
 import CaseContainer from "../CaseContainer.js";
 
@@ -41,3 +42,36 @@ test("renders case view", async () => {
     expect(screen.getByDisplayValue("Test case")).toBeInTheDocument(),
   );
 });
+
+test("displays 'Submit' button", () => {
+  render(<CaseCreator />);
+  const button = screen.getByText("Submit");
+  expect(button).toBeInTheDocument();
+});
+
+test("displays 'Import' button", () => {
+  render(<CaseCreator />);
+  const button = screen.getByText("Import");
+  expect(button).toBeInTheDocument();
+});
+
+test("displays 'Load JSON from URL' button", () => {
+  render(<CaseCreator />);
+  const button = screen.getByText("Load JSON from URL");
+  expect(button).toBeInTheDocument();
+});
+
+test("shows dialog when 'Load JSON from URL' button is clicked", () => {
+  render(<CaseCreator />);
+  const button = screen.getByText("Load JSON from URL");
+  fireEvent.click(button);
+  const dialogInput = screen.getByPlaceholderText("Enter URL");
+  expect(dialogInput).toBeInTheDocument();
+});
+
+// Additional test to ensure that the import from file input is present
+test("has input for importing case from file", () => {
+  render(<CaseCreator />);
+  const fileInput = screen.getByLabelText(/Choose a file/i);
+  expect(fileInput).toBeInTheDocument();
+});

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,52 @@ test("renders group creator layer", () => {
   const button = screen.getByText("Create group");
   expect(button).toBeInTheDocument();
 });
+
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve({}),
+  }),
+);
+
+test("renders input for group name", () => {
+  render(<CreateGroup />);
+  const input = screen.getByRole("textbox", { name: /new-group-name/i });
+  expect(input).toBeInTheDocument();
+});
+
+test("can type into input", () => {
+  render(<CreateGroup />);
+  const input = screen.getByRole("textbox", { name: /new-group-name/i });
+  fireEvent.change(input, { target: { value: "New Group" } });
+  expect(input.value).toBe("New Group");
+});
+
+test("submitting form makes fetch request", async () => {
+  render(<CreateGroup />);
+  const input = screen.getByRole("textbox", { name: /new-group-name/i });
+  fireEvent.change(input, { target: { value: "New Group" } });
+
+  const button = screen.getByRole("button", { name: /create group/i });
+  fireEvent.click(button);
+
+  expect(fetch).toHaveBeenCalledTimes(1);
+  expect(fetch).toHaveBeenCalledWith(expect.stringContaining("/groups/"), {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: "Token dummy",
+    },
+    body: JSON.stringify({ name: "New Group" }),
+  });
+});
+
+test("input is cleared after submit", async () => {
+  render(<CreateGroup />);
+  const input = screen.getByRole("textbox", { name: /new-group-name/i });
+  fireEvent.change(input, { target: { value: "New Group" } });
+
+  const button = screen.getByRole("button", { name: /create group/i });
+  fireEvent.click(button);
+
+  await screen.findByRole("textbox", { name: /new-group-name/i, value: "" });
+});

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

@@ -38,3 +38,64 @@ test("renders groups layer", () => {
   const text = screen.getByText("Groups you own");
   expect(text).toBeInTheDocument();
 });
+
+test("renders owner groups", async () => {
+  render(<Groups />);
+  const groupName = await screen.findByText("Group 1");
+  expect(groupName).toBeInTheDocument();
+});
+
+test("renders member groups", async () => {
+  render(<Groups />);
+  const memberGroupName = await screen.findByText("Group 1");
+  expect(memberGroupName).toBeInTheDocument();
+});
+
+test("renders group creation button", () => {
+  render(<Groups />);
+  const createButton = screen.getByRole("button", {
+    name: /create new 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("doesn't render manage or delete buttons for member groups", async () => {
+  render(<Groups />);
+  const manageButtons = screen.queryAllByRole("button", {
+    name: /manage members/i,
+  });
+  const deleteButtons = screen.queryAllByRole("button", { name: /delete/i });
+  expect(manageButtons.length).toBe(1);
+  expect(deleteButtons.length).toBe(1);
+});
+
+test("shows member management layer when manage members button is clicked", async () => {
+  render(<Groups />);
+  const manageButton = await screen.findByRole("button", {
+    name: /manage members/i,
+  });
+  fireEvent.click(manageButton);
+
+  const memberManagementText = screen.getByText("Members of Group 1");
+  expect(memberManagementText).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,57 @@ 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 PropertyClaim specific properties", () => {
+  render(<ItemCreator type="PropertyClaim" />);
+  const parentTypeSelect = screen.getByLabelText("Parent type");
+  const claimTypeSelect = screen.getByLabelText("Claim type");
+
+  fireEvent.change(parentTypeSelect, { target: { value: "Strategy" } });
+  fireEvent.change(claimTypeSelect, { target: { value: "Fact" } });
+
+  expect(parentTypeSelect.value).toBe("Strategy");
+  expect(claimTypeSelect.value).toBe("Fact");
+});
+
+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,53 @@ 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 Evidence specific property", async () => {
+  render(<ItemEditor type="Evidence" id="1" />);
+  await waitFor(() => screen.getByLabelText("URL"));
+  const urlInput = screen.getByLabelText("URL");
+  fireEvent.change(urlInput, { target: { value: "https://new.url" } });
+  expect(urlInput.value).toBe("https://new.url");
+});
+
+test("renders PropertyClaim specific property", async () => {
+  render(<ItemEditor type="PropertyClaim" id="1" />);
+  await waitFor(() => screen.getByLabelText("Claim type"));
+});
+
+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();
+});