Increase frontend unit test coverage.

components/frontend/src/header_footer/Menubar.test.jsx

@@ -4,15 +4,15 @@ import history from "history/browser"
 import { vi } from "vitest"
 
 import { createTestableSettings } from "../__fixtures__/fixtures"
-import * as auth from "../api/auth"
+import * as fetch_server_api from "../api/fetch_server_api"
 import { expectNoAccessibilityViolations } from "../testUtils"
 import { Menubar } from "./Menubar"
 
-vi.mock("../api/auth.js")
+vi.mock("../api/fetch_server_api.js")
 
-beforeEach(() => {
-    history.push("")
-})
+beforeEach(() => history.push(""))
+
+afterEach(() => vi.resetAllMocks())
 
 function renderMenubar({
     openReportsOverview = null,
@@ -38,7 +38,7 @@ function renderMenubar({
 }
 
 it("logs in", async () => {
-    auth.login = vi.fn().mockResolvedValue({
+    fetch_server_api.fetch_server_api = vi.fn().mockResolvedValue({
         ok: true,
         email: "[email protected]",
         session_expiration_datetime: "2021-02-24T13:10:00+00:00",
@@ -50,36 +50,45 @@ it("logs in", async () => {
     fireEvent.change(screen.getByLabelText("Username"), { target: { value: "[email protected]" } })
     fireEvent.change(screen.getByLabelText("Password"), { target: { value: "secret" } })
     await act(async () => fireEvent.click(screen.getByText(/Submit/)))
-    expect(auth.login).toHaveBeenCalledWith("[email protected]", "secret")
+    expect(fetch_server_api.fetch_server_api).toHaveBeenCalledWith("post", "login", {
+        username: "[email protected]",
+        password: "secret",
+    })
     const expected_date = new Date(Date.parse("2021-02-24T13:10:00+00:00"))
     expect(set_user).toHaveBeenCalledWith("[email protected]", "[email protected]", expected_date)
     await expectNoAccessibilityViolations(container)
 })
 
 it("shows invalid credential message", async () => {
-    auth.login = vi.fn().mockResolvedValue({ ok: false })
+    fetch_server_api.fetch_server_api = vi.fn().mockResolvedValue({ ok: false })
     const set_user = vi.fn()
     const { container } = renderMenubar({ set_user: set_user })
     fireEvent.click(screen.getByText(/Login/))
     fireEvent.change(screen.getByLabelText("Username"), { target: { value: "[email protected]" } })
     fireEvent.change(screen.getByLabelText("Password"), { target: { value: "secret" } })
     await act(async () => fireEvent.click(screen.getByText(/Submit/)))
     expect(screen.getAllByText(/Invalid credentials/).length).toBe(1)
-    expect(auth.login).toHaveBeenCalledWith("[email protected]", "secret")
+    expect(fetch_server_api.fetch_server_api).toHaveBeenCalledWith("post", "login", {
+        username: "[email protected]",
+        password: "secret",
+    })
     expect(set_user).not.toHaveBeenCalled()
     await expectNoAccessibilityViolations(container)
 })
 
 it("shows connection error message", async () => {
-    auth.login = vi.fn().mockRejectedValue(new Error("Async error message"))
+    fetch_server_api.fetch_server_api = vi.fn().mockRejectedValue(new Error("Async error message"))
     const set_user = vi.fn()
     const { container } = renderMenubar({ set_user: set_user })
     fireEvent.click(screen.getByText(/Login/))
     fireEvent.change(screen.getByLabelText("Username"), { target: { value: "[email protected]" } })
     fireEvent.change(screen.getByLabelText("Password"), { target: { value: "secret" } })
     await act(async () => fireEvent.click(screen.getByText(/Submit/)))
     expect(screen.getAllByText(/Connection error/).length).toBe(1)
-    expect(auth.login).toHaveBeenCalledWith("[email protected]", "secret")
+    expect(fetch_server_api.fetch_server_api).toHaveBeenCalledWith("post", "login", {
+        username: "[email protected]",
+        password: "secret",
+    })
     expect(set_user).not.toHaveBeenCalled()
     await expectNoAccessibilityViolations(container)
 })
@@ -108,12 +117,12 @@ it("closes the dialog on escape", async () => {
 })
 
 it("logs out", async () => {
-    auth.logout = vi.fn().mockResolvedValue({ ok: true })
+    fetch_server_api.fetch_server_api = vi.fn().mockResolvedValue({ ok: true })
     const set_user = vi.fn()
     const { container } = renderMenubar({ set_user: set_user, user: "jadoe" })
     fireEvent.click(screen.getByRole("button", { name: "User options" }))
     fireEvent.click(screen.getByRole("menuitem", { name: "Logout" }))
-    expect(auth.logout).toHaveBeenCalled()
+    expect(fetch_server_api.fetch_server_api).toHaveBeenCalledWith("post", "logout", {})
     expect(set_user).toHaveBeenCalledWith(null)
     await expectNoAccessibilityViolations(container)
 })

components/frontend/src/widgets/TableRowWithDetails.jsx

@@ -21,7 +21,7 @@ export function TableRowWithDetails(props) {
                 }}
             >
                 <TableCell align="center" sx={{ padding: "0px" }}>
-                    <ExpandButton expand={expanded} onClick={() => onExpand(!expanded)} size="1.5em" />
+                    <ExpandButton expand={expanded} onClick={() => onExpand(!expanded)} />
                 </TableCell>
                 {children}
             </TableRow>

components/frontend/src/widgets/buttons/ExpandButton.jsx

@@ -1,17 +1,16 @@
 import { IconButton } from "@mui/material"
-import { bool, func, string } from "prop-types"
+import { bool, func } from "prop-types"
 
 import { CaretDown, CaretRight } from "../icons"
 
-export function ExpandButton({ expand, onClick, size }) {
+export function ExpandButton({ expand, onClick }) {
     return (
         <IconButton aria-label="Expand/collapse" onClick={onClick}>
-            {expand ? <CaretDown size={size} /> : <CaretRight size={size} />}
+            {expand ? <CaretDown /> : <CaretRight />}
         </IconButton>
     )
 }
 ExpandButton.propTypes = {
     expand: bool,
     onClick: func,
-    size: string,
 }

components/frontend/src/widgets/icons.jsx

@@ -14,18 +14,12 @@ export function AddItemIcon() {
     return <AddIcon fontSize="inherit" sx={{ verticalAlign: "middle" }} />
 }
 
-export function CaretDown({ size }) {
-    return <ArrowDropDownIcon title="expand" sx={{ verticalAlign: "middle", fontSize: size || "2.5em" }} />
-}
-CaretDown.propTypes = {
-    size: string,
+export function CaretDown() {
+    return <ArrowDropDownIcon title="expand" sx={{ verticalAlign: "middle", fontSize: "1.5em" }} />
 }
 
-export function CaretRight({ size }) {
-    return <ArrowRightIcon title="expand" sx={{ verticalAlign: "middle", fontSize: size || "2.5em" }} />
-}
-CaretRight.propTypes = {
-    size: string,
+export function CaretRight() {
+    return <ArrowRightIcon title="expand" sx={{ verticalAlign: "middle", fontSize: "1.5em" }} />
 }
 
 export function CopyItemIcon() {