Como testar o que tem na área de transferência e um select multíplo | React: automatizando os testes em aplicações front-end

1
resposta

Referente ao curso React: automatizando os testes em aplicações front-end, no capítulo Testando componentes React e atividade Renderizando os componentes

por kaique.grangeiro

| 37.2k xp | 14 posts

Eu gostaria de saber como eu posso comparar e testar o valor do que está na área de transferência do usuário, como aqueles botões que você clica ele copia um texto pra vc sem que vc tenha que selecionar ele, e também como testar um select multiplo como o que existe no framework do material ui.

Tentei fazer dessa forma mas não funcionou

  it('should copy bankslipCode', async () => {
    render(<BankSlipDetails {...requiredProps} />)

    await navigator.permissions.query({ name: 'clipboard-write' })
    const btn = screen.getByRole('button', {
      name: /copiar código/i
    })
    let clip = ''
    userEvent.click(btn)
    await navigator.clipboard.readText().then((text) => {
      clip = text
    })

    expect(clip).toContain(requiredProps.code)
  })

1 resposta

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

20/04/2021

Fala ai Kaique, tudo bem? Supondo que tu tem um componente assim:

function App() {
  const inputRef = useRef()

  const handleCopy = () => {
    navigator.clipboard.writeText(inputRef.current.value)
  }

  return (
    <div className="App">
      <header className="App-header">
        <input data-testid="field" ref={inputRef} defaultValue="TEXTO COPIADO" />
        <button data-testid="button" onClick={handleCopy} type="button">Copy</button>
      </header>
    </div>
  );
}

Os testes poderiam ser algo assim:

describe('Tests for App component', () => {
  beforeEach(() => {
    navigator.clipboard = {
      writeText: jest.fn(),
    }
  })

  it('renders learn react link', async () => {
    render(<App />);

    fireEvent.click(screen.getByTestId('button'))

    expect(navigator.clipboard.writeText).toHaveBeenCalledTimes(1)
    expect(navigator.clipboard.writeText).toHaveBeenCalledWith('TEXTO COPIADO')
  });
})

Espero ter ajudado.