অ্যাক্টিভেটরেট থেকে পরামিতিগুলির উপর নির্ভর করে এমন একটি উপাদানকে কীভাবে পরীক্ষা করবেন?

Question 1

আমি ইউনিটটি এমন কোনও উপাদানটি পরীক্ষা করছি যা কোনও অবজেক্ট সম্পাদনা করতে ব্যবহৃত হয়। কোনও একটি idহোস্ট করা অবজেক্টের অ্যারে থেকে নির্দিষ্ট অবজেক্টটি দখল করার জন্য এই অবজেক্টটির একটি অনন্য বৈশিষ্ট্য রয়েছে। নির্দিষ্টটি idএকটি পরামিতির মাধ্যমে সংগ্রহ করা হয় যা রাউটিংয়ের মাধ্যমে পাস হয়, বিশেষত ActivatedRouteশ্রেণীর মাধ্যমে ।

নির্মাতা নিম্নরূপ:

 constructor(private _router:Router, private _curRoute:ActivatedRoute, private _session:Session) {
}

ngOnInit() {
    this._curRoute.params.subscribe(params => {
        this.userId = params['id'];
        this.userObj = this._session.allUsers.filter(user => user.id.toString() === this.userId.toString())[0];

আমি এই উপাদানটিতে বেসিক ইউনিট পরীক্ষা চালাতে চাই। যাইহোক, আমি নিশ্চিত আমি উদ্বুদ্ধ করতে পারেন হিসাবে নই idপরামিতি, এবং উপাদান দরকার এই প্যারামিটার।

উপায় দ্বারা: আমার কাছে ইতিমধ্যে Sessionপরিষেবাটির জন্য একটি উপহাস রয়েছে, সুতরাং সেখানে কোনও উদ্বেগ নেই।

Question 2

এটি করার সহজতম উপায় হ'ল useValueবৈশিষ্ট্যটি ব্যবহার করা এবং আপনি যে মানটিকে উপহাস করতে চান তার একটি পর্যবেক্ষণযোগ্য সরবরাহ করা।

আরএক্সজেএস <6

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
...
{
  provide: ActivatedRoute,
  useValue: {
    params: Observable.of({id: 123})
  }
}

আরএক্সজেএস> = 6

import { of } from 'rxjs';
...
{
  provide: ActivatedRoute,
  useValue: {
    params: of({id: 123})
  }
}

Question 3

আমি কীভাবে এটি করতে হবে তা বুঝতে পেরেছি!

যেহেতু ActivatedRouteএকটি পরিষেবা, তাই এটির জন্য একটি মক পরিষেবা স্থাপন করা যেতে পারে। আসুন এই মক পরিষেবাটি কল করুন MockActivatedRoute। আমরা বাড়িয়ে দেবে ActivatedRouteমধ্যে MockActivatedRouteনিম্নরূপ:

class MockActivatedRoute extends ActivatedRoute {
    constructor() {
        super(null, null, null, null, null);
        this.params = Observable.of({id: "5"});
    }

লাইনটি super(null, ....)সুপার বর্গকে আরম্ভ করে, যার চারটি বাধ্যতামূলক পরামিতি রয়েছে। যাইহোক, এই উদাহরণে, আমাদের এই প্যারামিটারগুলির কোনওটির প্রয়োজন নেই, তাই আমরা সেগুলি nullমানগুলিতে আরম্ভ করি । আমাদের যা দরকার মান হল paramsএকটি, যা Observable<>। অতএব, এর সাথে this.params, আমরা পরীক্ষার বিষয়টি নির্ভর করে এমন প্যারামিটারের মান হতে ওভাররাইড করে paramsএটিকে আরম্ভ করব Observable<>।

তারপরে, অন্য কোনও মক পরিষেবা হিসাবে, কেবল এটি আরম্ভ করুন এবং উপাদানটির জন্য সরবরাহকারীকে ওভাররাইড করুন।

শুভকামনা!

Question 4

কৌণ 8+ তে রাউটার টেস্টিংমডুল রয়েছে, যা আপনি উপাদানটির অ্যাক্টিভেটরউট বা রাউটার অ্যাক্সেস পেতে ব্যবহার করতে পারেন। এছাড়াও আপনি রাউটারস্টেস্টিংমডুলে রুটগুলি পাস করতে পারেন এবং রুটের অনুরোধকৃত পদ্ধতিগুলির জন্য গুপ্তচর তৈরি করতে পারেন।

উদাহরণস্বরূপ আমার উপাদানটিতে আমার রয়েছে:

ngOnInit() {
    if (this.route.snapshot.paramMap.get('id')) this.editMode()
    this.titleService.setTitle(`${this.pageTitle} | ${TAB_SUFFIX}`)
}

এবং আমার পরীক্ষায় আমার রয়েছে:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ProductLinePageComponent ],
      schemas: [NO_ERRORS_SCHEMA],
      imports: [
        RouterTestingModule.withRoutes([])
      ],
    })
    .compileComponents()
  }))

  beforeEach(() => {
    router = TestBed.get(Router)
    route = TestBed.get(ActivatedRoute)
  })

এবং পরে 'এটি' বিভাগে:

  it('should update', () => {
    const spyRoute = spyOn(route.snapshot.paramMap, 'get')
    spyRoute.and.returnValue('21')
    fixture = TestBed.createComponent(ProductLinePageComponent)
    component = fixture.componentInstance
    fixture.detectChanges()
    expect(component).toBeTruthy()
    expect(component.pageTitle).toBe('Edit Product Line')
    expect(component.formTitle).toBe('Edit Product Line')
    // here you can test the functionality which is triggered by the snapshot
  })

