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

Jittat: /* TodoItem แบบที่มี comments */

2026-02-13T07:51:45Z

TodoItem แบบที่มี comments

Jittat: /* ทดสอบว่า TodoItem เรียก callback หลังมีการกดปุ่ม */

2026-02-13T07:08:50Z

ทดสอบว่า TodoItem เรียก callback หลังมีการกดปุ่ม

Jittat: /* ทดสอบว่า TodoItem เรียก callback หลังมีการกดปุ่ม */

2026-02-13T07:07:06Z

ทดสอบว่า TodoItem เรียก callback หลังมีการกดปุ่ม

Jittat: /* Workflow */

2026-02-13T06:25:45Z

Workflow

Jittat: /* ต่อจากนี้ */

2026-02-13T04:51:13Z

ต่อจากนี้

Jittat: /* ทดสอบ App */

2026-02-13T04:47:58Z

ทดสอบ App

Jittat: /* ทดสอบ App */

2026-02-13T04:47:09Z

ทดสอบ App

Jittat: /* ทดสอบว่า TodoItem เรียก callback หลังมีการกดปุ่ม */

2026-02-13T04:08:14Z

ทดสอบว่า TodoItem เรียก callback หลังมีการกดปุ่ม

Jittat: /* ทดสอบกันต่อ */

2026-02-13T03:58:54Z

ทดสอบกันต่อ

Jittat: /* ทดสอบกันต่อ */

2026-02-13T03:56:42Z

ทดสอบกันต่อ

@@ แถว 156: / แถว 156: @@
 === TodoItem แบบที่มี comments ===
-เราจะเพิ่ม test case ดังด้านล่าง (เติมโค้ดลงไปด้านในส่วนของฟังก์ชันที่ส่งให้ describe &nbsp;&nbsp;&nbsp; ให้เขียน assertion ว่ามีข้อความจาก comments เอง
+เราจะเพิ่ม test case ดังด้านล่าง (เติมโค้ดลงไปด้านในส่วนของฟังก์ชันที่ส่งให้ describe) '''ให้เขียนเป็นเทสเคสใหม่ มี it อันใหม่ อย่าลบ it อันเก่า'''
 <syntaxhighlight lang="javascript">

@@ แถว 571: / แถว 571: @@
 แก้และทดลองรันด้วย npm test จนกว่าจะผ่าน
-ในส่วนถัดไป เราจะทดสอบการเรียก addNewComment แต่ในกรณีนี้เราต้องพิมพ์ข้อความลงในกล่องข้อความ (ที่จัดการโดย state newComment) โดยเราจะต้องใช้ library เพิ่มเติม ให้ import userEvent ด้วยโค้ดด้านล่าง (ใส่ตอนต้น TodoItem.test.jsx)
+ในส่วนถัดไป เราจะทดสอบการเรียก addNewComment แต่ในกรณีนี้เราต้องพิมพ์ข้อความลงในกล่องข้อความ (ที่จัดการโดย state newComment) โดยเราจะต้องใช้ library เพิ่มเติม ให้ import userEvent ด้วยโค้ดด้านล่าง และเพิ่ม fireEvent ในรายการที่ import (ใส่ตอนต้น TodoItem.test.jsx)
 <syntaxhighlight lang="javascript">
 import userEvent from '@testing-library/user-event'
 </syntaxhighlight>

@@ แถว 591: / แถว 591: @@
      await userEvent.type(input, 'New comment');
-     //
+     // กดปุ่ม: ในที่นี้เราใช้ fireEvent เพราะว่าระหว่างการอัพเดทจะมีการเปลี่ยน state ถ้าไม่ใช่จะมี warning
-     // TODO: เติมโค้ดสำหรับเรียกให้กดปุ่มด้วย
+     const button = screen.getByRole('button', { name: /add comment/i });
-     //
+    fireEvent.click(button);
      expect(onAddNewComment).toHaveBeenCalledWith(baseTodo.id, 'New comment');
    });

