فلش‌کارت‌های آموزشی راهنمای جامع تست فرانت‌اند با تمرکز بر کارایی

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: راهنمای جامع تست فرانت‌اند با تمرکز بر کارایی

موضوع کلی: برنامه نویسی

موضوع میانی: تست فرانت‌اند

📋 سرفصل‌های دوره (100 موضوع)

• 1. چرا تست‌نویسی در فرانت‌اند ضروری است؟
• 2. انواع تست‌ها: Unit, Integration, E2E
• 3. هرم تست و رویکرد مدرن (جام مکعب تست)
• 4. مفاهیم پایه جاوااسکریپت برای تست‌نویسی (Async, DOM, Events)
• 5. تنظیم محیط تست (NPM, Vitest/Jest)
• 6. آشنایی با ابزارهای تست: Jest و React Testing Library
• 7. مقدمه‌ای بر Assertions: انتظارها و مطابقت‌دهنده‌ها
• 8. Test Runner و Configuration
• 9. Hooks در Jest: Setup و Teardown
• 10. نوشتن اولین تست فرانت‌اند (Your First Frontend Test)
• 11. تست توابع خالص (Pure Functions)
• 12. تست کامپوننت‌های ساده با React Testing Library
• 13. پرس‌وجوها (Queries) در React Testing Library: getBy, queryBy, findBy
• 14. تعامل با UI: شبیه‌سازی رویدادها (Event Simulation)
• 15. مفهوم Mocking و Stubbing در تست
• 16. Mocking توابع و ماژول‌ها
• 17. تست کامپوننت‌هایی با Props
• 18. تست مدیریت State در کامپوننت‌ها (useState)
• 19. Mocking درخواست‌های API در Unit Tests (با MSW)
• 20. تست Custom Hooks
• 21. Snapshot Testing: بررسی تغییرات بصری
• 22. Test Doubles: Spies, Mocks, Stubs
• 23. تست Async Operations با act و waitFor
• 24. استفاده از User Event Library
• 25. تست Validation فرم‌ها در سطح Unit
• 26. تست Context API
• 27. تست Reducers (useReducer)
• 28. تست Utilities و Helper Functions
• 29. Isolation در Unit Tests: اهمیت و روش‌ها
• 30. سازماندهی و بهترین روش‌ها برای Unit Tests
• 31. تفاوت Unit و Integration Tests
• 32. تست تعامل بین دو کامپوننت
• 33. تست Flowهای کوچک کاربری
• 34. Integration Testing با Mock Service Worker (MSW)
• 35. تست مسیریابی (Routing) با React Router
• 36. تست Global State Management (Redux/Zustand)
• 37. تست کامپوننت‌های با Fetching Data
• 38. تست فرم‌های پیچیده و Multi-step
• 39. تست Higher-Order Components (HOCs)
• 40. تست Render Props
• 41. تست Portals و Modals
• 42. اهمیت Real-world Scenarios در Integration Tests
• 43. Eager vs. Lazy Loading در Integration Tests
• 44. بهترین روش‌ها برای Integration Tests
• 45. ارزیابی پوشش تست (Test Coverage)
• 46. مقدمه‌ای بر End-to-End Testing
• 47. انتخاب ابزار E2E: Cypress vs. Playwright
• 48. نصب و راه‌اندازی Cypress
• 49. نوشتن اولین تست E2E با Cypress
• 50. تعامل با عناصر DOM در Cypress
• 51. Assertions در Cypress
• 52. Mocking درخواست‌های شبکه در Cypress (cy.intercept)
• 53. مدیریت Session و Login در E2E Tests
• 54. تست سناریوهای کاربردی پیچیده
• 55. مدیریت State در E2E Tests
• 56. Cross-Browser Testing با Playwright
• 57. Debuging تست‌های E2E
• 58. Parallelization و CI/CD Integration برای E2E
• 59. Best Practices در E2E Testing
• 60. تست Responsive Design با ابزارهای E2E
• 61. مقدمه‌ای بر Web Performance و اهمیت آن
• 62. Core Web Vitals: LCP, FID (INP), CLS
• 63. سایر معیارهای کلیدی عملکرد: FCP, TBT, TTFB
• 64. ابزارهای DevTools کروم برای آنالیز پرفورمنس
• 65. Lighthouse: انجام Auditهای عملکردی
• 66. PageSpeed Insights و تفسیر نتایج
• 67. WebPageTest برای تحلیل عمیق پرفورمنس
• 68. مفهوم Performance Budgets و تعیین آنها
• 69. اتوماسیون تست پرفورمنس در CI/CD
• 70. استفاده از Lighthouse CI برای پایش مداوم
• 71. شبیه‌سازی شبکه‌های کند و دستگاه‌های ضعیف
• 72. شناسایی گلوگاه‌های پرفورمنس (Performance Bottlenecks)
• 73. بهینه‌سازی Critical Rendering Path
• 74. Lazy Loading و Code Splitting برای بهبود LCP
• 75. بهینه‌سازی تصاویر و فونت‌ها
• 76. بهینه‌سازی JavaScript Execution
• 77. کاهش Layout Shifts و بهبود CLS
• 78. تحلیل و بهینه‌سازی First Input Delay (FID)/INP
• 79. Real User Monitoring (RUM) در مقابل Synthetic Monitoring
• 80. گزارش‌دهی و پایش پرفورمنس
• 81. تست رگرسیون بصری (Visual Regression Testing)
• 82. ابزارهای Visual Regression: Storybook, Chromatic, Percy
• 83. مقدمه‌ای بر Accessibility Testing (A11y)
• 84. استاندارد WCAG و ملاحظات A11y
• 85. ابزارهای A11y: Axe-core, Lighthouse A11y Audit
• 86. تست Navigation با کیبورد
• 87. Test-Driven Development (TDD) در فرانت‌اند
• 88. Behavior-Driven Development (BDD) و Gherkin
• 89. Mock Service Worker (MSW) در پروژه‌های بزرگ
• 90. مدیریت داده‌های تست (Test Data Management)
• 91. تست‌های Parametrized
• 92. CI/CD Integration: GitHub Actions برای تست‌ها
• 93. گزارش‌دهی تست و Dashboardها (Allure, JIRA Xray)
• 94. Refactoring تست‌ها: از Anti-patterns تا Best Practices
• 95. استراتژی‌های تست برای Micro-Frontends
• 96. Test Coverage: ابزارها و تفسیر نتایج
• 97. Debuging پیشرفته تست‌های فرانت‌اند
• 98. انتخاب پشته تست مناسب برای پروژه شما
• 99. مانیتورینگ و نگهداری تست‌ها در طول زمان
• 100. آینده تست فرانت‌اند: هوش مصنوعی و خودکارسازی پیشرفته

