Storybook یکی از بهترین ابزارها برای ساخت اجزای مشتری است. این به ما امکان میدهد تا UI را به صورت مجزا ایجاد کنیم، آن را مستند کنیم و حتی آن را با آزمایشهای خودکار پوشش دهیم.
توضیح دادم که چرا تستهای خودکار ارزش دنبال کردن را دارند در چرا باید تستهای خودکار داشته باشید. در این پست، ما عمیقتر به نحوه نوشتن کارآمد آنها با Storybook خواهیم پرداخت.
بیایید یک تست بنویسیم
ما یک فرم با ایمیل، فیلدهای رمز عبور و دکمه ارسال داریم. کاربر اعتبار خود را وارد می کند، فرم را ارسال می کند و پیام تایید را می بیند. در اینجا شکل به نظر می رسد:
و این ساختار HTML فرم است:
چگونه تست کنیم؟
در اینجا مراحلی وجود دارد که باید برای نوشتن یک تست برای این داستان انجام دهیم:
- عنصری را برای تعامل با آن انتخاب کنید.
- یک انتخابگر کاربرپسند برای آن پیدا کنید (مثلاً بر اساس نقش آریا، برچسب، مکاننما، متن، عنوان، شناسه آزمون) مطابق با اصول راهنمای کتابخانه تست.
- کد تعامل را بنویسید (مثلا
userEvent.click(selector)
). - برای انجام فعل و انفعال بعدی تا زمانی که تست آماده شود، به مرحله 1 بازگردید.
آزمون واقعی
چهار عنصر برای تعامل وجود دارد. در اینجا نحوه انجام این کار آمده است:
- ایمیل و رمز عبور:
- هر دو فیلد از یک استفاده می کنند
input
برچسب، که بهrole=textbox
در کتابخانه تست آنها همچنین یککه برای محدود کردن انتخاب عنصر استفاده خواهیم کرد.
- برای تمرکز روی فیلد کلیک می کنیم و سپس مقدار را تایپ می کنیم.
- ...