آموزش تست واکنش با کتابخانه تست جست و واکنش (RTL)

سرفصل ها و درس ها

معرفی Introduction

• مقدمه ای بر تست کتابخانه و جست Introduction to Testing Library and Jest

• Create-React-App Create-React-App

• اولین تست با کتابخانه تست First Test with Testing Library

• Jest و Jest-DOM Assertions Jest and Jest-DOM Assertions

• Jest: حالت تماشا و نحوه عملکرد تست ها Jest: Watch Mode and How Tests Work

• TDD: توسعه آزمایش محور TDD: Test Driven Development

• فلسفه کتابخانه تست واکنش React Testing Library Philosophy

• تست عملکرد در مقابل تست واحد Functional Testing vs Unit Testing

• TDD (توسعه مبتنی بر آزمایش) در مقابل BDD (توسعه مبتنی بر رفتار) TDD (Test Driven Development) vs BDD (Behavior Driven Development)

• تست کتابخانه و دسترسی Testing Library and Accessibility

• منبع: اگر ترجیح می‌دهید React را برای این دوره ننویسید، کجا می‌توان کد پیدا کرد RESOURCE: Where to find code if you'd rather not write React for this course

معرفی Introduction

• مقدمه ای بر تست کتابخانه و جست Introduction to Testing Library and Jest

• Create-React-App Create-React-App

• اولین تست با کتابخانه تست First Test with Testing Library

• Jest و Jest-DOM Assertions Jest and Jest-DOM Assertions

• Jest: حالت تماشا و نحوه عملکرد تست ها Jest: Watch Mode and How Tests Work

• TDD: توسعه آزمایش محور TDD: Test Driven Development

• فلسفه کتابخانه تست واکنش React Testing Library Philosophy

• تست عملکرد در مقابل تست واحد Functional Testing vs Unit Testing

• TDD (توسعه مبتنی بر آزمایش) در مقابل BDD (توسعه مبتنی بر رفتار) TDD (Test Driven Development) vs BDD (Behavior Driven Development)

• تست کتابخانه و دسترسی Testing Library and Accessibility

• منبع: اگر ترجیح می‌دهید React را برای این دوره ننویسید، کجا می‌توان کد پیدا کرد RESOURCE: Where to find code if you'd rather not write React for this course

برنامه ساده: دکمه رنگی Simple App: Color Button

• طرح کلی دوره Overall Course Plan

• برنامه دکمه رنگی را شروع کنید Start Color Button App

• JEST-DOM BUG! موارد مثبت کاذب با camelCase «toHaveStyles». JEST-DOM BUG! False positives with camelCase `toHaveStyles`

• روش "logRoles" برای اشکال زدایی نقش ها `logRoles` method for debugging roles

• تست رفتار هنگام کلیک کردن روی دکمه Test Behavior when Clicking Button

• OPTIONAL React Code: روی دکمه برای تغییر رنگ کلیک کنید OPTIONAL React Code: Click Button to Change Color

• تست پذیرش دستی Manual Acceptance Testing

• وضعیت اولیه دکمه و چک باکس را آزمایش کنید Test Initial Condition of Button and Checkbox

• اختیاری: تست سبک ها از ماژول های CSS وارد شده OPTIONAL: Testing styles from imported CSS modules

• مقدمه ای بر آزمون های کد Introduction to Code Quizzes

• آزمون کد! دکمه تأیید غیرفعال کردن در Checkbox Check Code Quiz! Confirm Button Disable on Checkbox Check

• راه حل آزمون کد: دکمه تأیید غیرفعال کردن در Checkbox Check Code Quiz Solution: Confirm Button Disable on Checkbox Check

• یافتن چک باکس با برچسب Finding Checkbox with Label

• آزمون کد! دکمه غیرفعال خاکستری می شود Code Quiz! Disabled Button Turns Gray

• توابع تست واحد Unit Testing Functions

• آزمون کد! به روز رسانی تست ها برای نام رنگ های جدید Code Quiz! Update Tests for New Color Names

• زمان تست واحد When to Unit Test

• نقد و بررسی: برنامه ساده Review: Simple App

برنامه ساده: دکمه رنگی Simple App: Color Button

• طرح کلی دوره Overall Course Plan

• برنامه دکمه رنگی را شروع کنید Start Color Button App

• JEST-DOM BUG! موارد مثبت کاذب با camelCase «toHaveStyles». JEST-DOM BUG! False positives with camelCase `toHaveStyles`

