الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

أداة قوية لتبسيط اختباراتك الزاوية

يساعدك المتفرج على التخلص من جميع أعمال Gorilerplate Grunt ، مما يتركك مع اختبارات الوحدة القابلة للقراءة والأنيقة والبسيطة.

سمات

  • ✅ دعم لاختبار المكونات الزاوية والتوجيهات والخدمات

  • ✅ easy dom Querying

  • ✅ API تنظيف لإطلاق أحداث لوحة المفاتيح/الماوس/اللمس

  • ✅ اختبار ng-content

  • ✅ مخصص ياسمين/مزاحات مزاحات (tohaveclass ، tobedisabled ..)

  • ✅ دعم اختبار التوجيه

  • ✅ دعم اختبار HTTP

  • ✅ دعم مدمج لمكونات الدخول

  • ✅ الدعم المدمج لمقدمي المكونات

  • ✅ مقدمي الخدمات التلقائية

  • ✅ كتبت بقوة

  • ✅ الدعم الدائري

رعاية ngneat

رعاية المساعدات في التطوير المستمر والصيانة لمكتبات ngneat. فكر في مطالبة شركتك برعاية NGNEAT باعتبارها جوهرها لتطوير أعمالهم والتطبيق.

رعاة الذهب

ارفع دعمكم من خلال أن تصبح راعيًا ذهبيًا وتوضح شعارك بشكل بارز على README في أفضل 5 مستودعات.

الرعاة الفضي

قم بزيادة دعمك من خلال أن تصبح راعيًا ذهبيًا واستمتع بأضواء كاشفة مع عرض شعارك بشكل بارز في أفضل 3 مستودعات على ReadMe.

الرعاة البرونزية

بيت الزاوي

كن راعيًا برونزيًا واحصل على شعارك على ReadMe على Github.

جدول المحتويات

  • سمات

  • جدول المحتويات

  • تثبيت

    • NPM

    • غزل

  • مكونات اختبار

    • وجهات النظر المتداخلة القابلة للتداخل

    • محدد السلسلة

    • اكتب المحدد

    • محدد DOM

    • اختبار العناصر المحددة

    • المكونات السخرية

    • اختبار الوحدات الزاوية المكون/التوجيهية الفردية

    • الأحداث المخصصة

    • منشئي الأحداث

    • أحداث API

    • مساعدو لوحة المفاتيح

    • مساعدين الماوس

    • استفسارات

    • وجهات نظر قابلة للتأجيل

  • اختبار مع المضيف

    • مكون مضيف مخصص

  • الاختبار مع التوجيه

    • مما يؤدي إلى التنقل

    • اختبار التكامل مع RouterTestingModule

    • خيارات التوجيه

  • التوجيهات اختبار

  • خدمات الاختبار

    • خيارات إضافية

  • اختبار الأنابيب

    • باستخدام مكون المضيف المخصص

  • مقدمي السخرية

    • يسخر من التبعيات Oninit

    • تبعيات مُنشئ السخرية

  • الدعم الدائري

  • اختبار مع HTTP

  • الحقن العالمية

  • مقدمي المكونات

  • المطاعم المخصصة

  • المخططات

  • مجموعة المخططات الافتراضية

  • عمل المشاهد والشرب العينة من قبل إعادة الريبو والكرمة

  • فريق أساسي

  • المساهمين

تثبيت

NPM

npm install @ngneat/spectator --save-dev

غزل

yarn add @ngneat/spectator --dev

مكونات اختبار

قم بإنشاء مصنع مكون باستخدام دالة createComponentFactory() ، مرور فئة المكون التي تريد اختبارها. يقوم createComponentFactory() بإرجاع وظيفة تنشئ مكونًا جديدًا في كل it :

 استيراد {screamator ، createComponentFactory} من '@ngneat/scream' ؛ import {buttoncomponent} من '.
  دع المتفرج: المتفرج <TutronComponent> ؛
  const createComponent = createComponentFactory (buttoncomponent) ؛

  QuarteAck (() => Spectator = CreateComponent ()) ؛

  It (يجب أن يكون لها فئة نجاح افتراضيًا "، () => {توقع (complicator.query ('button')). ​​tohaveclass ('success') ؛
  }) ؛

  (يجب تعيين اسم الفئة وفقًا لإدخال [className] "، () => {compansator.setInput ('className' ، 'Danger') ؛ توقع (screamator.query ('button')). ​​tohaveclass (' Danger ') ؛ توقع (screamator.query (' button ')). not.tohaveclass (' success ') ؛
  }) ؛}) ؛