@@ แถว 367: / แถว 367: @@
 ให้สร้างไดเร็กทอรี .github/workflows (นับจากรากของ git repo เลย ไม่ใช่ใน frontend) จากนั้นสร้างไฟล์ frontend-tests.yml ดังด้านล่างในไดเร็กทอรีดังกล่าว
 <syntaxhighlight lang="yaml">
 name: Frontend Tests

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 04:51, 13 กุมภาพันธ์ 2569
แถว 681:		แถว 681:

	== ต่อจากนี้ ==		== ต่อจากนี้ ==
		+	* เราสามารถเทสส่วนอื่นๆ ของ App ได้ ถ้าสนใจอาจจะทดลองทำดู
		+	* เรายังไม่ได้ทำ unit test ในส่วน flask backend    สังเกตว่าในขณะที่ในการ testing react เราต้อง mock พวก api request ถ้าเป็นการเทส backend แบบ unit test เราจะต้อง mock SQLAlchemy เพื่อให้คืนค่าตามที่เราต้องการ ''ซึ่งทำได้ยากมาก''     ดังนั้น เราจะทดสอบ backend โดยทำเป็น integration test แทน คือเราจะสร้าง test database เพื่อมาทดสอบแทน เราจะเรียนเรื่องนี้ถัดไป

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 04:47, 13 กุมภาพันธ์ 2569
แถว 679:		แถว 679:
	'''🄶''' ถ้าโค้ดทำงานได้ ให้ commit งานที่ทำ และ push ไป github จากนั้นอย่าลืมไปดูผลการทำงานของ github action ที่เราใส่ไว้ (เทสควรผ่านหมด)		'''🄶''' ถ้าโค้ดทำงานได้ ให้ commit งานที่ทำ และ push ไป github จากนั้นอย่าลืมไปดูผลการทำงานของ github action ที่เราใส่ไว้ (เทสควรผ่านหมด)
	}}		}}
		+
		+	== ต่อจากนี้ ==

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 04:47, 13 กุมภาพันธ์ 2569
แถว 604:		แถว 604:

	=== ทดสอบ App ===		=== ทดสอบ App ===
		+	เราจะเขียนเทสเคสเพิ่มเติมสำหรับ component App ก่อนอื่นเราจะขอย้ายค่าคงที่สำหรับทดสอบก่อน (TodoItem ทดสอบ)
		+
		+	<syntaxhighlight lang="javascript">
		+	// ... ละด้านบน
		+
		+	// *** ย้ายมาที่นี่
		+	const todoItem1 = { id: 1, title: 'First todo', done: false, comments: [] };
		+	const todoItem2 = { id: 2, title: 'Second todo', done: false, comments: [
		+	{ id: 1, message: 'First comment' },
		+	{ id: 2, message: 'Second comment' },
		+	] };
		+
		+	const originalTodoList = [
		+	todoItem1,
		+	todoItem2,
		+	]
		+
		+	describe('App', () => {
		+	// ... ละส่วนอื่นไว้
		+
		+	it('renders correctly', async() => {
		+	// *** ให้คืน mockResponse(originalTodoList) เลย ลบของเก่าออก
		+	global.fetch.mockImplementationOnce(() =>
		+	mockResponse(originalTodoList)
		+	);
		+
		+	// ... ละไว้
		+	});
		+	});
		+	</syntaxhighlight>
		+
		+	เราจะทดสอบการกด Toggle ที่ todo item แรก ด้านล่างเป็นโค้ด พร้อมทั้ง comment ที่อธิบายการทำงาน
		+
		+	<syntaxhighlight lang="javascript">
		+	it('toggles done on a todo item', async() => {
		+	// เตรียมค่าสำหรับคืนหลังกด toggle done แล้ว
		+	const toggledTodoItem1 = { ...todoItem1, done: true };
		+
		+	// mock fetch --- สังเกตว่าจะมีการเรียก fetch สองครั้ง จากการ init และจากการกดปุ่ม
		+	// สำหรับการเรียกแต่ละครั้งเราจะสามารถโปรแกรมคำตอบแยกกันได้ โดยเรียก mockImplementationOnce หลายครั้ง
		+	// กล่าวคือ รอบแรกคืนรายการทั้งหมด รอบที่สองคืนค่า todo item ที่แก้ค่าแล้ว
		+	global.fetch
		+	.mockImplementationOnce(() => mockResponse(originalTodoList))
		+	.mockImplementationOnce(() => mockResponse(toggledTodoItem1));
		+
		+	render(<App />);
		+
		+	// assert ก่อนว่าของเดิม todo item แรกไม่ได้มีคลาส done
		+	expect(await screen.findByText('First todo')).not.toHaveClass('done');
		+
		+	// หาปุ่ม จะเจอ 2 ปุ่ม (เพราะว่ามี 2 todo item)
		+	const toggleButtons = await screen.findAllByRole('button', { name: /toggle/i })
		+	// เลือกกดปุ่มแรก
		+	toggleButtons[0].click();
		+
		+	// ตรวจสอบว่า todo item นั้นเปลี่ยนคลาสเป็น done แล้ว
		+	expect(await screen.findByText('First todo')).toHaveClass('done');
		+	});
		+	</syntaxhighlight>
		+
		+	ให้ทดลองรันด้วย npm test ถ้าเทสไม่ผ่านให้แก้ไข
		+
		+	สังเกตว่าในการคืนค่า fetch ที่เรา mock ไป เราไม่ได้สนใจเลยว่า URL ที่เรียกจะเป็นอย่างไร เราสามารถ assert เพิ่มเติมได้ URL จะต้องมีรูปแบบที่ถูกต้อง เช่น มีคำว่า toggle/1 เป็นต้น โดยเพิ่ม assertion ลงไปในเทสเคสดังกล่าวดังนี้
		+
		+	<syntaxhighlight lang="javascript">
		+	expect(global.fetch).toHaveBeenLastCalledWith(expect.stringMatching(/1\/toggle/), { method: 'PATCH' });
		+	</syntaxhighlight>
		+
		+	ในโค้ดข้างต้นการเรียก toHaveBeenLastCalledWith เราสามารถส่งว่าให้ match parameter ด้วย string matching ได้ ทำให้เราไม่ต้องระบุ URL เต็มในการตรวจสอบ
		+
		+	ให้ทดลองรันด้วย npm test อีกครั้ง แก้จนเทสเคสผ่านทั้งหมด
		+
		+	{{กล่องฟ้า\|
		+	'''🄶''' ถ้าโค้ดทำงานได้ ให้ commit งานที่ทำ และ push ไป github จากนั้นอย่าลืมไปดูผลการทำงานของ github action ที่เราใส่ไว้ (เทสควรผ่านหมด)
		+	}}

