tracker/frontend/src/__tests__/UserCard.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
import React from 'react'
import { render } from '@testing-library/react'
import { MemoryRouter } from 'react-router-dom'
import { ThemeProvider, theme } from '@chakra-ui/core'
import { I18nProvider } from '@lingui/react'
import { MockedProvider } from '@apollo/client/testing'
import { UserCard } from '../UserCard'
import { setupI18n } from '@lingui/core'

describe('<UserCard />', () => {
  it('badge is green when TwoFactor value is true', async () => {
    const { getByText } = render(
      <MockedProvider>
        <MemoryRouter initialEntries={['/']}>
          <ThemeProvider theme={theme}>
            <I18nProvider i18n={setupI18n()}>
              <UserCard
                userName="testuser@testemail.gc.ca"
                displayName="Test User"
                tfa={true}
                role="USER_READ"
              />
            </I18nProvider>
          </ThemeProvider>
        </MemoryRouter>
      </MockedProvider>,
    )

    const tfaBadge = getByText(/2FA/i)
    expect(tfaBadge).toBeDefined()
    expect(tfaBadge).toHaveStyle('background-color: rgb(198, 246, 213)')
  })

  it('badge is red when TwoFactor value is false', async () => {
    const { getByText } = render(
      <MockedProvider>
        <MemoryRouter initialEntries={['/']}>
          <ThemeProvider theme={theme}>
            <I18nProvider i18n={setupI18n()}>
              <UserCard
                userName="testuser@testemail.gc.ca"
                displayName="Test User"
                tfa={false}
                role="USER_READ"
              />
            </I18nProvider>
          </ThemeProvider>
        </MemoryRouter>
      </MockedProvider>,
    )

    const tfaBadge = getByText(/2FA/i)
    expect(tfaBadge).toBeDefined()
    expect(tfaBadge).toHaveStyle('background-color: rgb(254, 215, 215)')
  })
})