يمكن أن تأخذ وظيفة createComponentFactory اختياريًا الخيارات التالية التي تمد خيارات وحدة الاختبار الزاوية الأساسية:

 const createComponent = createComponentFactory ({
  المكون: ButtonComponent ،
  الواردات: [] ،
  مقدمي الخدمات: [] ،
  التصريحات: [] ،
  undercomponents: [] ،
  ComponentProviders: [] ، // تجاوز مقدمي الخدمات للمكون
  ComponentViewProviders: [] ، // تجاوز مقدمي عرض المكون
  OutrideModules: [] ، // override modules
  OverRideComponents: [] ، // Override Components في حالة اختبار المكون المستقل
  إفراط في التوجيهات: [] ، // تجاوز التوجيهات في حالة اختبار التوجيه المستقل
  Overridepipes: [] ، // تجاوز الأنابيب في حالة اختبار الأنابيب المستقلة
  السخرية: [] ، // مقدمي الخدمات الذين سيتم السخرية تلقائيًا
  ComponentMocks: [] ، // مقدمي المكونات التي سيتم السخرية تلقائيًا
  ComponentViewProvidersMocks: [] ، // Component View Serviders التي سيتم الاستهزاء بها تلقائيًا
  DetectChanges: خطأ ، // الافتراضيات إلى True
  DeclareComponent: false ، // الافتراضيات إلى True
  التغلبات: خطأ ، // الافتراضيات إلى True
  الضحلة: صحيح ، // الافتراضيات إلى خطأ
  DeferBlockBehavior: Deferblockbehavior // الافتراضات إلى deferblockbehavior.playthrough}) ؛

تأخذ وظيفة createComponent() اختياريًا الخيارات التالية:

 IT ('يجب ...' ، () => {
  COMPLED = CreateComponent ({// component inputsprops: {title: 'click'} ، // تجاوز مقدمي الخدمات للمكون // لاحظ أنه يجب عليك إعلانه مرة واحدة في `createComponentFactory`providers: [] ، // ما إذا كنت ستدير الكشف عن التغيير (الافتراضيات إلى True) DetectChanges: خطأ
  }) ؛

  توقع (المتفرج. query ('button')).

من خلال توفير خيارات overrideComponents في نطاق وظيفة createComponent() ، يمكننا تحديد طريقة تجاوز المكون المستقل وتبعياتها

 @عنصر({
  المحدد: `ترانالوني مع الاستيراد" ،
  قالب: `<div id =" standalone "> مكون مستقل مع الاستيراد! </div> <-app-standalone-with-dependency> </app-standalone-with-dependency>` ، `، ،` ،
  الواردات: [standalonecomponentwithDependency] ،
  مستقل: صواب ،}) فئة التصدير المستقلة standalonewithimportscomponent {} component ({
  المحدد: `App-Standalone-With-Dependency '،
  قالب: `<div id =" standaloneWithDependency "> مكون مستقل مع التبعية! </div>` ، ،
  مستقل: صواب ،}) فئة التصدير المستقلة
  مُنشئ (الاستعلام العام: QueryService) {}}@component ({
  المحدد: `App-Standalone-With-Dependency '،
  قالب: `<div id =" standaloneWithDependency "> المكون المستقل مع التبعية المتجاوز! </div>` ،
  مستقل: صحيح ،}) تصدير فئة mockstandalonecomponentwithDependency {
  Constructor () {}} it ('يجب ...' ، () => {
  const constator = createHostFactory ({component: standaloneWithImportScomponent ، template: `<div> <app-standalone-with-import> </app-standalone-with-import> </viv>` ، overrideComponents: {الواردات: [standalOnecomponTwithDependency]} ، إضافة: {الواردات: [mockstandalonecomponentwithDependency]} ،} ،] ،] ،]
  }) ؛

  توقع (Host.query ('#standalone')). tocontaintext ('مكون مستقل مع الاستيراد!') ؛
  توقع (host.query ('#standaloneWithDependency')).

تقوم طريقة createComponent() بإرجاع مثيل Spectator الذي يعرض واجهة برمجة التطبيقات التالية:

  • fixture - تركيبات المكون المختبرة

  • component - مثيل المكون المختبر

  • element - العنصر الأصلي للمكون المختبر

  • debugElement - عنصر تصحيح الأخطاء في المباراة التي تم اختبارها

  • flushEffects() - يوفر غلافًا لـ TestBed.flushEffects()

  • inject() - يوفر غلافًا لـ TestBed.inject() :

 const service = complicator.inject (QueryService) ؛ const fromponentInjector = true ؛ const service = complicator.inject (queryservice ، fromponentInjector) ؛

  • detectChanges() - Runs DetectChanges على العنصر/المضيف الذي تم اختباره:

 Spectator.DetectChanges () ؛

  • detectComponentChanges() - Runs detectChanges على المكون الذي تم اختباره (وليس على host ). ستحتاج إلى هذه الطريقة في حالات نادرة عند استخدام host والمكون الذي تم اختباره هو onPush ، وتريد إجبارها على تشغيل دورة اكتشاف التغيير.

 المتفرج. detectcomponentChanges () ؛

  • setInput() - يغير قيمة input () للمكون الذي تم اختباره. تدير الطريقة ngOnChanges مع SimpleChanges يدويًا إذا كانت موجودة.

 IT ('يجب ...' ، () => {
  Complear.SetInput ('className' ، 'Danger') ؛

  Complear.SetInput ({className: 'Danger'
  }) ؛}) ؛

  • output - إرجاع output يمكن ملاحظته () للمكون الذي تم اختباره:

 (يجب أن تنبعث من حدث $ عند النقر "، () => {
  دع الإخراج
  المتفرج.

  Complear.component.onclick ({type: 'click'}) ؛
  توقع (الإخراج). toequal ({type: 'click'}) ؛}) ؛

  • tick(millis?: number) - قم بتشغيل وظيفة FakeAsync tick() ومكالمات detectChanges() :

 (يجب أن تعمل مع علامة "، fakeasync (() => {
  Spectator = CreateComponent (ZippyComponent) ؛
  complear.component.update () ؛
  توقع (complectator.component.updatedasync) .ToBefalSy () ؛
  المتفرج. tick (6000) ؛
  توقع (complectator.component.updatedasync) .not.tobefalsy () ؛}))

أحداث API

يمكن لكل واحد من الأحداث أن يقبل SpectatorElement الذي يمكن أن يكون أحد ما يلي:

 اكتب SpectatorElement = سلسلة | عنصر | تصحيح الأخطاء | elementref | نافذة | وثيقة | دومسيكتور

إذا لم يتم توفيره ، فإن العنصر الافتراضي سيكون العنصر المضيف للمكون قيد الاختبار.

  • click() - يحفز حدث النقر:

 complectator.click (SpectatorElement) ؛ Spectator.click (bytext ('element')) ؛

  • blur() - يحفز حدث ضبابي:

 scream.blur (SpectatorElement) ؛ Spectator.blur (bytext ('element')) ؛

لاحظ أنه إذا كنت تستخدم إطار Jest ، فإن Blur () يعمل فقط إذا كان العنصر يركز. تفاصيل.

  • focus() - يحفز حدث التركيز:

 المتفرج.

  • typeInElement() - محاكاة كتابة المستخدم:

 scream.TypeInelement (القيمة ، screytorelement) ؛ scream.typeinElement (القيمة ، bytext ('element')) ؛

  • dispatchMouseEvent() - يحفز حدث الماوس:

 المتفرج. ('element') ، 'mouseout' ، x ، y ، event) ؛

  • dispatchKeyboardEvent() - يحفز حدث لوحة المفاتيح:

 المتفرج. '،' Escape ') ؛ Spectator.DispatchKeyboardEvent (bytext (' element ') ،' keyup '، {key:' Escape '، keycode: 27})

  • dispatchTouchEvent() - يحفز حدث اللمس:

 Spectator.DispatchTouchEvent (Spectatorelement ، type ، x ، y) ؛ Spectator.DispatchTouchEvent (bytext ('element') ، type ، x ، y) ؛

الأحداث المخصصة

يمكنك تشغيل الأحداث المخصصة (output () من مكونات الطفل) باستخدام الطريقة التالية:

 complear.triggereventhandler (mychildcomponent ، 'myCustomevent' ، 'EventValue') ؛ compansator.triggereventHandler (mychildcomponent ، 'myCustomeVent' ، 'EventValue' ، {root: true}) ؛ '،' eventValue ') ؛ Spectator.TriggereventHandler (' app-child-component '،' myCustomevent '،' EventValue '، {root: true}) ؛

منشئي الأحداث

في حالة رغبتك في اختبار الأحداث بشكل مستقل عن أي قالب (مثل خدمات مقدمي العروض) ، يمكنك العودة إلى المبدعين الأساسيين. إنهم يوفرون نفس التوقيع بشكل أساسي بدون العنصر السابق.

 const keyboardevent = createKeyboardEvent ('keyup' ، 'ArrowDown'/ *، targetElement */) ؛ const mouseevent = createmouseevent ('mouseout') ؛ const touchevent = createTouchEvent ('touchmove') ؛ const fakeevent = createfakeevent ('input') ؛

مساعدو لوحة المفاتيح

 complear.keyboard.pressEnter () ؛ factorator.keyboard.pressescape () ؛ Spectator.Keyboard.presstab () ؛ simplicator.keyboard.pressbackspace () ؛ factorator.keyboard.presskey ('a') ؛ factorator.keyboard.presskey ('' ctrl.a ') ؛ complear.keyboard.presskey (' ctrl.shift.a ') ؛

مساعدين الماوس

 complear.mouse.contextMenu ('. selector') ؛ Spectator.Mouse.dblclick ('. selector') ؛

لاحظ أن كل واحدة من الطرق المذكورة أعلاه ستقوم أيضًا بتشغيل detectChanges() .

استفسارات

يتضمن واجهة برمجة تطبيقات المتفرج أساليب مريحة للاستعلام عن DOM كجزء من اختبار: query ، queryAll ، queryLast ، queryHost و queryHostAll . جميع طرق الاستعلام متعددة الأشكال وتسمح لك بالاستعلام باستخدام أي من التقنيات التالية.

محدد السلسلة

تمرير محدد السلسلة (بنفس النمط الذي تفعله عند استخدام jQuery أو document.queryselector) للاستعلام عن العناصر التي تتطابق مع هذا المسار في DOM. هذه الطريقة للاستعلام تعادل Angular's by.css المسند. لاحظ أنه سيتم إرجاع عناصر HTML الأصلية. على سبيل المثال:

 // إرجاع htmlelementspectator.query ('div> ul.nav li: first-child') ؛ وثيقة countextsectator.query ('div' ، {root: true}) ؛ screamator.query ('app-child' ، {read: childserviceservice}) ؛

اكتب المحدد

تمرير نوع (مثل مكون أو توجيه أو فئة مزود) للاستعلام عن مثيلات من هذا النوع في DOM. هذا يعادل Angular's By.directive . يمكنك تمريرها اختياريًا في معلمة ثانية لقراءة رمز حقن محدد من حقن عناصر المطابقة. على سبيل المثال:

 // إرجاع مثيل واحد من myComponent (إذا كان موجودًا) sportator.query (myComponent) ؛ ، {read: someservice}) ؛ comparator.query (myComponent ، {read: elementRef}) ؛ host.querylast (childComponent) ؛ host.queryall (ChildComponent) ؛

محدد DOM

يتيح لك المتفرج الاستعلام عن العناصر التي تستخدم المحددات المستوحاة من مكتبة الاستخدام. المحددون المتاحون هم:

 المتفرج. text alt ')) ؛ scream.query (bylabel (' by label ')) ؛ Spectator.query (bytext (' by text ')) ؛ complicator.query (bytext (' by text '، {selector:' #some. Selector '})) ؛ complicator.query (bytextContent (' by text content '، {selector:' #some .selector '})) ؛ complicator.query (byrole (' checkbox '، {checked: true})) ؛

الفرق بين byText و byTextContent هو أن الأول لا يتطابق مع النص داخل عناصر متداخلة.

على سبيل المثال ، في هذا التالي HTML byText('foobar', {selector: 'div'}) لن يتطابق مع div التالية ، ولكن byTextContent سوف:

 <viv>
  <span> foo </span>
  <span> Bar </span> </viv>

محدد الوالدين

يسمح لك المتفرج بالاستعلام عن العناصر المتداخلة داخل عنصر الأصل. يكون هذا مفيدًا عندما يكون لديك مثيلات متعددة من نفس المكون على الصفحة وتريد الاستعلام عن الأطفال داخل واحد محدد. المحدد الأصل هو محدد سلسلة يستخدم للعثور على العنصر الأصل. يتم تمرير المحدد الأصل كمعلمة ثانية لطرق الاستعلام. على سبيل المثال:

 complear.query (ChildComponent ، {permanceLector: '#parent-component-1'}) ؛ screamator.queryall (ChildComponent ، {parentElector: '#parent-component-1'}) ؛

اختبار العناصر المحددة

يسمح لك المتفرج باختبار <select></select> عناصر بسهولة ، ويدعم Multi Select.

مثال:

 (يجب تعيين الخيارات الصحيحة على Multi Select "، () => {
  const select = complear.query ('#test-multi-select') كـ htmlselectelement ؛
  المتفرج. selectoption (Select ، ['1' ، '2']) ؛
  توقع (SELECT) .TOHAVESELECTEDOPTIONS (['1' ، '2']) ؛}) ؛ it ('يجب تعيين الخيار الصحيح على تحديد قياسي' ، () => {
  const select = screamator.query ('#test-single-select') كـ htmlselectelement ؛
  المتفرج. selectoption (SELECT ، '1') ؛
  توقع (SELECT) .ToHavesElectedOptions ('1') ؛}) ؛

كما يسمح لك بالتحقق مما إذا كان معالج change الخاص بك يتصرف بشكل صحيح لكل عنصر محدد. يمكنك تعطيل هذا إذا كنت بحاجة إلى تعيين خيارات مسبقًا دون إرسال حدث التغيير.

API:

 المتفرج. selectoption (selectElement: htmlselectelement ، الخيارات: سلسلة | سلسلة [] | htmloptionelement | htmloptionelement [] ، config: {emitevents: boolean} = {emitevents: true}) ؛

مثال:

 (يجب إرسال العدد الصحيح لأحداث التغيير "، () => {
  const onchangespy = spyon (compansator.component ، 'HandleChange') ؛
  const select = complear.query ('#test-onchange-select') كـ htmlselectelement ؛

  Complear.SelectOption (SELECT ، ['1' ، '2'] ، {emitevents: true}) ؛

  توقع (SELECT) .ToHavesElectedOptions (['1' ، '2']) ؛
  توقع (onchangespy). tohavebeencalledtimes (2) ؛}) ؛ ('يجب ألا ترسل العدد الصحيح لأحداث التغيير "، () => {
  const onchangespy = spyon (compansator.component ، 'HandleChange') ؛
  const select = complear.query ('#test-onchange-select') كـ htmlselectelement ؛

  Spectator.SelectOption (SELECT ، ['1' ، '2'] ، {emitevents: false}) ؛

  توقع (SELECT) .ToHavesElectedOptions (['1' ، '2']) ؛
  توقع (onchangespy) .not.tohavebeencalledtimes (2) ؛}) ؛

يمكنك أيضًا تمرير HTMLOptionElement (s) كوسيطات إلى selectOption ومطابقة toHaveSelectedOptions . هذا مفيد بشكل خاص عند استخدام [ngValue] الربط على <option> :

 ("يجب تعيين الخيار الصحيح على تحديد واحد عند تمرير العنصر" ، () => {
  const select = complear.query ('#test-single-select-element') كـ htmlselectelement ؛

  Complear.SelectOption (SELECT ، Spectator.query (bytext ('two')) كـ htmloptionelement) ؛

  توقع (SELECT) .ToHavesElectedOptions (Spectator.query (bytext ('اثنين')) كـ htmloptionelement) ؛}) ؛

المكونات السخرية

إذا كنت بحاجة إلى السخرية من المكونات ، فيمكنك استخدام مكتبة NG Mocks. بدلاً من استخدام CUSTOM_ELEMENTS_SCHEMA ، والتي قد تخفي بعض المشكلات ولن تساعدك على تعيين المدخلات والمخرجات ، وما إلى ذلك ، ستقوم ng-mocks بتسخين المدخلات والمخرجات وما إلى ذلك.

مثال:

 استيراد {createHostFactory} من '@ngneat/scream' ؛ import {mockcomponent} من 'ng-mocks' ؛ import {foOcomponent} من './toph/foo.component'؛const createhost = createHostFactory ({{{
  المكون: YourComponentTotest ،
  الإعلانات: [MockComponent (Foocomponent)
  ]}) ؛

اختبار الوحدات الزاوية المكون/التوجيهية الفردية

يمكن اختبار المكونات (أو التوجيهات) التي يتم إعلانها في الوحدة النمطية الخاصة بها عن طريق تحديد وحدة المكون في قائمة الواردات لمصنع المكون مع المكون. على سبيل المثال:

 const createComponent = createComponentFactory ({
  المكون: ButtonComponent ،
  الواردات: [buttonComponentModule] ،}) ؛

عند استخدامه مثل هذا ، يضيف المتفرج داخليًا ButtonComponent للمكون إلى إعلانات وحدة جديدة تم إنشاؤها داخليًا. وبالتالي ، سترى الخطأ التالي: 

Type ButtonComponent is part of the declarations of 2 modules [...]

من الممكن إخبار المتفرج بعدم إضافة المكون إلى إعلانات الوحدة الداخلية ، وبدلاً من ذلك ، استخدم الوحدة النمطية المحددة بشكل صريح كما هي. ببساطة قم بتعيين خاصية declareComponent لخيارات المصنع إلى false :

 const createComponent = createComponentFactory ({
  المكون: ButtonComponent ،
  الواردات: [buttoncomponentModule] ،
  DeclareComponent: false ،}) ؛

عند استخدام CreateRectiveFactory قم بتعيين الخاصية declareDirective لخيارات المصنع إلى false :

 Const CreatedIctive = createRictiveFactory ({
  المكون: تسليط الضوء على المكون ،
  الواردات: [AightlyComponentModule] ،
  إعلان: خطأ ،}) ؛

وجهات نظر قابلة للتأجيل

يوفر المتفرج واجهة برمجة تطبيقات مريحة للوصول إلى المشاهدات القابلة للتأجيل ( @defer {} ).

الوصول إلى كتلة التأجيل المطلوبة باستخدام طريقة spectator.deferBlock(optionalIndex) . المعلمة optionalIndex اختيارية وتتيح لك تحديد فهرس الكتلة المؤجلة التي تريد الوصول إليها.

  • الوصول إلى كتلة التأجيل الأولى : ما عليك سوى الاتصال spectator.deferBlock() .

  • الوصول إلى كتل التأجيل اللاحقة : استخدم الفهرس المقابل كوسيطة. على سبيل المثال ، تصل spectator.deferBlock(1) .

يعيد spectator.deferBlock(optionalIndex)

  • renderComplete() - يجعل الحالة الكاملة للكتلة المؤجلة.

  • renderPlaceholder() - يجعل الحالة النائبة للكتلة المؤجلة.

  • renderLoading() - يجعل حالة التحميل للكتلة المؤجلة.

  • renderError() - يجعل حالة الخطأ للكتلة المؤجلة.

مثال:

    @component ({selector: 'app-cmp' ، template: `defer (on viewport) {<viv> حالة كاملة من كتلة التأجيل الأولى </div> <!-الأصل الحالة الكاملة->} {placeholder { <div> صاحب المكان </div>} `،}) class dummyComponent {} const createComponent = createComponentFactory ({component: dummyComponent ، deferblockeavior: deferblockbehavior.manual ،}) ؛ > {// ترتيب const constator = createComponent () ؛

وجهات النظر المتداخلة القابلة للتداخل

للوصول إلى الدول داخل كتل تأجيل متداخلة ، اتصل بالطريقة deferBlock التي تتسلل من طريقة حالة الكتلة التي تم إرجاعها.

مثال: الوصول إلى الحالة الكاملة المتداخلة:

 // على افتراض `compansator.deferblock (0) .RenderComplete ()` يجعل الحالة الكاملة للوالدين blockconst parentcompletestate = await factator.deferblock (). renderComplete () ؛ = await parentcompletestate.rendercomplete (). deferblock () ؛

مثال كامل :

    component ({selector: 'app-cmp' ، template: `defer (on viewport) {<viv> حالة كاملة من كتلة التأجيل الأولى </div> <!-الأصل الحالة الكاملة-> defer {< div> الحالة الكاملة للكتلة المؤجلة المتداخلة </div> <!-حالة كاملة متداخلة->}}}. {المكون: DummyComponent ، deferblockebehavior: deferblockbehavior.manual ،}) ؛ COMMANT CONST CONSTCOMPLETESTATE = في انتظار المتفرج. deferblock تأجيل كتلة ') ؛}) ؛

اختبار مع المضيف

يعد اختبار مكون مع مكون مضيف تقنية أكثر أناقة وقوية لاختبار المكون الخاص بك. يمنحك بشكل أساسي القدرة على كتابة اختباراتك بنفس الطريقة التي تكتب بها الرمز الخاص بك. دعونا نراها في العمل:

 استيراد {createHostFactory ، SpectatorHost} من '@ngneat/scream' ؛ وصف ('ZippyComponent' ، () => {
  دع المتفرج: المتفرج <ZippyComponent> ؛
  const createHost = createHostFactory (ZippyComponent) ؛

  It ('يجب أن يعرض العنوان من خاصية المضيف' ، () => {screamator = createHost (`<zippy [title] =" title "> </zippy>` ، {hostprops: {title: '' screping is es}} }) ؛ توقع (screamator.query ('. zippy__title')).
  }) ؛

  (يجب أن يعرض كلمة "إغلاق" إذا فتحت "، () => {creatistator = createHost (` <zippy title = "zippy title"> zippy content </zippy> `) ) ؛ توقع (المتفرج.
  }) ؛}) ؛

تقوم طريقة المضيف بإرجاع مثيل SpectatorHost الذي يمتد Spectator مع واجهة برمجة التطبيقات الإضافية التالية:

  • hostFixture - لليدة المضيف

  • hostComponent - مثيل مكون المضيف

  • hostElement - العنصر الأصلي للمضيف

  • hostDebugElement - عنصر تصحيح لاعبا في مضيف

  • setHostInput - يغير قيمة @Input() من مكون المضيف

  • queryHost - اقرأ المزيد عن الاستعلام في المتفرج

  • queryHostAll - اقرأ المزيد عن الاستعلام في المتفرج

لا يمكن تعيين المدخلات مباشرة على مكون باستخدام setInput أو props عند الاختبار باستخدام مكون المضيف. يجب ضبط المدخلات من خلال hostProps أو setHostInput بدلاً من ذلك ، وتم نقلها إلى مكونك في القالب.

مكون مضيف مخصص

في بعض الأحيان يكون من المفيد تمرير تطبيق المضيف الخاص بك. يمكننا تمرير مكون مضيف مخصص إلى createHostFactory() الذي سيحل محل العنصر الافتراضي:

 component ({selector: 'custom-host' ، template: ''}) custom customHostComponent {
  title = 'custom hostcomponent' ؛} وصف ('مع مكون مضيف مخصص' ، function () {
  دع المتفرج: المتفرج <ZippyComponent ، CustomHostComponent> ؛
  const createHost = createHostFactory ({component: ZippyComponent ، المضيف: CustomHostComponent
  }) ؛

  It ('يجب أن يعرض عنوان مكون المضيف' ، () => {screamator = createHost (`<zippy [title] =" title "> </zippy>`) ؛ .tohavetext ('custom hostcomponent') ؛
  }) ؛}) ؛

الاختبار مع التوجيه

بالنسبة للمكونات التي تستخدم التوجيه ، هناك مصنع خاص متاح يمتد المخطط الافتراضي ، ويوفر ActivatedRoute بغيضًا حتى تتمكن من تكوين خيارات توجيه إضافية.

 وصف ('ProductDetailsComponent' ، () => {
  دع المتفرج: توضيح <productAilsComponent> ؛
  const createComponent = createrOutingFactory ({component: productAilsComponent ، params: {productID: '3'} ، البيانات: {title: 'بعض العنوان'}
  }) ؛

  QuarteAck (() => Spectator = CreateComponent ()) ؛

  IT (يجب عرض عنوان بيانات المسار "، () => {توقع (screamator.query ('. title')). tohavetext ('بعض العنوان') ؛
  }) ؛

  (يجب أن يتفاعل مع تغييرات الطريق "، () => {screamator.setRouteParam ('ProductId' ، '5') ؛ // اختبارك هنا ...
  }) ؛}) ؛

