tracker/frontend/src/__tests__/UserList.test.js at centralize-logging · LearningAzure2020/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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
import React from 'react'
import UserList from '../UserList'
import { UPDATE_USER_ROLE } from '../graphql/mutations'
import { render, fireEvent, waitFor } from '@testing-library/react'
import { MemoryRouter, Router } from 'react-router-dom'
import { ThemeProvider, theme } from '@chakra-ui/core'
import { I18nProvider } from '@lingui/react'
import { createMemoryHistory } from 'history'
import { MockedProvider } from '@apollo/client/testing'
import { UserStateProvider } from '../UserState'

import { setupI18n } from '@lingui/core'
import { rawAdminPanelData } from '../fixtures/adminPanelData'

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

const data = rawAdminPanelData.data

describe('<UserList />', () => {
  it('successfully renders with mocked data', async () => {
    const { getByText } = render(
      <UserStateProvider
        initialState={{
          userName: 'testuser@testemail.gc.ca',
          jwt: 'string',
          tfaSendMethod: false,
        }}
      >
        <ThemeProvider theme={theme}>
          <I18nProvider i18n={i18n}>
            <MemoryRouter initialEntries={['/']}>
              <MockedProvider>
                <UserList
                  permission={'SUPER_ADMIN'}
                  userListData={data.findOrganizationBySlug.affiliations}
                  orgId={data.findOrganizationBySlug.id}
                  orgName={data.findOrganizationBySlug.name}
                />
              </MockedProvider>
            </MemoryRouter>
          </I18nProvider>
        </ThemeProvider>
      </UserStateProvider>,
    )

    await waitFor(() =>
      expect(
        getByText(
          data.findOrganizationBySlug.affiliations.edges[0].node.user.userName,
        ),
      ).toBeInTheDocument(),
    )
  })

  describe('Admin profile userlist', () => {
    it('updateUserRole elements render', async () => {
      const history = createMemoryHistory({
        initialEntries: ['/user-list'],
        initialIndex: 0,
      })

      const mocks = [
        {
          request: {
            query: UPDATE_USER_ROLE,
            variables: {
              userName:
                data.findOrganizationBySlug.affiliations.edges[0].node.user
                  .userName,
              orgId: data.findOrganizationBySlug.id,
              role: 'SUPER_ADMIN',
            },
          },
          result: {
            data: {
              updateUserRole: {
                status: 'string',
              },
            },
          },
        },
      ]

      const {
        getAllByText,
        getByDisplayValue,
        getByText,
        getByLabelText,
      } = render(
        <UserStateProvider
          initialState={{
            userName: 'testadmin@testemail.gc.ca',
            jwt: 'string',
            tfaSendMethod: false,
          }}
        >
          <ThemeProvider theme={theme}>
            <I18nProvider i18n={i18n}>
              <Router history={history}>
                <MockedProvider mocks={mocks} addTypename={false}>
                  <UserList
                    permission={'SUPER_ADMIN'}
                    userListData={data.findOrganizationBySlug.affiliations}
                    orgId={data.findOrganizationBySlug.id}
                    orgName={data.findOrganizationBySlug.name}
                  />
                </MockedProvider>
              </Router>
            </I18nProvider>
          </ThemeProvider>
        </UserStateProvider>,
      )

      const userRole = getByLabelText(/Role:/i)
      await waitFor(() => {
        expect(userRole.type).toEqual('select-one')
      })

      // change input on select to ADMIN
      fireEvent.change(userRole, { target: { value: 'SUPER_ADMIN' } })

      await waitFor(() => {
        const newRole = getByDisplayValue(/ADMIN/i)
        expect(newRole.type).toEqual('select-one')
      })

      // Apply changes button
      const updateButton = await waitFor(() => getAllByText(/Apply/i))

      const leftClick = { button: 0 }
      fireEvent.click(updateButton[0], leftClick)
      // default `button` property for click events is set to `0` which is a left click.

      // await changes
      await waitFor(() => {
        expect(getByText(/Role updated/i)).toBeInTheDocument()
      })
    })
  })
})