# 2020年10月31日モブプロ#10

[MDの書き方](https://qiita.com/tbpgr/items/989c6badefff69377da7)

モブプロのコンテンツは🤟がついています。

# 前回の続き

await waitForElement(() => ...)

これでうまくテストできるようになる。
非同期処理がある場合は必要。

## チェックできるかどうかのテスト

it('チェックができること', async () => {
  const {queryByTestId} = render(<App/>)
  const doingCheckBox = await waitForElement(() => queryByTestId('doing-check'))
  expect(doingCheckBox.disabled).toBeFalsy()
})

## チェックされていないかどうかのテスト

it('チェックされてないこと', async () => {
  const {queryByTestId} = render(<App/>)
  const doingCheckBox = await waitForElement(() => queryByTestId('doing-check'))
  expect(doingCheckBox.checked).toBeFalsy()
})

# 完了データのテスト

describe('マウント with done data', () => {
  beforeAll(() => {
    axios.get = jest.fn().mockResolvedValue(mockSuccessGetDoneTask)
  })
})

## チェックできないかどうかのテスト

it('チェックができないこと', async () => {
  const {queryByTestId} = render(<App/>)
  const doingCheckBox = await waitForElement(() => queryByTestId('doing-check'))
  expect(doingCheckBox.disabled).toBeTruthy()
})

## チェックされていないかどうかのテスト

it('チェックされてないこと', async () => {
  const {queryByTestId} = render(<App/>)
  const doingCheckBox = await waitForElement(() => queryByTestId('doing-check'))
  expect(doingCheckBox.checked).toBeFalsy()
})

# インタラクションのテスト

describe('Interaction', () => {
  describe('テキストフィールド入力時', () => {
    beforeEach(() => {
      axios.get = jest.fn().mockResolvedValue(mockEmptyGetTask)
      const {queryByTestId} = render(<App/>)
      const titleTextField = queryByTestId('title-text')
      fireEvent.change(titleTextField, { target : { value : 'title' } })
    })
  })
})

上記を最初に書き、その中にテストケースを書いていく。

`beforeEach`を記述していることで、テストケース毎に中を実行する。

## 作成ボタンがクリックできるかテスト

it('作成ボタンがクリックできること', () => {
  const {getAllByTestId} = render(<App/>)
  const createButton = getAllByTestId('create-button')[0]
  expect(createButton.disabled).toBeFalsy()
})

## postが実行されるかテスト

it('作成ボタンをクリックし、POSTが実行されること', () => {
  const {getAllByTestId} = render(<App/>)
  const createButton = getAllByTestId('create-button')[0]

  const mockAddTask = jest.fn().mockResolvedValue(mockEmptyGetTask)
  axios.post = mockAddTask

  fireEvent.click(createButton)
  const path = mockAddTask.mock.calls[0][0]
  expect(path).toBe('http://localhost:8000/tasks')
})

### `mock.calls`

postした内容を呼び出す。

console.log(mockAddTask.mock.calls[0][0])

// => 'http://localhost:8000/tasks'

参考サイト
https://jestjs.io/docs/ja/mock-functions

## リストが表示されるかテスト

it('作成ボタンをクリックし、リストが表示されること', async () => {
  const {getAllByTestId, queryByTestId} = render(<App/>)
  const createButton = getAllByTestId('create-button')[0]

  fireEvent.click(createButton)

  const listItem = await waitForElement(() => queryByTestId('list-text'))
  expect(listItem).toBeInTheDocument()
})

## 削除ボタンのテスト

describe('削除ボタンをクリック', () => {
  beforeEach(() => {
    axios.get = jest.fn().mockResolvedValue(mockSuccessGetTask)
  })
  it('削除ボタンをクリックし、DELETEが実行されること', async () => {
    const {getAllByTestId} = render(<App/>)
    const deleteButton = await waitForElement(() => getAllByTestId('delete-button')[0])

    const mockDeleteTask = jest.fn().mockResolvedValue(mockSuccessDeleteTask)
    axios.delete = mockDeleteTask

    fireEvent.click(deleteButton)
    const path = mockDeleteTask.mock.calls[0][0]
    expect(path).toBe('http://localhost:8000/tasks/1')
  })
});

## リストが消えるかテスト

it('削除ボタンをクリックし、リストが消えること', async () => {
  const {getAllByTestId} = render(<App/>)
  const deleteButton = await waitForElement(() => getAllByTestId('delete-button')[0])
  fireEvent.click(deleteButton)
  await waitForDomChange()
  expect(deleteButton).not.toBeInTheDocument()
})

`waitForDomChange()`を使用することでDOMが変化するまで待つ