TypeError：angular2のユニットテストを実行中に未定義のプロパティ 'snapshot'を読み取ることができません

Question

ユニットテストを実行するときに角度2を使用してユニットテストを行っています。ここで

ReadMailComponent should create 
TypeError: Cannot read property 'snapshot' of undefined 
TypeError: Cannot read property 'snapshot' of undefined 
    at ReadMailComponent.getCommentId (webpack:///D:/Zool-Projects/mindspark/src/app/modules/my-mindspark/components/read-mail/read-mail.component.ts?:48:27) 
    at ReadMailT1Component.ReadMailT2Component.ngOnInit (webpack:///D:/Zool-Projects/mindspark/src/app/shared/components/my-mindspark/read-mail/read-mail-t2/read-mail-t2.component.ts?:34:49) 
    at checkAndUpdateDirectiveInline (webpack:///D:/Zool-Projects/mindspark/node_modules/@angular/core/@angular/core.es5.js?:11043:19) 
    at checkAndUpdateNodeInline (webpack:///D:/Zool-Projects/mindspark/node_modules/@angular/core/@angular/core.es5.js?:12541:20) 
    at checkAndUpdateNode (webpack:///D:/Zool-Projects/mindspark/node_modules/@angular/core/@angular/core.es5.js?:12484:16) 
    at debugCheckAndUpdateNode (webpack:///D:/Zool-Projects/mindspark/node_modules/@angular/core/@angular/core.es5.js?:13341:59) 
    at debugCheckDirectivesFn (webpack:///D:/Zool-Projects/mindspark/node_modules/@angular/core/@angular/core.es5.js?:13282:13) 
    at Object.eval [as updateDirectives] (ng:///DynamicTestModule/ReadMailComponent.ngfactory.js:16:5) 
    at Object.debugUpdateDirectives [as updateDirectives] (webpack:///D:/Zool-Projects/mindspark/node_modules/@angular/core/@angular/core.es5.js?:13267:21) 
    at checkAndUpdateView (webpack:///D:/Zool-Projects/mindspark/node_modules/@angular/core/@angular/core.es5.js?:12451:14) 

Here is readmail.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 
import { By } from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 
import { ReadMailComponent } from './read-mail.component'; 
import { ReadMailT1Component } from '../../../../shared/components/my- 
mindspark/read-mail/read-mail-t1/read-mail-t1.component'; 
import { ReadMailT2Component } from '../../../../shared/components/my-mindspark/read-mail/read-mail-t2/read-mail-t2.component'; 
import { ShortenPipe } from 'ngx-pipes/src/app/pipes/string/shorten'; 
import { NgbModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'; 
import { MomentModule } from 'angular2-moment/moment.module'; 
import { SanitizeCodePipe } from '../../../../shared/pipes/sanitize/sanitizeCode.pipe'; 
import { GetFileNamePipe } from '../../../../shared/pipes/getFileName/getFileName.pipe'; 
import { ReactiveFormsModule } from '@angular/forms'; 
import { TranslateService, TranslateModule } from 'ng2-translate'; 
import { RouterTestingModule } from '@angular/router/testing'; 
import { CommentModalService } from '../../../../shared/components/comments/comment-modal/comment-modal.service'; 
import { HttpClientModule, HttpClient } from '@angular/common/http'; 
import { SharedService } from '../../../../shared/shared.service'; 
import { MailboxService } from '../mailbox/mailbox.service'; 
import { ContentService } from '../../../../shared/services/content/content.service'; 
import { ActivatedRoute, ActivatedRouteSnapshot } from '@angular/router'; 

describe('ReadMailComponent',() => { 
    let component: ReadMailComponent; 
    let fixture: ComponentFixture<ReadMailComponent>; 
    let activatedRoute: ActivatedRouteSnapshot; 
    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ReadMailComponent, ReadMailT1Component, ReadMailT2Component, ShortenPipe, SanitizeCodePipe, GetFileNamePipe], 
     imports: [TranslateModule.forRoot(), NgbModule.forRoot(), MomentModule, ReactiveFormsModule, RouterTestingModule, HttpClientModule], 
     providers: [TranslateService, CommentModalService, SharedService, MailboxService, ContentService, { provide: ActivatedRoute, useValue: activatedRoute }] 
    }) 
     .compileComponents(); 
    })); 

    beforeEach(() => { 
    fixture = TestBed.createComponent(ReadMailComponent); 
    component = fixture.componentInstance; 
    fixture.detectChanges(); 
    }); 

    it('should create',() => { 
    expect(component).toBeTruthy(); 
    }); 
}); 

私readmail.component.tsファイル

import { Component, OnInit, ViewChild } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 
import { CommentModalService } from '../../../../shared/components/comments/comment-modal/comment-modal.service'; 
import { SharedService } from '../../../../shared/shared.service'; 
import { ContentService } from '../../../../shared/services/content/content.service'; 
import { MailboxService } from '../mailbox/mailbox.service'; 
import { AppSettings } from '../../../../settings/app.settings'; 
import * as _ from 'lodash'; 

@Component({ 
    selector: 'ms-read-mail', 
    templateUrl: './read-mail.component.html', 
    styleUrls: ['./read-mail.component.scss'] 
}) 
export class ReadMailComponent implements OnInit { 
    template: string; 
    readmail: any; 
    errorInfo: any; 

    constructor(private route: ActivatedRoute, private commentModalService: CommentModalService, private mailBoxService: MailboxService, 
    private sharedService: SharedService, private contentService: ContentService) { 
    this.sharedService.setSiteTitle('ReadMail'); 
    this.contentService.getTemplate().subscribe(
     result => { 
     this.template = this.contentService.getTemplateId(result); 
     }, 
     responseError => this.errorInfo = responseError 
    ); 
    } 

    ngOnInit() { } 

    getMessageTrailData(messageID) { 
    /* check if messaege id not empty, else show error in an alert and return to mailbox */ 
    this.sharedService.showLoader(); 
    this.mailBoxService.getMessageTrailData(messageID).subscribe(
     result => { 
     const status = this.contentService.validateResponse(result, messageID); 
     if (status === 'success') { 
      this.readmail = result; 
      this.contentService.setTemplate(result); 
      this.contentService.setBasicData(result); 
     } 
     this.sharedService.hideLoader(); 
     }, 
     responseError => this.errorInfo = this.sharedService.handleResponseError(responseError) 
    ); 
    } 

    getCommentId() { 
    return this.route.snapshot.url[1].path; 
    } 

    showQuestion(showQue) { 
    return (showQue === 'SHOW') ? 'HIDE' : 'SHOW'; 
    } 

    updateSelectedFiles(attachFile) { 
    const files = []; 
    if (attachFile) { 
     const file = attachFile.nativeElement; 
     if (file.files && file.files[0]) { 
     const uploadFile = file.files; 
     for (let i = 0; i < uploadFile.length; i++) { 
      const thisFile = uploadFile[i]; 
      files.push({ filename: thisFile.name }); 
     } 
     } 
    } 
    return files; 
    } 

    removeFile(attachFile) { 
    if (attachFile) { 
     attachFile.nativeElement.value = ''; 
    } 
    return []; 
    } 

    saveCommentRating(rating, commentId) { 
    this.sharedService.showLoader(); 
    const data = { 
     'rating': rating, 
     'commentID': commentId 
    }; 
    this.mailBoxService.saveRating(data).subscribe(
     result => { 
     const status = this.contentService.validateResponse(result, data); 
     if (status === 'success') { 
      console.log('Rating updated.'); 
     } 
     this.sharedService.hideLoader(); 
     }, 
     responseError => this.errorInfo = this.sharedService.handleResponseError(responseError) 
    ); 
    } 

    replyToMessage(replyMessage, messageID, attachFile) { 
    this.sharedService.showLoader(); 
    let uploadFileError = ''; 
    let uploadFileState = ''; 
    const maxFileUpload = AppSettings.MAX_IMAGE_SIZE; 
    const formData = new FormData(); 
    if (attachFile) { 
     const file = attachFile.nativeElement; 
     if (file.files && file.files[0]) { 
     const uploadFile = file.files; 
     for (let i = 0; i < uploadFile.length; i++) { 
      const thisFile = uploadFile[i]; 
      if (thisFile.type.indexOf('image') !== 0) { 
      uploadFileState = 'invalidType'; 
      } else { 
      const fileSize = thisFile.size/1024; 
      if (fileSize > maxFileUpload * 1024) { 
       uploadFileState = 'fileSize'; 
      } 
      } 
     } 
     if (uploadFileState === '') { 
      for (let i = 0; i < uploadFile.length; i++) { 
      formData.append('attachments[]', uploadFile[i]); 
      } 
     } else if (uploadFileState === 'invalidType') { 
      const acceptedTypes = AppSettings.IMAGE_FORMAT.join(' or '); 
      uploadFileError = 'Upload only files of type ' + acceptedTypes + '.'; 
     } else if (uploadFileState === 'fileSize') { 
      uploadFileError = 'File size should not be greater than ' + maxFileUpload + 'MB.'; 
     } 
     if (uploadFileError !== '') { 
      setTimeout(() => uploadFileError = '', 3000); 
     } 
     } else { 
     console.log('No file selected.'); 
     } 
    } 
    if (uploadFileState === '') { 
     formData.append('replyBody', replyMessage.value.replyBody); 
     formData.append('messageID', messageID); 

     this.commentModalService.replyToMessage(formData).subscribe(
     result => { 
      const status = this.contentService.validateResponse(result, {}); 
      if (status === 'success') { 
      this.getMessageTrailData(messageID); 
      } 
      this.sharedService.hideLoader(); 
     }, 
     responseError => this.errorInfo = this.sharedService.handleResponseError(responseError) 
    ); 
     return { result: 'success', message: '' }; 
    } else { 
     this.sharedService.hideLoader(); 
     return { result: 'error', message: uploadFileError }; 
    } 
    } 

    open(imageBoxModal, fileName) { 
    this.sharedService.open(imageBoxModal); 
    return fileName; 
    } 

    disableSend(replyMessage) { 
    return replyMessage.invalid; 
    } 

} 

ここでは私のreadmail.component.htmlファイルが

<ng-container [ngSwitch]="template"> 
    <ng-container *ngSwitchCase="'1'"> 
    <ms-read-mail-t1 [readMail]="readmail"></ms-read-mail-t1> 
    </ng-container> 
    <ng-container *ngSwitchCase="'2'"> 
    <ms-read-mail-t2 [readMail]="readmail"></ms-read-mail-t2> 
    </ng-container> 
    <ng-container *ngSwitchDefault> 
    <ms-read-mail-t1 [readMail]="readmail"></ms-read-mail-t1> 
    </ng-container> 
</ng-container> 

です

私はエラーがurl [1] .pathから来ていると思います。というのも、パスが定義されていないということは、URLがエラーの原因であることを示しているからです。

私はあらゆる種類の例を試しましたが、私のために働いてくれませんでした。私を助けてください。事前

Answer 1

I found the solution after some R&D and the answer is that you have to provide url of snapshot in useValue of provide ActivatedRoute and here is the code

{ 
     provide: ActivatedRoute, 
     useValue: 
      { 
       snapshot: 
       { 
       url: [{ path: 1 }, { path: 2 }] 
       } 
      } 
    }