@openneuro/app 4.29.9 → 4.30.0-alpha.0

package/src/scripts/users/__tests__/user-card.spec.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import type { User } from "../user-card";
-import { UserCard } from "../user-card";
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import type { User } from "../user-card"
+import { UserCard } from "../user-card"
 
 describe("UserCard Component", () => {
   const baseUser: User = {
@@ -12,31 +12,35 @@ describe("UserCard Component", () => {
     institution: "University of California",
     links: ["https://example.com", "https://example.org"],
     github: "johndoe",
-  };
+  }
 
   it("renders all user details when all data is provided", () => {
-
-    render(<UserCard user={baseUser} />);
+    render(<UserCard user={baseUser} />)
 
     const orcidLink = screen.getByRole("link", {
       name: "ORCID profile of John Doe",
-    });
-    expect(orcidLink).toHaveAttribute("href", "https://orcid.org/0000-0001-2345-6789");
-    expect(screen.getByText("University of California")).toBeInTheDocument();
-    expect(screen.getByText("San Francisco, CA")).toBeInTheDocument();
+    })
+    expect(orcidLink).toHaveAttribute(
+      "href",
+      "https://orcid.org/0000-0001-2345-6789",
+    )
+    expect(screen.getByText("University of California")).toBeInTheDocument()
+    expect(screen.getByText("San Francisco, CA")).toBeInTheDocument()
 
-    const emailLink = screen.getByRole("link", { name: "johndoe@example.com" });
-    expect(emailLink).toHaveAttribute("href", "mailto:johndoe@example.com");
+    const emailLink = screen.getByRole("link", { name: "johndoe@example.com" })
+    expect(emailLink).toHaveAttribute("href", "mailto:johndoe@example.com")
 
-    const githubLink = screen.getByRole("link", { name: "Github profile of John Doe", });
-    expect(githubLink).toHaveAttribute("href", "https://github.com/johndoe");
+    const githubLink = screen.getByRole("link", {
+      name: "Github profile of John Doe",
+    })
+    expect(githubLink).toHaveAttribute("href", "https://github.com/johndoe")
     expect(
-      screen.getByRole("link", { name: "https://example.com" })
-    ).toHaveAttribute("href", "https://example.com");
+      screen.getByRole("link", { name: "https://example.com" }),
+    ).toHaveAttribute("href", "https://example.com")
     expect(
-      screen.getByRole("link", { name: "https://example.org" })
-    ).toHaveAttribute("href", "https://example.org");
-  });
+      screen.getByRole("link", { name: "https://example.org" }),
+    ).toHaveAttribute("href", "https://example.org")
+  })
 
   it("renders without optional fields", () => {
     const minimalUser: User = {
@@ -44,32 +48,39 @@ describe("UserCard Component", () => {
       email: "janedoe@example.com",
       orcid: "0000-0002-3456-7890",
       links: [],
-    };
+    }
 
-    render(<UserCard user={minimalUser} />);
+    render(<UserCard user={minimalUser} />)
 
     const orcidLink = screen.getByRole("link", {
       name: "ORCID profile of Jane Doe",
-    });
-    expect(orcidLink).toHaveAttribute("href", "https://orcid.org/0000-0002-3456-7890");
-    const emailLink = screen.getByRole("link", { name: "janedoe@example.com" });
-    expect(emailLink).toHaveAttribute("href", "mailto:janedoe@example.com");
-    expect(screen.queryByText("University of California")).not.toBeInTheDocument();
-    expect(screen.queryByText("San Francisco, CA")).not.toBeInTheDocument();
-    expect(screen.queryByRole("link", { name: "Github profile of Jane Doe" })).not.toBeInTheDocument();
-  });
+    })
+    expect(orcidLink).toHaveAttribute(
+      "href",
+      "https://orcid.org/0000-0002-3456-7890",
+    )
+    const emailLink = screen.getByRole("link", { name: "janedoe@example.com" })
+    expect(emailLink).toHaveAttribute("href", "mailto:janedoe@example.com")
+    expect(screen.queryByText("University of California")).not
+      .toBeInTheDocument()
+    expect(screen.queryByText("San Francisco, CA")).not.toBeInTheDocument()
+    expect(screen.queryByRole("link", { name: "Github profile of Jane Doe" }))
+      .not.toBeInTheDocument()
+  })
 
   it("renders correctly when links are empty", () => {
     const userWithEmptyLinks: User = {
       ...baseUser,
       links: [],
-    };
+    }
 
-    render(<UserCard user={userWithEmptyLinks} />);
+    render(<UserCard user={userWithEmptyLinks} />)
 
-    expect(screen.queryByRole("link", { name: "https://example.com" })).not.toBeInTheDocument();
-    expect(screen.queryByRole("link", { name: "https://example.org" })).not.toBeInTheDocument();
-  });
+    expect(screen.queryByRole("link", { name: "https://example.com" })).not
+      .toBeInTheDocument()
+    expect(screen.queryByRole("link", { name: "https://example.org" })).not
+      .toBeInTheDocument()
+  })
 
   it("renders correctly when location and institution are missing", () => {
     const userWithoutLocationAndInstitution: User = {
@@ -77,19 +88,23 @@ describe("UserCard Component", () => {
       email: "emilydoe@example.com",
       orcid: "0000-0003-4567-8901",
       links: ["https://example.com"],
-    };
+    }
 
-    render(<UserCard user={userWithoutLocationAndInstitution} />);
+    render(<UserCard user={userWithoutLocationAndInstitution} />)
 
     const orcidLink = screen.getByRole("link", {
       name: "ORCID profile of Emily Doe",
-    });
-    expect(orcidLink).toHaveAttribute("href", "https://orcid.org/0000-0003-4567-8901");
-    const emailLink = screen.getByRole("link", { name: "emilydoe@example.com" });
-    expect(emailLink).toHaveAttribute("href", "mailto:emilydoe@example.com");
-    const link = screen.getByRole("link", { name: "https://example.com" });
-    expect(link).toHaveAttribute("href", "https://example.com");
-    expect(screen.queryByText("San Francisco, CA")).not.toBeInTheDocument();
-    expect(screen.queryByText("University of California")).not.toBeInTheDocument();
-  });
-});
+    })
+    expect(orcidLink).toHaveAttribute(
+      "href",
+      "https://orcid.org/0000-0003-4567-8901",
+    )
+    const emailLink = screen.getByRole("link", { name: "emilydoe@example.com" })
+    expect(emailLink).toHaveAttribute("href", "mailto:emilydoe@example.com")
+    const link = screen.getByRole("link", { name: "https://example.com" })
+    expect(link).toHaveAttribute("href", "https://example.com")
+    expect(screen.queryByText("San Francisco, CA")).not.toBeInTheDocument()
+    expect(screen.queryByText("University of California")).not
+      .toBeInTheDocument()
+  })
+})

