Angular：自定义管道的测试用例答案

【问题标题】：Angular: TestCase For Custom PipeAngular：自定义管道的测试用例
【发布时间】：2021-07-09 12:43:53
【问题描述】：

我是单元测试的新手，我需要帮助在 karma 中为 Sort Pipe 编写 TestCase。我的自定义排序管道正在调用基于DirectionValue的方法，其中排序的逻辑是。

@Pipe({
  name: 'sortBy'
})
export class SortByPipe implements PipeTransform {
transform(value[], direction:string){

    if (direction === 'desc'){
      this.descendingSort(value);
    }
    else if(direction === 'asc'){
      this.ascendingSort(value);
    }
    return value;
  }

第一种情况：想检查是否是基于方向值的Calling right Method。

第二种情况：检查排序结果。

我试图为第二种情况写这样的东西。

    const direction = 'asc';
    const pipe = new SortByPipe();
    const result = pipe.transform([4,3,2,1], direction);
    expect(result).toBe([1,2,3,4]);

请帮助我了解如何解决它。提前致谢

【问题讨论】：

有什么错误？
最初是Expected [ 4, 3, 2, 1 ] to be [ 1, 2, 3, 4 ]. Tip: To check for deep equality, use .toEqual() instead of .toBe(). 这个Expected [ 4, 3, 2, 1 ] to be [ 1, 2, 3, 4 ]. Tip: To check for deep equality, use .toEqual() instead of .toBe(). 而不是我将toBe 更改为toEqual 然后它给出了以下错误，这是显而易见的。 Error: Expected $[0] = 4 to equal 1. Expected $[1] = 3 to equal 2. Expected $[2] = 2 to equal 3. Expected $[3] = 1 to equal 4

标签： angular karma-jasmine angular-unit-test

【解决方案1】：

我认为这个问题有两个答案：

检查调用的方法

您可以使用 Jasmine Spies (https://jasmine.github.io/api/edge/Spy.html) 在 Jasmine 中进行所谓的间谍活动。这使您可以像点击某个方法并对其进行修改，例如返回一个模拟值等。它还可以跟踪该方法被调用的次数：

const direction = 'asc';
const pipe = new SortByPipe();
spyOn(pipe, 'ascendingSort')

const result = pipe.transform([4,3,2,1], direction);

expect(result).toBe([1,2,3,4]);
expect(pipe.ascendingSort).toHaveBeenCalledTimes(1);

不关心函数的内部工作原理，只关心输入和输出

升序和降序函数是转换函数实现的一部分（如果没有在其他地方使用），因此函数内部发生的事情并不重要。重要的是输入和预期输出是什么。因此，要测试这样的案例，您只需测试两个用例：

it('should sort in ascending order', () => {
    const pipe = new SortByPipe();
    const result = pipe.transform([4,3,2,1], 'desc');

    expect(result).toBe([1,2,3,4]);
})
  
it('should sort in descending order', () => {
    const pipe = new SortByPipe();
    const result = pipe.transform([1,2,3,4], 'asc');

    expect(result).toBe([4,3,2,1]);
})

你真的不在乎测试中发生了什么。如果您决定在转换函数中从两个函数更改为一个函数，例如this.sort(value, direction)，您不想修复您的测试。但是，如果您仍然认为应该测试内部功能，这是一个很好的指标，您的功能正在做太多事情。因此，在这种情况下，将其分解为更小的函数并为这些函数编写单独的测试以保持测试隔离。

【讨论】：

我尝试了 SpyMethod 和您建议的第二种解决方案，但它也给出了与我在上面评论中描述的相同的错误。 Error: Expected [ 4, 3, 2, 1 ] to be [ 1, 2, 3, 4 ]. Tip: To check for deep equality, use .toEqual() instead of .toBe().
哦，只需使用 toEqual()。它们的作用是一样的，但 toBe 检查对象引用是否相同，并与字符串、数字和布尔值等原始类型一起使用，与 toEqual 相同。对于数组和对象，您可以使用 toEqual 来比较内容，但如果它们是完全相同的对象则不能
我不能这样做，因为它的不等于数组 toEqual() 将给出以下错误`错误：预期 $[0] = 4 等于 1。预期 $[1] = 3 等于 2 . 预期 $[2] = 2 等于 3. 预期 $[3] = 1 等于 4``
看来测试失败了对吧？现在仔细检查，我认为在测试中与 'desc' 和 'asc' 混淆了，所以这可能就是你收到错误的原因。

【解决方案2】：

您可以使用 SCURi 编写覆盖率高达 70% 的自动化单元测试

How to write unit test cases automatically using SCURI in angular 8 onwards

【讨论】：