sqlmesh/web/common/src/components/CopyButton/CopyButton.test.tsx at v0.229.0 · SQLMesh/sqlmesh · 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
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import {
  vi,
  describe,
  it,
  expect,
  afterEach,
  beforeEach,
  type MockInstance,
} from 'vitest'

import { CopyButton } from './CopyButton'

describe('CopyButton', () => {
  let writeTextSpy: MockInstance

  beforeEach(() => {
    writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText')
  })

  afterEach(() => {
    vi.restoreAllMocks()
  })

  it('copies text to clipboard on click', async () => {
    const user = userEvent.setup()
    const writeTextSpy = vi.spyOn(navigator.clipboard, 'writeText')
    render(
      <CopyButton text="Hello, World!">
        {copied => (copied ? 'Copied!' : 'Copy')}
      </CopyButton>,
    )
    const button = screen.getByRole('button')
    await user.click(button)
    expect(writeTextSpy).toHaveBeenCalledWith('Hello, World!')
    expect(writeTextSpy).toHaveBeenCalledTimes(1)
  })

  it('shows copied state after clicking', async () => {
    const user = userEvent.setup()
    render(
      <CopyButton
        text="test"
        delay={1000}
      >
        {copied => (copied ? 'Copied!' : 'Copy')}
      </CopyButton>,
    )
    const button = screen.getByRole('button')
    expect(button).toHaveTextContent('Copy')
    await user.click(button)
    await waitFor(() => {
      expect(button).toHaveTextContent('Copied!')
    })
  })

  it('disables button while in copied state', async () => {
    const user = userEvent.setup()
    render(
      <CopyButton text="test">
        {copied => (copied ? 'Copied!' : 'Copy')}
      </CopyButton>,
    )
    const button = screen.getByRole('button')
    expect(button).toBeEnabled()
    await user.click(button)
    await waitFor(() => {
      expect(button).toBeDisabled()
    })
  })

  it('resets to initial state after delay', async () => {
    const user = userEvent.setup()
    render(
      <CopyButton
        text="test"
        delay={100}
      >
        {copied => (copied ? 'Copied!' : 'Copy')}
      </CopyButton>,
    )
    const button = screen.getByRole('button')
    await user.click(button)
    await waitFor(() => {
      expect(button).toHaveTextContent('Copied!')
    })
    await waitFor(
      () => {
        expect(button).toHaveTextContent('Copy')
        expect(button).toBeEnabled()
      },
      { timeout: 200 },
    )
  })

  it('calls onClick handler if provided', async () => {
    const onClickSpy = vi.fn()
    const user = userEvent.setup()
    render(
      <CopyButton
        text="test"
        onClick={onClickSpy}
      >
        {() => 'Copy'}
      </CopyButton>,
    )
    await user.click(screen.getByRole('button'))
    expect(onClickSpy).toHaveBeenCalled()
    expect(writeTextSpy).toHaveBeenCalled()
  })
})