آموزش آزمایش برنامه های Next.js با Jest، Testing Library و Cypress

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

معرفی Introduction

• معرفی Introduction

• فن آوری های دوره و پیش نیازها Course Technologies and Prerequisites

• هشدار: تست عکس فوری با شوخی با نسخه فعلی Next.js ناموفق بود WARNING: with-jest snapshot test fails with current version of Next.js

• ایجاد برنامه بعدی با استفاده از مثال with-jest create-next-app Using with-jest Example

• اولین تست Next.js First Next.js Test

• ویژگی های دوره: آزمون های کد و یادداشت های جانبی Course Features: Code Quizzes and Side Notes

• راهنمای بقیه دوره Guide to the Rest of the Course

معرفی Introduction

• معرفی Introduction

• فن آوری های دوره و پیش نیازها Course Technologies and Prerequisites

• هشدار: تست عکس فوری با شوخی با نسخه فعلی Next.js ناموفق بود WARNING: with-jest snapshot test fails with current version of Next.js

• ایجاد برنامه بعدی با استفاده از مثال with-jest create-next-app Using with-jest Example

• اولین تست Next.js First Next.js Test

• ویژگی های دوره: آزمون های کد و یادداشت های جانبی Course Features: Code Quizzes and Side Notes

• راهنمای بقیه دوره Guide to the Rest of the Course

تعاریف و فلسفه آزمون Testing Definitions and Philosophy

• مقدمه ای بر تست Introduction to Testing

• انواع آزمون ها Types of Tests

• چه چیزی را تست کنیم What to Test

• افزونگی تست Test Redundancy

• دستورالعمل های دانه بندی تست Test Granularity Guidelines

• دیدگاه من در تست های اسنپ شات (نکته: چیز من نیست) My View on Snapshot Tests (hint: not my thing)

• خلاصه: تعاریف و فلسفه آزمون Summary: Testing Definitions and Philosophy

• شرایط و دستورالعمل های تست Testing Terms and Guidelines

تعاریف و فلسفه آزمون Testing Definitions and Philosophy

• مقدمه ای بر تست Introduction to Testing

• انواع آزمون ها Types of Tests

• چه چیزی را تست کنیم What to Test

• افزونگی تست Test Redundancy

• دستورالعمل های دانه بندی تست Test Granularity Guidelines

• دیدگاه من در تست های اسنپ شات (نکته: چیز من نیست) My View on Snapshot Tests (hint: not my thing)

• خلاصه: تعاریف و فلسفه آزمون Summary: Testing Definitions and Philosophy

• شرایط و دستورالعمل های تست Testing Terms and Guidelines

برنامه دوره و استراتژی های واکشی داده Next.js Course App and Next.js Data Fetching Strategies

• مقدمه ای بر Course App و Next.js Data Fetching Introduction to Course App and Next.js Data Fetching

• برنامه نمایشی دوره Demo of Course App

• استراتژی های واکشی داده Next.js Next.js Data Fetching Strategies

• استراتژی های واکشی داده Next.js Next.js Data Fetching Strategies

• کاربران ویندوز: نکته مهم در مورد نام مخزن دوره WINDOWS USERS: important note about name of course repository

• نصب برنامه دوره Installing the Course App

• یادداشت کد برنامه دوره Course App Code Notes

برنامه دوره و استراتژی های واکشی داده Next.js Course App and Next.js Data Fetching Strategies

• مقدمه ای بر Course App و Next.js Data Fetching Introduction to Course App and Next.js Data Fetching

• برنامه نمایشی دوره Demo of Course App

• استراتژی های واکشی داده Next.js Next.js Data Fetching Strategies

• استراتژی های واکشی داده Next.js Next.js Data Fetching Strategies

• کاربران ویندوز: نکته مهم در مورد نام مخزن دوره WINDOWS USERS: important note about name of course repository

• نصب برنامه دوره Installing the Course App

• یادداشت کد برنامه دوره Course App Code Notes

تست رابط کاربری UI Testing

• مقدمه و فناوری ها Introduction and Technologies

• تست یک صفحه استاتیک Testing a Static Page

• نکته جانبی: چرا به آزمون موجود اضافه شود؟ چرا یک تست جدید ایجاد نمی کنید؟ SIDE NOTE: Why add to the existing test? Why not create a new test?

• تست لوازم SSG Testing SSG Props

• یادداشت جانبی: درباره داده های جعلی برای "محل کنسرت محبوب" SIDE NOTE: About Fake Data for "Popular Concert Venue"

• آزمون کد! خطای جزء باند Code Quiz! Band Component Error

