آموزش تست واکنش با جست و آنزیم

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

مقدمه ای بر جست، آنزیم و TDD Introduction to Jest, Enzyme and TDD

• لطفاً بخوانید: نظرات نویسنده در مورد Enzyme and React 18 PLEASE READ: The Author's thoughts on Enzyme and React 18

• خوش آمدید و معرفی Welcome and Introduction

• TDD: چی و چرا TDD: What and Why

• ایجاد-واکنش-برنامه create-react-app

• سخنرانی بعدی اختیاری است Next lecture is optional

• اختیاری: راه‌اندازی Jest بدون ایجاد-واکنش-برنامه OPTIONAL: Setting up Jest without create-react-app

• نسخه ی نمایشی حالت Jest Watch Demo of Jest Watch Mode

• اطلاعات بیشتر در مورد حالت Jest Watch، فایل‌های آزمایشی و تست‌ها More about Jest Watch Mode, Test Files and Tests

• کتابخانه تست آنزیم در مقابل واکنش Enzyme vs. React Testing Library

• نکته مهم: enzyme-adapter-react-17 هنوز در دسترس نیست IMPORTANT NOTE: enzyme-adapter-react-17 not yet available

• معرفی و راه اندازی آنزیم Enzyme Introduction and Setup

• استفاده از آنزیم در آزمایش Using Enzyme in a Test

• ادعاهای شوخی Jest Assertions

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

• معاوضه های آزمایشی Testing Tradeoffs

• چرا در این دوره تست Snapshot وجود ندارد Why There is no Snapshot Testing in this Course

برنامه Simple React: روی شمارنده کلیک کنید Simple React App: Click Counter

• مخزن دوره در GitHub Course Repository on GitHub

• نسخه ی نمایشی و شروع، روی برنامه شمارنده کلیک کنید Demo and Start Click Counter App

• تنظیم آنزیم و نوشتن تست Set up Enzyme and Write Tests

• ویژگی های آزمون داده data-test Attributes

• اولین آزمون داده ها تست ویژگی First data-test Attribute Test

• اختیاری: روش‌هایی برای حذف ویژگی تست داده به غیر از "eject" OPTIONAL: Ways to remove data-test attribute other than "eject"

• اختیاری: حذف ویژگی های تست داده برای تولید OPTIONAL: Removing data-test Attributes for Production

• داده های بیشتر تست ویژگی ها More data-test Attribute Tests

• DRY Refactor DRY Refactor

• استراتژی ها و تصمیمات طراحی Strategies and Design Decisions

• نمایش شمارنده اولیه را آزمایش کنید Test Initial Counter Display

• دکمه تست کلیک کنید Test Button Click

• تست پذیرش و بررسی Acceptance Testing and Review

• روی Counter Challenges کلیک کنید Click Counter Challenges

• روی Counter Challenge Descriptions کلیک کنید Click Counter Challenge Descriptions

Jotto Intro and Congrats Component Jotto Intro and Congrats Component

• نسخه نمایشی برنامه Jotto Jotto App Demo

• برنامه ریزی برنامه Jotto Jotto App Planning

• Jotto App Plan of Attack Jotto App Plan of Attack

• برنامه Jotto و Component Congrats را تنظیم کنید Set up Jotto App and Congrats Component

• راه اندازی تست کامپوننت را تبریک می گویم Congrats Component Test Setup

• تبریک تست ها و متد ()text Congrats Tests and the .text() Method

• کد مولفه تبریک Code the Congrats Component

• نکاتی در مورد تست PropTypes Notes about PropTypes Testing

• آزمایش PropTypes اختیاری OPTIONAL PropTypes Testing

• کد اختیاری PropTypes و به روز رسانی تست OPTIONAL Code PropTypes and Update Tests

• OPTIONAL لوازم پیش فرض در setup() OPTIONAL Default Props in setup()

• پیکربندی آنزیم را به setupTests.js منتقل کنید Move Enzyme Configuration to setupTests.js

• خلاصه انتزاعات Summary of Abstractions

• انجام بازی طولانی Playing the Long Game

کامپوننت GuessedWords GuessedWords Component

• کامپوننت و تست های GuessedWords را تنظیم کنید Set up GuessedWords Component and Tests

• GuessedWords PropTypes and setup() GuessedWords PropTypes and setup()

• از «توصیف» برای Context استفاده کنید Use `describe` for Context

• برای «هیچ کلمه ای حدس زده نشده» Tests و BeforeEach را بنویسید Write Tests and beforeEach for "no words guessed"

• کد برای "بدون کلمه حدس زده" Code for "no words guessed"

• تست های "کلمات حدس زده غیر صفر" Tests for "nonzero guessed words"

