text: import React from 'react'
  import '@testing-library/jest-dom/extend-expect'
  import { render } from '@testing-library/react'
  import { fireEvent, prettyDOM } from '@testing-library/dom'
  import Note from './Note'
  
  test('renders content', () => {
  
    const note = {
      content: 'Component testing is done with react-testing-library',
      important: true
    }
  
    const component = render(
      <Note note={note} />
    )
    const li = component.container.querySelector('li')
  
    console.log(prettyDOM(li))
  
    // method 1
    expect(component.container).toHaveTextContent(
      'Component testing is done with react-testing-library'
    )
  
    // method 2
    const element = component.getByText(
      'Component testing is done with react-testing-library'
    )
    expect(element).toBeDefined()
  
    // method 3
    const div = component.container.querySelector('.note')
    expect(div).toHaveTextContent(
      'Component testing is done with react-testing-library'
    )
  })
  
  test('clicking the button calls event handler once', () => {
    const note = {
      content: 'Component testing is done with react-testing-library',
      important: true
    }
  
    const mockHandler = jest.fn()
  
    const component = render(
      <Note note={note} toggleImportanceOf={mockHandler} />
    )
  
    const button = component.getByText('Make Not Imporant')
    fireEvent.click(button)
  
    expect(mockHandler.mock.calls).toHaveLength(1)
  })