@@ แถว 533: / แถว 533: @@
 === ทดสอบว่า TodoItem เรียก callback หลังมีการกดปุ่ม ===
-เราจะเพิ่มการทดสอบ component TodoItem ว่ามีการเรียก callback ตามที่คาดหวังไว้ ด้านล่างเป็นส่วนของการทดสอบปุ่ม Toggle
+เราจะเพิ่มการทดสอบ component TodoItem ว่ามีการเรียก callback ตามที่คาดหวังไว้ ด้านล่างเป็นส่วนของการทดสอบปุ่ม Toggle  ให้เพิ่มลงใน TodoItem.test.jsx
 <syntaxhighlight lang="javascript">
@@ แถว 568: / แถว 568: @@
 </syntaxhighlight>
-ในส่วนถัดไป เราจะทดสอบการเรียก addNewComment แต่ในกรณีนี้เราต้องพิมพ์ข้อความลงในกล่องข้อความ (ที่จัดการโดย state newComment)
+แก้และทดลองรันด้วย npm test จนกว่าจะผ่าน
 === ทดสอบ App ===

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 03:58, 13 กุมภาพันธ์ 2569
แถว 569:		แถว 569:

	ในส่วนถัดไป เราจะทดสอบการเรียก addNewComment แต่ในกรณีนี้เราต้องพิมพ์ข้อความลงในกล่องข้อความ (ที่จัดการโดย state newComment)		ในส่วนถัดไป เราจะทดสอบการเรียก addNewComment แต่ในกรณีนี้เราต้องพิมพ์ข้อความลงในกล่องข้อความ (ที่จัดการโดย state newComment)
		+
		+	=== ทดสอบ App ===

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 03:56, 13 กุมภาพันธ์ 2569
แถว 531:		แถว 531:

	== ทดสอบกันต่อ ==		== ทดสอบกันต่อ ==
		+	=== ทดสอบว่า TodoItem เรียก callback หลังมีการกดปุ่ม ===
		+
		+	เราจะเพิ่มการทดสอบ component TodoItem ว่ามีการเรียก callback ตามที่คาดหวังไว้ ด้านล่างเป็นส่วนของการทดสอบปุ่ม Toggle
		+
		+	<syntaxhighlight lang="javascript">
		+	it('makes callback to toggleDone when Toggle button is clicked', () => {
		+	const onToggleDone = vi.fn();
		+	render(
		+	<TodoItem
		+	todo={baseTodo}
		+	toggleDone={onToggleDone} />
		+	);
		+	const button = screen.getByRole('button', { name: /toggle/i });
		+	button.click();
		+	expect(onToggleDone).toHaveBeenCalledWith(baseTodo.id);
		+	});
		+	</syntaxhighlight>
		+
		+	ข้อสังเกต
		+	* ในข้อนี้เราไม่ได้มีการ mock อะไร แต่เราส่งฟังก์ชัน onToggleDone ที่เป็น vi.fn() ไปให้ใน prop toggleDone
		+	* เราคาดว่า (expect) ฟังก์ชันดังกล่าวจะถูกเรียกโดย component เมื่อมีการกดปุ่ม ฟังก์ชันจาก vi.fn จะมีคุณสมบัติพิเศษคือมันจะจำการเรียกต่าง ๆ ไว้ทำให้เราสามารถ assert ได้ในภายหลัง
		+	* เราแกะปุ่ม Toggle มาจาก screen.getByRole (ดูรายละเอียดในโค้ด)
		+	* สั่งกดปุ่ม button.click()
		+	* สุดท้ายเรา assert ว่าฟังก์ชัน onToggleDone ที่ส่งไป <code>.toHaveBeenCalledWith(baseTodo.id)</code>
		+
		+	ทดลองรันด้วย npm test ถ้าไม่ผ่าน อาจจะดู error และลองตรวจสอบว่า TodoItem ของเราใช้ข้อความหรือสัญลักษณ์อะไรในปุ่ม toggle
		+
		+	ให้ทดลองเพิ่มเทสเคสปุ่ม delete จากโครงด้านล่าง ในส่วนของการเลือกปุ่ม delete ให้ดูโค้ดใน TotoItem และใส่ให้สอดคล้องกัน
		+
		+	<syntaxhighlight lang="javascript">
		+	it('makes callback to deleteTodo when delete button is clicked', () => {
		+	//
		+	// *** TODO: เขียนเอง
		+	//
		+	});
		+	</syntaxhighlight>
		+
		+	ในส่วนถัดไป เราจะทดสอบการเรียก addNewComment แต่ในกรณีนี้เราต้องพิมพ์ข้อความลงในกล่องข้อความ (ที่จัดการโดย state newComment)