# 2020年10月10日モブプロ#9
[MDの書き方](https://qiita.com/tbpgr/items/989c6badefff69377da7)
モブプロのコンテンツは🤟がついています。
# 本日の目標
クライアントサイドのテスト実装！
# テストライブラリ参考サイト
- https://testing-library.com/docs/react-testing-library/intro
- https://qiita.com/ossan-engineer/items/4757d7457fafd44d2d2f
# Footerのテストを書いてみよう🤟
```javascript=
describe('Footer', () => {
describe('Layout', () => {
it('会社名表示', () => {
const { container } = render(<Footer />)
const footer = container.querySelector('h3')
expect(footer).toHaveTextContent('skywill')
// const test = render(<Footer />)
// console.log(test);
});
});
});
```
## material-UI使ってるとHTMLの表示わからなく難しい？
そんなときは`screen`を導入。
```javascript=2
import { render, screen } from '@testing-library/react'
```
```javascript=
it('会社名表示', () => {
const { container } = render(<Footer />)
screen.debug()
});
```
`screen.debug()`を行うと以下が表示
```javascript=
<body>
<div>
<footer
class="makeStyles-footer-1"
>
<div
class="MuiToolbar-root MuiToolbar-regular makeStyles-footerContainer-2 MuiToolbar-gutters"
>
<h3
class="MuiTypography-root MuiTypography-body1"
varient="h3"
>
Skywill
</h3>
</div>
</footer>
</div>
</body>
```
これで確認しながらテストを書いていく。
# Headerのテストを書いてみよう🤟
```javascript=
describe('Header', () => {
describe('Layout', () => {
it('タイトル表示', () => {
const { container } = render(<Header />)
const header = container.querySelector('h4')
expect(header).toHaveTextContent('Todoアプリ')
});
});
});
```
# Appのテストを書いてみよう🤟
## render時にaxiosを呼ぶ
```javascript=3
import App from './App'
import axios from 'axios'
const mockEmptyGetTask = {
data: []
}
describe('App', () => {
describe('Lifecycle', () => {
it('レンダー時にaxiosを呼ぶ url確認', () => {
axios.get = jest.fn().mockResolvedValue(mockEmptyGetTask)
render(<App />)
expect(axios.get).toHaveBeenCalledWith('http://localhost:8000/tasks')
});
it('レンダー時にaxiosを呼ぶ 呼び出したか確認', () => {
axios.get = jest.fn().mockResolvedValue(mockEmptyGetTask)
render(<App />)
expect(axios.get).toHaveBeenCalledTimes(1)
});
});
});
```
## レイアウトのテスト
```javascript=23
decribe('Layout', () => {
describe('マウント with no data', () => {
it('テキストフィールドがあるかどうか', () => {
const { queryByTestId } = render(<App />)
const titleTextField = queryByTestId('title-text')
expect(titleTextField).tobeInTheDocument()
})
})
})
```
だが、このままでは`null`なので`App.js`を編集する。
### App.jsの編集
テキストフィールドに`testId`を付与する必要がある。
```jsx=
<TextField
label="タイトル"
value={taskTitle}
onChange={handleTextFieldChanges}
inputProps={{"data-testid":"title-text"}} // これを追加
/>
```
これでテストを通過することができるようになる。
## 作成ボタンのテスト
```javascript=30
it('作成ボタンがあるかどうか', () =>{
const {queryByTestId} = render(<App />)
const createButton = queryByTestId('create-buttun')
expect(createButton).toBeInTheDocument()
})
```
### App.jsの編集
```jsx=
<Button
variant="contained"
color="primary"
disabled={taskTitle===''}
onClick={addTask}
data-testid="create-button" // これを追加
>
作成
</Button>
```
## 完了ボタンのテスト
```javascript=35
it('完了ボタンがあるかどうか', () =>{
const {queryByTestId} = render(<App />)
const completeButton = queryByTestId('complete-button')
expect(completeButton).toBeInTheDocument()
})
```
### App.jsの編集
```jsx=
<Button
variant="contained"
color="primary"
disabled={!tasks.some(x=>x.doing)}
onClick={() => doneTask()}
data-testid="complete-button" // これを追加
>
完了
</Button>
```
## チェックボックスのテスト
```javascript=40
it('チェックボックスがないこと', () =>{
const {queryByTestId} = render(<App />)
const doingCheckBox = queryByTestId('doing-check')
expect(doingCheckBox).not.toBeInTheDocument()
})
```
### App.jsの編集
```jsx=
<Checkbox
disabled={task.done}
checked={task.doing}
value="primary"
onChange={() => handleCheckboxChanges(task)}
inputProps={{"data-testid":"doing-check"}}
/>
```
## リストの存在テスト
```javascript=45
it('リストがないこと', () =>{
const {queryByTestId} = render(<App />)
const listText = queryByTestId('list-text')
expect(listText).not.toBeInTheDocument()
})
```
## 削除ボタンの存在テスト
```javascript=50
it('削除ボタンがないこと', () =>{
const {queryByTestId} = render(<App />)
const deleteButton = queryByTestId('delete-button')
expect(deleteButton).not.toBeInTheDocument()
})
```
## 初期状態でボタンが押せないようになっているかテスト
```javascript=
it('作成ボタンが押せないこと', () =>{
const {queryByTestId} = render(<App />)
const createButton = queryByTestId('create-button')
expect(createButton.disabled).toBeTruthy()
})
it('完了ボタンが押せないこと', () =>{
const {queryByTestId} = render(<App />)
const completeButton = queryByTestId('complete-button')
expect(completeButton.disabled).toBeTruthy()
})
```
## データ取得時に各種ボタンがあるかどうかのテスト
```javascript=
describe('マウント with data', () => {
beforeEach(() => {
axios.get = jest.fn().mockResolvedValue(mockSuccessGetTask)
})
it('チェックボックスがあること', () =>{
const {queryByTestId} = render(<App />)
const doingCheckBox = queryByTestId('doing-check')
screen.debug()
expect(doingCheckBox).not.toBeInTheDocument()
})
it('リストがあること', () =>{
const {queryByTestId} = render(<App />)
const listText = queryByTestId('list-text')
expect(listText).not.toBeInTheDocument()
})
it('削除ボタンがあること', () =>{
const {queryByTestId} = render(<App />)
const deleteButton = queryByTestId('delete-button')
expect(deleteButton).not.toBeInTheDocument()
})
})
```
上記でエラーになるはずが...なぜか成功してしまう...
次週に持ち越し！
Sign in with Wallet
Connect another wallet