Isolated test page for the bank-transfer slip upload (croppa canvas sizing + S3 presigned upload flow). Not linked from the site nav — for manual QA only.
:width / :height bound to form.slip.naturalWidth / naturalHeight instead of a fixed size. After picking a large photo the canvas
is re-created at the photo's native pixel size (e.g. 4000x3000),
which breaks the layout / crashes the crop canvas. The fix pins
the canvas to a fixed 280x280 size.Uses the "fixed" slip above. Requires you to be logged in (the upload endpoint needs an auth token).
ทำตามลำดับด้านล่าง แล้วดูว่าผลลัพธ์ตรงกับ "คาดหวัง" หรือไม่
| # | ขั้นตอน | วิธีเทส / ผลที่คาดหวัง |
|---|---|---|
| 1 | เลือกรูปสลิปขนาดเล็ก (< 1000px ต่อด้าน) ทั้ง 2 การ์ด | ทั้ง buggy และ fixed แสดงรูป/ครอปได้ปกติ ไม่มี alert สีแดงขึ้น (เพราะยังไม่ชน limit) |
| 2 | เลือกรูปที่ถ่ายจากกล้องมือถือความละเอียดสูง (ด้านใดด้านหนึ่ง > 4096px เช่น iPhone 4032x3024 หรือ Android 4000x3000+) ที่การ์ด "Buggy" | เห็น alert สีแดง "canvas อาจเกิน limit" และควรลองเปิดหน้านี้บน iOS Safari จริง — canvas ฝั่ง buggy จะว่างเปล่า/ไม่แสดงรูป (เงียบๆ ไม่มี error ใน console) |
| 3 | เลือกรูปเดียวกันจากข้อก่อนหน้าที่การ์ด "Fixed" | ครอปได้ปกติทุก browser/อุปกรณ์ เพราะ canvas ถูกล็อกไว้ที่ 280x280 ไม่ผูกกับ naturalWidth/Height |
| 4 | กดปุ่มลบรูป (ไอคอน x) แล้วเลือกรูปใหม่ ทำซ้ำ 2-3 รอบทั้ง 2 การ์ด | canvas รีเซตและแสดงรูปใหม่ถูกต้อง ไม่มีรูปเก่าค้าง, ที่การ์ด fixed ค่า s3Link ถูกล้าง (ดูได้จากการ์ด "Raw croppa state" ด้านล่าง) |
| 5 | ยังไม่ได้ login แล้วเลือกรูปที่การ์ด fixed แล้วกด "Run upload test" | log แสดง error ที่จับได้ชัดเจน (เช่น 401/unauthorized) ไม่มี unhandled exception ในหน้าเว็บ |
| 6 | login แล้ว เลือกรูปที่การ์ด fixed แล้วกด "Run upload test" | log ไล่ตามลำดับ: ขอ presigned link สำเร็จ -> upload ขึ้น S3 สำเร็จ -> ได้ file_id กลับมา |
| 7 | กด "Run upload test" ซ้ำหลายครั้งโดยไม่เปลี่ยนรูป | แต่ละครั้งขอ presigned link ใหม่และ upload สำเร็จซ้ำได้เรื่อยๆ ไม่มี error จาก backend เรื่อง endpoint ซ้ำ |
| 8 | เลือกไฟล์ภาพขนาดใหญ่มาก (เช่น > 10MB) | ถ้า backend จำกัดขนาดไฟล์ log ควรแสดง error message จาก getUploadLink ชัดเจน ไม่ใช่ค้างเฉยๆ |
| 9 | กด "Clear log" ระหว่าง/หลังทดสอบ | log panel ถูกล้างว่าง ปุ่มถูก disable ระหว่างกำลัง upload อยู่ (isUploading) |