แอปสิ่งที่ต้องทำด้วย React.js — ตอนที่ 4 (การทดสอบหน่วยด้วย Jest)

ใน โพสต์ก่อนหน้า ของฉัน เราได้เขียนการทดสอบสแน็ปช็อตสำหรับส่วนประกอบของเราโดยใช้ Jest และ Enzyme จนถึงตอนนี้ แอป todo ของเรายังไม่ทำงาน เพื่อให้ทำงานได้ เราต้องเพิ่มโค้ดที่สามารถรองรับการสร้างสิ่งที่ต้องทำใหม่ได้ ลองมาดูกันว่า

ก่อนอื่น มาอัปเดตองค์ประกอบ TodoForm ของเราโดยการเพิ่มสองเหตุการณ์:

• onSubmit เหตุการณ์: เหตุการณ์นี้จะถูกนำมาใช้ในการจัดการการสร้างสิ่งที่ต้องทำใหม่
• onChange กิจกรรม: กิจกรรมนี้จะใช้ในการอัปเดตสถานะของสิ่งที่ต้องทำใหม่ที่ยังไม่ได้สร้าง

TodoForm.jsx

นอกเหนือจากการเพิ่มทั้งสองเหตุการณ์นี้แล้ว เรายังตรวจสอบอุปกรณ์ประกอบฉากสองรายการที่ได้รับจากองค์ประกอบ TodoForm คือ handleSubmit และ handleOnChangeInput

ต่อไป มาแปลงองค์ประกอบ App ของเราให้เป็นองค์ประกอบที่มีสถานะ ซึ่งสถานะของแอป todo จะถูกกำหนดและจัดการ

แอป.jsx

import React, { Component } from 'react'
import styled from 'styled-components'
import TodoList from './TodoList'
import TodoForm from './TodoForm'
const Container = styled.div`
   width: 250px;
   margin: 10px auto;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 13px;
`
class App extends Component {
   constructor() {
      super()
         this.state = {
         currentTodo: ''
         todos: []
      }
      this.handleSubmit = this.handleSubmit.bind(this)
      this.handleOnchangeInput = this.handleOnchangeInput.bind(this)
   }
   handleSubmit = evt => {
      evt.preventDefault()
      // handle the creation of a new todo here
   }
   handleOnchangeInput = evt => {
      this.setState({ currentTodo: evt.target.value })
   }
   render() {
      const { currentTodo } = this.state
      return (
         <Container>
            <TodoForm
               currentTodo={currentTodo}
               handleSubmit={this.handleSubmit}
               handleOnchangeInput={this.handleOnchangeInput}
         />
            <TodoList />
         </Container>
      )
   }
}
export default App

ในองค์ประกอบ App เราได้กำหนดสถานะว่างสำหรับ currentTodo ซึ่งจะเก็บค่าของสิ่งที่ต้องทำใหม่ที่ผู้ใช้พิมพ์ นอกจากนี้เรายังกำหนดอาร์เรย์ว่าง todos เพื่อเก็บสิ่งที่ต้องทำที่สร้างขึ้น

นอกจากนี้ เรายังกำหนดฟังก์ชันไว้ 2 ฟังก์ชัน:

• handleSubmit : เพื่อสร้างสิ่งที่ต้องทำใหม่
• handleOnchangeInput เพื่อติดตามสิ่งที่ผู้ใช้พิมพ์ในช่องป้อนข้อมูล

