CODEWITHSUNDEEP
arraysangularsortingtestingjasmine
DavidG
DavidG

Reputation: 11

Issue with Angular testing while testing a sort function

I have a sort function which takes an array of strings and then sorts an array of objects by their first property using this array.

The sort function works as intended. The component owns the function and since it needs to only be sorted a certain way the function doesn't take arguments, it simple uses the array which is a property of the component and sorts the array of objects which is also a property of that same component.

IE:

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

This is background for the issue. I have an angular test which tests the function, runs it and then expects the array to match a sorted array. What seems to happen is it either doesn't get sorted or Angular/Jasmine jumbles it before the expect.

I've tried: Fixture.detectChanges(); fakeAsync and inside that running tick() and flushMicrotasks() Even using setTimeout

I'm not sure what is happening and why the test is failing. See below for a screenshot of the failed test and also the code.

  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);
      })
    );
  });

Test Screenshot

For good measure I'll show the sort function too, but keep in mind it works as intended in the app.

  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;
      });
    });
  }

Edit: Just want to state I googled for various help and nothing that came back quite matched my issue...

Upvotes: 1

Views: 3020

Answers (2)

DavidG
DavidG

Reputation: 11

Due to the issue here the type of test wsas changed like so

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
        );
      })
    );

Upvotes: 0

Apoorva Chikara
Apoorva Chikara

Reputation: 8773

You just want to test the functioning of setRingOrder which is isolated in the component. You can create the instance of that component and assign the property exist in it and then you can run the function. You know the input given and the expected output which can help you to test it.

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: '' },
        ];

        const component: ComponentType = new ComponentName();
        component.rings = fakeRings;
        // component.ringsInOrder set this too.
        component.setRingOrder();
        expect(component.rings).toEqual(ringsInOrder);
      })
    );
  });

If you need more information, you can check on this post.

Upvotes: 1

Related Questions