• تصمیمات و رهنمودهای آزمون تا کنون Decisions and Guidelines for the Tests So Far

• معرفی Mock Service Worker Introduction to Mock Service Worker

• راه اندازی MSW با Next.js Setting up MSW with Next.js

• اضافه کردن MSW Handler Adding a MSW Handler

• نکته جانبی: عیب یابی کنترل کننده های MSW SIDE NOTE: Troubleshooting MSW Handlers

• استفاده از MSW برای آزمایش: جزء رزرو Using MSW for a Test: Reservation Component

• آزمون کد! رزرو کاربر Code Quiz! User Reservations

• پاسخ های MSW مختلف در هر آزمون Different MSW Responses per Test

• آزمون کد! پاسخ های MSW مختلف در هر آزمون Code Quiz! Different MSW Responses per Test

• خلاصه: تست UI Summary: UI Testing

تست رابط کاربری UI Testing

• مقدمه و فناوری ها Introduction and Technologies

• تست یک صفحه استاتیک Testing a Static Page

• نکته جانبی: چرا به آزمون موجود اضافه شود؟ چرا یک تست جدید ایجاد نمی کنید؟ SIDE NOTE: Why add to the existing test? Why not create a new test?

• تست لوازم SSG Testing SSG Props

• یادداشت جانبی: درباره داده های جعلی برای "محل کنسرت محبوب" SIDE NOTE: About Fake Data for "Popular Concert Venue"

• آزمون کد! خطای جزء باند Code Quiz! Band Component Error

• تصمیمات و رهنمودهای آزمون تا کنون Decisions and Guidelines for the Tests So Far

• معرفی Mock Service Worker Introduction to Mock Service Worker

• راه اندازی MSW با Next.js Setting up MSW with Next.js

• اضافه کردن MSW Handler Adding a MSW Handler

• نکته جانبی: عیب یابی کنترل کننده های MSW SIDE NOTE: Troubleshooting MSW Handlers

• استفاده از MSW برای آزمایش: جزء رزرو Using MSW for a Test: Reservation Component

• آزمون کد! رزرو کاربر Code Quiz! User Reservations

• پاسخ های MSW مختلف در هر آزمون Different MSW Responses per Test

• آزمون کد! پاسخ های MSW مختلف در هر آزمون Code Quiz! Different MSW Responses per Test

• خلاصه: تست UI Summary: UI Testing

راه اندازی پایگاه داده آزمون Setting up a Test Database

• کاربران ویندوز و لینوکس: تنظیمات مربوط به اسکریپت های npm WINDOWS AND LINUX USERS: adjustments to npm scripts

• مقدمه ای بر پایگاه های داده تست Introduction to Test Databases

• ایجاد پایگاه داده تست Creating a Test Database

• متغیرهای محیطی Environment Variables

• ایجاد آزمون DB و متغیرهای محیطی Creating the Test DB and Environment Variables

• نکته جانبی: نمونه DB را با سرور ابری آزمایش کنید SIDE NOTE: Test DB example with cloud server

• یک روش برای بازنشانی DB تست ایجاد کنید Create a Method to Reset the Test DB

• خلاصه: راه اندازی یک پایگاه داده آزمون Summary: Setting up a Test Database

• مفاهیم پایگاه داده تست Test Database Concepts

راه اندازی پایگاه داده آزمون Setting up a Test Database

• کاربران ویندوز و لینوکس: تنظیمات مربوط به اسکریپت های npm WINDOWS AND LINUX USERS: adjustments to npm scripts

• مقدمه ای بر پایگاه های داده تست Introduction to Test Databases

• ایجاد پایگاه داده تست Creating a Test Database

• متغیرهای محیطی Environment Variables

• ایجاد آزمون DB و متغیرهای محیطی Creating the Test DB and Environment Variables

• نکته جانبی: نمونه DB را با سرور ابری آزمایش کنید SIDE NOTE: Test DB example with cloud server

• یک روش برای بازنشانی DB تست ایجاد کنید Create a Method to Reset the Test DB

• خلاصه: راه اندازی یک پایگاه داده آزمون Summary: Setting up a Test Database

• مفاهیم پایگاه داده تست Test Database Concepts

آزمایش مسیرهای Next.js (با استفاده از Cypress) Testing Next.js Routes (using Cypress)

• معرفی مسیرهای آزمایشی Next.js و Cypress Introducing testing Next.js Routes and Cypress

• اختیاری: آشنایی با سرو OPTIONAL: Introduction to Cypress

• به روز رسانی: Cypress 10 UPDATE: Cypress 10

• WINDOWS USERS: دستور متفاوت «build: test» مورد نیاز است WINDOWS USERS: Different `build: test` command required

