@openneuro/app 4.35.0 → 4.36.0

package/src/scripts/users/__tests__/user-account-view.spec.tsx

@@ -1,4 +1,3 @@
-import { vi } from "vitest"
 import React from "react"
 import { MockedProvider } from "@apollo/client/testing"
 import {
@@ -11,6 +10,7 @@ import {
 import { UserAccountView } from "../user-account-view"
 import type { User } from "../../types/user-types"
 import * as userQueries from "../../queries/user"
+import { BrowserRouter } from "react-router-dom"
 
 const baseUser: User = {
   id: "1",
@@ -22,76 +22,93 @@ const baseUser: User = {
   avatar: "https://dummyimage.com/200x200/000/fff",
   orcid: "0000-0000-0000-0000",
   links: [],
+  admin: false,
+  provider: "orcid",
+  created: new Date("2025-05-20T14:50:32.424Z").toISOString(),
+  lastSeen: new Date("2025-05-20T14:50:32.424Z").toISOString(),
+  blocked: false,
+  githubSynced: null,
 }
 
-vi.mock("../../queries/user", async () => {
-  const actual = await vi.importActual("../../queries/user")
-  return {
-    ...actual,
-    useUser: () => ({
-      user: baseUser,
-      loading: false,
-      error: undefined,
-    }),
-  }
-})
-
-const mocks = [
-  {
-    request: {
-      query: userQueries.GET_USER,
-      variables: { id: baseUser.orcid },
-    },
-    result: {
-      data: {
-        user: baseUser,
-      },
-    },
+const userMock = {
+  request: {
+    query: userQueries.GET_USER,
+    variables: { id: baseUser.orcid },
   },
-  {
-    request: {
-      query: userQueries.UPDATE_USER,
-      variables: {
-        id: baseUser.orcid,
-        location: "Marin, CA",
-        links: ["https://newlink.com"],
-        institution: "New University",
-      },
-    },
-    result: {
-      data: {
-        updateUser: {
-          id: baseUser.orcid,
-          location: "Marin, CA",
-          links: ["https://newlink.com"],
-          institution: "New University",
-        },
-      },
+  result: {
+    data: {
+      user: baseUser,
     },
   },
-]
+}
 
 describe("<UserAccountView />", () => {
-  it("should render the user details correctly", () => {
+  it("should render the user details correctly", async () => {
+    const mocks = [
+      userMock,
+      {
+        request: {
+          query: userQueries.UPDATE_USER,
+          variables: {
+            id: baseUser.orcid,
+          },
+        },
+        result: {
+          data: {
+            updateUser: {
+              id: baseUser.orcid,
+              location: "Marin, CA",
+              links: ["https://newlink.com"],
+              institution: "New University",
+            },
+          },
+        },
+      },
+    ]
     render(
-      <MockedProvider mocks={mocks} addTypename={false}>
-        <UserAccountView />
-      </MockedProvider>,
+      <BrowserRouter>
+        <MockedProvider mocks={mocks} addTypename={false}>
+          <UserAccountView orcidUser={baseUser} />
+        </MockedProvider>
+      </BrowserRouter>,
     )
-    expect(screen.getByText("Name:")).toBeInTheDocument()
     expect(screen.getByText("John Doe")).toBeInTheDocument()
+    expect(screen.getByText("Name:")).toBeInTheDocument()
     expect(screen.getByText("Email:")).toBeInTheDocument()
     expect(screen.getByText("john.doe@example.com")).toBeInTheDocument()
     expect(screen.getByText("ORCID:")).toBeInTheDocument()
     expect(screen.getByText("0000-0000-0000-0000")).toBeInTheDocument()
-    expect(screen.getByText("Connect your GitHub")).toBeInTheDocument()
+    expect(screen.getByText("Link user data from GitHub")).toBeInTheDocument()
   })
-
-  it("should render location with EditableContent", async () => {
+  it("should render location with EditableContent and update", async () => {
+    const mocks = [
+      userMock,
+      {
+        request: {
+          query: userQueries.UPDATE_USER,
+          variables: {
+            id: baseUser.orcid,
+            location: "Marin, CA",
+          },
+        },
+        result: {
+          data: {
+            updateUser: {
+              id: baseUser.orcid,
+              location: "Marin, CA",
+              links: ["https://newlink.com"],
+              institution: "New University",
+            },
+          },
+        },
+      },
+    ]
     render(
-      <MockedProvider mocks={mocks} addTypename={false}>
-        <UserAccountView />
-      </MockedProvider>,
+      <BrowserRouter>
+        <MockedProvider mocks={mocks} addTypename={false}>
+          <UserAccountView orcidUser={baseUser} />
+        </MockedProvider>
+      </BrowserRouter>,
     )
     const locationSection = within(screen.getByTestId("location-section"))
     expect(screen.getByText("Location")).toBeInTheDocument()
@@ -106,11 +123,32 @@ describe("<UserAccountView />", () => {
     })
   })
 
-  it("should render institution with EditableContent", async () => {
+  it("should render institution with EditableContent and update", async () => {
+    const mocks = [userMock, {
+      request: {
+        query: userQueries.UPDATE_USER,
+        variables: {
+          id: baseUser.orcid,
+          institution: "New University",
+        },
+      },
+      result: {
+        data: {
+          updateUser: {
+            id: baseUser.orcid,
+            location: "Marin, CA",
+            links: ["https://newlink.com"],
+            institution: "New University",
+          },
+        },
+      },
+    }]
     render(
-      <MockedProvider mocks={mocks} addTypename={false}>
-        <UserAccountView />
-      </MockedProvider>,
+      <BrowserRouter>
+        <MockedProvider mocks={mocks} addTypename={false}>
+          <UserAccountView orcidUser={baseUser} />
+        </MockedProvider>,
+      </BrowserRouter>,
     )
     const institutionSection = within(screen.getByTestId("institution-section"))
     expect(screen.getByText("Institution")).toBeInTheDocument()
@@ -125,11 +163,32 @@ describe("<UserAccountView />", () => {
     })
   })
 
-  it("should render links with EditableContent and validation", async () => {
+  it("should render links with EditableContent and handle valid URL input", async () => {
+    const mocks = [userMock, {
+      request: {
+        query: userQueries.UPDATE_USER,
+        variables: {
+          id: baseUser.orcid,
+          links: ["https://newlink.com"],
+        },
+      },
+      result: {
+        data: {
+          updateUser: {
+            id: baseUser.orcid,
+            location: "Marin, CA",
+            links: ["https://newlink.com"],
+            institution: "New University",
+          },
+        },
+      },
+    }]
     render(
-      <MockedProvider mocks={mocks} addTypename={false}>
-        <UserAccountView />
-      </MockedProvider>,
+      <BrowserRouter>
+        <MockedProvider mocks={mocks} addTypename={false}>
+          <UserAccountView orcidUser={baseUser} />
+        </MockedProvider>,
+      </BrowserRouter>,
     )
     const linksSection = within(screen.getByTestId("links-section"))
     expect(screen.getByText("Links")).toBeInTheDocument()
@@ -145,11 +204,33 @@ describe("<UserAccountView />", () => {
   })
 
   it("should show an error message when invalid URL is entered in links section", async () => {
+    const mocks = [{
+      request: {
+        query: userQueries.UPDATE_USER,
+        variables: {
+          id: baseUser.orcid,
+          links: ["https://newlink.com"],
+        },
+      },
+      result: {
+        data: {
+          updateUser: {
+            id: baseUser.orcid,
+            location: "Marin, CA",
+            links: ["https://newlink.com"],
+            institution: "New University",
+          },
+        },
+      },
+    }]
     render(
-      <MockedProvider mocks={mocks} addTypename={false}>
-        <UserAccountView />
-      </MockedProvider>,
+      <BrowserRouter>
+        <MockedProvider mocks={mocks} addTypename={false}>
+          <UserAccountView orcidUser={baseUser} />
+        </MockedProvider>,
+      </BrowserRouter>,
     )
+
     const linksSection = within(screen.getByTestId("links-section"))
     const editButton = linksSection.getByText("Edit")
     fireEvent.click(editButton)
@@ -159,7 +240,9 @@ describe("<UserAccountView />", () => {
     fireEvent.click(saveButton)
     await waitFor(() => {
       expect(
-        linksSection.getByText("Invalid URL format. Please use a valid link."),
+        linksSection.getByText(
+          "Invalid URL format. Please start with http:// or https://",
+        ),
       ).toBeInTheDocument()
     })
   })

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

@@ -1,18 +1,7 @@
 import React from "react"
 import { render, screen } from "@testing-library/react"
 import { UserCard } from "../user-card"
-
-interface User {
-  id: string
-  name: string
-  location: string
-  github?: string
-  institution: string
-  email: string
-  avatar: string
-  orcid: string
-  links: string[]
-}
+import type { User } from "../../types/user-types"
 
 describe("UserCard Component", () => {
   const baseUser: User = {
@@ -28,7 +17,7 @@ describe("UserCard Component", () => {
   }
 
   it("renders all user details when all data is provided", () => {
-    render(<UserCard user={baseUser} />)
+    render(<UserCard orcidUser={baseUser} />)
 
     const orcidLink = screen.getByRole("link", {
       name: "ORCID profile of John Doe",
@@ -67,7 +56,7 @@ describe("UserCard Component", () => {
       institution: "",
     }
 
-    render(<UserCard user={minimalUser} />)
+    render(<UserCard orcidUser={minimalUser} />)
 
     const orcidLink = screen.getByRole("link", {
       name: "ORCID profile of Jane Doe",
@@ -91,13 +80,13 @@ describe("UserCard Component", () => {
       name: "John Smith",
       email: "johnsmith@example.com",
       orcid: "0000-0003-4567-8901",
-      links: [], // Empty links
+      links: [],
       avatar: "https://example.com/avatar.jpg",
       location: "New York, NY",
       institution: "NYU",
     }
 
-    render(<UserCard user={userWithEmptyLinks} />)
+    render(<UserCard orcidUser={userWithEmptyLinks} />)
 
     expect(screen.queryByRole("link", { name: "https://example.com" })).not
       .toBeInTheDocument()
@@ -117,7 +106,7 @@ describe("UserCard Component", () => {
       institution: "",
     }
 
-    render(<UserCard user={userWithoutLocationAndInstitution} />)
+    render(<UserCard orcidUser={userWithoutLocationAndInstitution} />)
 
     const orcidLink = screen.getByRole("link", {
       name: "ORCID profile of Emily Doe",

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

@@ -1,44 +1,137 @@
+import { vi } from "vitest"
 import React from "react"
-import { render, screen, waitFor } from "@testing-library/react"
+import { render, screen } from "@testing-library/react"
 import { MockedProvider } from "@apollo/client/testing"
 import { MemoryRouter, Route, Routes } from "react-router-dom"
+
+// Component
 import { UserQuery } from "../user-query"
-import { GET_USER } from "../../queries/user"
-import * as ProfileUtils from "../../authentication/profile"
+import { isValidOrcid } from "../../utils/validationUtils"
+import { getProfile } from "../../authentication/profile"
+import { isAdmin } from "../../authentication/admin-user"
+import { useCookies } from "react-cookie"
+import { useUser } from "../../queries/user"
+import type { User } from "../../types/user-types"
+import type { UserRoutesProps } from "../../types/user-types"
 
-Object.defineProperty(ProfileUtils, "getProfile", {
-  value: () => ({ sub: "1" }),
-  writable: true,
-})
+// --- generate a random valid ORCID - maybe unnecessary ---
+const generateRandomValidOrcid = (): string => {
+  const segments = Array.from(
+    { length: 4 },
+    () => Math.floor(1000 + Math.random() * 9000).toString(),
+  )
+  return segments.join("-")
+}
 
-const validOrcid = "0009-0001-9689-7232"
+vi.mock("./user-routes", () => ({
+  UserRoutes: vi.fn((props: UserRoutesProps) => (
+    <div data-testid="mock-user-routes">
+      Mocked UserRoutes Component
+      <p>User ORCID: {props.orcidUser?.orcid}</p>
+      <p>Has Edit: {props.hasEdit ? "true" : "false"}</p>
+      <p>Is User: {props.isUser ? "true" : "false"}</p>
+    </div>
+  )),
+}))
 
-const userMock = {
-  request: {
-    query: GET_USER,
-    variables: { userId: "1" },
-  },
-  result: {
-    data: {
-      user: {
-        __typename: "User",
-        id: "1",
-        name: "Test User",
-        orcid: validOrcid,
-        email: "test@example.com",
-        avatar: "http://example.com/avatar.png",
+vi.mock("../../utils/validationUtils", () => ({
+  isValidOrcid: vi.fn<typeof isValidOrcid>(),
+}))
+
+vi.mock("react-cookie", () => ({
+  useCookies: vi.fn<typeof useCookies>(),
+}))
+
+vi.mock("../../authentication/profile", () => ({
+  getProfile: vi.fn<typeof getProfile>(),
+}))
+
+vi.mock("../../authentication/admin-user", () => ({
+  isAdmin: vi.fn<typeof isAdmin>(),
+}))
+
+vi.mock("../../queries/user", () => ({
+  useUser: vi.fn<typeof useUser>(),
+  ADVANCED_SEARCH_DATASETS_QUERY: {
+    kind: "Document",
+    definitions: [
+      {
+        kind: "OperationDefinition",
+        operation: "query",
+        name: { kind: "Name", value: "AdvancedSearchDatasets" },
+        variableDefinitions: [],
+        selectionSet: { kind: "SelectionSet", selections: [] },
+      },
+    ],
+    loc: {
+      start: 0,
+      end: 0,
+      source: {
+        body: "",
+        name: "Mocked",
+        locationOffset: { line: 1, column: 1 },
       },
     },
   },
+}))
+
+export interface OpenNeuroTokenProfile {
+  sub: string
+  admin: boolean
+  iat: number
+  exp: number
+  scopes?: string[]
 }
 
-const mocks = [userMock]
+describe("UserQuery component - Dynamic ORCID Loading", () => {
+  const mockedIsValidOrcid = vi.mocked(isValidOrcid)
+  const mockedGetProfile = vi.mocked(getProfile)
+  const mockedIsAdmin = vi.mocked(isAdmin)
+  const mockedUseCookies = vi.mocked(useCookies)
+  const mockedUseUser = vi.mocked(useUser)
+
+  let testOrcid: string
 
-describe("UserQuery component", () => {
-  it("displays the ORCID on the page for a valid ORCID", async () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.resetAllMocks()
+    mockedIsValidOrcid.mockReturnValue(true)
+
+    mockedGetProfile.mockReturnValue({
+      sub: "11111",
+      admin: false,
+      iat: Date.now(),
+      exp: Date.now() + (1000 * 60 * 60),
+      scopes: [],
+    })
+
+    mockedIsAdmin.mockReturnValue(false)
+    mockedUseCookies.mockReturnValue([{}, vi.fn(), vi.fn()])
+    testOrcid = generateRandomValidOrcid()
+
+    mockedUseUser.mockImplementation((orcidParam: string) => {
+      const dynamicUser: User = {
+        id: orcidParam,
+        name: `Mock User for ${orcidParam}`,
+        location: "Dynamic Location",
+        institution: "Dynamic Institution",
+        email: `${orcidParam}@example.com`,
+        avatar: "https://dummyimage.com/200x200/000/fff",
+        orcid: orcidParam,
+        links: [],
+      }
+      return {
+        user: dynamicUser,
+        loading: false,
+        error: undefined,
+      }
+    })
+  })
+
+  it("loads the page and displays user data for a valid ORCID from the URL", async () => {
     render(
-      <MockedProvider mocks={mocks} addTypename={true}>
-        <MemoryRouter initialEntries={[`/user/${validOrcid}`]}>
+      <MockedProvider mocks={[]} addTypename={true}>
+        <MemoryRouter initialEntries={[`/user/${testOrcid}`]}>
           <Routes>
             <Route path="/user/:orcid" element={<UserQuery />} />
           </Routes>
@@ -46,26 +139,28 @@ describe("UserQuery component", () => {
       </MockedProvider>,
     )
 
-    await waitFor(() =>
-      expect(screen.queryByText("Loading...")).not.toBeInTheDocument()
-    )
-
-    expect(screen.getByText(validOrcid)).toBeInTheDocument()
+    expect(screen.getByText(`${testOrcid}`)).toBeInTheDocument()
   })
 
-  it("shows 404 page for invalid ORCID", async () => {
+  it("displays 404 if the ORCID in the URL is invalid", async () => {
+    const invalidOrcid = "invalid-orcid-string"
+
+    mockedUseUser.mockReturnValue({
+      user: undefined,
+      loading: false,
+      error: undefined,
+    })
     render(
       <MockedProvider mocks={[]} addTypename={true}>
-        <MemoryRouter initialEntries={[`/user/invalid-orcid`]}>
+        <MemoryRouter initialEntries={[`/user/${invalidOrcid}`]}>
           <Routes>
             <Route path="/user/:orcid" element={<UserQuery />} />
           </Routes>
         </MemoryRouter>
       </MockedProvider>,
     )
-
-    await waitFor(() => screen.getByText(/404/i))
-
-    expect(screen.getByText(/404/i)).toBeInTheDocument()
+    expect(
+      screen.getByText(/404: The page you are looking for does not exist./i),
+    ).toBeInTheDocument()
   })
 })