@openneuro/app 4.35.0 → 4.36.0-alpha.0

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

@@ -1,11 +1,86 @@
+import { vi } from "vitest"
 import React from "react"
 import { cleanup, render, screen } from "@testing-library/react"
 import { MemoryRouter } from "react-router-dom"
 import { MockedProvider } from "@apollo/client/testing"
+
+// Component under test
 import { UserRoutes } from "../user-routes"
+
+// Types and Queries
 import type { User } from "../../types/user-types"
-import { DATASETS_QUERY } from "../user-datasets-view"
-import { GET_USER } from "../../queries/user"
+import { ADVANCED_SEARCH_DATASETS_QUERY, GET_USER } from "../../queries/user"
+
+vi.mock("./user-container", () => {
+  return {
+    UserAccountContainer: vi.fn((props) => (
+      <div data-testid="mock-user-account-container">
+        Mocked UserAccountContainer
+        {props.children}
+        <p>Container ORCID: {props.orcidUser?.orcid}</p>
+        <p>Container Has Edit: {props.hasEdit ? "true" : "false"}</p>
+        <p>Container Is User: {props.isUser ? "true" : "false"}</p>
+      </div>
+    )),
+  }
+})
+
+vi.mock("./user-account-view", () => ({
+  UserAccountView: vi.fn((props) => (
+    <div data-testid="user-account-view">
+      Mocked UserAccountView
+      <p>View ORCID: {props.orcidUser?.orcid}</p>
+    </div>
+  )),
+}))
+
+vi.mock("./user-notifications-view", () => ({
+  UserNotificationsView: vi.fn((props) => (
+    <div data-testid="user-notifications-view">
+      Mocked UserNotificationsView
+      {props.children}
+      <p>Notifications ORCID: {props.orcidUser?.orcid}</p>
+    </div>
+  )),
+}))
+
+vi.mock("./user-datasets-view", () => ({
+  UserDatasetsView: vi.fn((props) => (
+    <div data-testid="user-datasets-view">
+      Mocked UserDatasetsView
+      <p>Datasets ORCID: {props.orcidUser?.orcid}</p>
+      <p>Datasets Has Edit: {props.hasEdit ? "true" : "false"}</p>
+    </div>
+  )),
+}))
+
+vi.mock("../errors/404page", () => ({
+  default: vi.fn(() => (
+    <div data-testid="404-page">
+      404: The page you are looking for does not exist.
+    </div>
+  )),
+}))
+
+vi.mock("../errors/403page", () => ({
+  default: vi.fn(() => (
+    <div data-testid="403-page">
+      403: You do not have access to this page, you may need to sign in.
+    </div>
+  )),
+}))
+
+vi.mock("./user-notifications-tab-content", () => ({
+  UnreadNotifications: vi.fn(() => (
+    <div data-testid="unread-notifications">Unread Notifications</div>
+  )),
+  SavedNotifications: vi.fn(() => (
+    <div data-testid="saved-notifications">Saved Notifications</div>
+  )),
+  ArchivedNotifications: vi.fn(() => (
+    <div data-testid="archived-notifications">Archived Notifications</div>
+  )),
+}))
 
 const defaultUser: User = {
   id: "1",
@@ -15,15 +90,33 @@ const defaultUser: User = {
   institution: "Unknown Institution",
   email: "john.doe@example.com",
   avatar: "https://dummyimage.com/200x200/000/fff",
-  orcid: "0000-0000-0000-0000",
+  orcid: "0000-0000-0000-0000", // Ensure ORCID is present for mocks
   links: [],
 }
 
 const mocks = [
   {
     request: {
-      query: DATASETS_QUERY,
-      variables: { first: 25 },
+      query: ADVANCED_SEARCH_DATASETS_QUERY,
+      variables: {
+        first: 26,
+        query: {
+          bool: {
+            filter: [
+              {
+                terms: {
+                  "permissions.userPermissions.user.id": [defaultUser.id],
+                },
+              },
+            ],
+            must: [{ match_all: {} }],
+          },
+        },
+        sortBy: null,
+        cursor: null,
+        allDatasets: true,
+        datasetStatus: undefined,
+      },
     },
     result: {
       data: {
@@ -72,7 +165,7 @@ const mocks = [
   {
     request: {
       query: GET_USER,
-      variables: { userId: defaultUser.id },
+      variables: { id: defaultUser.orcid },
     },
     result: {
       data: {
@@ -81,9 +174,8 @@ const mocks = [
     },
   },
 ]
-
 const renderWithRouter = (
-  user: User,
+  orcidUser: User,
   route: string,
   hasEdit: boolean,
   isUser: boolean,
@@ -91,53 +183,90 @@ const renderWithRouter = (
   return render(
     <MockedProvider mocks={mocks} addTypename={false}>
       <MemoryRouter initialEntries={[route]}>
-        <UserRoutes user={user} hasEdit={hasEdit} isUser={isUser} />
+        <UserRoutes orcidUser={orcidUser} hasEdit={hasEdit} isUser={isUser} />
       </MemoryRouter>
     </MockedProvider>,
   )
 }
 
 describe("UserRoutes Component", () => {
-  const user: User = defaultUser
+  const userToPass: User = defaultUser
+
+  afterEach(() => {
+    cleanup()
+    vi.clearAllMocks()
+    vi.resetAllMocks()
+  })
 
   it("renders UserDatasetsView for the default route", async () => {
-    renderWithRouter(user, "/", true, true)
+    renderWithRouter(userToPass, "/", true, true)
+    // Expect the default to be the datasets view
     const datasetsView = await screen.findByTestId("user-datasets-view")
     expect(datasetsView).toBeInTheDocument()
+    expect(screen.getByText(userToPass.orcid)).toBeInTheDocument()
   })
 
   it("renders FourOFourPage for an invalid route", async () => {
-    renderWithRouter(user, "/nonexistent-route", true, true)
-    const errorMessage = await screen.findByText(
-      /404: The page you are looking for does not exist./i,
-    )
-    expect(errorMessage).toBeInTheDocument()
+    renderWithRouter(userToPass, "/nonexistent-route", true, true)
+    // Expect the mocked 404 page
+    expect(
+      screen.getByText(/404: The page you are looking for does not exist./i),
+    ).toBeInTheDocument()
   })
 
-  // it("renders UserAccountView when hasEdit is true", async () => {
-  //   renderWithRouter(user, "/account", true, true);
-  //   const accountView = await screen.findByTestId("user-account-view");
-  //   expect(accountView).toBeInTheDocument();
-  // });
+  it("renders UserAccountView when hasEdit is true", async () => {
+    renderWithRouter(userToPass, "/account", true, true)
+    // Expect the mocked account view
+    const accountView = await screen.findByTestId("user-account-view")
+    expect(accountView).toBeInTheDocument()
+  })
 
   it("renders UserNotificationsView when hasEdit is true", async () => {
-    renderWithRouter(user, "/notifications", true, true)
+    renderWithRouter(userToPass, "/notifications", true, true)
+    // Expect the mocked notifications view
+    const notificationsView = await screen.findByTestId(
+      "user-notifications-view",
+    )
+    expect(notificationsView).toBeInTheDocument()
+  })
+
+  it("renders SavedNotifications within UserNotificationsView", async () => {
+    renderWithRouter(userToPass, "/notifications/saved", true, true)
     const notificationsView = await screen.findByTestId(
       "user-notifications-view",
     )
     expect(notificationsView).toBeInTheDocument()
+    expect(screen.getByText("Saved Notification Example")).toBeInTheDocument()
+  })
+
+  it("renders ArchivedNotifications within UserNotificationsView", async () => {
+    renderWithRouter(userToPass, "/notifications/archived", true, true)
+    const notificationsView = await screen.findByTestId(
+      "user-notifications-view",
+    )
+    expect(notificationsView).toBeInTheDocument()
+    expect(screen.getByText("Archived Notification Example"))
+      .toBeInTheDocument()
+  })
+
+  it("renders 404 for unknown notification sub-route", async () => {
+    renderWithRouter(userToPass, "/notifications/nonexistent", true, true)
+    expect(
+      screen.getByText(/404: The page you are looking for does not exist./i),
+    ).toBeInTheDocument()
   })
 
   it("renders FourOThreePage when hasEdit is false for restricted routes", async () => {
     const restrictedRoutes = ["/account", "/notifications"]
 
     for (const route of restrictedRoutes) {
+      renderWithRouter(userToPass, route, false, true)
+      expect(
+        screen.getByText(
+          /403: You do not have access to this page, you may need to sign in./i,
+        ),
+      ).toBeInTheDocument()
       cleanup()
-      renderWithRouter(user, route, false, true)
-      const errorMessage = await screen.findByText(
-        /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

@@ -54,12 +54,11 @@ describe("UserAccountTabs Component", () => {
     const datasetsTab = screen.getByText("My Datasets")
     expect(hasActiveClass(datasetsTab)).toBe(true)
 
-    const notificationsTab = screen.getByText("Notifications")
+    //const notificationsTab = screen.getByText("Notifications")
 
-    fireEvent.click(notificationsTab)
+    //fireEvent.click(notificationsTab)
 
-    expect(hasActiveClass(notificationsTab)).toBe(true)
-    expect(hasActiveClass(datasetsTab)).toBe(false)
+    //expect(hasActiveClass(notificationsTab)).toBe(true)
 
     const accountTab = screen.getByText("Account Info")
 
@@ -67,20 +66,21 @@ describe("UserAccountTabs Component", () => {
 
     expect(hasActiveClass(accountTab)).toBe(true)
     expect(hasActiveClass(datasetsTab)).toBe(false)
-    expect(hasActiveClass(notificationsTab)).toBe(false)
+    //expect(hasActiveClass(notificationsTab)).toBe(false)
+    expect(hasActiveClass(datasetsTab)).toBe(false)
   })
 
   it("should trigger animation state when a tab is clicked", async () => {
     render(<UserAccountTabsWrapper />)
 
-    const notificationsTab = screen.getByText("Notifications")
+    const accountTab = screen.getByText("Account Info")
     // 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)
+    fireEvent.click(accountTab)
 
     expect(hasClickedClass(tabsContainer)).toBe(true)
   })

package/src/scripts/users/components/edit-list.tsx

@@ -6,7 +6,7 @@ interface EditListProps {
   placeholder?: string
   elements?: string[]
   setElements: (elements: string[]) => void
-  validation?: RegExp
+  validation?: RegExp | ((value: string) => boolean)
   validationMessage?: string
 }
 
@@ -30,17 +30,32 @@ export const EditList: React.FC<EditListProps> = (
   const removeElement = (index: number): void => {
     setElements(elements.filter((_, i) => i !== index))
   }
+  const isInputValid = (value: string): boolean => {
+    if (!validation) {
+      return true
+    }
+
+    if (validation instanceof RegExp) {
+      return validation.test(value)
+    } else if (typeof validation === "function") {
+      return validation(value)
+    }
+
+    return true
+  }
 
   // Add a new element to the list
   const addElement = (): void => {
-    if (!newElement.trim()) {
+    const trimmedNewElement = newElement.trim()
+
+    if (!trimmedNewElement) {
       setWarnEmpty(true)
       setWarnValidation(null)
-    } else if (validation && !validation.test(newElement.trim())) {
+    } else if (!isInputValid(trimmedNewElement)) {
       setWarnValidation(validationMessage || "Invalid input format")
       setWarnEmpty(false)
     } else {
-      setElements([...elements, newElement.trim()])
+      setElements([...elements, trimmedNewElement])
       setWarnEmpty(false)
       setWarnValidation(null)
       setNewElement("")
@@ -62,7 +77,13 @@ export const EditList: React.FC<EditListProps> = (
           className="form-control"
           placeholder={placeholder}
           value={newElement}
-          onChange={(e) => setNewElement(e.target.value)}
+          onChange={(e) => {
+            setNewElement(e.target.value)
+            if (warnEmpty || warnValidation) {
+              setWarnEmpty(false)
+              setWarnValidation(null)
+            }
+          }}
           onKeyDown={handleKeyDown}
         />
         <Button

package/src/scripts/users/components/edit-string.tsx

@@ -7,7 +7,7 @@ interface EditStringProps {
   setValue: (value: string) => void
   placeholder?: string
   closeEditing: () => void
-  validation?: RegExp
+  validation?: RegExp | ((value: string) => boolean)
   validationMessage?: string
 }
 
@@ -25,18 +25,35 @@ export const EditString: React.FC<EditStringProps> = (
   const [warnEmpty, setWarnEmpty] = useState<string | null>(null)
   const [warnValidation, setWarnValidation] = useState<string | null>(null)
 
+  // Helper for validation logic
+  const isInputValid = (inputValue: string): boolean => {
+    if (!validation) {
+      return true
+    }
+
+    if (validation instanceof RegExp) {
+      return validation.test(inputValue)
+    } else if (typeof validation === "function") {
+      return validation(inputValue)
+    }
+
+    return true
+  }
+
+  const trimmedCurrentValue = currentValue.trim()
+
   useEffect(() => {
-    // Show warning only if there was an initial value and it was deleted
-    if (value !== "" && currentValue === "") {
+    // Logic for "empty" warning
+    if (value !== "" && trimmedCurrentValue === "") {
       setWarnEmpty(
-        "Your input is empty. This will delete the previously saved value..",
+        "Your input is empty. This will delete the previously saved value.",
       )
     } else {
       setWarnEmpty(null)
     }
 
-    // Validation logic
-    if (validation && currentValue && !validation.test(currentValue)) {
+    // Logic for "validation" warning
+    if (trimmedCurrentValue !== "" && !isInputValid(trimmedCurrentValue)) {
       setWarnValidation(validationMessage || "Invalid input")
     } else {
       setWarnValidation(null)
@@ -44,10 +61,13 @@ export const EditString: React.FC<EditStringProps> = (
   }, [currentValue, value, validation, validationMessage])
 
   const handleSave = (): void => {
-    if (!warnValidation) {
-      setValue(currentValue.trim())
-      closeEditing()
+    if (warnValidation) {
+      // Do not save if there's a validation error
+      return
     }
+
+    setValue(trimmedCurrentValue)
+    closeEditing()
   }
 
   // Handle Enter key press for saving
@@ -66,7 +86,14 @@ export const EditString: React.FC<EditStringProps> = (
           className="form-control"
           placeholder={placeholder}
           value={currentValue}
-          onChange={(e) => setCurrentValue(e.target.value)}
+          onChange={(e) => {
+            setCurrentValue(e.target.value)
+            // Clear warnings as user types again
+            if (warnEmpty || warnValidation) {
+              setWarnEmpty(null)
+              setWarnValidation(null)
+            }
+          }}
           onKeyDown={handleKeyDown}
         />
         <Button
@@ -77,11 +104,11 @@ export const EditString: React.FC<EditStringProps> = (
           onClick={handleSave}
         />
       </div>
-      {/* Show empty value warning only if content was deleted */}
-      {warnEmpty && currentValue === "" && (
+      {/* Display warning about deleting previous value if applicable */}
+      {warnEmpty && trimmedCurrentValue === "" && (
         <small className="warning-text">{warnEmpty}</small>
       )}
-      {/* Show validation error */}
+      {/* Display validation error */}
       {warnValidation && (
         <small className="warning-text">{warnValidation}</small>
       )}

package/src/scripts/users/components/editable-content.tsx

@@ -11,7 +11,7 @@ interface EditableContentProps {
   setRows: React.Dispatch<React.SetStateAction<string[] | string>>
   className: string
   heading: string
-  validation?: RegExp
+  validation?: RegExp | ((value: string) => boolean)
   validationMessage?: string
   "data-testid"?: string
 }
@@ -33,9 +33,16 @@ export const EditableContent: React.FC<EditableContentProps> = ({
 
   // Function to handle validation of user input
   const handleValidation = (value: string): boolean => {
-    if (validation && !validation.test(value)) {
-      return false
+    if (!validation) {
+      return true
     }
+
+    if (validation instanceof RegExp) {
+      return validation.test(value)
+    } else if (typeof validation === "function") {
+      return validation(value)
+    }
+
     return true
   }