مما يؤدي إلى التنقل

يتضمن واجهة برمجة تطبيقات SpectatorRouting طرقًا مريحة لتحديث المسار الحالي:

 توسيع نطاق الواجهة <c> يمتد المتفرج <C> {
  /*** يحاكي عملية التنقل في الطريق عن طريق تحديث params و queryparams والدافق التي يمكن ملاحظتها للبيانات.   */
  TriggerNavigation (خيارات؟: routeOptions): void ؛

  /*** يقوم بتحديث براميل المسار ويؤدي إلى تنقل المسار.   */
  setRouteParam (الاسم: السلسلة ، القيمة: سلسلة): void ؛

  /*** يقوم بتحديث معاملات استعلام الطريق ويؤدي إلى التنقل في الطريق.   */
  setRoutequeryparam (الاسم: سلسلة ، القيمة: سلسلة): void ؛

  /*** يقوم بتحديث بيانات المسار ويؤدي إلى التنقل في الطريق.   */
  setRoutedata (الاسم: سلسلة ، القيمة: أي): void ؛

  /*** يقوم بتحديث جزء الطريق ويؤدي إلى التنقل في الطريق.   */
  setRoutefragment (جزء: سلسلة | null): void ؛

  /*** يقوم بتحديث عنوان URL للممر ويؤدي إلى التنقل في الطريق.   */
  setRouteurl (url: urlsegress []): void ؛}

