tracker/frontend/src/__tests__/ResetPasswordPage.test.js at result-processor-pubsub · 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
import React from 'react'
import { ThemeProvider, theme } from '@chakra-ui/core'
import { MemoryRouter, Route } from 'react-router-dom'
import { render, waitFor, fireEvent } from '@testing-library/react'
import { I18nProvider } from '@lingui/react'
import { setupI18n } from '@lingui/core'
import { MockedProvider } from '@apollo/client/testing'
import { UserStateProvider } from '../UserState'
import ResetPasswordPage from '../ResetPasswordPage'
import { UPDATE_PASSWORD } from '../graphql/mutations'

const mocks = [
  {
    request: {
      query: UPDATE_PASSWORD,
    },
    result: {
      data: {
        status: 'string',
      },
    },
  },
]

describe('<ResetPasswordPage />', () => {
  describe('given no input', () => {
    describe('when onBlur fires', () => {
      describe('password field', () => {
        it('displays an error message', async () => {
          const { container, queryByText } = render(
            <UserStateProvider
              initialState={{ userName: null, jwt: null, tfa: null }}
            >
              <ThemeProvider theme={theme}>
                <I18nProvider i18n={setupI18n()}>
                  <MockedProvider mocks={mocks}>
                    <MemoryRouter
                      initialEntries={[
                        '/reset-password/fwsdGDFSGSDVA.gedafbedafded.bgdbsedbeagbe',
                      ]}
                      initialIndex={0}
                    >
                      <Route path="/reset-password/:resetToken">
                        <ResetPasswordPage />
                      </Route>
                    </MemoryRouter>
                  </MockedProvider>
                </I18nProvider>
              </ThemeProvider>
            </UserStateProvider>,
          )

          const password = container.querySelector('#password')

          await waitFor(() => {
            fireEvent.blur(password)
          })

          await waitFor(() =>
            expect(queryByText(/Password cannot be empty/)).toBeInTheDocument(),
          )
        })
      })

      describe('confirm password field', () => {
        it('displays an error message', async () => {
          const { container, queryByText } = render(
            <UserStateProvider
              initialState={{ userName: null, jwt: null, tfa: null }}
            >
              <ThemeProvider theme={theme}>
                <I18nProvider i18n={setupI18n()}>
                  <MockedProvider mocks={mocks}>
                    <MemoryRouter
                      initialEntries={[
                        '/reset-password/fwsdGDFSGSDVA.gedafbedafded.bgdbsedbeagbe',
                      ]}
                      initialIndex={0}
                    >
                      <Route path="/reset-password/:resetToken">
                        <ResetPasswordPage />
                      </Route>
                    </MemoryRouter>
                  </MockedProvider>
                </I18nProvider>
              </ThemeProvider>
            </UserStateProvider>,
          )

          const confirmPassword = container.querySelector('#confirmPassword')

          await waitFor(() => fireEvent.blur(confirmPassword))

          await waitFor(() =>
            // This should work exactly like the password field above, but it
            // doesn't! The message is displayed but we can only get partial
            // match for some reason.
            expect(queryByText(/Password confirmation/)).toBeInTheDocument(),
          )
        })
      })
    })
  })
})