آشنایی با تست در فرانت

تو این مقاله قراره خیلی خلاصه و کوتاه با انواع تست نویسی و ابزارهای آن در فرانت آشنا بشویم

انواع تست‌‌ها :

تست‌ها به صورت کلی به سه دسته Unit، Integration، End to End تقسیم بندی میشن، اگر بین این سه دسته مسابقه‌ای بر اساس شاخص‌های "سرعت" و "هزینه" برگزار کنیم قهرمان کم هزینه‌ و سریع‌ترین مدل تست نویسی unit میشه و نایب قرمان Integration و جایگاه سوم به عنوان گران‌ترین و کندترین مدل تست نویسی تعلق می‌گیره به E2E که البته این باخت از ارزشهای آن کم نمی‎کند چون هر کدام از این سه در میدان مخصوص به خودشان قهرمان هستند?

تست Unit :

در تست unit، هر بخش اختصاصی از کدهای برنامه را به صورت مجزا تست می‌کنیم تا مطمئن بشویم آن قسمت از کد مطابق انتظار ما کار می کند، به صورتی که کوچکترین بخش از یک برنامه با ارائه ورودی و اطمینان از اینکه خروجی مطابق انتظار ماست به صورت مستقل مورد تست قرار می‌گیرد و نباید کد مورد تست دارای وابستگی باشد، تست باید خیلی ساده و کوچک بوده و ایزوله و مستقل از سایر تست‌ها بدون وابستگی به محیط و زمان قابل اجرا باشد.

تست Integration :

تستی که بر روی تعامل بین اجزا، ماژول‌ها و اشیایی که با هم کار می‌کنند تمرکز دارد و معمولا نسبت به unit تست زمان بیشتری برای نوشتن نیاز دارد، برای مثال اگر یک navigation bar با یک دکمه login / logout داشته باشیم توقع داریم که :

- اگر کاربری به برنامه لاگین کرد، نوار پیمایش دکمه logout را نمایش دهد

- اگر کاربر لاگین نکرده بود، دکمه login به او نمایش داده شود

تست integration معمولاً به صورت مجزا اجرا می‌شود (برای مثال تست integration کامپوننت بدون تست بقیه برنامه) این سطح از تست است که اطمینان می‌دهد بخش‌های مختلف سیستم به درستی باهم تعامل دارند و داده‌ها و اطلاعات بین آنها به درستی پاس داده می‌شود. در باب مقایسه با unit تست باید گفت که در حالی که تست‌های unit از همدیگر جدا هستند و در واقع در یک فضای ایزوله شده قرار می‌گیرند تست‌های integration روی بخش‌هایی که ساید افکت دارند و یا ارتباط داشتن بین دو یا چند قسمت یا بخش‌هایی که نیازمند قسمت‌های دیگر سیستم هستند کار میکنند.

تست E2E :

بالاترین سطح از تست‌های خودکار فرآیندی معروف به End-to-End می‌باشد که به عنوان تست E2E یا Functional Test هم شناخته می‌شود. وقتی می‌خواهیم ارتباط با کاربر را در یک نرم افزار تست کنیم از تست E2E استفاده می‌کنیم، هدف اصلی از تست E2E آزمایش تجربه کاربر نهایی با شبیه سازی سناریوی واقعی کاربر و اعتبارسنجی سیستم تحت آزمایش و اجزای آن برای یکپارچگی است. در این سطح تمام اکشن‌های کاربر از ابتدای وارد شدن به سیستم تا آخرین مرحله شبیه سازی می شود.

فرض کنید در زمانی که کاربر روی یک دکمه کلیک میکند انتظار داریم چه اتفاقاتی در کل برنامه بیوفتد. روش کار در این مدل از تست به این صورت است که برنامه از محیط مرورگر استفاده میکند و میتوان ارتباط کاربر با app را شبیه سازی و تست کند. تفاوت این تست با تست عملکرد (integration) در گام به گام بودن مراحل تست است و همچنین دامنه آن شامل تمام توابع و سرویس ها می‌شود و از آن در زمانی استفاده می‌کنیم که یک فیچر به صورت کامل اجرا شده است زیرا از نظر مدت نوشتن تست بیشتر از دو مدل قبلی نیاز به زمان دارد.

ابزارهای تست نویسی :

Jest :

یک فریمورک محبوب برای نوشتن تست در جاوا اسکریپت که توسط فیسبوک ارائه شده و تمرکز آن بر روی سادگی‌ است و با تمامی فریمورک‌های محبوب جاوا اسکریپت مثل React و React Native و... بدون هیچ پیکربندی خاصی قابل استفاده است، در jest مفاهیمی مانند mock و snapshot وجود دارد که بسیار کاربردی است، در واقع mock کردن (mocking) یک تکنیک تست نویسی است که در آن قسمتی از کد را با یک پیاده سازی دلخواه جایگزین میکنیم و از آن برای شبیه سازی یک عملیات واقعی استفاده میشه. معمولا ماک کردن زمانی استفاده میشه که یک متد یا کلاس، وابستگی یا وابستگی هایی داره که توی تستمون تداخل ایجاد میکنه.

مثلا فرض کنید یک فانشن رو میخواین تست کنین که داخلش از سرویس اسمس استفاده شده، برای اینکه موقع تست به سرویس مربوطه وابسته نباشیم مقدار برگشتی سرویس اسمس را mock میکنیم.

رندر کردن کامپوننت‌ها و تبدیل اونا به یه آبجکت pure JavaScript را Snapshot میگویند بدون اینکه وابستگی به DOM یا محیط اجرایی داشته باشیم. snapshot از سلسله مرتب view(یه چیزی شبیه به درخت DOM) که توسط ReactDOM یا React Native درست میشه رو بدون نیاز به مرورگر برای ما فراهم می آورد و می‌توانیم این shotها را با هم مقایسه کرده و روی اختلاف بین آنها شرط قبولی یا رد شدن تست را بگذاریم.

testing-library :

این فریم ورک هم مانند jest در هنگام استفاده از ری اکت به صورت CRA نصب میشود و نیازی به تنظیمات برای راه اندازی ندارد، از آن برای تست های مربوط به DOM استفاده میشود. برای مواردی مانند تست هوک ها، کاستوم هوک ها و ... نیز پکیج های مخصوص به خود را دارد.

Enzyme :

یکی از کتابخانه های کاربردی تست جاوا اسکریپت است که توسط airbnb ارائه شده و کار کردن با آن بسیار راحت است و همچنین متدهای بسیار کاربردی را برای دستکاری و کنترل DOM مجازی ری اکت بدون نیاز به مرورگر ارائه میدهد.

شبیه سازی ایونت ها، دسترسی و قابیلت تغییر در مقادیر پراپس و استیت، رندر سطحی (Shallow rendering) از مزایای آن است، به عنوان مثال ویژگی رندر سطحی به ما این امکان رو میده که فقط کامپوننت والد مورد نظرمون رو رندر کنیم بدون اینکه نگران عملکرد کامپوننت‌های فرزند باشیم.

Cypress :

این فریم ورک مخصوص انجام تست های E2E (تعامل کاربر با برنامه) طراحی شده است و دارای پنل اختصاصی می باشد که در آن روند انجام تست به همراه وضعیت و اطلاعات مربوطه نمایش داده میشود و مانند سایر فریم ورک ها نتایج تست را در ترمینال نمایش نمیدهد.