ماک و فیک و دقل بازی!

عجب عنوان شر و وری?

خیلی وقت ها توی کار ما پیش میاد که روی یک فیچری کار می کنیم ولی چون دیتا از سمت API وجود نداره نمیتونیم مطمئن باشیم که همه چیز سر جاش هست یا نه. از طرفی برای یونیت تست نوشتن بعضی قسمت های اپلیکیشن نیازه که با سرور یه احوالپرسی ای بکنیم ولی خب این وسط مشکلاتی هست که میتونیم به کمک یه سرویس ماک دیتا حلشون کنیم.

اصلا ماک (Mock) یعنی چی

یعنی ادای یه چیزی رو درآوردن! مثلا ما یه گونه پرنده داریم که به اسم "مرغ مقلد" یا Mocking Bird میشناسیمش، این پرنده میتونه صدای بقیه پرنده ها رو تقلید کنه، یا مثلا کاسکو دیده باشید، میدونید که میتونه صدای مارو تقلید کنه. حالا بحث ما اینجا پرنده نیست ولی ایده رو گرفتید دیگه!

حالا فرض کنید یه موجودی توی نرم‌افزار بتونه رفتار یه چیز دیگه رو شبیه سازی کنه یا اداشو دربیاره.

مثلا رفتار سرور واقعی رو شبیه سازی کنیم. یا رفتار کاربر با اپلیکیشن رو شبیه سازی کنیم (بهش معمولا میگیم E2E Testing)

احساس نیاز

فرض کنید توی اپلیکیشن تون یه ریکوئست دارید مثلا Forgot password، خب فرایند Forgot Passowrd معمولا اینطوریه که شما به سرور یه ایمیل میدید، سرور به اون ایمیل یه دونه کد OTP میفرسته که اونو وارد می‌کنید و اینطوری میتونید وارد سیستم بشید.

اگر ما بخوایم برای این قسمت سیستم unit test بنویسیم، عملا با حالتی که کد بخواد با سرور واقعی ارتباط بگیره غیر ممکنه! چون ما که نمیدونیم هر بار سرور چه کدی رو میفرسته که بخوایم ببینیم سیستم داره درست کار میکنه یا نه.

البته اینکه اصلا چرا نیاز داریم برای این قسمت های اپلیکیشن یونیت تست بنویسیم یه بحث جداست ولی اینجا همونجایی که نیاز داریم دیتای این API رو ماک کنیم.

روش انجام کار

خب ببینید، شما حتی اگه یه متغیر تعریف کنید یه جا و از همون استفاده کنید در واقع دارید دیتا رو ماک می‌کنید! همین!!

ولی خب این خیلی سادس و من باید یه طوری محتوای این مطلب رو پر و پیمون کنم? برای همین چندتا روش مختلف رو میخوام معرفی کنم.

روش اول: دیتا رو تو یه سری متغیر نگه دارید

یه فایل ساده درست کنید، دیتا هایی که میخواید ماک کنید رو بذارید اونجا و موقع تست کردن از همونا بخونید. یکم اگه خلاقیت داشته باشید میتونید مثلا با Promise ها و setTimeout حالت سرور رو شبیه سازی کنید.

روش دوم: یه سرور ساده

تو این روش میتونید یه سرور node/express بیارید بالا و چندتا endpoint ساده تعریف کنید که بهشون درخواست بزنید و اونا به شما دیتا ماک شده رو برگردونن. مزیت این روش نسبت به روش های قبل اینه که اینجا میتونید توی تست ها واقعا به یه سرور درخواست بزنید و دیتا رو بگیرید.

روش سوم: حوصله نوشتن express server ندارید

