Fix MissingMBData tests + accordion accessibility

while writing tests, ran into a couple of issues, one with the import style for React (import React vs. import * as React).
Also improved accessibility while writing tests

frontend/js/src/common/Accordion.tsx

@@ -1,14 +1,10 @@
-/* Thanks go to Yogesh Chavan (https://github.com/myogeshchavan97) for this implementation:
+/* Thanks go to Yogesh Chavan (https://github.com/myogeshchavan97) for the base for this implementation:
    https://github.com/myogeshchavan97/react-accordion-demo
 */
-import {
-  faChevronCircleDown,
-  faChevronCircleRight,
-} from "@fortawesome/free-solid-svg-icons";
+import { faChevronCircleRight } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { uniqueId } from "lodash";
-import React, { Children, PropsWithChildren, useState } from "react";
-import { AutoScroll } from "sortablejs";
+import * as React from "react";
 import { COLOR_LB_LIGHT_GRAY } from "../utils/constants";
 
 type AccordionProps = {
@@ -27,27 +23,28 @@ export default function Accordion({
   bootstrapType = "default",
   defaultOpen,
   children,
-}: PropsWithChildren<AccordionProps>) {
-  const [isActive, setIsActive] = useState(Boolean(defaultOpen));
+}: React.PropsWithChildren<AccordionProps>) {
+  const [isActive, setIsActive] = React.useState(Boolean(defaultOpen));
   const contentID = uniqueId();
   return (
     <div className={`panel panel-${bootstrapType} accordion`} key={uniqueId()}>
-      <div
-        className="panel-heading"
-        role="button"
-        onClick={() => setIsActive(!isActive)}
-        aria-expanded={isActive}
-        aria-controls={contentID}
-        tabIndex={0}
-        onKeyDown={() => setIsActive(!isActive)}
-      >
-        <span className="panel-title">{title}</span>
-        <FontAwesomeIcon
-          className="accordion-arrow"
-          icon={faChevronCircleRight}
-          rotation={isActive ? 90 : undefined}
-          color={COLOR_LB_LIGHT_GRAY}
-        />
+      <div className="panel-heading" role="heading" aria-level={3}>
+        <div
+          role="button"
+          onClick={() => setIsActive(!isActive)}
+          aria-expanded={isActive}
+          aria-controls={contentID}
+          tabIndex={0}
+          onKeyDown={() => setIsActive(!isActive)}
+        >
+          <span className="panel-title">{title}</span>
+          <FontAwesomeIcon
+            className="accordion-arrow"
+            icon={faChevronCircleRight}
+            rotation={isActive ? 90 : undefined}
+            color={COLOR_LB_LIGHT_GRAY}
+          />
+        </div>
       </div>
       {isActive && (
         <div

frontend/js/tests/user/missing-data/MissingMBData.test.tsx

@@ -2,16 +2,21 @@ import * as React from "react";
 
 import { HttpResponse, http } from "msw";
 import { SetupServerApi, setupServer } from "msw/node";
-import { screen } from "@testing-library/react";
+import { act, screen } from "@testing-library/react";
 import { RouterProvider, createMemoryRouter } from "react-router-dom";
 import { Router } from "@remix-run/router";
 import userEvent from "@testing-library/user-event";
 import * as missingDataProps from "../../__mocks__/missingMBDataProps.json";
-import { renderWithProviders } from "../../test-utils/rtl-test-utils";
+import {
+  renderWithProviders,
+  textContentMatcher,
+} from "../../test-utils/rtl-test-utils";
 import getSettingsRoutes from "../../../src/settings/routes";
+import Layout from "../../../src/layout";
 
-const user = userEvent.setup();
+jest.unmock("react-toastify");
 
+const user = userEvent.setup();
 const routes = getSettingsRoutes();
 
 describe("MissingMBDataPage", () => {
@@ -50,9 +55,17 @@ describe("MissingMBDataPage", () => {
       undefined,
       false
     );
-    screen.getByText("Missing MusicBrainz Data of riksucks");
-    const listenCards = await screen.findAllByTitle("Link with MusicBrainz");
-    expect(listenCards).toHaveLength(25);
+    await screen.findByText(
+      textContentMatcher("Missing MusicBrainz Data of riksucks")
+    );
+    const albumGroups = await screen.findAllByRole("heading", { level: 3 });
+    // 25 groups per page
+    // These albums should be grouped and sorted by size before being paginated and displayed
+    expect(albumGroups).toHaveLength(25);
+    expect(albumGroups.at(0)).toHaveTextContent("x 10 Paharda (Remixes)");
+    expect(albumGroups.at(1)).toHaveTextContent(
+      "Trip to California (Stoner Edition)"
+    );
   });
 
   it("has working navigation", async () => {
@@ -64,19 +77,31 @@ describe("MissingMBDataPage", () => {
       undefined,
       false
     );
-    const page1Cards = await screen.findAllByTitle("Link with MusicBrainz");
-    screen.getByText("Arabic Nokia");
-    expect(screen.queryByText("Hidden Sun of Serenity")).toBeNull();
+    await screen.findByText("Paharda (Remixes)", { exact: false });
+    // Check that items from bigger groups get sorted and displayed
+    // on the first page despite being at the bottom of the data array
+    await screen.findByText("Trip to California (Stoner Edition)", {
+      exact: false,
+    });
+    expect(
+      screen.queryByText("Broadchurch (Music From The Original TV Series)")
+    ).toBeNull();
 
     const nextButton = screen.getByText("Next →", { exact: false });
     await user.click(nextButton);
-    expect(screen.queryByText("Arabic Nokia")).toBeNull();
-    screen.getByText("Hidden Sun of Serenity");
-
+    expect(
+      screen.queryByText(textContentMatcher("Paharda (Remixes)"), {
+        exact: false,
+      })
+    ).toBeNull();
+    await screen.findByText("Broadchurch (Music From The Original TV Series)");
+
     const prevButton = screen.getByText("Previous", { exact: false });
     await user.click(prevButton);
-    screen.getByText("Arabic Nokia");
-    expect(screen.queryByText("Hidden Sun of Serenity")).toBeNull();
+    await screen.findByText("Paharda (Remixes)", { exact: false });
+    expect(
+      screen.queryByText("Broadchurch (Music From The Original TV Series)")
+    ).toBeNull();
   });
 
 });