اختبار التكامل مع RouterTestingModule

إذا قمت بتعيين خيار stubsEnabled على false ، فيمكنك تمرير تكوين توجيه حقيقي وإعداد اختبار التكامل باستخدام RouterTestingModule من Angular.

لاحظ أن هذا يتطلب وعودًا لحلها. طريقة واحدة للتعامل مع هذا ، هي بجعل الاختبار غير متزامن:

 وصف ("اختبار تكامل التوجيه" ، () => {
  const createComponent = createrOutingFactory ({component: myComponent ، الإعلانات: [othercomponent] ، stubSenabled: false ، المسارات: [{path: '' ، المكون: myComponent} ، {path: 'foo' ، المكون: مكون آخر}]
  }) ؛

  (يجب التنقل بعيدًا باستخدام رابط جهاز التوجيه "، async () => {const compansator = createComponent () ؛ // انتظر الوعود لحل ... في انتظار المشاهد. تأكيدًا للموقع (المشاهد. وعود بحل ... في انتظار المتفرج.
  }) ؛}) ؛

خيارات التوجيه

يمكن أن تأخذ وظيفة createRoutesFactory الخيارات التالية ، علاوة على خيارات المتفرج الافتراضية:

  • params : params الأولية لاستخدامها في كعب ActivatedRoute

  • queryParams : معاملات الاستعلام الأولي لاستخدامها في كعب ActivatedRoute

  • data : البيانات الأولية التي يجب استخدامها في كعب ActivatedRoute

  • fragment : جزء أولي لاستخدامه في كعب ActivatedRoute

  • url : شرائح URL الأولية لاستخدامها في كعب ActivatedRoute

  • root : قيمة root لكعب ActivatedRoute

  • parent : قيمة parent لكعب ActivatedRoute

  • children : قيمة children لكعب ActivatedRoute

  • firstChild : قيمة firstChild لكعب ActivatedRoute

  • stubsEnabled (افتراضي: true ): تمكين كعب ActivatedRoute ، إذا تم ضبطه على false فهو يستخدم RouterTestingModule بدلاً من ذلك

  • routes : إذا تم تعيين stubsEnabled على خطأ ، فيمكنك تمرير تكوين Routes لـ RouterTestingModule

