ทดสอบ PropertyAge

หน้าเพจสำหรับทดสอบ PropertyAge component แสดงอายุทรัพย์สินในรูปแบบวัน/เดือน/ปี พร้อมสีตามกลุ่มอายุ

วันที่ปัจจุบัน (mock): 15 มิถุนายน 2567

Basic Test Cases

Test Case 1: ไม่มีข้อมูล

age: null, handoverDate: null

Expected: แสดง "-"

โค้ดที่ใช้:

<PropertyAge
  age={null}
  handoverDate={null}
/>

Test Case 2: มีเฉพาะ age (5 ปี)

age: 5, handoverDate: null

5 ปี

Expected: แสดง "5 ปี"

โค้ดที่ใช้:

<PropertyAge
  age={5}
  handoverDate={null}
/>

Test Case 3: มีเฉพาะ handoverDate (1 ปีก่อน)

age: null, handoverDate: 1 ปีก่อน

1 ปี

Expected: แสดง "1 ปี"

โค้ดที่ใช้:

<PropertyAge
  age={null}
  handoverDate={new Date("2023-06-15T00:00:00.000Z")}
/>

Test Case 4: มีทั้ง age และ handoverDate

age: 5 (สำหรับสี), handoverDate: 1 เดือนก่อน (สำหรับแสดงผล)

1 เดือน

Expected: แสดง "1 เดือน" แต่ใช้สีของกลุ่มอายุ 5 ปี

โค้ดที่ใช้:

<PropertyAge
  age={5}
  handoverDate={new Date("2024-05-15T00:00:00.000Z")}
/>

แสดงผลเป็นวัน (น้อยกว่า 1 เดือน)

1 วัน

handoverDate: 1 วันก่อน

1 วัน

Expected: แสดง "1 วัน"

5 วัน

handoverDate: 5 วันก่อน

5 วัน

Expected: แสดง "5 วัน"

29 วัน

handoverDate: 29 วันก่อน

29 วัน

Expected: แสดง "29 วัน"

30 วัน (ยังไม่ข้ามเดือน)

handoverDate: 16 พ.ค., current: 15 มิ.ย. (30 วัน, ยังไม่ข้ามเดือน)

30 วัน

Expected: แสดง "30 วัน"

แสดงผลเป็นเดือน (น้อยกว่า 1 ปี)

1 เดือน (ข้ามเดือนแล้ว)

handoverDate: 15 พ.ค., current: 15 มิ.ย. (ข้ามเดือนแล้ว)

1 เดือน

Expected: แสดง "1 เดือน"

2 เดือน

handoverDate: 2 เดือนก่อน

2 เดือน

Expected: แสดง "2 เดือน"

6 เดือน

handoverDate: 6 เดือนก่อน

6 เดือน

Expected: แสดง "6 เดือน"

11 เดือน

handoverDate: 11 เดือนก่อน

11 เดือน

Expected: แสดง "11 เดือน"

แสดงผลเป็นปี (1 ปีขึ้นไป)

1 ปี

handoverDate: 1 ปีก่อน

1 ปี

Expected: แสดง "1 ปี"

2 ปี

handoverDate: 2 ปีก่อน

2 ปี

Expected: แสดง "2 ปี"

5 ปี

handoverDate: 5 ปีก่อน

5 ปี

Expected: แสดง "5 ปี"

10 ปี

handoverDate: 10 ปีก่อน

10 ปี

Expected: แสดง "10 ปี"

15 ปี

handoverDate: 15 ปีก่อน

15 ปี

Expected: แสดง "15 ปี"

25 ปี

handoverDate: 25 ปีก่อน

25 ปี

Expected: แสดง "25 ปี"

35 ปี

handoverDate: 35 ปีก่อน

35 ปี

Expected: แสดง "35 ปี"

45 ปี

handoverDate: 45 ปีก่อน

45 ปี

Expected: แสดง "45 ปี"

สีตามกลุ่มอายุ

กลุ่มอายุ <10 ปี (สีเขียว)

age: 5

5 ปี

Expected: สี text-emerald-600

กลุ่มอายุ 10-20 ปี (สีฟ้า)

age: 15

15 ปี

Expected: สี text-sky-600

กลุ่มอายุ 20-30 ปี (สีเหลือง)

age: 25

25 ปี

Expected: สี text-amber-600

กลุ่มอายุ 30-40 ปี (สีส้ม)

age: 35

35 ปี

Expected: สี text-orange-600

กลุ่มอายุ 40+ ปี (สีแดง)

age: 45

45 ปี

Expected: สี text-red-600

การรับ handoverDate เป็น String

ISO String

handoverDate: "2024-05-15T10:00:00Z"

1 เดือน

Expected: แสดง "1 เดือน"

Date String

handoverDate: "2023-06-15"

1 ปี

Expected: แสดง "1 ปี"

Edge Cases

กรณีพิเศษ: 30 วัน (ยังไม่ข้ามเดือน)

handoverDate: 4 ต.ค. 2024, current: 3 พ.ย. 2024 (30 วัน, ยังไม่ข้ามเดือนปฏิทิน)

1 เดือน

Expected: แสดง "30 วัน"

กรณีพิเศษ: 1 เดือน (ข้ามเดือนแล้ว)

handoverDate: 4 ต.ค. 2024, current: 4 พ.ย. 2024 (ข้ามเดือนปฏิทินแล้ว)

1 เดือน

Expected: แสดง "1 เดือน"