Mock API ง่ายๆ ด้วย WireMock

หากเวรกรรมมันจะต้องมาตกอยู่ที่ปลายทาง เพราะต้องรอ API โดยที่เวลาการพัฒนามันใกล้จะหมดลงแล้วลงไปทุกทีแล้ว

ถ้าหากต้องรอ API เสร็จจึงค่อยพัฒนา Frontend ได้ แต่เวลามันก็เหลือน้อยเกินไปอะเนาะ งั้นเรามาประชุมกันกับทีม API สักหน่อยไหมเพื่อมาช่วยกันออกแบบหน้าตาของชุดข้อมูลที่จะ Response กลับมาแสดงบนหน้า Front ในแต่ละ Feature ให้ออกมาเป็นเอกสาร แล้วทุกคนก็กลับมานั่งที่โต๊ะทำงานเพื่อทำตามเอกสารที่มีอยู่ในมือโดยทาง Frontend ก็กลับมา Mock API โดยยึดตามเอกสาร ระหว่างที่ทีม Backend กำลังพัฒนา API ให้เราอยู่ (แทนที่จะยืนกดดัน 5555)

Mock API เพราะอะไร ?

1. ทีม Backend งานยุ่งเหลือเกิน (ก็ คนมันไม่พอ ง่ะ)
2. ทีม Backend ไม่ว่างมา Support ให้ครบทุก Case ที่เราต้องการ Test
3. ความซับซ้อนของระบบจึงทำให้ ทีม Backend ต้องใช้เวลาการในวางโครงสร้าง
4. ทำเอกสารเพื่อเป็นหลักฐาน พูดข้ามโต๊ะบางทีก็ลืมกันได้ เนาะ

วิธีที่จะ Mock API มีเครื่องมือมากมายให้เลือกใช้ อาทิเช่น wiremock, stubby4j และ json-server เป็นต้น

ในบทความนี้เจ้าของบล็อคขอนำเสนอการใช้งาน wiremock นะครับ

ขั้นตอนแรก ก็เข้าไปดาวน์โหลดมาซะก่อน คลิกเลย และเมื่อดาวน์โหลดเสร็จแนะนำว่าให้สร้าง Folder แล้ว copy ไปไว้ในโฟลเดอร์ก่อน แล้วให้การทำเปิด Terminal แล้วทำการ cd ไปยังที่อยู่ของไฟล์ที่ดาวน์โหลดแล้วให้ start server โดยคำสั่ง

$java -jar wiremock-standalone-2.5.1.jar — port 5555 — verbose

สามารถเปลี่ยนเลข port ตามใจชอบเลยนะครับ พอใช้คำสั่งแล้วผลก็จะได้เป็นแบบนี้

เมื่อได้ทำการ Run wiremock เสร็จแล้วมันทำการสร้าง Folder ให้เราดังนี้

1. mappings คือ เอาไว้เก็บไฟล์ path ของ API
2. __files คือ เอาไว้เก็บไฟล์ชุดข้อมูลที่จะให้ API นั้น response

มาเริ่มทำการ Mock API สักตัวหนึ่งเพื่อให้เห็นภาพ กันเลยดีกว่าครับ

ความต้องการของเจ้าของบล็อคคือ จะทำ API ที่ response ข้อมูลของผู้ใช้ในรูปแบบ ของ JSON สเปคก็ตามนี้ครับ

GET: userinfo/{username}
response : 
{ 
  “id”: 10383520,
  “name”: “Jedsada Tiwongvorakul”, 
  “company”: “20scoops”,
  “blog”: “https://medium.com/@pondthaitay/", 
  “location”: “Thailand”, 
  “email”: “pondthaitay@gmail.com”
}

ก็ถือซะว่ามันคือเอกสารที่ได้ตกลงกันไว้ ละเนาะ

ต่อไปก็ทำการสร้างไฟล์ userinfo.json แล้วนำไปวางไว้ใน Folder: mappings ดังนี้

