कैसे एक इकाई परीक्षण करने के लिए एक घटक है कि ActivatedRoute से मापदंडों पर निर्भर करता है?

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+ में RouterTestingModule है, जिसका उपयोग आप घटक के ActivatedRoute या Router तक पहुँचने के लिए कर सकते हैं। इसके अलावा, आप रूट रूटरिंगमॉडल को मार्ग पास कर सकते हैं और मार्ग के अनुरोधित तरीकों के लिए जासूस बना सकते हैं।

मेरे घटक में उदाहरण के लिए मेरे पास है:

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

बस ActivatedRoute का मज़ाक जोड़ें:

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

Angular> 5 पर काम करने वाले कुछ लोगों के लिए, यदि Observable.of (); काम नहीं कर रहा है तो वे 'rxjs' से {} का आयात करके () का उपयोग कर सकते हैं;

Question 8

राउटिंग पाथ के लिए टेस्ट सूट बनाते समय इसी मुद्दे में भागे:

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

घटक में, मैंने उत्तीर्ण संपत्ति को निम्न के रूप में देखा:

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

परीक्षण चलाते समय, यदि आप अपने मॉक एक्टीवेटआउट "यूटील्यूव" में कोई प्रॉपर्टी वैल्यू पास नहीं करते हैं, तो "फिक्सचरटेटचेंजेज ()" का उपयोग करते हुए परिवर्तनों का पता लगाने पर आप अपरिभाषित हो जाएंगे। ऐसा इसलिए है क्योंकि ActivatedRoute के लिए नकली मानों में संपत्ति params.property शामिल नहीं है। फिर, यह घटक में '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 }; } })
  } 
}