• کد برای "کلمات حدس زده غیر صفر" Code for "nonzero guessed words"

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

• استایل بوت استرپ Bootstrap Styling

مولفه ورودی: useState و فیلد ورودی کنترل شده توسط دولت Input Component: useState and state-controlled input field

• آزمون کد! جزء ورودی پایه Code Quiz! Basic Input Component

• لوازم مولفه ورودی Input Component Props

• اختیاری: مقدمه ای بر React Hooks OPTIONAL: Introduction to React Hooks

• روش های واکنش مسخره Mocking React Methods

• کامپوننت ورودی را برای تست های useState آماده کنید Prepare Input Component for useState Tests

• آزمون‌ها و کدهای میدانی کنترل‌شده دولتی State-Controlled Field Tests and Code

• سوالات متداول در مورد روش‌های واکنش مسخره Common Questions about Mocking React Methods

• پاک کردن فیلد تحت کنترل دولت هنگام ارسال Clearing State-Controlled Field on Submit

• آزمایش رندر ورودی برای «موفقیت» به عنوان «درست» یا «نادرست». Testing Input Render for `success` as `true` or `false`

• تابع کمکی «getLetterMatchCount». `getLetterMatchCount` Helper Function

تست های عملکردی Functional Tests

• مقدمه‌ای بر تست‌های عملکردی و به‌روزرسانی مؤلفه برنامه Introduction to Functional Tests, and update App Component

• تست های عملکردی را تنظیم کنید Set up Functional Tests

• اولین آزمون عملکردی: حدس زدن را بدون حدس قبلی ارسال کنید First Functional Test: Submit Guess with No Previous Guesses

• آزمون کد! تست های کاربردی برای "چند کلمه حدس زده شده" و "حدس صحیح" Code Quiz! Functional Tests for "Some Words Guessed" and "Correct Guess"

• متدهای Jest: .only() .skip() و .todo() Jest methods: .only() .skip() and .todo()

تست Axios Testing Axios

• طرح "secretWord". `secretWord` Plan

• "moxios": چرا و چگونه `moxios`: Why and How

• اکشن و تست «getSecretWord» را تنظیم کنید Set up `getSecretWord` Action and Tests

• آزمایش اقدامات Async Testing Async Actions

• اقدام «getSecretWord» را بنویسید Write `getSecretWord` Action

• خلاصه اکشن ناهمزمان و Moxios Asynchronous Action and Moxios Summary

کلمه Secret را روی App Mount دریافت کنید: ماژول‌های مسخره و آزمایش «useEffect». Get Secret Word on App Mount: Mocking Modules and Testing `useEffect`

• ماژول های تمسخر آمیز با جست Mocking Modules with Jest

• استفاده از useEffect برای دریافت Secret Word در App Mount Using useEffect to Get Secret Word on App Mount

• ماژول تمسخر اقدامات Mocking the actions Module

• آزمایشی که useEffect در App Mount فراخوانی می‌شود، نه در App Update Testing that useEffect is Called on App Mount, Not Called on App Update

• کد useEffect را برای گذراندن تست ها بنویسید Write useEffect Code to Pass Tests

• نقطه انتخاب: Redux یا React Context؟ Choice point: Redux or React Context?

مقدمه ای برای تست Redux: وضعیت موفقیت و کارخانه فروشگاه Intro to Testing Redux: Success State and Store Factory

• برنامه ریزی Redux Redux Planning

• Redux را راه اندازی کنید Set up Redux

• برنامه ریزی ایالتی موفقیت آمیز Success State Planning

• ایجاد کننده اقدام «CORRECT_GUESS». `CORRECT_GUESS` Action Creator

• تست "کاهش موفقیت". `successReducer` Test

• اختیاری: مقدمه ای بر «useSelector» هوک OPTIONAL: Introduction to the `useSelector` Hook

• تست وضعیت Redux برای کامپوننت ورودی Testing Redux State for Input Component

• گزینه‌هایی برای آزمایش «useSelector». Choices for Testing `useSelector`

• راهنمای تست "storeFactory". `storeFactory` Test Helper

• در حال به‌روزرسانی عملکرد راه‌اندازی برای استفاده از Store Factory Updating Setup Function to use Store Factory

• خلاصه: مقدمه ای بر تست Redux Summary: Intro to Redux Testing

تست Redux Thunk Testing Redux Thunk

• سایر بخش های دولت Other Pieces of State

• برنامه ریزی "حدس زده" `guessedWords` Planning

• Redux Thunk: چیست و چرا Redux Thunk: What and Why

• نصب Redux Thunk Installing Redux Thunk

• برنامه ریزی آزمون فکری Thunk Test Planning