package/src/scripts/users/__tests__/user-query.spec.tsx

@@ -1,60 +1,65 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import { MemoryRouter, Route, Routes } from "react-router-dom";
-import { UserQuery } from "../user-query";
-import FourOFourPage from "../../errors/404page";
-
-
-// TODO update these once the correct query is in place and dummy data is not used.
-// maybe there is a better way to do this
-const VALID_ORCID = "0000-0001-6755-0259";
-const INVALID_ORCID = "0000-000X-1234-5678";
-const UNKNOWN_ORCID = "0000-0000-0000-0000";
-
-const renderWithRouter = (orcid: string) => {
-  return render(
-    <MemoryRouter initialEntries={[`/user/${orcid}`]}>
-      <Routes>
-        <Route path="/user/:orcid" element={<UserQuery />} />
-        <Route path="*" element={<FourOFourPage />} />
-      </Routes>
-    </MemoryRouter>
-  );
-};
-
-describe("UserQuery Component", () => {
-  // TODO update these once the correct query is in place and dummy data is not used.
-  // maybe there is a better way to do this
-  it("renders UserRoutes for a valid ORCID", async () => {
-    renderWithRouter(VALID_ORCID);
-    const userName = await screen.findByText("Gregory Noack");
-    expect(userName).toBeInTheDocument();
-
-    const userLocation = screen.getByText("Stanford, CA");
-    expect(userLocation).toBeInTheDocument();
-  });
-
-  it("renders FourOFourPage for an invalid ORCID", async () => {
-    renderWithRouter(INVALID_ORCID);
-    const errorMessage = await screen.findByText(
-      /404: The page you are looking for does not exist./i
-    );
-    expect(errorMessage).toBeInTheDocument();
-  });
-
-  it("renders FourOFourPage for a missing ORCID", async () => {
-    renderWithRouter("");
-    const errorMessage = await screen.findByText(
-      /404: The page you are looking for does not exist./i
-    );
-    expect(errorMessage).toBeInTheDocument();
-  });
-
-  it("renders FourOFourPage for an unknown ORCID", async () => {
-    renderWithRouter(UNKNOWN_ORCID);
-    const errorMessage = await screen.findByText(
-      /404: The page you are looking for does not exist./i
-    );
-    expect(errorMessage).toBeInTheDocument();
-  });
-});
+import React from "react"
+import { render, screen, waitFor } from "@testing-library/react"
+import { MockedProvider } from "@apollo/client/testing"
+import { MemoryRouter, Route, Routes } from "react-router-dom"
+import { UserQuery } from "../user-query"
+import { GET_USER_BY_ORCID } from "../user-query"
+
+const validOrcid = "0009-0001-9689-7232"
+
+const userMock = {
+  request: {
+    query: GET_USER_BY_ORCID,
+    variables: { userId: validOrcid },
+  },
+  result: {
+    data: {
+      user: {
+        __typename: "User",
+        id: "1",
+        name: "Test User",
+        orcid: validOrcid,
+        email: "test@example.com",
+        avatar: "http://example.com/avatar.png",
+      },
+    },
+  },
+}
+
+const mocks = [userMock]
+
+describe("UserQuery component", () => {
+  it("displays the ORCID on the page for a valid ORCID", async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={true}>
+        <MemoryRouter initialEntries={[`/user/${validOrcid}`]}>
+          <Routes>
+            <Route path="/user/:orcid" element={<UserQuery />} />
+          </Routes>
+        </MemoryRouter>
+      </MockedProvider>,
+    )
+
+    await waitFor(() =>
+      expect(screen.queryByText("Loading...")).not.toBeInTheDocument()
+    )
+
+    expect(screen.getByText(validOrcid)).toBeInTheDocument()
+  })
+
+  it("shows 404 page for invalid ORCID", async () => {
+    render(
+      <MockedProvider mocks={[]} addTypename={true}>
+        <MemoryRouter initialEntries={[`/user/invalid-orcid`]}>
+          <Routes>
+            <Route path="/user/:orcid" element={<UserQuery />} />
+          </Routes>
+        </MemoryRouter>
+      </MockedProvider>,
+    )
+
+    await waitFor(() => screen.getByText(/404/i))
+
+    expect(screen.getByText(/404/i)).toBeInTheDocument()
+  })
+})

