我应该为这个 Angular 组件编写哪些测试？

Question

sms-plugin.component.ts:

export class SmsPluginComponent implements OnInit {

  smsFiles:string[];
  smsFileName: string;
  data: string[];

  constructor(private router: Router,
    private httpClientService:HttpClientService,
    private matRadioButton:MatRadioModule,
    private sharedService: SharedServiceService) { }

    ngOnInit() {this.httpClientService.getSmsFiles().subscribe(
      response =>this.handleSuccessfulResponseSmsFiles(response),
     );
    }

    handleSuccessfulResponseSmsFiles(response)
    {   
        this.smsFiles=response;
    }

    storeFileData(event: MatRadioChange){
      this.smsFileName = event.value
      this.httpClientService.getFileData(this.smsFileName).subscribe(
        response =>this.handleSuccessfulResponseSmsFile(response),
       );
    }

    handleSuccessfulResponseSmsFile(response)
    {   
        this.data=response;
        this.data["filename"]=this.smsFileName
        this.sharedService.setUserData(this.data);
    }
}

sms-plugin.component.html:

<label id="smsfile-radio-group-label">Select file to view/edit:     </label>
<mat-radio-group [(ngModel)]="smsFileName" aria-labelledby="smsfile-radio-group-label" class="smsfile-radio-group" >
  <mat-radio-button class="smsfile-radio-button" *ngFor="let sms of smsFiles"
   [value]="sms['filename']" (change)="storeFileData($event)" >
  {{sms["filename"]}}
  </mat-radio-button>
</mat-radio-group>
<a routerLink="/display-view" class="button">Display</a>
<div>Selected file is: {{smsFileName}}</div> 

I can't find any information on how should I test mat-radio or the functions in TS. No intuitions, whatsoever. Could anybody guide me through, where to start.

Answer 1

Well, it totally depends on you what all test cases you want to include.

Always make sure you are covering all the branches,statements in your component. You will get this report using

ng test --code-coverage=true

Now coming to your question, first you need to implement
    * Error Handling
    * Unsubscribing all the subscribed observables. 

You can write tests for the following :

    1. OnInit, whether you are receiving legit data from service (use mock/spies) 

    2. Get a hold of the radio button and check whether change event is getting triggered properly

    3. Use the following to achieve '2'

    let element = fixture.debugElement.query(By.css('selector').nativeElement as 
    HTMLElement;
    element.dispatchEvent(new Event('change'));
    fixture.detectChanges();
    expect(...).toEqual(..);

    4. In the same way as implemented in '2', you can also get hold of the button.

    5. Trigger its click event just by using the following.

element.click();

    6. Basically here you will need to test whether router navigation is happening as expected

    7. Now test '1' by sending error response from you mock and test whether error is getting handled properly

    8. Mimic the OnDestroy hook, using the following and test whether subscriptions are getting un-subscribed correctly.

fixture.destroy();

These are the basic tests which we can done for this component,please note this is not the end. You can write many more test cases depending on our component.