01204223/authentication - ประวัติรุ่นแก้ไข

Jittat: /* แก้ Unit test */

2026-02-27T21:55:22Z

แก้ Unit test

Jittat: /* แก้ Unit test */

2026-02-27T06:09:41Z

แก้ Unit test

Jittat: /* แก้ Unit test */

2026-02-20T19:48:50Z

แก้ Unit test

Jittat: /* เพิ่ม Authorization header */

2026-02-20T18:27:18Z

เพิ่ม Authorization header

Jittat: /* PrivateRoute */

2026-02-20T08:26:18Z

PrivateRoute

Jittat: /* การ hash ด้วย Bcrypt */

2026-02-20T08:08:56Z

การ hash ด้วย Bcrypt

Jittat: /* Login form */

2026-02-20T08:03:39Z

Jittat: /* Registration CLI */

2026-02-20T08:00:33Z

Registration CLI

Jittat: /* การ hash ด้วย Bycrypt */

2026-02-20T07:56:35Z

การ hash ด้วย Bycrypt

Jittat: /* แล้ว context คืออะไร? */

2026-02-20T07:29:11Z

แล้ว context คืออะไร?

@@ แถว 1,067: / แถว 1,067: @@
 เมื่อเรา mock ฟังก์ชัน useAuth ได้แล้ว โค้ดสำหรับทดสอบที่เหลือก็จะสามารถทำงานได้ตามเดิม
 {{กล่องฟ้า|
 '''🄶''' อย่าลืม commit และ push เพื่อทดสอบว่า test ใช้งานได้แล้ว
 }}

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 06:09, 27 กุมภาพันธ์ 2569
แถว 1,067:		แถว 1,067:

	เมื่อเรา mock ฟังก์ชัน useAuth ได้แล้ว โค้ดสำหรับทดสอบที่เหลือก็จะสามารถทำงานได้ตามเดิม		เมื่อเรา mock ฟังก์ชัน useAuth ได้แล้ว โค้ดสำหรับทดสอบที่เหลือก็จะสามารถทำงานได้ตามเดิม
		+
		+	{{กล่องฟ้า\|
		+	'''🄶''' อย่าลืม commit และ push เพื่อทดสอบว่า test ใช้งานได้แล้ว
		+	}}

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 19:48, 20 กุมภาพันธ์ 2569
แถว 1,012:		แถว 1,012:

	จากที่ตอนเริ่ม Unit test ต่าง ๆ ของเรายังสามารถทำงานได้ หลังจากแก้ไปมา เพิ่ม authentication ตอนนี้ไม่สามารถทำงานได้แล้ว เราจะมาแก้กัน		จากที่ตอนเริ่ม Unit test ต่าง ๆ ของเรายังสามารถทำงานได้ หลังจากแก้ไปมา เพิ่ม authentication ตอนนี้ไม่สามารถทำงานได้แล้ว เราจะมาแก้กัน
		+
		+	ขั้นแรก เนื่องจากเรา refactor component TodoList ออกมาจาก App เราจะแก้ unit test ของ App ให้เป็นของ TodoList โดยดำเนินการดังนี้
		+
		+	* เปลี่ยนชื่อไฟล์ <tt>frontend/src/__test__/App.test.jsx</tt> เป็น <tt>frontend/src/__test__/TodoList.test.jsx</tt>
		+	* แก้ component <code>App</code> เป็น <code>TodoList</code> ให้หมด ใน test ดังกล่าว
		+
		+	ให้ทดลองรัน <tt>npm test</tt> ดูผล จะได้ผลสรุปดังด้านล่าง
		+
		+	Test Files 1 failed \| 1 passed (2)
		+	Tests 2 failed \| 6 passed (8)
		+	Start at 02:41:36
		+	Duration 1.72s (transform 133ms, setup 323ms, import 210ms, tests 439ms, environment 1.55s)
		+
		+	ถ้าไปดูรายละเอียดจะพบ error เกี่ยวกับ useAuth
		+
		+	TypeError: Cannot destructure property 'username' of '(0 , __vite_ssr_import_2__.useAuth)(...)' as it is null.
		+	❯ TodoList src/TodoList.jsx:12:11
		+	10\| const [todoList, setTodoList] = useState([]);
		+	11\| const [newTitle, setNewTitle] = useState("");
		+	12\| const { username, accessToken, logout } = useAuth();
		+	\| ^
		+	13\|
		+
		+	และนี่คือประเด็นหลักที่เราแก้จากของเดิม
		+
		+	เนื่องจาก useAuth เป็นฟังก์ชันภายนอก เราจะต้อง mock ฟังก์ชันนี้เพื่อทำให้เราสามารถเทสได้ อย่างไรก็ตามฟังก์ชันดังกล่าวเกี่ยวกับ context และมีความซับซ้อน ทำให้การ mock ของเราจะยุ่งยากเล็กน้อย ให้ทำตามตัวอย่างด้านล่างได้เลย
		+
		+	ขั้นแรก เราจะต้องไป mock ไฟล์ ../context/AuthContext เพื่อให้คืนฟังก์ชัน useAuth ที่เราเตรียมไว้ และ import ฟังก์ชันนั้นมา ให้เพิ่มบรรทัดด้านล่าง ก่อนถึงบรรทัด describe('TodoList')
		+
		+	<syntaxhighlight lang="javascript">
		+	vi.mock('../context/AuthContext', () => ({
		+	useAuth: vi.fn(),
		+	}));
		+
		+	import { useAuth } from '../context/AuthContext';
		+	</syntaxhighlight>
		+
		+	จากนั้นใน beforeEach เราจะสั่งให้ถ้ามีการเรียกใช้ให้คืนค่าที่เราระบุ ดังด้านล่าง
		+
		+	<syntaxhighlight lang="javascript">
		+	describe('TodoList', () => {
		+	beforeEach(() => {
		+	vi.stubGlobal('fetch', vi.fn());
		+	useAuth.mockReturnValue({
		+	username: 'testuser',
		+	login: vi.fn(),
		+	logout: vi.fn(),
		+	});
		+	});
		+
		+	// ...
		+	}
		+	</syntaxhighlight>
		+
		+	เมื่อเรา mock ฟังก์ชัน useAuth ได้แล้ว โค้ดสำหรับทดสอบที่เหลือก็จะสามารถทำงานได้ตามเดิม

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 18:27, 20 กุมภาพันธ์ 2569
แถว 1,008:		แถว 1,008:
	'''🄶''' อย่าลืม commit งาน อย่าลืมเพิ่ม src/PrivateRoute.jsx เมื่อทำเสร็จแล้ว ให้ push กลับไปที่ github ด้วย		'''🄶''' อย่าลืม commit งาน อย่าลืมเพิ่ม src/PrivateRoute.jsx เมื่อทำเสร็จแล้ว ให้ push กลับไปที่ github ด้วย
	}}		}}
		+
		+	== แก้ Unit test ==
		+
		+	จากที่ตอนเริ่ม Unit test ต่าง ๆ ของเรายังสามารถทำงานได้ หลังจากแก้ไปมา เพิ่ม authentication ตอนนี้ไม่สามารถทำงานได้แล้ว เราจะมาแก้กัน

