Improve coverage + small refactorings

src/__tests__/component/Abstract.test.tsx

+import createFetchMock from "vitest-fetch-mock";
+import { vi } from "vitest";
+import { render, waitFor } from "@testing-library/react";
+import Abstract from "src/components/Abstract/Abstract";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { createFetchResponse, user } from "../utils";
+import Proposal from "src/api/models/Proposal";
+
+describe("Abstract", async () => {
+  const fetchMocker = createFetchMock(vi);
+  beforeEach(() => fetchMocker.enableMocks());
+  afterEach(() => fetchMocker.resetMocks());
+
+  const successMock = () => {
+    fetchMocker.mockResponse(
+      createFetchResponse<Proposal>(
+        {
+          id: 12,
+          title: "My proposal",
+          abstract: "My concrete abstract",
+          call_id: 0,
+        },
+        200,
+      ),
+    );
+  };
+
+  const errorMock = () => {
+    fetchMocker.mockResponse(createFetchResponse<unknown>({}, 500));
+  };
+
+  it("renders correctly", async () => {
+    const component = render(
+      <Abstract text={"My concrete abstract"} proposalId={12} />,
+    );
+
+    expect(component).toBeTruthy();
+  });
+
+  it("renders correctly with empty text", async () => {
+    const component = render(<Abstract text={""} proposalId={12} />);
+    expect(component).toBeTruthy();
+  });
+
+  it("displays supplied text in a text area", async () => {
+    const text = "My concrete abstract";
+    const component = render(<Abstract text={text} proposalId={12} />);
+    const textArea = component.getByDisplayValue(text);
+    expect(textArea).toBeTruthy();
+    expect(textArea.tagName).toBe("TEXTAREA");
+  });
+
+  it("displays the word count", async () => {
+    const text = "My concrete abstract";
+    const component = render(<Abstract text={text} proposalId={12} />);
+    const wordCount = component.getByText("Save (3 words)");
+    expect(wordCount).toBeTruthy();
+  });
+
+  const originalAbstract = "My concrete abstract";
+  const newAbstract = "New abstract";
+
+  it.each([
+    [originalAbstract, newAbstract, originalAbstract, errorMock],
+    [originalAbstract, newAbstract, newAbstract, successMock],
+  ])(
+    "sets the new abstract on success, sets the original abstract on error",
+    async (originalValue, newValue, expectedValue, mock) => {
+      mock();
+
+      const component = render(
+        <Abstract text={originalValue} proposalId={12} />,
+      );
+
+      const input = component.getByDisplayValue(
+        originalValue,
+      ) as HTMLTextAreaElement;
+
+      await user.type(input, "{backspace}".repeat(originalValue.length));
+      await user.type(input, newValue);
+
+      const saveButton = component.getByText("Save", { exact: false });
+
+      await user.click(saveButton);
+
+      await waitFor(() => {
+        expect(input.value).toBe(expectedValue);
+      });
+    },
+  );
+});