662/asterner profile tests

src/pages/Profile.jsx

@@ -145,7 +145,9 @@ const Profile = () => {
           width: isSmallScreen ? '100%' : 'auto'
         }}
       >
-        <Typography sx={{ fontWeight: 'bold', fontSize: '18px' }}>My Profile</Typography>
+        <Typography variant="h1" sx={{ fontWeight: 'bold', fontSize: '18px' }}>
+          My Profile
+        </Typography>
         {/* TODO: Determine whether this Box is needed */}
         {/* <Box
           sx={{

test/components/Profile/ProfileComponent.test.jsx

@@ -4,37 +4,16 @@ import { cleanup, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 import { ProfileComponent } from '@components/Profile';
-import { SignedInUserContext } from '@contexts';
-import * as profileHelper from '../../../src/model-helpers/Profile';
 import '@testing-library/jest-dom/extend-expect';
 import createMatchMedia from '../../helpers/createMatchMedia';
+import MockSignedInUserContext from '../../mocks/contexts/MockSignedInUserContext';
 
-const profileInfo = {
-  profileName: null,
-  nickname: null,
-  profileImg: null
-};
-
-const mockSignedInUserContextMemo = {
-  updateProfileInfo: vi.fn(),
-  setProfileData: vi.fn(),
-  profileData: {
-    profileInfo: {
-      profileName: null,
-      nickname: null,
-      profileImg: null
-    }
-  },
-  fetchProfileInfo: vi.spyOn(profileHelper, 'fetchProfileInfo').mockResolvedValue({
-    profileData: profileInfo
-  })
-};
-const renderTest = () =>
+const renderTest = (contactProfile = null) =>
   render(
     <BrowserRouter>
-      <SignedInUserContext.Provider value={mockSignedInUserContextMemo}>
-        <ProfileComponent contactProfile={null} />
-      </SignedInUserContext.Provider>
+      <MockSignedInUserContext>
+        <ProfileComponent contactProfile={contactProfile} />
+      </MockSignedInUserContext>
     </BrowserRouter>
   );
 
@@ -90,13 +69,7 @@ describe('ProfileComponent', () => {
   });
 
   it('renders no edit button for ProfileInputFields if contactProfile is not null', async () => {
-    const { queryByRole } = render(
-      <BrowserRouter>
-        <SignedInUserContext.Provider value={mockSignedInUserContextMemo}>
-          <ProfileComponent contactProfile={{}} />
-        </SignedInUserContext.Provider>
-      </BrowserRouter>
-    );
+    const { queryByRole } = renderTest({});
     await waitFor(() => {
       const editButton = queryByRole('button', { name: 'Edit' });
 

test/helpers/setup-vitest.js

@@ -1,6 +1,7 @@
 /* eslint-disable */
 import { afterEach } from 'vitest';
 import createMatchMedia from './createMatchMedia';
+import '@testing-library/jest-dom';
 
 process.env.VITE_SOLID_IDENTITY_PROVIDER = 'https://solidcommunity.net';
 process.env.VITE_SUGGESTED_OIDC_OPTIONS =

test/mocks/contexts/MockSignedInUserContext.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { vi } from 'vitest';
+import { SignedInUserContext } from '@contexts';
+import * as profileHelper from '../../../src/model-helpers/Profile';
+
+const profileInfo = {
+  profileName: null,
+  nickname: null,
+  profileImg: null
+};
+
+const mockSignedInUserContextMemo = {
+  updateProfileInfo: vi.fn(),
+  setProfileData: vi.fn(),
+  profileData: profileInfo,
+  fetchProfileInfo: vi.spyOn(profileHelper, 'fetchProfileInfo').mockResolvedValue({
+    profileData: profileInfo
+  })
+};
+
+/**
+ * @param {object} props - The properties of the component
+ * @param {React.JSX.Element} [props.children] - The child elements to be rendered inside the main content area
+ * @returns {React.JSX.Element} SignedInUserContext - an element which allows querying profile info
+ */
+const MockSignedInUserContext = ({ children }) => (
+  <SignedInUserContext.Provider value={mockSignedInUserContextMemo}>
+    {children}
+  </SignedInUserContext.Provider>
+);
+
+export default MockSignedInUserContext;

test/pages/Profile.test.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act } from 'react-dom/test-utils';
+import { render, screen, cleanup, waitForElementToBeRemoved } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, beforeEach, afterEach } from 'vitest';
+import { Profile } from '@pages';
+import MockSignedInUserContext from '../mocks/contexts/MockSignedInUserContext';
+
+const queryClient = new QueryClient();
+
+const renderProfile = () =>
+  render(
+    <QueryClientProvider client={queryClient}>
+      <MockSignedInUserContext>
+        <BrowserRouter>
+          <Profile />
+        </BrowserRouter>
+      </MockSignedInUserContext>
+    </QueryClientProvider>
+  );
+
+describe('Profile Page', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  beforeEach(() => {
+    act(() => {
+      renderProfile();
+    });
+  });
+
+  it('renders', async () => {
+    const heading = await screen.findByRole('heading', { name: 'My Profile' }, { timeout: 2000 });
+    expect(heading).toHaveAccessibleName('My Profile');
+  });
+
+  it('can show and hide the share documents modal', async () => {
+    const user = userEvent.setup();
+
+    const shareDocumentsButton = await screen.findByRole(
+      'button',
+      { name: 'Share Documents' },
+      { timeout: 2000 }
+    );
+    expect(shareDocumentsButton).toHaveAccessibleName('Share Documents');
+
+    // Open share document modal
+    user.click(shareDocumentsButton);
+    const shareHeading = await screen.findByRole('heading', { name: 'Share All Documents' });
+    expect(shareHeading).toBeVisible();
+
+    // Close share document modal
+    user.keyboard('{escape}');
+    await waitForElementToBeRemoved(shareHeading, { timeout: 5000 });
+  });
+
+  it('can show and hide the add document modal', async () => {
+    const user = userEvent.setup();
+
+    const addDocumentButton = await screen.findByRole(
+      'button',
+      { name: 'Add Document' },
+      { timeout: 2000 }
+    );
+    expect(addDocumentButton).toHaveAccessibleName('Add Document');
+
+    // Open add document modal
+    user.click(addDocumentButton);
+    const addHeading = await screen.findByRole('heading', { name: 'Upload Document' });
+
+    // close add document modal
+    user.keyboard('{escape}');
+    await waitForElementToBeRemoved(addHeading, { timeout: 5000 });
+  });
+});