• روش "logRoles" برای اشکال زدایی نقش ها `logRoles` method for debugging roles

• تست رفتار هنگام کلیک کردن روی دکمه Test Behavior when Clicking Button

• OPTIONAL React Code: روی دکمه برای تغییر رنگ کلیک کنید OPTIONAL React Code: Click Button to Change Color

• تست پذیرش دستی Manual Acceptance Testing

• وضعیت اولیه دکمه و چک باکس را آزمایش کنید Test Initial Condition of Button and Checkbox

• اختیاری: تست سبک ها از ماژول های CSS وارد شده OPTIONAL: Testing styles from imported CSS modules

• مقدمه ای بر آزمون های کد Introduction to Code Quizzes

• آزمون کد! دکمه تأیید غیرفعال کردن در Checkbox Check Code Quiz! Confirm Button Disable on Checkbox Check

• راه حل آزمون کد: دکمه تأیید غیرفعال کردن در Checkbox Check Code Quiz Solution: Confirm Button Disable on Checkbox Check

• یافتن چک باکس با برچسب Finding Checkbox with Label

• آزمون کد! دکمه غیرفعال خاکستری می شود Code Quiz! Disabled Button Turns Gray

• توابع تست واحد Unit Testing Functions

• آزمون کد! به روز رسانی تست ها برای نام رنگ های جدید Code Quiz! Update Tests for New Color Names

• زمان تست واحد When to Unit Test

• نقد و بررسی: برنامه ساده Review: Simple App

ESLint با کتابخانه تست، به علاوه زیباتر ESLint with Testing Library, plus Prettier

• ESLint و Prettier ESLint and Prettier

• ESLint برای تست کتابخانه و Jest-DOM ESLint for Testing Library and Jest-DOM

• دستورالعمل نمایش ESLint در نوار وضعیت برای ESLint افزونه 2.4.0+ Instructions for displaying ESLint in the status bar for ESLint extension 2.4.0+

• ESLint را در VSCode پیکربندی کنید Configure ESLint in VSCode

• Prettier را در VSCode پیکربندی کنید Configure Prettier in VSCode

• بررسی: ESLint و Prettier Review: ESLint and Prettier

ESLint با کتابخانه تست، به علاوه زیباتر ESLint with Testing Library, plus Prettier

• ESLint و Prettier ESLint and Prettier

• ESLint برای تست کتابخانه و Jest-DOM ESLint for Testing Library and Jest-DOM

• دستورالعمل نمایش ESLint در نوار وضعیت برای ESLint افزونه 2.4.0+ Instructions for displaying ESLint in the status bar for ESLint extension 2.4.0+

• ESLint را در VSCode پیکربندی کنید Configure ESLint in VSCode

• Prettier را در VSCode پیکربندی کنید Configure Prettier in VSCode

• بررسی: ESLint و Prettier Review: ESLint and Prettier

Sundaes On Demand: Form Review و Popover Sundaes On Demand: Form Review and Popover

• معرفی Sundaes در صورت تقاضا Introduction to Sundaes on Demand

• راه اندازی ESLint و زیباتر ESLint and Prettier Setup

• React Bootstrap Setup React Bootstrap Setup

• سازماندهی کد و مقدمه ای بر خلاصه فرم Code Organization and Introduction to SummaryForm

• آزمون کد: کادر انتخاب دکمه فعال می کند Code Quiz: Checkbox Enables Button

• کد واکنش اختیاری: چک باکس و دکمه SummaryForm OPTIONAL React Code: SummaryForm Checkbox and Button

• React Bootstrap Popover and Testing Library userEvent React Bootstrap Popover and Testing Library userEvent

• مهم: به روز رسانی کد برای جلوگیری از خطا لازم است IMPORTANT: code update required to avoid errors

• «fireEvent» را با «userEvent» جایگزین کنید Replace `fireEvent` with `userEvent`

• روش های پرس و جوی صفحه نمایش Screen Query Methods

• عنصر تست در صفحه نیست: تست های پاپاور Testing Element is Not on Page: Popover Tests

• OPTIONAL React Code: Popover OPTIONAL React Code: Popover

• بررسی: فرم خلاصه Review: Summary Form

Sundaes On Demand: Form Review و Popover Sundaes On Demand: Form Review and Popover