অনুরূপ ভাবে, আমি মনে করি আপনি পর্যবেক্ষণযোগ্য ফিরে আসা বা rxjs মার্বেল ব্যবহার করে জুঁইয়ের স্পাইঅনপ্রোপার্টি পদ্ধতির মাধ্যমে সরাসরি প্যারাম্যাপটি পরীক্ষা করতে পারেন। এটি কিছুটা সময় সাশ্রয় করতে পারে এবং এটির জন্য অতিরিক্ত মক ক্লাস বজায় রাখা প্রয়োজন হয় না। আশা করি এটি কার্যকর এবং এটি উপলব্ধি করে।

Question 5

এখানে আমি এটি সর্বনিম্ন কৌনিক 2.0 তে পরীক্ষা করেছি ...

import { ActivatedRoute, Data } from '@angular/router';

এবং সরবরাহকারী বিভাগে

{
  provide: ActivatedRoute,
  useValue: {
    data: {
      subscribe: (fn: (value: Data) => void) => fn({
        yourData: 'yolo'
      })
    }
  }
}

Question 6

কেবল অ্যাক্টিভেটেডরউটের একটি উপহাস যোগ করুন:

providers: [
  { provide: ActivatedRoute, useClass: MockActivatedRoute }
]

...

class MockActivatedRoute {
  // here you can add your mock objects, like snapshot or parent or whatever
  // example:
  parent = {
    snapshot: {data: {title: 'myTitle ' } },
    routeConfig: { children: { filter: () => {} } }
  };
}

Question 7

অ্যাঙ্গুলার> 5 এ কাজ করা কিছু লোকের জন্য, যদি পর্যবেক্ষণযোগ্য.ফ (); কাজ করছে না তখন তারা 'rxjs' থেকে আমদানি করে কেবল () এর ব্যবহার করতে পারে;

Question 8

একটি রাউটিং পাথের জন্য পরীক্ষার স্যুট তৈরি করার সময় একই ইস্যুতে ছড়িয়ে পড়ে:

{
   path: 'edit/:property/:someId',
   component: YourComponent,
   resolve: {
       yourResolvedValue: YourResolver
   }
}

উপাদানটিতে, আমি উত্তীর্ণ সম্পত্তিটি এইভাবে শুরু করেছি:

ngOnInit(): void {    
   this.property = this.activatedRoute.snapshot.params.property;
   ...
}

পরীক্ষা চালানোর সময়, আপনি যদি আপনার মক অ্যাক্টিভেটরউটে "ইউজারভ্যালু" তে কোনও সম্পত্তি মান পাস না করেন, তবে "ফিক্সার.ডেসটেক্ট চেঞ্জস ()" ব্যবহার করে পরিবর্তনগুলি সনাক্ত করার সময় আপনি অপরিজ্ঞাত হয়ে উঠবেন। এটি কারণ অ্যাক্টিভেটেডরউটের জন্য মক মানগুলিতে সম্পত্তি প্যারামগুলি নেই rop তারপরে, মক ইউজভ্যালুটির জন্য উপাদানগুলিতে 'this.property' আরম্ভ করার জন্য সেই সমস্ত প্যারামগুলি থাকা দরকার। আপনি এটি হিসাবে যুক্ত করতে পারেন:

  let fixture: ComponentFixture<YourComponent>;
  let component: YourComponent;
  let activatedRoute: ActivatedRoute; 

  beforeEach(done => {
        TestBed.configureTestingModule({
          declarations: [YourComponent],
          imports: [ YourImportedModules ],
          providers: [
            YourRequiredServices,
            {
              provide: ActivatedRoute,
              useValue: {
                snapshot: {
                  params: {
                    property: 'yourProperty',
                    someId: someId
                  },
                  data: {
                    yourResolvedValue: { data: mockResolvedData() }
                  }
                }
              }
            }
          ]
        })
          .compileComponents()
          .then(() => {
            fixture = TestBed.createComponent(YourComponent);
            component = fixture.debugElement.componentInstance;
            activatedRoute = TestBed.get(ActivatedRoute);
            fixture.detectChanges();
            done();
          });
      });

উদাহরণস্বরূপ আপনি পরীক্ষা শুরু করতে পারেন:

it('should ensure property param is yourProperty', async () => {
   expect(activatedRoute.snapshot.params.property).toEqual('yourProperty');
   ....
});

এখন, আসুন আমরা বলি যে আপনি একটি পৃথক সম্পত্তি মান পরীক্ষা করতে চান, তারপরে আপনি আপনার মক অ্যাক্টিভেটেডরউটটিকে আপডেট করতে পারেন:

  it('should ensure property param is newProperty', async () => {
    activatedRoute.snapshot.params.property = 'newProperty';
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.debugElement.componentInstance;
    activatedRoute = TestBed.get(ActivatedRoute);
    fixture.detectChanges();

    expect(activatedRoute.snapshot.params.property).toEqual('newProperty');
});

আশাকরি এটা সাহায্য করবে!

Question 9

পরীক্ষার শ্রেণিতে সরবরাহকারী হিসাবে যুক্ত করা হয়েছে:

{
  provide: ActivatedRoute,
  useValue: {
    paramMap: of({ get: v => { return { id: 123 }; } })
  } 
}