• راه اندازی Next.js برای Cypress Setting up Next.js for Cypress

• نکته جانبی: اجرای آزمایش‌های یکپارچه‌سازی مداوم در برابر پیش‌نمایش Deploy SIDE NOTE: Running Continuous Integration Tests against Preview Deploy

• راه اندازی Cypress Setting up Cypress

• عیب‌یابی: «npm run cypress:start» قطع می‌شود TROUBLESHOOTING: `npm run cypress:start` hangs

• نکته جانبی: دویدن سرو بدون تعیین مسیر SIDE NOTE: Running cypress without specifying a path

• تست سرو اول: مسیر ایستا First Cypress Test: Static Route

• آزمون کد! مسیر ثابت Code Quiz! Static Route

• تست مسیرهای پویا Testing Dynamic Routes

• بازنشانی پایگاه داده در Cypress Resetting the Database in Cypress

• نکته جانبی: چرا در ابتدای آزمون و نه در پایان بازنشانی می شود؟ SIDE NOTE: Why reset at the beginning of the test and not the end?

• آزمایش مسیر پویا که در زمان ساخت وجود داشت Test Dynamic Route that was Present at Build Time

• آزمون کد! مسیر آزمایشی که وجود ندارد Code Quiz! Test route that does not exist

• مسیر آزمایشی پس از ساخت ایجاد شد Test Route Created after Build

• تمام تست های Cypress و Jest را اجرا کنید Run all Cypress and Jest Tests

• رفع عیب: «npm run cypress:run» آویزان است TROUBLESHOOTING: `npm run cypress:run` hangs

• خلاصه: تست مسیرهای Next.js و Cypress Summary: Testing Next.js Routes and Cypress

آزمایش مسیرهای Next.js (با استفاده از Cypress) Testing Next.js Routes (using Cypress)

• معرفی مسیرهای آزمایشی Next.js و Cypress Introducing testing Next.js Routes and Cypress

• اختیاری: آشنایی با سرو OPTIONAL: Introduction to Cypress

• به روز رسانی: Cypress 10 UPDATE: Cypress 10

• WINDOWS USERS: دستور متفاوت «build: test» مورد نیاز است WINDOWS USERS: Different `build: test` command required

• راه اندازی Next.js برای Cypress Setting up Next.js for Cypress

• نکته جانبی: اجرای آزمایش‌های یکپارچه‌سازی مداوم در برابر پیش‌نمایش Deploy SIDE NOTE: Running Continuous Integration Tests against Preview Deploy

• راه اندازی Cypress Setting up Cypress

• عیب‌یابی: «npm run cypress:start» قطع می‌شود TROUBLESHOOTING: `npm run cypress:start` hangs

• نکته جانبی: دویدن سرو بدون تعیین مسیر SIDE NOTE: Running cypress without specifying a path

• تست سرو اول: مسیر ایستا First Cypress Test: Static Route

• آزمون کد! مسیر ثابت Code Quiz! Static Route

• تست مسیرهای پویا Testing Dynamic Routes

• بازنشانی پایگاه داده در Cypress Resetting the Database in Cypress

• نکته جانبی: چرا در ابتدای آزمون و نه در پایان بازنشانی می شود؟ SIDE NOTE: Why reset at the beginning of the test and not the end?

• آزمایش مسیر پویا که در زمان ساخت وجود داشت Test Dynamic Route that was Present at Build Time

• آزمون کد! مسیر آزمایشی که وجود ندارد Code Quiz! Test route that does not exist

• مسیر آزمایشی پس از ساخت ایجاد شد Test Route Created after Build

• تمام تست های Cypress و Jest را اجرا کنید Run all Cypress and Jest Tests

• رفع عیب: «npm run cypress:run» آویزان است TROUBLESHOOTING: `npm run cypress:run` hangs

• خلاصه: تست مسیرهای Next.js و Cypress Summary: Testing Next.js Routes and Cypress

تست ISR و به روز رسانی داده ها Testing ISR and Data Updates

• مقدمه ای بر تست ISR و به روز رسانی داده ها Introduction to Testing ISR and Data Updates

• داده های تست از کش ISR می آید Testing Data Comes from ISR Cache

• اولین تست کش ISR First ISR Cache Test

• نکته جانبی: اسکریپت های Next.js SIDE NOTE: Next.js scripts

• آزمون کد! صفحه باندهای ISR Code Quiz! ISR Bands Page

• به روز رسانی: اعتبار مجدد درخواستی از نسخه بتا خارج شده است! UPDATE: on-demand revalidation is out of beta!

