使用 Karma/Jasmin 对 Angular 中的方法进行单元测试

Question

I have to test a method in Angular with Jasmine/Karma, but I always get the error message:

TypeError: undefined is not iterable (cannot read property Symbol (Symbol.iterator))

I constructed the method like this:

  myMethod(locs: MyCustomType1[], clocs: MyCustomType2[]) {
    clocs = clocs
      .filter(cl => cl !== null && cl.l_ids !== null);
    locs = locs
      .filter(l => l !== null && l.id !== null);

    clocs.forEach(
      cl => {
        cl['l_names'] = [];
        locs.forEach(
          l => {
            if (cl.l_ids.includes(l.id)) {
              clocs['l_names'].push(l.name);
            }
          }
        );
      }
    );
  }

My test currently looks like this:

  describe('#MyMethod', () => {
    beforeEach(() => {
      component.clocs = mockClocs;
      component.locs = mockLocs;
      component.myMethod(mockLocs, mockClocs);
    });
    describe('#myMethod)', () => {
      it('The clocs and locs array should by defined', () => {
        expect(component.clocs).toBeDefined();
        expect(component.locs).toBeDefined();
      });

      it('The clocs array should include "Location2" and "Location3" with the locationIds 2, 3', () => {
        expect(component.clocs[1]['l_names'].includes('Location2')).toBeTruthy();
        expect(component.clocs[1]['l_names'].includes('Location3')).toBeTruthy();
      });
    });
  });

The mentioned error message gets thrown for every expect() method in my it() statement. If I log the array I can see that they are defined with the needed values but the expect() method returns undefined. Hmm

What am I doing wrong?

Answer 1

You can use .toEqual()

      it('The clocs array should include "Location2" and "Location3" with the locationIds 2, 3', () => {
        expect(component.clocs).toEqual([{l_names: ['Location2', 'Location3']}]);
      });

Answer 2

I had to call ngOnChanges() within the beforeEach method since my arrays are filled within this lifecycle method. So I solved it like this:

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    component.clocs = mockClocs;
    component.locs = mockLocs;
    component.myMethod(mockLocs, mockClocs);
    component.ngOnChanges();
    fixture.detectChanges();
  });

I also removed the unneeded describe block.

Hope this answer helps. If you have any suggestions for improvements let me know :)