test: add coverage for settings forms

src/pages/UserSettings/SettingsPageImpact.test.tsx

@@ -0,0 +1,69 @@
+import '@testing-library/jest-dom/vitest'
+
+import { act, waitFor } from '@testing-library/react'
+import { FactoryUser } from 'src/test/factories/User'
+import { describe, expect, it, vi } from 'vitest'
+
+import { FormProvider } from './__mocks__/FormProvider'
+import { SettingsPageImpact } from './SettingsPageImpact'
+
+let mockUser = FactoryUser()
+
+vi.mock('src/common/hooks/useCommonStores', () => ({
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  __esModule: true,
+  useCommonStores: () => ({
+    stores: {
+      userStore: {
+        activeUser: mockUser,
+      },
+    },
+  }),
+}))
+
+describe('SettingsPageImpact', () => {
+  it('renders existing and missing impact', async () => {
+    mockUser = FactoryUser({
+      profileType: 'space',
+      impact: {
+        2023: [
+          {
+            id: 'plastic',
+            value: 43000,
+            isVisible: true,
+          },
+          {
+            id: 'volunteers',
+            value: 45,
+            isVisible: false,
+          },
+        ],
+      },
+    })
+    // Act
+    let wrapper
+    act(() => {
+      wrapper = FormProvider(mockUser, <SettingsPageImpact />)
+    })
+
+    await waitFor(() => {
+      expect(
+        wrapper.getAllByText('43,000 Kg of plastic', { exact: false }),
+      ).toHaveLength(1)
+      expect(wrapper.getAllByAltText('icon')[1].src).toContain('eye.svg')
+      expect(
+        wrapper.getAllByText('45 volunteers', { exact: false }),
+      ).toHaveLength(1)
+      expect(wrapper.getAllByAltText('icon')[3].src).toContain(
+        'eye-crossed.svg',
+      )
+
+      expect(wrapper.getAllByText('Edit data', { exact: false })).toHaveLength(
+        5,
+      )
+      expect(
+        wrapper.getAllByText('Do you have impact data for this year?'),
+      ).toHaveLength(4)
+    })
+  })
+})

src/pages/UserSettings/SettingsPageMapPin.test.tsx

@@ -0,0 +1,109 @@
+import '@testing-library/jest-dom/vitest'
+
+import { act, waitFor } from '@testing-library/react'
+import { IModerationStatus } from 'oa-shared'
+import { FactoryMapPin } from 'src/test/factories/MapPin'
+import { FactoryUser } from 'src/test/factories/User'
+import { describe, expect, it, vi } from 'vitest'
+
+import { FormProvider } from './__mocks__/FormProvider'
+import { SettingsPageMapPin } from './SettingsPageMapPin'
+
+import type { ILocation } from 'src/models'
+
+let mockUser = FactoryUser()
+let mockPin = FactoryMapPin()
+
+vi.mock('src/common/hooks/useCommonStores', () => ({
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  __esModule: true,
+  useCommonStores: () => ({
+    stores: {
+      userStore: {
+        activeUser: mockUser,
+      },
+      mapsStore: {
+        getPin: vi.fn().mockResolvedValue(mockPin),
+      },
+    },
+  }),
+}))
+
+describe('SettingsPageMapPin', () => {
+  it('renders for no pin', async () => {
+    mockUser = FactoryUser()
+    // Act
+    let wrapper
+    act(() => {
+      wrapper = FormProvider(mockUser, <SettingsPageMapPin />)
+    })
+
+    await waitFor(() => {
+      expect(wrapper.getAllByTestId('NoLocationDataTextDisplay')).toHaveLength(
+        1,
+      )
+      expect(wrapper.queryAllByTestId('LocationDataTextDisplay')).toHaveLength(
+        0,
+      )
+    })
+  })
+
+  it('renders for member', async () => {
+    const name = 'Super cool place'
+    mockUser = FactoryUser({
+      profileType: 'member',
+      location: {
+        name,
+        countryCode: 'br',
+        latlng: { lng: 0, lat: 0 },
+      } as ILocation,
+    })
+    // Act
+    let wrapper
+    act(() => {
+      wrapper = FormProvider(mockUser, <SettingsPageMapPin />)
+    })
+
+    await waitFor(() => {
+      expect(wrapper.getAllByTestId('descriptionMember')).toHaveLength(1)
+      expect(wrapper.queryAllByTestId('descriptionSpace')).toHaveLength(0)
+      expect(wrapper.getAllByTestId('LocationDataTextDisplay')).toHaveLength(1)
+      expect(wrapper.getAllByText(name, { exact: false })).toHaveLength(1)
+    })
+  })
+
+  it('renders for space', async () => {
+    const comments = 'Need a better name'
+    const name = 'Super cool place'
+
+    mockPin = FactoryMapPin({
+      comments,
+      moderation: IModerationStatus.IMPROVEMENTS_NEEDED,
+    })
+
+    mockUser = FactoryUser({
+      profileType: 'collection-point',
+      location: {
+        name,
+        countryCode: 'br',
+        latlng: { lng: 0, lat: 0 },
+      } as ILocation,
+    })
+    // Act
+    let wrapper
+    act(() => {
+      wrapper = FormProvider(mockUser, <SettingsPageMapPin />)
+    })
+
+    await waitFor(() => {
+      expect(wrapper.queryAllByTestId('descriptionMember')).toHaveLength(0)
+      expect(wrapper.getAllByTestId('descriptionSpace')).toHaveLength(1)
+      expect(
+        wrapper.getAllByTestId('WorkspaceMapPinRequiredStars'),
+      ).toHaveLength(1)
+      expect(wrapper.getAllByTestId('LocationDataTextDisplay')).toHaveLength(1)
+      expect(wrapper.getAllByText(name, { exact: false })).toHaveLength(1)
+      expect(wrapper.getAllByText(comments, { exact: false })).toHaveLength(1)
+    })
+  })
+})