• تست های «حدس کلمات» را تنظیم کنید Set up `guessWords` Tests

• اولین تست تفکر First Thunk Test

• «secretWordReducer» را اضافه کنید Add `secretWordReducer`

• آزمون های باقی مانده Remaining Tests

• Reducer و Action Creator را بنویسید Write Reducer and Action Creator

• برنامه ریزی برای تست های عملکردی Plan for Functional Tests

• به روز رسانی کامپوننت ها Update Components

• خلاصه تست تفکر Thunk Testing Summary

«getSecretWord» و «useEffect» را برای Redux به‌روزرسانی کنید Update `getSecretWord` and `useEffect` for Redux

• طرح "secretWord". `secretWord` Plan

• تست های moxios را برای Redux به روز کنید Update moxios Tests for Redux

• Action Creator و Reducer را بنویسید Write Action Creator and Reducer

• برای استفاده از حالت SecretWord: پاسخ ساختگی و تنظیمات Jest، برنامه را به‌روزرسانی کنید Update App to use secretWord state: mock response and Jest settings

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

• چالش های Jotto برای Redux Jotto Challenges for Redux

React Context Testing مقدمه و به‌روزرسانی «getSecretWord». React Context Testing Introduction and Update `getSecretWord`

• مقدمه ای بر React Context Introduction to React Context

• Jotto جریان داده با زمینه Jotto Data Flow with Context

• Jotto Context Plan of Attack Jotto Context Plan of Attack

• تست‌های «getSecretWord» را برای پیاده‌سازی متن به‌روزرسانی کنید Update `getSecretWord` Tests for Context Implementation

• کد "getSecretWord" را برای پیاده سازی متن به روز کنید Update `getSecretWord` Code for Context Implementation

• معرفی هوک «useReducer». Intro to `useReducer` Hook

• وضعیت برنامه Refactor با هوک «useReducer». Refactor App State with `useReducer` Hook

• بارگذاری Spinner Planning و 'describe.each()' Loading Spinner Planning and `describe.each()`

• تست و کد بارگذاری اسپینر Test and Code Loading Spinner

متن ساده: انتخابگر زبان Simple Context: Language Picker

• پیاده سازی زمینه در این دوره Context Implementations in this Course

• برنامه ریزی زمینه زبان Language Context Planning

• راه اندازی فایل رشته ها Strings File Setup

• تست رشته ها Strings Tests

• کد getStringByLanguage Code getStringByLanguage

• هشدار رشته ها Strings Warnings

• مولفه LanguagePicker: برنامه ریزی و راه اندازی LanguagePicker Component: Planning and Setup

• آزمون های LanguagePicker: Render و PropTypes LanguagePicker Tests: Render and PropTypes

• نمادهای LanguagePicker LanguagePicker Icons

• روی نماد LanguagePicker کلیک کنید LanguagePicker Icon Click

• فایل languageContext languageContext File

• گزینه های تست زمینه Context Test Options

• راه اندازی آزمون متن زبان را تبریک می گویم Congrats Language Context Test Setup

• تبریک به آزمون های زمینه زبان Congrats Language Context Tests

• کد زمینه زبان تبریک Congrats Language Context Code

• آزمون کد! متن زبان ورودی Code Quiz! Input Language Context

• رفع اخطارهای زبان تست برنامه Fix App Test Language Warnings

• تست های زمینه زبان GuessedWords: مسخره کردن useContext GuessedWords Language Context Tests: Mocking useContext

• کد زمینه زبان GuessedWords GuessedWords Language Context Code

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

زمینه با حالت جاسازی شده Context with Embedded State

• زمینه با حالت جاسازی شده Context with Embedded State

• زمینه موفقیت کد Code Success Context

• زمینه موفقیت تست Test Success Context

• آزمون کد! زمینه کلمات حدس زده Code Quiz! guessedWords Context

• کامپوننت‌های تبریک و برنامه را برای تست زمینه موفقیت تنظیم کنید Set up Congrats and App Components for Success Context Testing

• زمینه موفقیت تست و کد Test and Code Congrats Success Context

• کامپوننت GuessedWords را برای تست زمینه تنظیم کنید Set up GuessedWords Component for Context Testing

• متن GuessedWords را در کامپوننت GuessedWords تست و کد کنید Test and Code GuessedWords Context in GuessedWords Component

• بررسی زمینه با حالت جاسازی شده Review of Context with Embedded State

• به روز رسانی تنظیمات تست عملکردی برای پیاده سازی زمینه Update Functional Test Setup for Context Implementation

• زمینه موفقیت مصرف کننده ورودی تست و کد Test and Code Input Consuming Success Context