• معرفی Sundaes در صورت تقاضا Introduction to Sundaes on Demand

• راه اندازی ESLint و زیباتر ESLint and Prettier Setup

• React Bootstrap Setup React Bootstrap Setup

• سازماندهی کد و مقدمه ای بر خلاصه فرم Code Organization and Introduction to SummaryForm

• آزمون کد: کادر انتخاب دکمه فعال می کند Code Quiz: Checkbox Enables Button

• کد واکنش اختیاری: چک باکس و دکمه SummaryForm OPTIONAL React Code: SummaryForm Checkbox and Button

• React Bootstrap Popover and Testing Library userEvent React Bootstrap Popover and Testing Library userEvent

• مهم: به روز رسانی کد برای جلوگیری از خطا لازم است IMPORTANT: code update required to avoid errors

• «fireEvent» را با «userEvent» جایگزین کنید Replace `fireEvent` with `userEvent`

• روش های پرس و جوی صفحه نمایش Screen Query Methods

• عنصر تست در صفحه نیست: تست های پاپاور Testing Element is Not on Page: Popover Tests

• OPTIONAL React Code: Popover OPTIONAL React Code: Popover

• بررسی: فرم خلاصه Review: Summary Form

شبیه سازی پاسخ سرور با Mock Service Worker Simulating Server Response with Mock Service Worker

• OrderEntry Server Data Introduction OrderEntry Server Data Introduction

• مقدمه ای بر Mock Service Worker and Handlers Introduction to Mock Service Worker and Handlers

• چرا با استفاده از Jest axios را مسخره نمی کنید؟ Why not mock axios using Jest?

• راه اندازی سرور Mock Service Worker Setting up the Mock Service Worker Server

• تست با Mock Service Worker: Scoop Options Tests with Mock Service Worker: Scoop Options

• مهم، لطفاً بخوانید: مشکل axios با 1.x IMPORTANT, PLEASE READ: axios issue with 1.x

• OPTIONAL React Code: Options and ScoopOption Components OPTIONAL React Code: Options and ScoopOption Components

• استفاده از «await findBy» برای یافتن عناصری که به صورت ناهمزمان پر می شوند Using `await findBy` to Find Elements that Populate Asynchronously

• آزمون کد! گزینه های برتر از سرور Code Quiz! Topping Options from Server

• عیب‌یابی: خطای «نمی‌توان role="img" را پیدا کرد TROUBLESHOOTING: `Unable to find role="img"` error

• خطا در برنامه ریزی پاسخ سرور Error Server Response Planning

• شبیه سازی پاسخ خطای سرور در تست ها Simulating Server Error Response in Tests

• کد واکنش اختیاری: بنر هشدار برای خطای سرور گزینه ها OPTIONAL React Code: Alert Banner for Options Server Error

• اجرای فقط تست های انتخاب شده و «waitFor». Running only Selected Tests, and `waitFor`

• عیب‌یابی: تست‌ها قبول می‌شوند اما اخطار/خطا دریافت می‌کنند؟ TROUBLESHOOTING: Tests passing but getting warnings / errors?

• اختیاری: سؤال متداول: چرا «نام» با نقش «هشدار» کار نمی کند؟ OPTIONAL: Frequent Question: Why doesn't "name" work with the role "alert"?

• بررسی: پاسخ به خطای سرور و ابزارهای تست اشکال زدایی Review: Server Error Response and Test Debugging Tools

شبیه سازی پاسخ سرور با Mock Service Worker Simulating Server Response with Mock Service Worker

• OrderEntry Server Data Introduction OrderEntry Server Data Introduction

• مقدمه ای بر Mock Service Worker and Handlers Introduction to Mock Service Worker and Handlers

• چرا با استفاده از Jest axios را مسخره نمی کنید؟ Why not mock axios using Jest?

• راه اندازی سرور Mock Service Worker Setting up the Mock Service Worker Server

• تست با Mock Service Worker: Scoop Options Tests with Mock Service Worker: Scoop Options

• مهم، لطفاً بخوانید: مشکل axios با 1.x IMPORTANT, PLEASE READ: axios issue with 1.x

• OPTIONAL React Code: Options and ScoopOption Components OPTIONAL React Code: Options and ScoopOption Components

• استفاده از «await findBy» برای یافتن عناصری که به صورت ناهمزمان پر می شوند Using `await findBy` to Find Elements that Populate Asynchronously

