tracker/frontend/src/user/__tests__/EditableEmailUpdateOptions.test.js at master · bankystack/tracker · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React from 'react'
import { render, fireEvent, waitFor } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'
import { MockedProvider } from '@apollo/client/testing'
import { EditableEmailUpdateOptions } from '../EditableEmailUpdateOptions'
import { UPDATE_USER_PROFILE } from '../../graphql/mutations'
import { useUserVar } from '../../utilities/userState'
import { ChakraProvider } from '@chakra-ui/react'
import { I18nProvider } from '@lingui/react'
import { setupI18n } from '@lingui/core'

jest.mock('../../utilities/userState', () => ({
  useUserVar: jest.fn(),
}))

const i18n = setupI18n({
  locale: 'en',
  messages: {
    en: {},
  },
  localeData: {
    en: {},
  },
})

const mocks = [
  {
    request: {
      query: UPDATE_USER_PROFILE,
      variables: {
        emailUpdateOptions: {
          orgFootprint: true,
          progressReport: false,
          detectDecay: false
        },
      },
    },
    result: {
      data: {
        updateUserProfile: {
          result: {
            __typename: 'UpdateUserProfileResult',
            user: {
              emailUpdateOptions: {
                orgFootprint: true,
                progressReport: false,
                detectDecay: false
              },
            },
          },
        },
      },
    },
  },
]

describe('EditableEmailSubscriptionOptions', () => {
  const mockLogin = jest.fn()
  const mockCurrentUser = { emailUpdateOptions: { orgFootprint: false, progressReport: false, detectDecay: false } }

  beforeEach(() => {
    useUserVar.mockReturnValue({
      login: mockLogin,
      currentUser: mockCurrentUser,
    })
  })

  it('renders without crashing', () => {
    const { getByText } = render(
      <MockedProvider mocks={mocks} addTypename={false}>
        <I18nProvider i18n={i18n}>
          <ChakraProvider>
            <EditableEmailUpdateOptions emailUpdateOptions={{ orgFootprint: false, progressReport: false, detectDecay: false }} />
          </ChakraProvider>
        </I18nProvider>
      </MockedProvider>,
    )
    expect(getByText('Email Update Preferences:')).toBeInTheDocument()
  })

  it('opens the modal when edit button is clicked', () => {
    const { getByText, getByRole } = render(
      <MockedProvider mocks={mocks} addTypename={false}>
        <I18nProvider i18n={i18n}>
          <ChakraProvider>
            <EditableEmailUpdateOptions emailUpdateOptions={{ orgFootprint: false, progressReport: false, detectDecay: false }} />
          </ChakraProvider>
        </I18nProvider>
      </MockedProvider>,
    )
    fireEvent.click(getByText('Edit'))
    expect(getByRole('dialog')).toBeInTheDocument()
  })

  it('submits the form and updates user profile', async () => {
    const { getByText, getByLabelText } = render(
      <MockedProvider mocks={mocks} addTypename={false}>
        <I18nProvider i18n={i18n}>
          <ChakraProvider>
            <EditableEmailUpdateOptions emailUpdateOptions={{ orgFootprint: false, progressReport: false, detectDecay: false }} />
          </ChakraProvider>
        </I18nProvider>
      </MockedProvider>,
    )
    fireEvent.click(getByText('Edit'))
    fireEvent.click(getByLabelText('Recent Activity'))
    fireEvent.click(getByText('Confirm'))

    await waitFor(() => {
      expect(mockLogin).toHaveBeenCalledWith({
        ...mockCurrentUser,
        emailUpdateOptions: { orgFootprint: true, progressReport: false, detectDecay: false },
      })
    })
  })
})