راهنمای جامع تست فرانت‌اند: ساخت وب‌اپلیکیشن‌های سریع، پایدار و بدون باگ

آیا از باگ‌های غیرمنتظره‌ای که درست قبل از تحویل پروژه خود را نشان می‌دهند خسته شده‌اید؟ آیا نگران هستید که تغییر یک بخش کوچک از کد، بخش دیگری را دچار مشکل کند؟ آیا می‌خواهید محصولی ارائه دهید که نه تنها زیبا و کاربردی، بلکه فوق‌العاده سریع و قابل اعتماد باشد؟ اگر پاسخ شما به این سوالات مثبت است، این دوره دقیقاً برای شما طراحی شده است. دنیای توسعه فرانت‌اند دیگر فقط ساخت رابط‌های کاربری زیبا نیست؛ بلکه تضمین کیفیت، پایداری و کارایی آن‌هاست که یک توسعه‌دهنده حرفه‌ای را از دیگران متمایز می‌کند.

«راهنمای جامع تست فرانت‌اند با تمرکز بر کارایی» یک دوره آموزشی معمولی نیست. این یک نقشه راه کامل است که به شما یاد می‌دهد چگونه با اعتماد به نفس کد بزنید، چگونه از کیفیت محصول خود دفاع کنید و چگونه اپلیکیشن‌هایی بسازید که کاربران عاشق سرعت و پایداری آن‌ها شوند. ما در این سفر، از مفاهیم پایه‌ای تست‌نویسی شروع می‌کنیم و قدم به قدم به سراغ پیشرفته‌ترین تکنیک‌ها در دنیای واقعی می‌رویم. شما یاد می‌گیرید که چگونه با ابزارهای مدرن مانند Jest، React Testing Library، Cypress و Lighthouse، سپری محکم در برابر باگ‌ها بسازید و عملکرد اپلیکیشن خود را به سطح بالاتری ببرید.

این دوره یک سرمایه‌گذاری مستقیم روی آینده شغلی شماست. با تسلط بر مهارت‌های تست‌نویسی، نه تنها به یک توسعه‌دهنده قابل اعتمادتر تبدیل می‌شوید، بلکه فرصت‌های شغلی بهتر با درآمدهای بالاتر را برای خود رقم خواهید زد. آماده شوید تا با هر خط کدی که می‌نویسید، به کیفیت و کارایی آن اطمینان کامل داشته باشید.

---

درباره دوره چه می‌آموزیم؟