มาสร้างไฟล์ตัวช่วยที่มีฟังก์ชันบางอย่างภายในไดเร็กทอรี ./src/lib/` กัน

จากไดเร็กทอรีราก ให้รันคำสั่งด้านล่างเพื่อสร้างไฟล์ lib, helper.js และ helper.test.js

$ mkdir ./src/lib
$ touch ./src/lib/helper.js
$ touch ./src/lib/helper.test.js

โปรดสังเกตว่าเรายังได้สร้างไฟล์ helper.test.js ซึ่งจะมีการทดสอบหน่วยสำหรับวิธีการที่กำหนดไว้ในไฟล์ helper.js ของเรา

เราต้องการวิธีการเพิ่มสิ่งที่ต้องทำใหม่ ให้เราเรียกมันว่า addTodo .

ขั้นแรก ให้เราเขียนการทดสอบสำหรับเมธอด addTodo เพื่อให้แน่ใจว่าวิธีนี้ทำงานได้ตามที่คาดไว้:

เพิ่มรหัสด้านล่างในไฟล์ helper.test.js:

import { addTodo } from './helper'
describe('addTodo', ()=>{
   it('should add todo to the list', () => {
      const startTodos = [        
         { id: 1, name: 'one', isComplete: false },        
         { id: 2, name: 'two', isComplete: false }
      ]     
      
      const newTodo = { id: 3, name: 'three', isComplete: false} 
      const expected =[
         { id: 3, name: 'three', isComplete: false },        
         { id: 1, name: 'one', isComplete: false },        
         { id: 2, name: 'two', isComplete: false }    
      ]
      const result = addTodo(startTodos, newTodo)
      expect(result).toEqual(expected)
   })
})

โดยพื้นฐานแล้ว การทดสอบนี้มีไว้เพื่อให้แน่ใจว่าเมธอด addTodo จะเพิ่มสิ่งที่ต้องทำใหม่ลงในรายการสิ่งที่ต้องทำที่มีอยู่จริง

เมื่อคุณรัน npm test:update การทดสอบนี้จะล้มเหลวพร้อมกับข้อความแสดงข้อผิดพลาด

ReferenceError: addTodo is not defined

เนื่องจากยังไม่ได้กำหนดวิธีการ addTodo มาแก้ไขกันเถอะ

เพิ่มโค้ดด้านล่างในไฟล์ ./src/lib/helper.js:

/**
 * addTodo
 *
 * @param {Array} list
 * @param {Object} item
 */
export const addTodo = (list, item) => [item, ...list]

เอสลินท์คงจะบ่น เนื่องจากเรากำลังส่งออกเพียงวิธีเดียวจากทั้งโมดูล:

นี่เป็นเรื่องปกติเพราะเราจะส่งออกเพิ่มเติมจากโมดูลนี้ในภายหลัง

ตอนนี้รัน npm test อีกครั้ง การทดสอบของคุณควรผ่านไปแล้ว:

โดยพื้นฐานแล้ว สิ่งที่เราทำในเมธอด addTodo คือการสร้างและส่งคืนอาร์เรย์ใหม่ที่มีสิ่งที่ต้องทำใหม่และรายการสิ่งที่ต้องทำที่มีอยู่

มาเพิ่มการทดสอบใหม่เพื่อให้แน่ใจว่ารายการสิ่งที่ต้องทำที่สร้างขึ้นใหม่แตกต่างจากรายการสิ่งที่ต้องทำที่มีอยู่

เพิ่มโค้ดด้านล่างในไฟล์ helper.test.js หลังจากการทดสอบครั้งก่อน:

// ... Previous test here
it('should not mutate the existing todo array', () => {
   const startTodos = [
      { id: 1, name: 'one', isComplete: false },
      { id: 2, name: 'two', isComplete: false }
   ]
   
   const newTodo = { id: 3, name: 'three', isComplete: false }
   const result = addTodo(startTodos, newTodo)
   
   expect(result).not.toBe(startTodos)
})

วิ่ง npm test . การทดสอบของคุณควรผ่าน:

ดี. ตอนนี้เราพร้อมที่จะใช้วิธี addTodo ของเราแล้ว

สร้างวิธีอื่น generateId ในไฟล์ตัวช่วยโดยมีเนื้อหาด้านล่าง:

/** 
 * generateId 
 *  
 */
export const generateId = ()=> Math.floor(Math.random() * 100000)

นำเข้าทั้งวิธี generateId และ addTodo ลงในองค์ประกอบ App และอัปเดตวิธี handleSubmit ดังที่แสดงด้านล่าง:

import React, { Component } from 'react'

เนื้อหาทั้งหมดของ App องค์ประกอบ:

TodoForm ส่วนประกอบ

TodoItem ส่วนประกอบ

TodoList ส่วนประกอบ

./src/lib/helper.js

./src/lib/helper.test.js

หลังจากอัปเดตส่วนประกอบต่างๆ แล้ว คุณควรจะสามารถเพิ่มสิ่งที่ต้องทำใหม่ได้ หากต้องการดีบั๊กแอปของคุณ ให้ใช้ "React Developer Tool":

ในโพสต์ถัดไป เราจะเพิ่มโค้ดและการทดสอบหน่วยเพิ่มเติม เพื่อจัดการกับการลบสิ่งที่ต้องทำ คอยติดตาม!

รหัสเต็มที่นี่ https://github.com/lomse/todo-app