package/src/scripts/users/__tests__/user-routes.spec.tsx

@@ -1,11 +1,13 @@
-import React from "react";
-import { render, screen, cleanup } from "@testing-library/react";
-import { MemoryRouter } from "react-router-dom";
-import { UserRoutes } from "../user-routes";
-import type { User } from "../user-routes"; 
+import React from "react"
+import { cleanup, render, screen } from "@testing-library/react"
+import { MemoryRouter } from "react-router-dom"
+import { MockedProvider } from "@apollo/client/testing"
+import { UserRoutes } from "../user-routes"
+import type { User } from "../user-routes"
+import { UPDATE_USER } from "../user-query"
 
 const defaultUser: User = {
-  id: "1", 
+  id: "1",
   name: "John Doe",
   location: "Unknown",
   github: "",
@@ -14,58 +16,87 @@ const defaultUser: User = {
   avatar: "https://dummyimage.com/200x200/000/fff",
   orcid: "0000-0000-0000-0000",
   links: [],
-};
+}
+
+const mocks = [
+  {
+    request: {
+      query: UPDATE_USER,
+      variables: {
+        id: "1",
+        name: "John Doe",
+        location: "Unknown",
+        github: "",
+        institution: "Unknown Institution",
+        email: "john.doe@example.com",
+        avatar: "https://dummyimage.com/200x200/000/fff",
+        orcid: "0000-0000-0000-0000",
+        links: [],
+      },
+    },
+    result: {
+      data: {
+        updateUser: {
+          id: "1",
+          name: "John Doe",
+        },
+      },
+    },
+  },
+]
 
 const renderWithRouter = (user: User, route: string, hasEdit: boolean) => {
   return render(
-    <MemoryRouter initialEntries={[route]}>
-      <UserRoutes user={user} hasEdit={hasEdit} />
-    </MemoryRouter>
-  );
-};
+    <MockedProvider mocks={mocks} addTypename={false}>
+      <MemoryRouter initialEntries={[route]}>
+        <UserRoutes user={user} hasEdit={hasEdit} />
+      </MemoryRouter>
+    </MockedProvider>,
+  )
+}
 
 describe("UserRoutes Component", () => {
-  const user: User = defaultUser;
+  const user: User = defaultUser
 
   it("renders UserDatasetsView for the default route", async () => {
-    renderWithRouter(user, "/", true);
-    expect(screen.getByText(`${user.name}'s Datasets`)).toBeInTheDocument();
-    const datasetsView = await screen.findByTestId("user-datasets-view");
-    expect(datasetsView).toBeInTheDocument();
-  });
+    renderWithRouter(user, "/", true)
+    expect(screen.getByText(`${user.name}'s Datasets`)).toBeInTheDocument()
+    const datasetsView = await screen.findByTestId("user-datasets-view")
+    expect(datasetsView).toBeInTheDocument()
+  })
 
   it("renders FourOFourPage for an invalid route", async () => {
-    renderWithRouter(user, "/nonexistent-route", true);
+    renderWithRouter(user, "/nonexistent-route", true)
     const errorMessage = await screen.findByText(
-      /404: The page you are looking for does not exist./i
-    );
-    expect(errorMessage).toBeInTheDocument();
-  });
+      /404: The page you are looking for does not exist./i,
+    )
+    expect(errorMessage).toBeInTheDocument()
+  })
 
   it("renders UserAccountView when hasEdit is true", async () => {
-    renderWithRouter(user, "/account", true);
-    const accountView = await screen.findByTestId("user-account-view");
-    expect(accountView).toBeInTheDocument();
-  });
+    renderWithRouter(user, "/account", true)
+    const accountView = await screen.findByTestId("user-account-view")
+    expect(accountView).toBeInTheDocument()
+  })
 
   it("renders UserNotificationsView when hasEdit is true", async () => {
-    renderWithRouter(user, "/notifications", true);
+    renderWithRouter(user, "/notifications", true)
     const notificationsView = await screen.findByTestId(
-      "user-notifications-view"
-    );
-    expect(notificationsView).toBeInTheDocument();
-  });
+      "user-notifications-view",
+    )
+    expect(notificationsView).toBeInTheDocument()
+  })
 
   it("renders FourOThreePage when hasEdit is false for restricted routes", async () => {
-    const restrictedRoutes = ["/account", "/notifications"];
+    const restrictedRoutes = ["/account", "/notifications"]
 
     for (const route of restrictedRoutes) {
-      cleanup(); 
-      renderWithRouter(user, route, false);
+      cleanup()
+      renderWithRouter(user, route, false)
       const errorMessage = await screen.findByText(
-        /403: You do not have access to this page, you may need to sign in./i
-      );
-      expect(errorMessage).toBeInTheDocument();
+        /403: You do not have access to this page, you may need to sign in./i,
+      )
+      expect(errorMessage).toBeInTheDocument()
     }
-  });
-});
+  })
+})