این دوره یک مسیر آموزشی جامع و پروژه-محور است که شما را با تمام جنبه‌های تست در اکوسیستم مدرن فرانت‌اند آشنا می‌کند. ما از «چرا باید تست بنویسیم؟» شروع کرده و به «چگونه تست‌های کارایی خودکار برای CI/CD بسازیم؟» ختم می‌کنیم. محتوای دوره با زبانی ساده و با مثال‌های عملی از دنیای واقعی تدریس می‌شود تا مفاهیم پیچیده را به راحتی درک کرده و بلافاصله در پروژه‌های خود به کار بگیرید. تمرکز ویژه این دوره بر روی تست کارایی (Performance Testing) است، مهارتی که امروزه برای ساخت تجربه‌های کاربری ممتاز ضروری است.

موضوعات کلیدی دوره

• مبانی و فلسفه تست‌نویسی: آشنایی با هرم تست، انواع تست (واحد، یکپارچه‌سازی، سرتاسری) و اصول TDD و BDD.
• تست واحد (Unit Testing): تسلط کامل بر Jest و React Testing Library برای تست کامپوننت‌ها و منطق برنامه به صورت ایزوله.
• تست یکپارچه‌سازی (Integration Testing): یادگیری نحوه تست تعامل بین چندین کامپوننت و شبیه‌سازی درخواست‌های API با ابزارهایی مانند MSW.
• تست سرتاسری (End-to-End Testing): آموزش جامع Cypress برای شبیه‌سازی رفتار واقعی کاربر در مرورگر و تست سناریوهای پیچیده.
• تست کارایی (Performance Testing): تحلیل و بهینه‌سازی سرعت بارگذاری و عملکرد برنامه با استفاده از Lighthouse، Web Vitals و ابزارهای پروفایلینگ.
• تست بصری (Visual Regression Testing): تضمین ثبات ظاهری رابط کاربری در نسخه‌های مختلف با ابزارهایی مانند Storybook و Percy.
• اتوماسیون و CI/CD: یکپارچه‌سازی فرآیندهای تست با GitHub Actions برای اجرای خودکار تست‌ها و جلوگیری از ورود باگ به کد اصلی.

---

این دوره برای چه قهرمانانی طراحی شده است؟

این دوره برای طیف وسیعی از متخصصان حوزه وب که به دنبال ارتقای کیفیت کار خود هستند، مناسب است:

• توسعه‌دهندگان فرانت‌اند (جونیور تا سینیور): که می‌خواهند کدی قابل اعتماد و مقیاس‌پذیر بنویسند و مهارت‌های خود را برای ورود به شرکت‌های بزرگ تکمیل کنند.
• مدیران فنی و رهبران تیم‌های توسعه: که به دنبال ایجاد فرهنگ کیفیت و پیاده‌سازی فرآیندهای تست استاندارد در تیم خود هستند.
• مهندسان کنترل کیفیت (QA): که قصد دارند از تست دستی به سمت تست خودکار (Automation) در حوزه فرانت‌اند حرکت کنند.
• فریلنسرها و صاحبان محصول: که می‌خواهند محصولی با کمترین باگ و بهترین تجربه کاربری به مشتریان خود تحویل دهند.
• دانشجویان و کارآموزان: که می‌خواهند از همان ابتدای مسیر حرفه‌ای، با بهترین شیوه‌ها (Best Practices) کدنویسی را بیاموزند.

---

چرا این دوره یک انتخاب هوشمندانه است؟

گذراندن این دوره فقط یادگیری چند ابزار جدید نیست، بلکه یک تغییر نگرش بنیادین در نحوه توسعه نرم‌افزار است. دلایل اصلی برای شرکت در این دوره عبارتند از:

افزایش اعتماد به نفس در کدنویسی

دیگر از Refactor کردن یا افزودن ویژگی‌های جدید نترسید. با داشتن مجموعه‌ای کامل از تست‌ها، می‌توانید با اطمینان تغییرات خود را اعمال کنید، زیرا می‌دانید که در صورت بروز خطا، تست‌ها به شما هشدار خواهند داد.

ایجاد محصولات با کیفیت جهانی

کاربران عاشق سرعت و پایداری هستند. با تمرکز بر تست کارایی و کیفیت، محصولی می‌سازید که نه تنها نیاز کاربر را برطرف می‌کند، بلکه تجربه‌ای لذت‌بخش برای او به ارمغان می‌آورد و نرخ بازگشت کاربر را افزایش می‌دهد.

ارتقای چشمگیر موقعیت شغلی

توسعه‌دهندگانی که به تست‌نویسی مسلط هستند، در بازار کار بسیار کمیاب و ارزشمندند. این مهارت شما را از سایرین متمایز کرده و در مصاحبه‌های شغلی برگ برنده شما خواهد بود.

