تست و ساخت (Testing and Building) پروژه انگولار ۷ – آموزش انگولار ۷

  • سه شنبه ۱۲ شهریور ۱۳۹۸
  • بازدید ۴۶ نفر

testing and building angular7 projects 6672 تصویر

تست و ساخت (Testing and Building) پروژه انگولار ۷

در این بخش از آموزش انگولار ۷ نحوه تست و ساخت (Testing and Building) پروژه در فریم ورک انگولار ۷ را آموزش خواهیم داد.

تست کردن پروژه انگولار ۷

در هنگام ایجاد پروژه در انگولار ۷، مواردی که برای تست کردن پروژه مورد نیاز هستند، نصب می شوند. فایل .spec.ts به طور خودکار برای هر کامپوننت، سرویس و دایرکتیو جدید، تولید می شود. برای هر تغییری که در کامپوننت، سرویس و یا دایرکتیو ایجاد می شود، می توانید تست های مربوط به آن تغییر را به فایل .spec.ts اضافه کنید.

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

در زیر می توانید محتوای فایل app.component.spec.ts که مربوط به فایل app.component.ts است را مشاهده کنید:

محتوای فایل app.component.ts:

خروجی دستور ng test برای تست هایی که در بالا مشخص کردیم:

testing and building angular7 projects 6672 1 تصویر

testing and building angular7 projects 6672 2 تصویر

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

testing and building angular7 projects 6672 3 تصویر

همانطور می بینید، همه تست های فوق موفق بودند. برای اینکه نحوه نمایش تست های ناموفق را هم مشاهده کنید، تغییرات زیر را در فایل app.component.spec.ts اعمال کنید.

محتوای فایل app.component.ts:

در کد فوق ما عنوان صفحه را تغییر دادیم. به این صورت که در بخش تست ما انتظار داریم که عنوان صفحه Angular 7 باشد ولی چیزی که در برنامه نمایش داده می شود، angular7-app خواهد بود. این موضوع باعث می شود تا یکی از تست ها ناموفق باشد.

نتیجه تست:

testing and building angular7 projects 6672 4 تصویر

testing and building angular7 projects 6672 5 تصویر

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

ساخت (Build) پروژه انگولار ۷

هنگامی با استفاده از انگولار پروژه خود را می سازید، برای اینکه بتوانید از آن استفاده کنید، باید آن را build کنید. پیکربندی های مربوط به build کرد پروژه (مانند production، staging، development و testing) باید در بخش src/environments تعریف شوند. در حال حاضر ما موارد زیر را در src/environments تعریف کرده ایم.

testing and building angular7 projects 6672 6 تصویر

شما می توانید فایل ها را با توجه به نوع build که می خواهید انجام دهید (مانند environment.staging.ts، enviornment.testing.ts و غیره)، به بخش src/environment اضافه کنید. در این مثال ما build را بر روی production تنظیم می کنیم. فایل environment.ts شامل تنظیمات پیشفرض environment و فایل ها است.

محتوای فایل environment.ts:

برای تنظیم نوع build پروژه بر روی production باید مقدار خاصیت production را true کنیم.

مانند نمونه زیر:

فایل environment پیشفرض باید در داخل کامپوننت ها import شود. مانند نمونه زیر:

فایل app.component.ts:

تکه کد زیر را به فایل angular.json اضافه کنید تا در هنگام build شدن پروژه برای production فایل environment پیشفرض با فایل مربوط به production جایگزین شود.

حال اگر دستور مربوط به build کردن پروژه اجرا شود، فایل environment پیشفرض با src/environments/environment.prod.ts جایگزین خواهد شد. سایر پیکربندی های build را نیز می توانید مانند نمونه زیر مشخص کنید:

دستوراتی که برای build کردن پروژه می توانید استفاده کنید را در زیر مشاهده می کنید:

برای نمونه ما دستور مربوط به production را اجرا می کنیم تا خروجی را به شما نشان دهیم. دستور فوق یک پوشه جدید به نام dist ایجاد می کند که فایل های نهایی پروژه بعد از build شدن در آن قرار می گیرند.

testing and building angular7 projects 6672 7 تصویر

testing and building angular7 projects 6672 8 تصویر

تصویر زیر محتوای پوشه dist را نشان می دهد:

testing and building angular7 projects 6672 9 تصویر

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است