• به روز رسانی کش ISR در صورت تقاضا Updating the ISR Cache on Demand

• نوشتن یک افزونه Cypress برای متغیر محیطی Writing a Cypress Plug-In for Environment Variable

• تست اعتبار سنجی مجدد ISR ISR Revalidation Test

• پاک کردن کش ISR Clearing the ISR Cache

• اضافه کردن ISR Cache Clearing به تست Adding ISR Cache Clearing to Test

• آزمون کد! اعتبار کش ISR را مجدداً تأیید کنید Code Quiz! Revalidate ISR Cache

• SWR اعتبار مجدد در بازه زمانی SWR Revalidate on Interval

• تست اعتبار مجدد در بازه زمانی Testing Revalidate on Interval

• آزمون کد! اعتبار مجدد در فاصله زمانی Code Quiz! Revalidate on Interval

• خلاصه: تست ISR و به روز رسانی داده ها Summary: Testing ISR and Data Updates

تست ISR و به روز رسانی داده ها Testing ISR and Data Updates

• مقدمه ای بر تست ISR و به روز رسانی داده ها Introduction to Testing ISR and Data Updates

• داده های تست از کش ISR می آید Testing Data Comes from ISR Cache

• اولین تست کش ISR First ISR Cache Test

• نکته جانبی: اسکریپت های Next.js SIDE NOTE: Next.js scripts

• آزمون کد! صفحه باندهای ISR Code Quiz! ISR Bands Page

• به روز رسانی: اعتبار مجدد درخواستی از نسخه بتا خارج شده است! UPDATE: on-demand revalidation is out of beta!

• به روز رسانی کش ISR در صورت تقاضا Updating the ISR Cache on Demand

• نوشتن یک افزونه Cypress برای متغیر محیطی Writing a Cypress Plug-In for Environment Variable

• تست اعتبار سنجی مجدد ISR ISR Revalidation Test

• پاک کردن کش ISR Clearing the ISR Cache

• اضافه کردن ISR Cache Clearing به تست Adding ISR Cache Clearing to Test

• آزمون کد! اعتبار کش ISR را مجدداً تأیید کنید Code Quiz! Revalidate ISR Cache

• SWR اعتبار مجدد در بازه زمانی SWR Revalidate on Interval

• تست اعتبار مجدد در بازه زمانی Testing Revalidate on Interval

• آزمون کد! اعتبار مجدد در فاصله زمانی Code Quiz! Revalidate on Interval

• خلاصه: تست ISR و به روز رسانی داده ها Summary: Testing ISR and Data Updates

تست احراز هویت Testing Authentication

• مقدمه ای بر تست احراز هویت Introduction to Testing Authentication

• Auth Wrapper در برنامه دوره Auth Wrapper in Course App

• افزودن جزئیات ورود به Cypress Adding Sign-In Details to Cypress

• تست جریان موفقیت با Auth Wrapper Testing Success Flow with Auth Wrapper

• نکته جانبی: چرا این آزمایش اینقدر طولانی است؟ SIDE NOTE: Why is this test so dang long?

• آزمون کد! عدم موفقیت در احراز هویت و به دنبال آن موفقیت آمیز Code Quiz! Authentication Failure followed by Success

• پارامترسازی تست های صفحه محافظت شده Parametrizing Protected Page Tests

• احراز هویت از طریق برنامه Authenticating Programmatically

• نکته جانبی: منابعی برای احراز هویت برنامه‌ای SIDE NOTE: Resources for Authenticating Programmatically

• آزمون کد! احراز هویت از طریق برنامه Code Quiz! Authenticating Programmatically

• خرید بلیط تست پایان به پایان Ticket Purchase End-to-End Test

• نکته جانبی: SWR نمی تواند متن به روز شده را پیدا کند (فاصله حذف فریب) SIDE NOTE: SWR can't find updated text (de-duping interval)

• خلاصه: تست احراز هویت Summary: Testing Authentication

تست احراز هویت Testing Authentication

• مقدمه ای بر تست احراز هویت Introduction to Testing Authentication

• Auth Wrapper در برنامه دوره Auth Wrapper in Course App

• افزودن جزئیات ورود به Cypress Adding Sign-In Details to Cypress

• تست جریان موفقیت با Auth Wrapper Testing Success Flow with Auth Wrapper

• نکته جانبی: چرا این آزمایش اینقدر طولانی است؟ SIDE NOTE: Why is this test so dang long?

• آزمون کد! عدم موفقیت در احراز هویت و به دنبال آن موفقیت آمیز Code Quiz! Authentication Failure followed by Success

• پارامترسازی تست های صفحه محافظت شده Parametrizing Protected Page Tests