التوجيهات اختبار

هناك مصنع اختبار خاص لاختبار التوجيهات. دعنا نقول أن لدينا التوجيه التالي:

 diRective ({selector: '[exmarle]'}) تصدير الفئة AmployDirective {

  @hostbinding ('style.background-color') BackgroundColor: String ؛

  HostListener ('mouseover')
  onhover () {this.backgroundColor = '#000000' ؛
  }

  HostListener ('mouseout')
  onLeave () {this.backgroundColor = '#ffffff' ؛
  }}

دعونا نرى كيف يمكننا اختبار التوجيهات بسهولة مع المتفرج:

 وصف ('AightlightDirective' ، () => {
  دع المتفرج: spectatordircive <ighmnizationDirective> ؛
  const creative = creatediRectiveFactory (تسليط الضوء على) ؛

  QuarteAck (() => {screamator = createRiveCtive (`<div affects> اختبار التمييز التوجيهية </div>`) ؛
  }) ؛

  It ("يجب تغيير لون الخلفية" ، () => {compansator.dispatchMouseevent (Spectator.Element ، 'mouseover') ؛ توقع (scream. ) '}) ؛ complishator.dispatchMousevent (compansator.element ،' mouseout ') ؛ توقع (scartator.element) .tohavestyle ({backgroundColor:' #fff '}) ؛
  }) ؛

  it ('يجب الحصول على المثيل' ، () => {const مثيل = screamator.directive ؛ توقع (مثيل) .tobedefined () ؛
  }) ؛}) ؛

تعيين المدخلات مباشرة على التوجيه باستخدام setInput أو props غير ممكن. يجب ضبط المدخلات من خلال hostProps أو setHostInput بدلاً من ذلك ، وتم نقلها إلى توجيهك في القالب.

خدمات الاختبار