• آزمون کد! گزینه های برتر از سرور Code Quiz! Topping Options from Server

• عیب‌یابی: خطای «نمی‌توان role="img" را پیدا کرد TROUBLESHOOTING: `Unable to find role="img"` error

• خطا در برنامه ریزی پاسخ سرور Error Server Response Planning

• شبیه سازی پاسخ خطای سرور در تست ها Simulating Server Error Response in Tests

• کد واکنش اختیاری: بنر هشدار برای خطای سرور گزینه ها OPTIONAL React Code: Alert Banner for Options Server Error

• اجرای فقط تست های انتخاب شده و «waitFor». Running only Selected Tests, and `waitFor`

• عیب‌یابی: تست‌ها قبول می‌شوند اما اخطار/خطا دریافت می‌کنند؟ TROUBLESHOOTING: Tests passing but getting warnings / errors?

• اختیاری: سؤال متداول: چرا «نام» با نقش «هشدار» کار نمی کند؟ OPTIONAL: Frequent Question: Why doesn't "name" work with the role "alert"?

• بررسی: پاسخ به خطای سرور و ابزارهای تست اشکال زدایی Review: Server Error Response and Test Debugging Tools

تست اجزای پیچیده شده در یک ارائه دهنده Testing Components Wrapped in a Provider

• مقدمه ای بر تست های مجموع و جزئی Intro to Tests for Total and Subtotals

• وارد کردن ورودی متن: آزمون های فرعی Entering Text Input: Subtotal Tests

• OPTIONAL React Code: OrderDetails Context OPTIONAL React Code: OrderDetails Context

• OPTIONAL React Code: از Context برای نمایش Scoops Subtotal استفاده کنید OPTIONAL React Code: Use Context to Display Scoops Subtotal

• اضافه کردن متن به تنظیمات تست Adding Context to Test Setup

• عیب یابی: خطای "not wrapped in act(...)" در طول سخنرانی بعدی TROUBLESHOOTING: "not wrapped in act(...)" error during next lecture

• ایجاد رندر سفارشی برای قرار دادن در ارائه دهنده به صورت پیش فرض Creating Custom Render to Wrap in Provider By Default

• نقد و بررسی: Scoops Subtotal with Context Review: Scoops Subtotal with Context

• آزمون کد! تاپینگ های فرعی Code Quiz! Toppings Subtotal

• OPTIONAL React Code: Toppings checkboxes OPTIONAL React Code: Toppings Checkboxes

• در مورد رشته های خطای معادل برای سخنرانی بعدی توجه داشته باشید Note on equivalent error strings for next lecture

• آزمون کد! کل بزرگ Code Quiz! Grand Total

• "Not wrapped in act(..." خطا "Not wrapped in act()..." Error

• اختیاری: چرا به unmount صریح نیاز است OPTIONAL: Why is the explicit unmount needed

• تست پذیرش دستی Manual Acceptance Testing

تست اجزای پیچیده شده در یک ارائه دهنده Testing Components Wrapped in a Provider

• مقدمه ای بر تست های مجموع و جزئی Intro to Tests for Total and Subtotals

• وارد کردن ورودی متن: آزمون های فرعی Entering Text Input: Subtotal Tests

• OPTIONAL React Code: OrderDetails Context OPTIONAL React Code: OrderDetails Context

• OPTIONAL React Code: از Context برای نمایش Scoops Subtotal استفاده کنید OPTIONAL React Code: Use Context to Display Scoops Subtotal

• اضافه کردن متن به تنظیمات تست Adding Context to Test Setup

• عیب یابی: خطای "not wrapped in act(...)" در طول سخنرانی بعدی TROUBLESHOOTING: "not wrapped in act(...)" error during next lecture

• ایجاد رندر سفارشی برای قرار دادن در ارائه دهنده به صورت پیش فرض Creating Custom Render to Wrap in Provider By Default

• نقد و بررسی: Scoops Subtotal with Context Review: Scoops Subtotal with Context

• آزمون کد! تاپینگ های فرعی Code Quiz! Toppings Subtotal

• OPTIONAL React Code: Toppings checkboxes OPTIONAL React Code: Toppings Checkboxes

• در مورد رشته های خطای معادل برای سخنرانی بعدی توجه داشته باشید Note on equivalent error strings for next lecture

• آزمون کد! کل بزرگ Code Quiz! Grand Total

