tracker/frontend/src/__tests__/PaginationButtons.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
import React from 'react'
import { PaginationButtons } from '../PaginationButtons'
import { render, cleanup } from '@testing-library/react'
import { ThemeProvider, theme } from '@chakra-ui/core'

describe('<PaginationButtons />', () => {
  afterEach(cleanup)

  it('the component renders', async () => {
    const { container } = render(
      <ThemeProvider theme={theme}>
        <PaginationButtons
          perPage={2}
          total={8}
          paginate={() => {}}
          currentPage={1}
        />
      </ThemeProvider>,
    )
    expect(container).toBeDefined()
  })

  it('left arrow buttons are disabled when on first page', async () => {
    const { container, getByLabelText } = render(
      <ThemeProvider>
        <PaginationButtons
          perPage={2}
          total={8}
          paginate={() => {}}
          currentPage={1}
        />
      </ThemeProvider>,
    )
    expect(container).toBeTruthy()

    const previousButton = getByLabelText('Previous page')
    expect(previousButton).toHaveAttribute('disabled')

    const skipToFirstButton = getByLabelText('Skip to first page')
    expect(skipToFirstButton).toHaveAttribute('disabled')

    const nextButton = getByLabelText('Next page')
    expect(nextButton).not.toHaveAttribute('disabled')

    const skipToLastButton = getByLabelText('Skip to last page')
    expect(skipToLastButton).not.toHaveAttribute('disabled')
  })

  it('right arrow buttons are disabled when on last page', async () => {
    const { container, getByLabelText } = render(
      <ThemeProvider>
        <PaginationButtons
          perPage={2}
          total={8}
          paginate={() => {}}
          currentPage={4}
        />
      </ThemeProvider>,
    )
    expect(container).toBeTruthy()

    const previousButton = getByLabelText('Previous page')
    expect(previousButton).not.toHaveAttribute('disabled')

    const skipToFirstButton = getByLabelText('Skip to first page')
    expect(skipToFirstButton).not.toHaveAttribute('disabled')

    const nextButton = getByLabelText('Next page')
    expect(nextButton).toHaveAttribute('disabled')

    const skipToLastButton = getByLabelText('Skip to last page')
    expect(skipToLastButton).toHaveAttribute('disabled')
  })
})