React Context

import React from 'react'
import {render, screen} from '@testing-library/react'
import '@testing-library/jest-dom'
import {NameContext, NameProvider, NameConsumer} from '../react-context'

/**
 * Testar os valores padrão interpretando um consumidor de contexto sem
 * um provedor correspondente.
 */
test('NameConsumer shows default value', () => {
  render(<NameConsumer />)
  expect(screen.getByText(/^My Name Is:/)).toHaveTextContent(
    'My Name Is: Unknown',
  )
})

/**
 * Um interpretador personalizado para configurar provedores.
 * Estende as opções do interpretador com `providerProps`
 * para permitir a injeção de cenários diferentes
 * com os quais testar.
 *
 * @see https://testing-library.com/docs/react-testing-library/setup#custom-render
 */
const customRender = (ui, {providerProps, ...renderOptions}) => {
  return render(
    <NameContext.Provider {...providerProps}>{ui}</NameContext.Provider>,
    renderOptions,
  )
}

test('NameConsumer shows value from provider', () => {
  const providerProps = {
    value: 'C3PO',
  }
  customRender(<NameConsumer />, {providerProps})
  expect(screen.getByText(/^My Name Is:/)).toHaveTextContent('My Name Is: C3P0')
})

/**
 * Para testar um componente que fornece um valor de contexto,
 * interpreta um consumidor correspondente como filho.
 */
test('NameProvider composes full name from first, last', () => {
  const providerProps = {
    first: 'Boba',
    last: 'Fett',
  }
  customRender(
    <NameContext.Consumer>
      {value => <span>Received: {value}</span>}
    </NameContext.Consumer>,
    {providerProps},
  )
  expect(screen.getByText(/^Received:/).textContent).toBe('Received: Boba Fett')
})

/**
 * Uma árvore contendo ambos fornecedor e consumidor podem ser desenhados manualmente.
 */
test('NameProvider/Consumer shows name of character', () => {
  const wrapper = ({children}) => (
    <NameProvider first="Leia" last="Organa">
      {children}
    </NameProvider>
  )

  render(<NameConsumer />, {wrapper})
  expect(screen.getByText(/^My Name Is:/).textContent).toBe(
    'My Name Is: Leia Organa',
  )
})