يوضح المثال التالي كيفية اختبار خدمة مع المتفرج:

 استيراد {createServiceFactory ، Scaristatorservice} من '@ngneat/scream' ؛ import {authservice} من 'Auth.Service.ts' ؛ وصف ('AuthService' ، () => {{
  دع المتفرج: Screamatorservice <AuthService> ؛
  const createService = createServiceFactory (AuthService) ؛

  QuarteAck (() => Spectator = createService ()) ؛

  IT ("لا ينبغي تسجيل الدخول" ، () => {توقع (scream.service.isloggedin ()).
  }) ؛}) ؛

تُرجع وظيفة createService() SpectatorService مع الخصائص التالية:

  • service - احصل على مثيل للخدمة

  • inject() - وكيل للاختبار الزاوي TestBed.inject()

خيارات إضافية

من الممكن أيضًا تمرير كائن مع خيارات. على سبيل المثال ، عند اختبار الخدمة ، غالبًا ما تريد أن تسخر من تبعياتها ، حيث نركز على الخدمة التي يتم اختبارها.

على سبيل المثال:

 injectable () تصدير فئة AuthService {
  مُنشئ (dateservice الخاص: dateservice) {}

  IsloggedIn () {if (this.dateservice.isexpired ('timestamp')) {return false ؛} return true ؛
  }}

في هذه الحالة ، يمكننا أن نسخر من تبعية DateService .

 استيراد {createServiceFactory ، Scaristatorservice} من '@ngneat/scream' ؛ import {authservice} من 'Auth.Service.ts' ؛ وصف ('AuthService' ، () => {{
  دع المتفرج: Screamatorservice <AuthService> ؛
  Const CreateService = createServiceFactory ({Service: AuthService ، مقدمي الخدمات: [] ، intingComponents: [] ، Mocks: [Dateservice]
  }) ؛

  QuarteAck (() => Spectator = createService ()) ؛

  it ('يجب تسجيل الدخول' ، () => {const dateservice = screamator.inject (dateservice) ؛ dateservice.isexpired.and.Returnvalue (false) ؛
  }) ؛}) ؛

اختبار الأنابيب

يوضح المثال التالي كيفية اختبار أنبوب مع المتفرج:

 استيراد {screampipe ، createpipipipactory} من '@ngneat/scream' ؛ import {statsservice} من './stats.service' ؛ import {sumpipe} من'. {
  دع المتفرج: screamatorpipe <Mumpipe> ؛
  const createPipe = createPipePactory (sumpipe) ؛

  (يجب أن يلخص قائمة الأرقام المحددة (القالب) '، () => {screamator = createPipe (`{[[1 ، 2 ، 3] | sum}}`) ؛ ('6') ؛
  }) ؛

  IT ('يجب أن يلخص القائمة المحددة للأرقام (prop)' ، () => {creatiTepipe (`{{prop | sum}}` ، {hostprops: {prop: [1 ، 2 ، 3]}} ) ؛ توقع (المتفرج.
  }) ؛

  it ('يجب تفويض الجمع إلى الخدمة' ، () => {const sum = () => 42 ؛ const procider = {product: statsservice ، usevalue: {sum}} ؛ screamator = createPipe (`{{prop | sum}} `، {hostprops: {prop: [2 ، 40]} ، مقدمي الخدمات: [Provider]}) ؛
  }) ؛}) ؛

تُرجع دالة createPipe() SpectatorPipe مع الخصائص التالية:

  • hostComponent - مثيل المكون المضيف

  • debugElement - عنصر التصحيح في المباراة حول المكون المضيف

  • element - العنصر الأصلي للمكون المضيف

  • detectChanges() - وكيل لـ Angular TestBed.fixture.detectChanges()

  • inject() - وكيل للاختبار الزاوي TestBed.inject()

تعيين المدخلات مباشرة على أنبوب باستخدام setInput أو props غير ممكن. يجب ضبط المدخلات من خلال hostProps أو setHostInput بدلاً من ذلك ، وتم نقلها إلى أنبوبك في القالب.

باستخدام مكون المضيف المخصص

يوضح المثال التالي كيفية اختبار أنبوب باستخدام مكون مضيف مخصص:

 استيراد {component ، input} من '@Angular/core' ؛ import {screampipe ، createPipePipActory} من '@ngneat/scream' ؛ import {maleverpipe} من '. .Service '؛@component ({
  قالب: `<div> {{prop | AVG}} </viv> `}) CustomHostComponent {
  input () Public Prop: number [] = [1 ، 2 ، 3] ؛} وصف ('MeveragePipe' ، () => {
  دع المتفرج: screamatorpipe <CentalePipe> ؛
  Const CreatePipe = CreatePipePactory ({Pipe: Meverualpipe ، المضيف: CustomHostComponent
  }) ؛

  IT ('يجب أن يحسب متوسط ​​قائمة معينة من الأرقام' ، () => {screamator = createPipe () ؛ توقع (screamator.element) .tohavetext ('2') ؛
  }) ؛

  (يجب أن ينتج عن 0 عندما تكون قائمة الأرقام فارغة '، () => {creatator = createPipe ({hostProps: {prop: []}}) ؛ توقع (screamator.element) .tohavetext (' 0 ') ؛
  }) ؛

  IT ('يجب تفويض الحساب إلى الخدمة' ، () => {const avg = () => 42 ؛ const procider = {supply: statsservice ، usevalue: {avg}} ؛ factator = createPipe ({Providers: ]}) ؛ توقع (المتفرج.
  }) ؛}) ؛

مقدمي السخرية

لكل مصنع المتفرج ، يمكننا بسهولة السخرية من أي مزود.

سيتم السخرية من كل خدمة ننتقلها إلى خاصية mocks باستخدام وظيفة mockProvider() . تقوم دالة mockProvider() بتحويل كل طريقة إلى جاسوس الياسمين. (أي jasmine.createSpy() ).

فيما يلي بعض الطرق التي تعرضها:

 dateservice.isexpired.and.callthrough () ؛ dateservice.isexpired.and.callfake (() => مزيف) ؛ dateservice.isexpired.and.throwerror ('خطأ') ؛ dateservice.isexpired.andcallfake (() => مزيف) ؛

ومع ذلك ، إذا كنت تستخدم Jest كإطار اختبار وترغب في استخدام آلية السخرية بدلاً من ذلك ، فاستيف mockProvider() من @ngneat/spectator/jest . سيستخدم هذا تلقائيًا وظيفة jest.fn() لإنشاء وهمية متوافقة مع Jest بدلاً من ذلك.

mockProvider() لا يشمل الخصائص. في حال كنت بحاجة إلى الحصول على خصائص على وهمية ، يمكنك استخدام الوسيطة الثانية:

 Const CreateService = CreeperServiceFactory ({
  الخدمة: Authservice ،
  مقدمي الخدمات: [mockprovider (otherservice ، {name: 'Martin' ، Emitter: new tourge () ، MockedMethod: () => 'Mocked'})
  ] ،}) ؛

يسخر من التبعيات Oninit

إذا كان مكونًا يعتمد على خدمة يتم استيعابها في طريقة دورة حياة Oninit ، فيجب تعطيل الكشف عن التغيير حتى يتم حقن الخدمات.