{
  “request”: {
     “urlPathPattern”: “/usersinfo/([a-z]*)”,
     “method”: “GET”
  },
  “response”: {
      “status”: 200,
      “headers”: {
      “Content-Type”: “application/json”
      },
      “bodyFileName”: “/info.json”
  }
}

และทำการสร้างไฟล์ info.json ไว้ใน Folder: __files ดังนี้

{ 
  “id”: 10383520,
  “name”: “Jedsada Tiwongvorakul”, 
  “company”: “20scoops”,
  “blog”: “https://medium.com/@pondthaitay/", 
  “location”: “Thailand”, 
  “email”: “pondthaitay@gmail.com”
}

จากตัวอย่างจะเห็นได้ว่าส่ง username อะไรมาก็ได้แต่ขอให้อยู่ pattern ([a-z]*) และจะได้ response ข้อมูลในไฟล์ info.json กลับไปเสมอๆ

ไหนมาลองเรียกผ่าน Browser ดูกันเลยก่อนเรียกก็ให้ restart wiremock สักทีก่อนนะครับ และแล้วมันก็มันจนได้

ในกรณีที่จะนำไป implement บน Application หรือ Website ก็ให้เรียกผ่าน IP Address ของคอมที่เปิด wiremock เพราะ wiremock จะเข้ากับ IP Address ของเครื่องโดยอัตโนมัติ และเครื่องที่จะเข้าถึงก็ต้องอยู่ใน Network เดียวกันด้วยนะครับ ก็จะเป็นแบบนี้แทน

แล้วทำการทดสอบโดยการเข้า url ตามข้างบนผ่าน device อื่นดูนะครับเมื่อเข้าได้ต่อไปก็เริ่มทำงานต่อได้เลย เราสามารถเขียน Code ในการเรียก API และทำการ parse JSON ได้ปกติไม่ได้เป็นการเขียนเพื่อ Mock up data อีกต่อไปเพียงแค่เปลี่ยน url เท่านั้น และเมื่อ ทีม API ทำเสร็จก็แค่เปลี่ยน url เป็น domain จริงๆ หรืออาจจะต้องเพิ่มหรือปรับเปลี่ยน key นิดหน่อยก็เป็นไปได้นะครับ

ข้ออ้างที่ว่า : “ ก็ผมรอ API ไงพี่กว่าจะเสร็จ ” คุณอ้างอีกไม่ได้แล้วนะ 55555555 เพราะคุณสามารถคุม API ได้เองแล้วนะอยากได้แบบไหนล่ะ เช่น status 500, 400 หรือ 401 เพื่อเอาไว้ handler errorให้ครบทุก case ตามที่คุณต้องการได้เองแล้ว

ปล. สำหรับ Android ก็สามารถนำไฟล์ response ใน Folder: __files ไปทำ Test ได้อีกด้วยนะ ไม่ต้องมานั่งสร้างไฟล์ mock json เพื่อเทส สามารถเอาไปใช้เลย และถ้าขี้เกียจเปลี่ยน url ไปมาก็ทำ Build Variants ก็ได้นะครับ

Build Variants Android

สรุป : การที่เจ้าของบล็อคได้ทำการ Mock API ขึ้นมาก่อนทำให้เจ้าของบล็อคทำงานได้เลยไม่ต้องรอ แล้วยังสามารถนำชุดข้อมูลเหล่าที่เราได้ทำการสร้างไว้แล้ว ไปเขียน Test ได้อีกด้วย และสุดท้ายคืดการทำให้เอกสารมีตัวตนสักที ส่วนข้อเสีย คือ ต้องมานั่งเปลี่ยน IP Address และเมื่อ API เสร็จสมบูรณ์บางทีมันก็อาจจะมีหน้าตาแตกต่างออกไปจากที่คุยกันไว้เล็กน้อยนะ (ไม่เหมือนที่คุยกันไว้นี่หว่า)