@@ แถว 911: / แถว 911: @@
 === PrivateRoute ===
-เราจะสร้าง component PrivateRoute ในไฟล์ PrivateRoute.jsx เพื่อตรวจสอบว่าใน AuthContext มี accessToken หรือไม่ ถ้าไม่มีจะย้ายหน้าไป /login โดยอัตโนมัติ
+เราจะสร้าง component PrivateRoute ในไฟล์ src/PrivateRoute.jsx เพื่อตรวจสอบว่าใน AuthContext มี accessToken หรือไม่ ถ้าไม่มีจะย้ายหน้าไป /login โดยอัตโนมัติ
 <syntaxhighlight lang="javascript">
@@ แถว 938: / แถว 938: @@
 <syntaxhighlight lang="javascript">
 function App() {
    // ...

@@ แถว 142: / แถว 142: @@
   >>> check_password_hash(pw,'hello')
   False
 === User model ===

@@ แถว 665: / แถว 665: @@
 <syntaxhighlight lang="html">
-     <form onSubmit={(e) => {login(e)}}>
+     <form onSubmit={(e) => {handleLogin(e)}}>
        {errorMessage && <p>{errorMessage}</p>}
        ...

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 08:00, 20 กุมภาพันธ์ 2569
แถว 208:		แถว 208:

	การระบุดังกล่าว บอก flask ว่าจะมีคำสั่งใหม่เพิ่มขึ้น รวมทั้งระบุ argument ด้วย เมื่อแก้แล้ว ทดลองเรียกคำสั่ง create-user ในรูปแบบต่าง ๆ ดู ก่อนจะแก้ต่อไป		การระบุดังกล่าว บอก flask ว่าจะมีคำสั่งใหม่เพิ่มขึ้น รวมทั้งระบุ argument ด้วย เมื่อแก้แล้ว ทดลองเรียกคำสั่ง create-user ในรูปแบบต่าง ๆ ดู ก่อนจะแก้ต่อไป
		+
		+	เราจะต้อง import User มาจาก models ก่อน โดยเพิ่มบรรทัดไว้ที่ตอนต้น main.py
		+
		+	<syntaxhighlight lang="python">
		+	from models import User
		+	</syntaxhighlight>

	เราจะเพิ่มโค้ดในการสร้าง user รวมทั้งตรวจสอบเพื่อป้องกันการสร้าง user ซ้ำลงในฟังก์ชัน create_user ดังด้านล่าง		เราจะเพิ่มโค้ดในการสร้าง user รวมทั้งตรวจสอบเพื่อป้องกันการสร้าง user ซ้ำลงในฟังก์ชัน create_user ดังด้านล่าง

@@ แถว 99: / แถว 99: @@
 และอย่าลืม export / set FLASK_APP เป็น main.py ด้วย
-=== การ hash ด้วย Bycrypt ===
+=== การ hash ด้วย Bcrypt ===
 เมื่อ activate venv แล้ว เราจะติดตั้ง library [https://flask-bcrypt.readthedocs.io/en/1.0.1/ Flask-Bcrypt] สำหรับ hash รหัสผ่าน โดยสั่ง

@@ แถว 883: / แถว 883: @@
 }}
-=== แล้ว context คืออะไร? ===
+==== แล้ว context คืออะไร? ====
 : ''จะมาเขียนเพิ่มเติม ด้านล่างเป็นคำตอบจาก Claude''