时间戳

首页 > 解决方案 > 测试排序功能时出现 Angular 测试问题

arrays - 测试排序功能时出现 Angular 测试问题

问题描述

我有一个排序函数，它接受一个字符串数组，然后使用这个数组按对象的第一个属性对对象数组进行排序。

排序功能按预期工作。组件拥有该函数，并且由于它只需要以某种方式排序，该函数不接受参数，因此它简单地使用作为组件属性的数组并对对象数组进行排序，该数组也是相同的属性零件。

IE：

order = ['a', 'b', 'c']
arrayToSort = [
{name: b, color: blue},
{name: c, color: green},
{name: a, color: orange}
]

这是问题的背景。我有一个角度测试来测试函数，运行它，然后期望数组匹配一个排序数组。似乎发生的事情是它要么没有得到排序，要么 Angular/Jasmine 在预期之前把它弄乱了。

我试过： Fixture.detectChanges(); fakeAsync 和里面运行的 tick() 和 flushMicrotasks() 甚至使用 setTimeout

我不确定发生了什么以及测试失败的原因。请参阅下面的失败测试的屏幕截图以及代码。

  describe('the setRingOrder method', () => {
    it(
      'should set the order of the rings correctly',
      waitForAsync(() => {
        const fakeRings: Array<RingModel> = [
          { name: 'adopt', color: '' },
          { name: 'trial', color: '' },
          { name: 'hold', color: '' },
          { name: 'asses', color: '' },
        ];
        const ringsInOrder: Array<RingModel> = [
          { name: 'adopt', color: '' },
          { name: 'asses', color: '' },
          { name: 'trial', color: '' },
          { name: 'hold', color: '' },
        ];
        component.rings = fakeRings;

        component.setRingOrder();

        expect(component.rings).toEqual(ringsInOrder);
      })
    );
  });

测试截图

为了更好地衡量，我也会展示排序功能，但请记住它在应用程序中按预期工作。

  setRingOrder(): void {
    this.ringOrder.forEach((ringForOrdering) => {
      this.rings.sort((a, b) => {
        if (a.name.toLowerCase() === ringForOrdering.toLowerCase()) {
          return -1;
        } else if (b.name.toLowerCase() === ringForOrdering.toLowerCase()) {
          return 1;
        }
        return 0;
      });
    });
  }

编辑：只想声明我在谷歌上搜索了各种帮助，但没有任何回复与我的问题完全匹配......

标签： arraysangularsortingtestingjasmine

解决方案

由于这里的问题，测试wsas的类型像这样改变

describe('the setRingOrder method', () => {
    it(
      'should set the order of the rings correctly',
      waitForAsync(() => {
        const fakeRings: Array<RingModel> = [
          { name: 'adopt', color: '' },
          { name: 'trial', color: '' },
          { name: 'hold', color: '' },
          { name: 'asses', color: '' },
        ];
        component.rings = fakeRings;
        spyOn(component.rings, 'sort');

        component.setRingOrder();

        expect(component.rings.sort).toHaveBeenCalledTimes(
          component.rings.length
        );
      })
    );

推荐阅读