لتكوين هذا ، قم بتغيير طريقة createComponent لضبط خيار detectChanges على False ثم استدعاء detectChanges يدويًا على المتفرج بعد إعداد الخدمات التي تم حقنها.

 const createComponent = createComponentFactory ({
  المكون: WeatherDashboardComponent}) ؛ It ('يجب استدعاء واجهة برمجة تطبيقات الطقس على init' ، () => {
  Const Compansator = CreateComponent ({detectChanges: false
  }) ؛
  const weatherservice = screamator.inject (WeatherDataapi) ؛
  weatherservice.getweatherdata.andreturn (من (mockweatherdata)) ؛
  Spectator.DetectChanges () ؛
  توقع (weatherservice.getweatherdata). tohavebeencalled () ؛}) ؛

تبعيات مُنشئ السخرية

إذا كان مكونًا يعتمد على خدمة يتم استيعابها في مُنشئها ، فأنت بحاجة إلى إنشاء وتكوين النفخ ، وتوفير النفخ عند إنشاء المكون.

 const createComponent = createComponentFactory ({
  المكون: WeatherDashboardComponent}) ؛ (يجب استدعاء واجهة برمجة تطبيقات الطقس في المنشئ "، () => {
  const weatherservice = createspyobject (WeatherDataapi) ؛
  weatherservice.getweatherdata.andreturn (من (mockweatherdata)) ؛

  COMPLED = CREATECOMPONENT ({مقدمي الخدمات: [{PROVER: WEATHERDATAAPI ، usevalue: Weatherservice}]
  }) ؛

  توقع (weatherservice.getweatherdata). tohavebeencalled () ؛}) ؛

الدعم الدائري

بشكل افتراضي ، يستخدم المتفرج ياسمين لإنشاء الجواسيس. إذا كنت تستخدم Jest كإطار اختبار بدلاً من ذلك ، فيمكنك السماح للمتفرج بإنشاء جواسيس متوافقة مع Jest.

ما عليك سوى استيراد إحدى الوظائف التالية من @ngneat/spectator/jest (بدلاً من @ngneat/scream) ، وسوف تستخدم Jest بدلاً من الياسمين. createComponentFactory() ، createHostFactory() ، createServiceFactory() ، createHttpFactory() ، mockProvider() .

 استيراد {createServiceFactory ، Scaimatorservice} من '@ngneat/screamator/jest' ؛ import {authservice} من '. => {
  دع المتفرج: Screamatorservice <AuthService> ؛
  Const CreateService = createServiceFactory ({Service: AuthService ، Mocks: [dateservice]
  }) ؛

  QuarteAck (() => Spectator = createService ()) ؛

  ("لا ينبغي تسجيل الدخول إلى" ، () => {const dateservice = screamator.inject <dateservice> (dateservice) ؛ dateservice.isexpired.mockreturnvalue (true) ؛ توقع (scream.service.isloggedin ()). ) ؛
  }) ؛

  (يجب تسجيل الدخول إلى "، () => {const dateservice = screamator.inject <dateservice> (dateservice) ؛ dateservice.isexpired.mockreturnvalue (false) ؛ ؛
  }) ؛}) ؛

عند استخدام Schematic للمكون ، يمكنك تحديد علامة --jest لاستخدام الواردات Jest. من أجل مزاح الاستيراد الافتراضي ، تحديث angular.json :

 "Schematics": {"@ngneat/compansator: Spectator-Component": {"Jest": True
  }
}

اختبار مع HTTP

يقوم المتفرج بتجهيز خدمات البيانات ، والتي تستخدم وحدة HTTP الزاوية ، أسهل كثيرًا. على سبيل المثال ، دعنا نقول أن لديك خدمة بثلاث طرق ، يقوم أحدهم بإجراء الحصول على منشور ومرشر واحد ويقوم أحدهم بطلبات متزامنة:

 فئة التصدير todosdataservice {
  مُنشئ (httpclient الخاص: httpclient) {}

  getTodos () {return this.httpclient.get ('api/todos') ؛
  }

  posttodo (id: number) {return this.httpclient.post ('api/todos' ، {id}) ؛
  }

  CollectTodos () {return musge (this.httpclient.get ('/api1/todos') ، that.httpclient.get ('/api2/todos')) ؛
  }}

يجب أن يبدو اختبار الخدمة أعلاه:

 استيراد {createhttpfactory ، httpmethod} من '@ngneat/scream' ؛ import {todosdataservice} من '.
  دع المتفرج: screamatorhttp <TodosDatAservice> ؛
  consterhttp = createHttpFactory (todosdataservice) ؛

  QuarteAck (() => Spectator = createHttp ()) ؛

  it ('يمكن اختبار httpclient.get' ، () => {screamator.service.gettodos (). اشتراك () ؛ screamator.expectone ('api/todos' ، httpmethod.get) ؛
  }) ؛

  IT ("يمكن اختبار httpclient.post '، () => {screamator.service.posttodo (1) .subscribe () ؛ const req = screamator.expectone (' api/todos '، httpmethod.post) ؛ توقع (req. request.body ['id']).
  }) ؛

  IT ('يمكن اختبار طلبات http الحالية' ، () => {screamator.service.gettodos (). اشتراك () ؛ const reqs = screamator.expectconcurrent ([{url: '/api1/todos' ، الطريقة: httpmethod.get.get.get } ، {url: '/api2/todos' ، method: httpmethod.get}]) ؛ screamator.flushall (reqs ، [{} ، {} ، {}]) ؛
  }) ؛}) ؛

نحتاج إلى إنشاء مصنع HTTP باستخدام دالة createHttpFactory() ، مرور الخدمة التي تريد اختبارها. يقوم createHttpFactory() بإرجاع وظيفة يمكن استدعاؤها للحصول على مثيل للمتفرج مع الخصائص التالية:

  • controller - وكيل لـ HttpTestingController الزاوي

  • httpClient - وكيل لـ HttpClient الزاوي

  • service - مثيل الخدمة

  • inject() - وكيل للاختبار الزاوي TestBed.inject()

  • expectOne() - توقع تقديم طلب واحد يطابق عنوان URL المحدد وطريقةه ، وإرجاع طلبه الوهمي

الحقن العالمية

من الممكن تحديد الحقن التي ستكون متاحة لكل اختبار دون الحاجة إلى إعادة النشر في كل اختبار:

 // test.tsimport {defineGlobalsInjections} من '@ngneat/scream' ؛ import {translocomodule} من '@ngneat/transloco' ؛ defineGlobalsInjections ({{
  الواردات: [translocomodule] ،}) ؛

يرجى العلم ، أنه يجب استدعاء defineGlobalsInjections() قبل تحميل الوحدات النمطية. في test.ts الزاوي الافتراضي. هذا يعني ذلك قبل هذا السطر:

 context.Keys (). MAP (السياق) ؛

مقدمي المكونات

بشكل افتراضي ، لم يتم لمس مقدمي الخدمات الأصليين (مثل providers على @Component ).

ومع ذلك ، في معظم الحالات ، تريد الوصول إلى مقدمي خدمات المكون في الاختبار أو استبدالها بسخرية.