• زمینه موفقیت در تنظیم ورودی کد و تست Test and Code Input Setting Success Context

• تنظیمات ورودی تست و کد GuessedWords Context Test and Code Input Setting GuessedWords Context

• رفع خطای ارائه دهنده GuessedWords در Input.test.js Fix GuessedWords Provider Error in Input.test.js

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

• چالش های Jotto برای Hooks و Context Jotto Challenges for Hooks and Context

منابع Resources

• منابع دوره Course Resources

• JSDoc JSDoc

میراث -- اجزای متصل و مبتنی بر کلاس Redux حفظ نشده است LEGACY -- NOT MAINTAINED Redux Class-Based, Connected Components

• درباره این سخنرانی های میراثی About these legacy lectures

• بررسی طرح دولتی Jotto Redux Review of Jotto Redux State Plan

• Redux را راه اندازی کنید Set up Redux

• برنامه ریزی ایالتی موفقیت آمیز Success State Planning

• سازنده اقدام «CORRECT_GUESS». `CORRECT_GUESS` action creator

• تست های "کاهش موفقیت". `successReducer` Tests

• کد "کاهش موفقیت". `successReducer` Code

• معاوضه ها برای ایجاد کننده ها/کاهش دهنده های اقدام تست واحد Tradeoffs to Unit Testing Action Creators / Reducers

• تست‌های اجزای متصل را تنظیم کنید Set Up Connected Component Tests

• سازمان تست مؤلفه ورودی Input Component Test Organization

• راه اندازی تابع راه اندازی برای مؤلفه ورودی Start setup Function for Input Component

• راهنمای تست "storeFactory". `storeFactory` Test Helper

• روش آنزیمی «.dive()». Enzyme `.dive()` method

• خلاصه ای از تنظیمات و انتخاب های مؤلفه متصل Summary of Connected Component Setup and Choices

• تست های ورودی و کد موفقیت=نادرست Input Tests and Code for success=false

• امتحان! تست های ورودی و کد را برای موفقیت بنویسید=true Quiz! Write Input Tests and Code for success=true

• خلاصه ساده Redux Simple Redux Summary

• سایر بخش های دولت Other Pieces of State

• برنامه ریزی "حدس زده" `guessedWords` Planning

• Redux Thunk: چیست و چرا Redux Thunk: What and Why

• نصب Redux Thunk Installing Redux Thunk

• برنامه ریزی آزمون فکری Thunk Test Planning

• تست های «حدس کلمات» را تنظیم کنید Set up `guessWords` Tests

• اولین تست تفکر First Thunk Test

• «secretWordReducer» را اضافه کنید Add `secretWordReducer`

• آزمون های باقی مانده Remaining Tests

• Reducer و Action Creator را بنویسید Write Reducer and Action Creator

• خلاصه تست ادغام Thunk Thunk Integration Testing Summary

• طرح "secretWord". `secretWord` Plan

• "moxios": چرا و چگونه `moxios`: Why and How

• «secretWord» Action Creator and Tests را تنظیم کنید Set up `secretWord` Action Creator and Tests

• آزمایش سازندگان اقدام ناهمزمان Testing Asynchronous Action Creators

• تست های «getSecretWord» را بنویسید Write `getSecretWord` tests

• «secretWord» Action Creator و Reducer را بنویسید Write `secretWord` Action Creator and Reducer

• خلاصه: سازندگان اقدام ناهمزمان و «موکسیوس». Summary: Asynchronous Action Creators and `moxios`

• تست Props و Action Creator Calls Testing Props and Action Creator Calls

• تست Redux Props Testing Redux Props

• ورودی Redux Props Input Redux Props

• امتحان! برنامه Redux Props Quiz! App Redux Props

• اختیاری: Jest Setup را برای برنامه non-create-react پیکربندی کنید OPTIONAL: Configure Jest Setup for non-create-react-app

• رویکردی به آزمایش تماس‌های ایجادکننده اقدام Approach to Testing Action Creator Calls

• تماس «getSecretWord» در App Mount `getSecretWord` call on App Mount

• امتحان! تست‌های «guessWord» در ورودی ارسال کلیک کنید Quiz! Tests for `guessWord` on Input Submit Click

• تستی برای آرگومان «guessWord» بنویسید Write test for `guessWord` Argument

• با آرگومان تماس «guessWord» را بنویسید Write `guessWord` Call with Argument

• پاک کردن جعبه ورودی در ارسال Clear Input Box on Submit

• نسخه ی نمایشی برنامه تکمیل شده Demo of Completed App

• چالش های Jotto Jotto Challenges

• توضیحات چالش Jotto Jotto Challenge Descriptions

جایزه Bonus

• کوپن! Coupons!