package/src/scripts/users/__tests__/user-tabs.spec.tsx

@@ -1,11 +1,11 @@
-import React, { useState } from "react";
-import { render, screen, fireEvent } from "@testing-library/react";
-import { MemoryRouter, Route, Routes } from "react-router-dom";
-import { UserAccountTabs } from "../user-tabs"; 
+import React, { useState } from "react"
+import { fireEvent, render, screen } from "@testing-library/react"
+import { MemoryRouter, Route, Routes } from "react-router-dom"
+import { UserAccountTabs } from "../user-tabs"
 
 // Wrapper component to allow dynamic modification of `hasEdit`
 const UserAccountTabsWrapper: React.FC = () => {
-  const [hasEdit, setHasEdit] = useState(true);
+  const [hasEdit, setHasEdit] = useState(true)
 
   return (
     <>
@@ -16,72 +16,69 @@ const UserAccountTabsWrapper: React.FC = () => {
         </Routes>
       </MemoryRouter>
     </>
-  );
-};
+  )
+}
 
 describe("UserAccountTabs Component", () => {
   it("should not render tabs when hasEdit is false", () => {
-    render(<UserAccountTabsWrapper />);
+    render(<UserAccountTabsWrapper />)
 
-    expect(screen.getByText("User Datasets")).toBeInTheDocument();
+    expect(screen.getByText("User Datasets")).toBeInTheDocument()
 
-    fireEvent.click(screen.getByText("Toggle hasEdit"));
+    fireEvent.click(screen.getByText("Toggle hasEdit"))
 
-    expect(screen.queryByText("User Datasets")).not.toBeInTheDocument();
-  });
+    expect(screen.queryByText("User Datasets")).not.toBeInTheDocument()
+  })
 
   it("should render tabs when hasEdit is toggled back to true", () => {
-    render(<UserAccountTabsWrapper />);
-
-    expect(screen.getByText("User Datasets")).toBeInTheDocument();
-
-    fireEvent.click(screen.getByText("Toggle hasEdit"));
-    expect(screen.queryByText("User Datasets")).not.toBeInTheDocument();
-
-    fireEvent.click(screen.getByText("Toggle hasEdit"));
-    expect(screen.getByText("User Datasets")).toBeInTheDocument();
-  });
-
-    it("should update active class on the correct NavLink based on route", () => {
-      render(<UserAccountTabsWrapper />);
-  
-     // Utility function to check if an element has 'active' class - used because of CSS module discrepancies between classNames
-      const hasActiveClass = (element) => element.className.includes('active');
-  
-      const datasetsTab = screen.getByText("User Datasets");
-      expect(hasActiveClass(datasetsTab)).toBe(true);
-  
-      const notificationsTab = screen.getByText("User Notifications");
-
-      fireEvent.click(notificationsTab);
-      
-      expect(hasActiveClass(notificationsTab)).toBe(true);
-      expect(hasActiveClass(datasetsTab)).toBe(false);
-  
-      const accountTab = screen.getByText("Account Info");
-
-      fireEvent.click(accountTab);
-
-      expect(hasActiveClass(accountTab)).toBe(true);
-      expect(hasActiveClass(datasetsTab)).toBe(false);
-      expect(hasActiveClass(notificationsTab)).toBe(false);
-    });
-
-
-    it("should trigger animation state when a tab is clicked", async () => {
-        render(<UserAccountTabsWrapper />);
-    
-        const notificationsTab = screen.getByText("User Notifications");
-        // Utility function to check if an element has 'clicked' class - used because of CSS module discrepancies between classNames
-        const hasClickedClass = (element) => element.className.includes('clicked');
-        const tabsContainer = await screen.findByRole("list");
-
-        expect(hasClickedClass(tabsContainer)).toBe(false);
-    
-        fireEvent.click(notificationsTab);
-  
-        expect(hasClickedClass(tabsContainer)).toBe(true);
-    });
-    
-      
-});
+    render(<UserAccountTabsWrapper />)
+
+    expect(screen.getByText("User Datasets")).toBeInTheDocument()
+
+    fireEvent.click(screen.getByText("Toggle hasEdit"))
+    expect(screen.queryByText("User Datasets")).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByText("Toggle hasEdit"))
+    expect(screen.getByText("User Datasets")).toBeInTheDocument()
+  })
+
+  it("should update active class on the correct NavLink based on route", () => {
+    render(<UserAccountTabsWrapper />)
+
+    // Utility function to check if an element has 'active' class - used because of CSS module discrepancies between classNames
+    const hasActiveClass = (element) => element.className.includes("active")
+
+    const datasetsTab = screen.getByText("User Datasets")
+    expect(hasActiveClass(datasetsTab)).toBe(true)
+
+    const notificationsTab = screen.getByText("User Notifications")
+
+    fireEvent.click(notificationsTab)
+
+    expect(hasActiveClass(notificationsTab)).toBe(true)
+    expect(hasActiveClass(datasetsTab)).toBe(false)
+
+    const accountTab = screen.getByText("Account Info")
+
+    fireEvent.click(accountTab)
+
+    expect(hasActiveClass(accountTab)).toBe(true)
+    expect(hasActiveClass(datasetsTab)).toBe(false)
+    expect(hasActiveClass(notificationsTab)).toBe(false)
+  })
+
+  it("should trigger animation state when a tab is clicked", async () => {
+    render(<UserAccountTabsWrapper />)
+
+    const notificationsTab = screen.getByText("User Notifications")
+    // Utility function to check if an element has 'clicked' class - used because of CSS module discrepancies between classNames
+    const hasClickedClass = (element) => element.className.includes("clicked")
+    const tabsContainer = await screen.findByRole("list")
+
+    expect(hasClickedClass(tabsContainer)).toBe(false)
+
+    fireEvent.click(notificationsTab)
+
+    expect(hasClickedClass(tabsContainer)).toBe(true)
+  })
+})