على سبيل المثال:

 @عنصر({
  نموذج: '...'،
  مقدمي الخدمات: [fooservice]}) فئة foocomponent {
  مُنشئ (Fooservice الخاص: fooservice} {}

  // ...}

استخدم componentProviders لاستبدال مزود FooService :

 const createComponent = createComponentFactory ({
  المكون: Fooocomponent ،
  ComponentProviders: [{تقديم: fooservice ، usevalue: شيء ما}
  ]})

أو السخرية من الخدمة باستخدام componentMocks :

 const createComponent = createComponentFactory ({
  المكون: Fooocomponent ،
  componentmocks: [fooservice]}) ؛

للوصول إلى المزود ، احصل عليه من حاقن المكون باستخدام معلمة fromComponentInjector :

 متفرج.

بالطريقة نفسها ، يمكنك أيضًا تجاوز مقدمي عرض المكون باستخدام componentViewProviders و componentViewProvidersMocks .

تنطبق نفس القواعد أيضًا على التوجيهات باستخدام معلمات directiveProviders ومعلمات directiveMocks .

المطاعم المخصصة

 توقع ('. zippy__content'). not.toexist () ؛ توقع ('. zippy ')). tohaveattribute (' id '،' zippy ') ؛ توقع (screpator.query ('. zippy ')). )). ). إذا كان الترتيب غير ذي صلة ، فقم بتعطيل الوضع الصارم يدويًا. zippy__content '). not.tohaveclass (' class-b ، class-a ') ؛ توقع ('. zippy__content '). ) .not.tohaveclass (['class-b' ، 'class-a']) ؛ توقع ('. tohaveclass ('class-a ، class-b' ، {strict: false}) ؛ توقع ('. zippy__content '). tohaveclass ([' class-b '،' class-a '] ، {Strict: false}) ؛ ، {Strict: false}) ؛ // لاحظ أن tohavetext يبحث فقط عن وجود سلسلة ، وليس إذا كانت السلسلة هي نفسها تمامًا. إذا كنت ترغب في التحقق من أن السلسلة هي نفسها تمامًا ، فاستخدم toHaveExactText.// لاحظ أنه إذا كنت ترغب في التحقق من أن السلسلة هي نفسها تمامًا ، ولكن تم قطعها أولاً ، استخدم toHaveExactTrimmedText.// لاحظ أنه إذا قمت بتمرير قيم متعددة ، يتحقق المتفرج من نص كل عنصر صفيف مقابل فهرس العنصر الموجود. ']) ؛ توقع ('. zippy__content ') ') .tocontaintext ([' content a '،' content b ']) ؛ توقع ('. zippy__content '). المحتوى B ']) ؛ توقع ('. zippy__content '). ). tohavevalue ('قيمة') ؛ توقع ('. zippy__content'). tocontainvalue ('value') ؛ ('.zippy__content'). tohavevalue (['value a' ، 'value b']) ؛ توقع ('. ) .tohavestyle ({backgroundColor: 'rgba (0 ، 0 ، 0 ، 0.1)'}) ؛ توقع ('. .ckeckbox '). toBechecked () ؛ توقع ('. .TobeHidden () ؛ توقع ("العنصر"). Tobeselected () ؛ // لاحظ أنه بسبب القيود الموجودة في Jest (لا تطبق منطق التخطيط الفعلي في DOM الظاهري) ، قد تؤدي بعض المطابقات إلى إيجابية خاطئة. على سبيل المثال العرض والارتفاع المحدد على 0Expect ('element'). tobevisible () ؛ توقع ('المدخلات'). toBefocused () ؛ توقع ('div'). tebematchedby ('. component.Object) .ToBepartial ({approperty: 'avalue'}) ؛ توقع ('div'). tohavedescendant ('. child') ؛ توقع ('div'). 'نص'})؛

المخططات

قم بإنشاء مكون وخدمة وتوجيه باستخدام قوالب Spectator Spec مع CLI الزاوي: (عند استخدامه كإعداد افتراضي)

عنصر

  • المواصفات الافتراضية: ng g cs dashrized-name

  • المواصفات مع مضيف: ng g cs dashrized-name --withHost=true

  • المواصفات مع مضيف مخصص: ng g cs dashrized-name --withCustomHost=true

خدمة:

  • المواصفات الافتراضية: ng g ss dashrized-name

  • Spec لاختبار خدمة بيانات HTTP: ng g ss dashrized-name --isDataService=true

التوجيه:

ng g ds dashrized-name

مجموعة المخططات الافتراضية

لاستخدام spectator كمجموعة افتراضية في مشروع CLI الزاوي ، أضفه إلى angular.json :

 ng config cli.defaultcollection @ngneat/scream

تمديد مخططات spectator الافتراضي @schematics/angular Collection. إذا كنت ترغب في تعيين الافتراضات للتخطيطات مثل إنشاء مكونات مع ملف SCSS ، فيجب عليك تغيير اسم حزمة المخططات من @schematics/angular إلى @ngneat/spectator في angular.json :

 "Schematics": {"@ngneat/scream: Spectator-Component": {"style": "SCSS"
  }
}

عمل المشاهد والشرب العينة من قبل إعادة الريبو والكرمة

تم استنساخ الأمثلة في Karma من دليل اختبار Docs Docs Vecs في المتفرج والزواج. (للراحة ، هذا هو النسخة المحلية من أمثلة الكرمة.)

يمكن الوصول إلى إصدار المتفرج والثاني هنا.

فريق أساسي


Netanel القاعدية
ديرك لويجك
بن إليوت

المساهمين

شكراً لهؤلاء الأشخاص الرائعين (مفتاح الرموز التعبيرية): ~~~~


I. سيناء
؟ ؟
فالنتين بوريكوف
؟
بن غرينهاوس
؟
مارتن نوك

لارس جيروب برينك نيلسن
؟ ️
أندرو غريكوف
؟
Jeroen Zwartepoorte

أوليفر شليجل

ريكس أيها
؟
تشامورا

يويري نيجس

أندرس سكاربي

جريجور وويوود

ألكساندر شيريميتيف
؟

مايك

محمد إيرم

بريت إيكرت

إسماعيل فايزي

الحد الأقصى

جوناثان بونفوي

فيري كولوم

كريس كوبر

مارك شيب

DGSMITH2

Dedwardstech
؟
Tamasfoldi
؟
باولو كاليفي

توني فيلينا

itay oded

غيوم دي جبرون

أناند تيواري

أليس دوغانوك

زولتان

vitalii baziuk

Clementlemarc-Certua

يوري جرونين

أندريه تشالكين

ستيفن هاريس

ريتشارد ساهركوربي

دومينيك كريمر

محمد أوزان تورهان

فلاد عسكو

وليام تيوندروسوهارتو

تشاز غاتيان

بافيل كوروبوف

إنو لوهمان

باول بوغوسلاوسكي

توبياس ويتوير

ماتيو تيباكيرا

يتبع هذا المشروع مواصفات جميع المساهمين. مساهمات من أي نوع ترحيب!

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل