Angular 单元测试：如何使用 Jasmine-Karma 为 app.service.ts 编写单元测试用例答案

【问题标题】：Angular Unit Testing: How to write unit testcases for the app.service.ts using Jasmine-KarmaAngular 单元测试：如何使用 Jasmine-Karma 为 app.service.ts 编写单元测试用例
【发布时间】：2021-04-28 10:40:13
【问题描述】：

我想在given stackblitz 代码的app.service.ts 中为downloadFile() 和ConvertToCSV() 方法编写测试用例。请找到参考here

import { Injectable } from '@angular/core';


@Injectable()
export class AppService {

    downloadFile(data, filename='data') {
        let csvData = this.ConvertToCSV(data, ['name','age', 'average', 'approved', 'description']);
        console.log(csvData)
        let blob = new Blob(['\ufeff' + csvData], { type: 'text/csv;charset=utf-8;' });
        let dwldLink = document.createElement("a");
        let url = URL.createObjectURL(blob);
        let isSafariBrowser = navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1;
        if (isSafariBrowser) {  //if Safari open in new window to save file with random filename.
            dwldLink.setAttribute("target", "_blank");
        }
        dwldLink.setAttribute("href", url);
        dwldLink.setAttribute("download", filename + ".csv");
        dwldLink.style.visibility = "hidden";
        document.body.appendChild(dwldLink);
        dwldLink.click();
        document.body.removeChild(dwldLink);
    }

    ConvertToCSV(objArray, headerList) {
         let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
         let str = '';
         let row = 'S.No,';

         for (let index in headerList) {
             row += headerList[index] + ',';
         }
         row = row.slice(0, -1);
         str += row + '\r\n';
         for (let i = 0; i < array.length; i++) {
             let line = (i+1)+'';
             for (let index in headerList) {
                let head = headerList[index];

                 line += ',' + array[i][head];
             }
             str += line + '\r\n';
         }
         return str;
     }
}

我将在 app.component.html 中有一个 Export to CSV 按钮，点击该按钮时应执行 app 的 download() 方法。 component.ts 使用 AppService

的downloadFile()

app.component.ts

import { Component } from '@angular/core';
import { AppService } from './app.service';

@Component({
 ...
})
export class AppComponent  {

  constructor(private appService:AppService) {  }

    jsonData =  [
      ...
    ];

  download(){
    this.appService.downloadFile(this.jsonData, 'jsontocsv');
  }
}

【问题讨论】：

代码覆盖率需要90%以上
请将downloadFile()和ConvertToCSV()的代码贴在问题正文中
@MichaelRovinsky 已添加！

标签： angular unit-testing karma-jasmine

【解决方案1】：

这是 Jasmine 测试的示例：

it("Test ConvertToCSV", function() {     
  // arr: to be used as the objArray argument   
  const arr: any[] = [{a: 1, b: 2}, {a: 3, b: 4}];

  // header: to be used as the headerList argument
  const header: string[] = ['a', 'b'];

  // The expected CSV string
  const expected: string = 'S.No,a,b\n1,1,2\n2,3,4';

  // The actual result of ConvertToCSV
  const result: string = ConvertToCSV(arr, header);

  // Result must be equal to expected string
  expect(result).toEqual(expected);  
});

【讨论】：