• "Not wrapped in act(..." خطا "Not wrapped in act()..." Error

• اختیاری: چرا به unmount صریح نیاز است OPTIONAL: Why is the explicit unmount needed

• تست پذیرش دستی Manual Acceptance Testing

امتحان نهایی: مراحل سفارش Final Exam: Order Phases

• مقدمه ای بر امتحان نهایی: مراحل سفارش Introduction to Final Exam: Order Phases

• اضافه کردن یک Handler جدید: اخطار کپی/پیست کردن! Adding a New Handler: Copy/Paste Warning!

• نکات اشکال زدایی Debugging Tips

• نکات واکنش اختیاری برای کدگذاری مرحله سفارش OPTIONAL React Hints for Order Phase Coding

• راه حل امتحان نهایی Final Exam Solution

• عیب یابی: تست "بارگیری" ناموفق است TROUBLESHOOTING: "loading" test fails

• کد واکنش اختیاری: مراحل سفارش OPTIONAL React Code: Order Phases

• Jest Mock به عنوان Props عمل می کند Jest Mock Functions as Props

• بررسی: امتحان نهایی و مقدمه ای بر تمرین اختیاری Review: Final Exam, and Introduction to Optional Practice

• اشتباهات رایج در کتابخانه تست واکنش Common Mistakes with React Testing Library

امتحان نهایی: مراحل سفارش Final Exam: Order Phases

• مقدمه ای بر امتحان نهایی: مراحل سفارش Introduction to Final Exam: Order Phases

• اضافه کردن یک Handler جدید: اخطار کپی/پیست کردن! Adding a New Handler: Copy/Paste Warning!

• نکات اشکال زدایی Debugging Tips

• نکات واکنش اختیاری برای کدگذاری مرحله سفارش OPTIONAL React Hints for Order Phase Coding

• راه حل امتحان نهایی Final Exam Solution

• عیب یابی: تست "بارگیری" ناموفق است TROUBLESHOOTING: "loading" test fails

• کد واکنش اختیاری: مراحل سفارش OPTIONAL React Code: Order Phases

• Jest Mock به عنوان Props عمل می کند Jest Mock Functions as Props

• بررسی: امتحان نهایی و مقدمه ای بر تمرین اختیاری Review: Final Exam, and Introduction to Optional Practice

• اشتباهات رایج در کتابخانه تست واکنش Common Mistakes with React Testing Library

تمرین اضافی اختیاری Optional Extra Practice

• سوالات استاندارد برای تست های جدید و مقدمه ای بر تمرین ها Standard Questions for New Tests and Introduction to Exercises

• "بارگیری" متن را تأیید کنید Confirm "Loading" Text

• بخش تاپینگ های شرطی در صفحه خلاصه Conditional Toppings Section on Summary Page

• در صورت عدم سفارش، دکمه سفارش را غیرفعال کنید Disable Order Button if No Scoops Ordered

• جعبه ورودی قرمز برای تعداد اسکوپ نامعتبر Red Input Box for Invalid Scoop Count

• به‌روزرسانی زیرمجموعه‌ای برای تعداد اسکوپ نامعتبر وجود ندارد No Scoops Subtotal Update for Invalid Scoop Count

• خطای سرور در صفحه تایید سفارش Server Error on Order Confirmation Page

• تبریک و تشکر از شما! Congratulations and Thank You!

تمرین اضافی اختیاری Optional Extra Practice

• سوالات استاندارد برای تست های جدید و مقدمه ای بر تمرین ها Standard Questions for New Tests and Introduction to Exercises

• "بارگیری" متن را تأیید کنید Confirm "Loading" Text

• بخش تاپینگ های شرطی در صفحه خلاصه Conditional Toppings Section on Summary Page

• در صورت عدم سفارش، دکمه سفارش را غیرفعال کنید Disable Order Button if No Scoops Ordered

• جعبه ورودی قرمز برای تعداد اسکوپ نامعتبر Red Input Box for Invalid Scoop Count

• به‌روزرسانی زیرمجموعه‌ای برای تعداد اسکوپ نامعتبر وجود ندارد No Scoops Subtotal Update for Invalid Scoop Count

• خطای سرور در صفحه تایید سفارش Server Error on Order Confirmation Page

• تبریک و تشکر از شما! Congratulations and Thank You!

جایزه Bonus

• کوپن! Coupons!

جایزه Bonus

• کوپن! Coupons!