Angular How to update mock data in different unit tests

Question

    describe('landing component', () => {
        beforeEach(() => {
            mockAccountService = new Mock<AccountService>({
                getSelectedContractAccountNumber: () => {
                    return testAccountNumber;
                }
            });

            myGraphDto = <any>{
                accountsById: {
                    [testAccountNumber]: {
                        flybuys: {
                            cardNumber: testFlybuysCardNumber,
                            confirmationStatus: 'PendingConfirmation'
                        },
                        contracts: {
                            [0]: {
                                isResidentialCustomer: true
                            }
                        }
                    }
                }
            };

            mockGraphService = new Mock<GraphService>({
                getData: () => {
                    return of(myGraphDto);
                }
            });

            TestBed.configureTestingModule({
                providers: [
                    { provide: IAccountServiceMA, useValue: mockAccountService.Object },
                    { provide: GraphService, useValue: mockGraphService.Object }
                ],
                imports: [myModule, RouterTestingModule.withRoutes([])]
            });

            fixture = TestBed.createComponent(LandingComponent);
            myComponent = fixture.componentInstance;
            router = TestBed.get(Router);
            spyOn(router, 'navigate');
            fixture.detectChanges();
        });

        it('should display $1 for residential customers', (done: DoneFn) => {

            myComponent.isResidentialCustomer();
            const price = fixture.nativeElement.querySelector('.landing-price');
            fixture.detectChanges();
            expect(price.textContent).toBe('$1');
            done();
        });

        it('should display $4 for SME', (done: DoneFn) => {
            // How do I update the isResidentialCustomer to false here?
            const price = fixture.nativeElement.querySelector('.landing-price');
            console.log('-----------------------------price--------------------------------');
            console.log(price);
            expect(price.textContent).toBe('$4');
            done();
        });

How do I update the isResidentialCustomer to false in the 2nd unit test?

satanTime · Answer 1 · 2020-05-06T07:24:25.860

if myGraphDto is visible in the it simply do next

myGraphDto.accountsById[testAccountNumber].contracts[0].isResidentialCustomer = true;
fixture.detectChanges();

if you use OnPush, then simply use myGraphDto.accountsById = JSON.parse(JSON.stringify(myGraphDto.accountsById)) to shake all nodes of the object.

If it's not enough create a BehaviorSubject which is visible in the describe block and use it

behaviorSubject = new BehaviorSubject(myGraphDto);
mockGraphService = new Mock<GraphService>({
            getData: behaviorSubject,

in the it you can do

behaviorSubject.next(updatedGraphDto);
fixture.detectChanges();

Otherwise you need to make any of its part visible to access the value in the test.

describe('landing component', () => {
  let contract: any; // add this

    beforeEach(() => {
        mockAccountService = new Mock<AccountService>({
            getSelectedContractAccountNumber: () => {
                return testAccountNumber;
            }
        });

  // add this
  contract = {
    isResidentialCustomer: true
  };

        myGraphDto = <any>{
            accountsById: {
                [testAccountNumber]: {
                    flybuys: {
                        cardNumber: testFlybuysCardNumber,
                        confirmationStatus: 'PendingConfirmation'
                    },
                    contracts: {
                        [0]: contract
                    }
                }
            }
        };

        mockGraphService = new Mock<GraphService>({
            getData: () => {
                return of(myGraphDto);
            }
        });

        TestBed.configureTestingModule({
            providers: [
                { provide: IAccountServiceMA, useValue: mockAccountService.Object },
                { provide: GraphService, useValue: mockGraphService.Object }
            ],
            imports: [myModule, RouterTestingModule.withRoutes([])]
        });

        fixture = TestBed.createComponent(LandingComponent);
        myComponent = fixture.componentInstance;
        router = TestBed.get(Router);
        spyOn(router, 'navigate');
        fixture.detectChanges();
    });

    it('should display $1 for residential customers', (done: DoneFn) => {

        myComponent.isResidentialCustomer();
        const price = fixture.nativeElement.querySelector('.landing-price');
        fixture.detectChanges();
        expect(price.textContent).toBe('$1');
        done();
    });

    it('should display $4 for SME', (done: DoneFn) => {
        // How do I update the isResidentialCustomer to false here?

// add this.
contract.isResidentialCustomer = false;
fixture.detectChanges();

        const price = fixture.nativeElement.querySelector('.landing-price');
        console.log('-----------------------------price--------------------------------');
        console.log(price);
        expect(price.textContent).toBe('$4');
        done();
    });

thanks satan, I have myGraphDto available inside it(), haven't tried it. I have added to use useFactory in testbed. — Franva, May 07 '20 at 03:46
`useValue` is the right way to mock providers. Would be great if you could share your component code how it gets providers and uses them in its template - then I can provide you an example of a test for it. — satanTime, May 07 '20 at 07:20
sure, it's a commercial project, I am not allowed to share the code. I will modify it and share it Monday. thanks for your help. — Franva, May 09 '20 at 01:27

score -1 · Accepted Answer · answered May 07 '20 at 03:43

I figured it out by using ngFactory and .extend() method

Here is what I changed:

 it('should display $4 for SME', () => {
        myGraphDto = <any>{
            accountsById: {
                [testAccountNumber]: {
                    flybuys: {
                        cardNumber: testFlybuysCardNumber,
                        confirmationStatus: 'PendingConfirmation'
                    },
                    contracts: {
                        [0]: {
                            isResidentialCustomer: false
                        }
                    }
                }
            }
        };
        mockGraphService.extend({ getData: () => of(myGraphDto) });
        fixture.detectChanges();

        expect(fixture.nativeElement.querySelector('.landing__price').textContent).toBe('$4');
    });

Also, change the Testbed to useFactory instead of useValue

 { provide: GraphService, useFactory: () => mockGraphService.Object },

Don't forget to use fixture.detectChanges() within it(), do not use fixture.detectChanges() within beforeEach() after the Testbed, that cause errors for me.

Angular How to update mock data in different unit tests

2 Answers2