src/pages/UserSettings/SettingsPageMapPin.tsx

@@ -40,13 +40,21 @@ interface ILocationProps {
 const LocationDataTextDisplay = ({ location }: ILocationProps) => {
   if (!location?.latlng)
     return (
-      <Text variant="paragraph" data-cy="LocationDataTextDisplay">
+      <Text
+        variant="paragraph"
+        data-cy="NoLocationDataTextDisplay"
+        data-testid="NoLocationDataTextDisplay"
+      >
         {mapForm.noLocationLabel}
       </Text>
     )
 
   return (
-    <Text variant="paragraph" data-cy="LocationDataTextDisplay">
+    <Text
+      variant="paragraph"
+      data-cy="LocationDataTextDisplay"
+      data-testid="LocationDataTextDisplay"
+    >
       {mapForm.locationLabel}
       <br />
       {location?.name}{' '}
@@ -219,17 +227,26 @@ export const SettingsPageMapPin = () => {
           {mapPin ? addPinTitle : yourPinTitle}
         </Heading>
         {isMember && (
-          <Text variant="quiet" data-cy="descriptionMember">
+          <Text
+            variant="quiet"
+            data-cy="descriptionMember"
+            data-testid="descriptionMember"
+          >
             {mapForm.descriptionMember}
           </Text>
         )}
 
         {!isMember && (
-          <Text variant="quiet" data-cy="descriptionSpace">
+          <Text
+            variant="quiet"
+            data-cy="descriptionSpace"
+            data-testid="descriptionSpace"
+          >
             {mapForm.descriptionSpace}
             <br />
             <ExternalLink
               data-cy="WorkspaceMapPinRequiredStars"
+              data-testid="WorkspaceMapPinRequiredStars"
               href={themeStore?.currentTheme.styles.communityProgramURL}
               sx={{ textDecoration: 'underline', color: 'currentcolor' }}
             >

src/pages/UserSettings/SettingsPageNotifications.test.tsx

@@ -0,0 +1,43 @@
+import '@testing-library/jest-dom/vitest'
+
+import { act, waitFor } from '@testing-library/react'
+import { EmailNotificationFrequency } from 'oa-shared'
+import { FactoryUser } from 'src/test/factories/User'
+import { describe, expect, it, vi } from 'vitest'
+
+import { FormProvider } from './__mocks__/FormProvider'
+import { SettingsPageNotifications } from './SettingsPageNotifications'
+
+let mockUser = FactoryUser({})
+
+vi.mock('src/common/hooks/useCommonStores', () => ({
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  __esModule: true,
+  useCommonStores: () => ({
+    stores: {
+      userStore: {
+        activeUser: mockUser,
+      },
+    },
+  }),
+}))
+
+describe('SettingsPageNotifications', () => {
+  it('renders the users existing notification preference', async () => {
+    mockUser = FactoryUser({
+      notification_settings: {
+        emailFrequency: EmailNotificationFrequency.MONTHLY,
+      },
+    })
+    // Act
+    let wrapper
+    act(() => {
+      wrapper = FormProvider(mockUser, <SettingsPageNotifications />)
+    })
+
+    await waitFor(() => {
+      expect(wrapper.getAllByText('Monthly')).toHaveLength(1)
+      expect(wrapper.queryByText('Weekly')).toBeNull()
+    })
+  })
+})