سخته دیگه بخوایم همه api ها رو اینطوری ماک کنیم، از طرفی هر زمان که بخوایم تست ها رو اجرا کنیم باید کلی پارامتر دیگه هم باهاش تغییر بدیم، سرور رو اجرا کنیم و اگه خیلی خلاق باشیم احتمالا یه سری script داریم که اینکارو برامون راحت تر کنن، تو همچین حالی میتونیم کارای سخت رو بسپریم به یه ابزار دیگه که زحمت نوشتن سرور و ... رو خودمون نکشیم. یه چیزی مثل json-server یه همه کارای سخت رو براتون انجام میده و فقط یه دونه فایل db.json میسازید که دیتا رو از اونجا بخونه و کار کنه.

برای نمونه این فایل json میتونه همچین چیزی باشه:

نحوه ستاپ کردنش هم دست خودتونه بیشتر که میتونید اینجا ببینید.

روش چهارم: از NextJS استفاده می‌کنید؟

اگه اپلیکیشن ری-اکتی تون رو با Next نوشته باشید حتما میدونید که یه فولدر api توی pages وجود داره که به کمکش میتونید کلی کارای خفن بکنید، که یه دونه اش همین بحث ماک کردن دیتا هست. برای اینکه کامل متوجه بشیم که این فولدر چه کارایی میتونه برامون بکنه اینجا رو ببینید. یه نمونه کوچولو برای همون داستان otp رو میتونید ببینید:

از این طریق اگر به این فایل ریکوئست بزنید بهتون یه دونه otp میده که مقدارش ثابته. البته برای اینکه کار کنه باید سرور Next تون بالا باشه حتما در زمان اجرای تست ها.

روش پنجم: ابزار های تخصصی برای Mock

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

چندتا از این سولوشن ها رو میتونید ببینید:

https://sinonjs.org/

https://miragejs.com/

https://github.com/nock/nock

https://mswjs.io/

من بین اینا با msw کار کردم و DX واقعا خوبی داره، داکیومنت و راه اندازیش هم ساده هست. نمیخوام اینجا بیام آموزش راه اندازیش رو بدم، چون داکیومنت هر کدوم از این ها خیلی کامل و واضح همه چیز رو توضیح دادن و بقیه اش رو میسپرسم به خودتون.

فیک

خب فرض کنیم که یه دونه از سولوشن های بالا رو انتخاب کردید. برای جاهایی که نیاز دارید یه سری دیتای الکی ایجاد کنید نیازه که مثلا یه لیست از کاربران به همراه اطلاعات و آدرس و آواتار و ... رو داشته باشید، میتونید از faker استفاده کنید. به این ترتیب که مثلا یه تابع مینویسید که براتون یه لیست ۱۰۰ تایی از کاربران درست کنه که شما بتونید توی اپلیکیشن ازشون استفاده کنید.

نکته: این موضوع چند جا به کارتون میاد و طبیعتا میدونید که نباید موقع production ازش استفاده بشه چه جاهایی؟

• جایی که میخواید یه محصولی رو دمو کنید ولی هنوز اپلیکیشن تون دیتا واقعی نداره
• جایی که میخواید حالت های مختلف یه چیز رو تست کنید (مثلا یه محصول تخفیف داره یا نداره)
• جایی که میخواید رفتار اپلیکیشن با دیتا های خیلی کم (صفر حتی) یا دیتا خیلی زیاد رو تست کنید
• جایی که میخواید یونیت تست بنویسید و دیتا واقعی لزومی نداره باشه (لزومی نداره ولی بعضی وقتا هم لازمه که واقعی باشه)
• وقتی که هنوز backend بعضی فیچر های اپلیکیشن تون آماده نیستن و شما نمیخواید از کار عقب بمونید

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

امیدوارم یه چیزی از این مطلب دستگیرتون شده باشه، در کل اینکار برای زمان develop و تست اپلیکیشن خیلی به کارتون میاد، یکم خلاقیت هم داشته باشید میتونید کارای خیلی خفنی باهاش بکنید. اگه مطلب رو دوست داشتید میتونید از طریق لینکدین باهام در تماس باشید.