• احراز هویت از طریق برنامه Authenticating Programmatically

• نکته جانبی: منابعی برای احراز هویت برنامه‌ای SIDE NOTE: Resources for Authenticating Programmatically

• آزمون کد! احراز هویت از طریق برنامه Code Quiz! Authenticating Programmatically

• خرید بلیط تست پایان به پایان Ticket Purchase End-to-End Test

• نکته جانبی: SWR نمی تواند متن به روز شده را پیدا کند (فاصله حذف فریب) SIDE NOTE: SWR can't find updated text (de-duping interval)

• خلاصه: تست احراز هویت Summary: Testing Authentication

آزمایش API های Next.js Testing Next.js APIs

• مقدمه ای بر تست های API Introduction to API Tests

• اولین تست API First API Test

• رفع خطاهای تست: Polyfill، resetDB، نادیده گرفتن دایرکتوری DB در فهرست پیگیری Fixing Test Errors: Polyfill, resetDB, ignore DB directory in watchlist

• آزمایش مسیر با پارامتر URL Testing a Route with a URL Param

• آزمایش یک مسیر POST Testing a POST Route

• Mocking Utils Module for Authentication Mocking utils Module for Authentication

• نکته جانبی: «صادرات» نحو برای ماژول TypeScript مسخره شده در Jest SIDE NOTE: `export` Syntax for Mocked TypeScript Module in Jest

• تست را با استفاده از Mocked Module بنویسید Write Test using Mocked Module

• آزمون کد! کاربر بدون رزرو Code Quiz! User with No Reservations

• آزمون کد! یک رزرو ارسال کنید Code Quiz! Post a Reservation

• رفع مشکلات تست های موازی با استفاده از پایگاه داده مشترک Fixing Issues with Parallel Tests using Shared Database

• نکته جانبی: مثالی از استفاده از چندین فایل jest.config.js SIDE NOTE: Example of Using Multiple jest.config.js Files

• به‌روزرسانی مقدار بازگشتی تابع ساختگی: آزمایش درخواست غیرمجاز Updating Mock Function Return Value: Testing Unauthorized Request

• آزمون کد! در حال به‌روزرسانی مقدار بازگشتی تابع ساختگی Code Quiz! Updating Mock Function Return Value

• تست مسیرها با پارامترهای رشته کوئری Testing Routes with Query String Params

• آزمون کد! پارامترهای رشته پرس و جو Code Quiz! Query String Params

• خلاصه: تست کردن API های Next.js Summary: Testing Next.js APIs

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

آزمایش API های Next.js Testing Next.js APIs

• مقدمه ای بر تست های API Introduction to API Tests

• اولین تست API First API Test

• رفع خطاهای تست: Polyfill، resetDB، نادیده گرفتن دایرکتوری DB در فهرست پیگیری Fixing Test Errors: Polyfill, resetDB, ignore DB directory in watchlist

• آزمایش مسیر با پارامتر URL Testing a Route with a URL Param

• آزمایش یک مسیر POST Testing a POST Route

• Mocking Utils Module for Authentication Mocking utils Module for Authentication

• نکته جانبی: «صادرات» نحو برای ماژول TypeScript مسخره شده در Jest SIDE NOTE: `export` Syntax for Mocked TypeScript Module in Jest

• تست را با استفاده از Mocked Module بنویسید Write Test using Mocked Module

• آزمون کد! کاربر بدون رزرو Code Quiz! User with No Reservations

• آزمون کد! یک رزرو ارسال کنید Code Quiz! Post a Reservation

• رفع مشکلات تست های موازی با استفاده از پایگاه داده مشترک Fixing Issues with Parallel Tests using Shared Database

• نکته جانبی: مثالی از استفاده از چندین فایل jest.config.js SIDE NOTE: Example of Using Multiple jest.config.js Files

• به‌روزرسانی مقدار بازگشتی تابع ساختگی: آزمایش درخواست غیرمجاز Updating Mock Function Return Value: Testing Unauthorized Request

• آزمون کد! در حال به‌روزرسانی مقدار بازگشتی تابع ساختگی Code Quiz! Updating Mock Function Return Value

• تست مسیرها با پارامترهای رشته کوئری Testing Routes with Query String Params

• آزمون کد! پارامترهای رشته پرس و جو Code Quiz! Query String Params

• خلاصه: تست کردن API های Next.js Summary: Testing Next.js APIs

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

یادگیری بیشتر Further Learning

• سخنرانی پاداش Bonus Lecture

یادگیری بیشتر Further Learning

• سخنرانی پاداش Bonus Lecture