کاهش هزینه‌ها و زمان توسعه

پیدا کردن و رفع یک باگ در مراحل اولیه توسعه، ده‌ها برابر ارزان‌تر از رفع همان باگ پس از انتشار محصول است. تست‌نویسی یک سرمایه‌گذاری برای جلوگیری از هزینه‌های سنگین آینده است.

جامع و پروژه-محور بودن

این دوره ترکیبی از تئوری‌های ضروری و پروژه‌های عملی است. شما تمام مفاهیم را روی یک پروژه واقعی پیاده‌سازی می‌کنید تا درک عمیق‌تری از چالش‌های دنیای کار به دست آورید.

---

نگاهی به سرفصل‌های جامع دوره

این دوره با بیش از ۱۰۰ سرفصل دقیق و کاربردی، شما را از سطح مبتدی به یک متخصص تمام‌عیار در تست فرانت‌اند تبدیل می‌کند. در ادامه، نگاهی به بخش‌های اصلی این نقشه راه می‌اندازیم:

• فصل اول: مقدمه‌ای بر دنیای تست نرم‌افزار
  • چرا تست می‌نویسیم؟ هزینه باگ‌ها
  • آشنایی با هرم تست (Testing Pyramid)
  • انواع تست: Unit, Integration, E2E, Smoke, Regression
  • معرفی رویکردهای TDD و BDD
  • ابزارهای کلیدی در اکوسیستم تست فرانت‌اند
• فصل دوم: راه‌اندازی محیط و شروع کار با Jest
  • نصب و پیکربندی Jest در یک پروژه React
  • نوشتن اولین Unit Test
  • آشنایی با Matcher‌های پرکاربرد Jest
  • کار با توابع Mock، Spy و Stub
  • پوشش کد (Code Coverage) و اهمیت آن
• فصل سوم: تست کامپوننت‌های React با React Testing Library (RTL)
  • فلسفه RTL: تست رفتار، نه جزئیات پیاده‌سازی
  • انواع Query‌ها (getBy, findBy, queryBy)
  • شبیه‌سازی رویدادهای کاربر با fireEvent و user-event
  • تست فرم‌ها، ورودی‌ها و اعتبارسنجی
  • تست کامپوننت‌های شرطی (Conditional Rendering)
• فصل چهارم: مباحث پیشرفته در تست واحد و یکپارچه‌سازی
  • تست هوک‌های سفارشی (Custom Hooks)
  • کار با Context API و Redux در تست‌ها
  • شبیه‌سازی درخواست‌های شبکه با Mock Service Worker (MSW)
  • تست کامپوننت‌های Asynchronous
  • استراتژی‌های تست یکپارچه‌سازی برای صفحات پیچیده
• فصل پنجم: غلبه بر پیچیدگی با تست سرتاسری (E2E) و Cypress
  • نصب، راه‌اندازی و معرفی داشبورد Cypress
  • نوشتن اولین تست E2E: بازدید از صفحه و تعامل با عناصر
  • انتخاب عناصر (Selectors) و Assertions در Cypress
  • مدیریت Wait‌ها و زمان‌بندی
  • رهگیری و شبیه‌سازی درخواست‌های شبکه (cy.intercept)
• فصل ششم: الگوهای طراحی و تکنیک‌های پیشرفته در Cypress
  • الگوی Page Object Model (POM)
  • ایجاد دستورات سفارشی (Custom Commands)
  • مدیریت وضعیت برنامه (State Management) در تست‌ها
  • اجرای تست‌ها در مرورگرهای مختلف
  • ضبط ویدیو و اسکرین‌شات از تست‌های ناموفق
• فصل هفتم: تست کارایی (Performance): ساخت اپلیکیشن‌های سریع
  • مفاهیم کلیدی: Core Web Vitals (LCP, FID, CLS)
  • تحلیل عملکرد با Chrome DevTools Performance Tab
  • معرفی و استفاده از Google Lighthouse
  • نوشتن تست‌های خودکار کارایی با Lighthouse CI
  • نکات عملی برای بهینه‌سازی عملکرد فرانت‌اند
• فصل هشتم: تست بصری (Visual Regression) و اتوماسیون
  • اهمیت ثبات بصری و معرفی تست رگرسیون بصری
  • کار با Storybook برای توسعه کامپوننت‌های ایزوله
  • یکپارچه‌سازی تست بصری با ابزارهایی مانند Percy
  • معرفی CI/CD و اهمیت آن در فرآیند توسعه
  • ساخت یک Pipeline کامل در GitHub Actions برای اجرای خودکار تمام تست‌ها