← กลับไปยัง Dev Center

ทดสอบ SearchableSelect - หลาย Config

หน้าทดสอบสำหรับ SearchableSelect component พร้อมการ config ต่างๆ เพื่อทดสอบการทำงาน

1. Default Config (ไม่ระบุ maxOptions, isRequired)

ค่าที่เลือก: ยังไม่เลือก | Config: maxOptions=100 (default), isRequired=false

2. Pre-selected Value (มีค่าถูกเลือกไว้แล้วตั้งแต่แรก)

ค่าที่เลือก: DEPT005 | ตั้งค่าเริ่มต้น: DEPT005

3. maxOptions = 5 (แสดงสูงสุด 5 รายการ)

ค่าที่เลือก: ยังไม่เลือก | maxOptions: 5 (มี 10 รายการ แต่แสดงสูงสุด 5)

4. maxOptions = 100 (ระบุชัดเจน)

ค่าที่เลือก: ยังไม่เลือก | maxOptions: 100 (มี 10 รายการ)

5. maxOptions = 200, Options = 150 รายการ

ค่าที่เลือก: ยังไม่เลือก | maxOptions: 200, Options: 150 รายการ

6. Options น้อย (3 รายการ)

ค่าที่เลือก: ยังไม่เลือก | Options: 3 รายการ

7. Empty Options (ไม่มีรายการ)

ค่าที่เลือก: ยังไม่เลือก | Options: 0 รายการ (ควรแสดง "ไม่พบข้อมูล" เมื่อเปิด dropdown)

8. Required Field (isRequired = true)

ค่าที่เลือก: ยังไม่เลือก | isRequired: true (แสดงเครื่องหมาย *)

Lazy Load Mode Tests

9. Lazy Load - Basic (debounce: 500ms, options: mock 200 items)

ค่าที่เลือก: ยังไม่เลือก | Lazy load: true, Debounce: 500ms
💡 ทดสอบ: เปิด dropdown จะเรียก API | พิมพ์ค้นหาจะ debounce 500ms | มี cache

10. Lazy Load - Custom Debounce (debounce: 1000ms)

ค่าที่เลือก: ยังไม่เลือก | Debounce: 1000ms (ช้ากว่า default)
💡 ทดสอบ: พิมพ์เร็วๆ จะเห็นว่า debounce ทำงานช้ากว่า

11. Lazy Load - Pre-selected Value Display

ค่าที่เลือก: ยังไม่เลือก | จะโหลดชื่อเมื่อเลือกค่า
💡 ทดสอบ: คลิกปุ่มตั้งค่าแล้วดูว่าชื่อแสดงใน input (โหลดจาก API) | หรือเลือกด้วยตนเอง

12. Lazy Load - Real API (Contractors from SDK)

ค่าที่เลือก: ยังไม่เลือก | Real API: masterDataSDK.getContractors()
💡 ทดสอบ: เรียก API จริงจาก SDK | ตรวจสอบ network tab

13. Lazy Load - Error Handling (30% chance to error)

ค่าที่เลือก: ยังไม่เลือก | Error handling: true
💡 ทดสอบ: เปิด dropdown หลายครั้ง อาจเห็น error message | cache จะช่วยแสดงข้อมูลเก่า

สิ่งที่ควรทดสอบ (Normal Mode):

  • คลิกที่ input เพื่อเปิด dropdown - ควรแสดงรายการตาม maxOptions
  • พิมพ์เพื่อค้นหา - ควรกรองรายการแบบ real-time
  • เลือกตัวเลือก - dropdown ควรปิดและแสดงค่าที่เลือก
  • เปิด dropdown อีกครั้ง - ควรแสดงรายการทั้งหมด (filter ถูกล้าง)
  • คลิกนอก component - dropdown ควรปิด
  • ดู icon dropdown - ควรหมุนเมื่อเปิด
  • ทดสอบ maxOptions - รายการที่ 5, 100, 200 ควรแสดงตามที่กำหนด
  • ทดสอบ empty options - ควรแสดง "ไม่พบข้อมูล"
  • ทดสอบ pre-selected - ควรแสดงค่าที่เลือกไว้ตั้งแต่แรก

สิ่งที่ควรทดสอบ (Lazy Load Mode):

  • เปิด dropdown - ควรแสดง "กำลังโหลด..." แล้วแสดงรายการ (เรียก API)
  • พิมพ์ค้นหา - ควร debounce (รอ 500ms) ก่อนเรียก API
  • พิมพ์เร็วๆ - ควรเห็น debounce ทำงาน (ไม่เรียก API ทุก keystroke)
  • เปิด dropdown ซ้ำ - ควรใช้ cache (ไม่เรียก API ใหม่ถ้าเคยโหลดแล้ว)
  • เลือกตัวเลือก - ควรแสดงชื่อใน input (เก็บใน cache)
  • ทดสอบ cache - พิมพ์แล้วลบ ควรใช้ cache เดิม
  • ทดสอบ error handling - section 13 อาจ error และแสดง error message + cache
  • ทดสอบ real API - section 12 เรียก API จริง (ตรวจสอบ network tab)
  • ทดสอบ custom debounce - section 10 ใช้ debounce 1000ms (ช้ากว่า)