Angular Как обновить фиктивные данные в разных юнит-тестах - PullRequest
Новая
       78

Angular Как обновить фиктивные данные в разных юнит-тестах

0 голосов
/ 06 мая 2020 
    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();
        });

Как мне обновить isResidentialCustomer до false во втором модульном тесте?

Ответы [ 2 ]

0 голосов
/ 07 мая 2020

Я понял это с помощью методов ngFactory и .extend ()

Вот что я изменил: 

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

Кроме того, измените Testbed на useFactory вместо useValue 

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

Не забывайте использовать fixture.detectChanges () внутри it (), не используйте fixture.detectChanges () внутри beforeEach () после Testbed, это вызывает у меня ошибки.

0 голосов
/ 06 мая 2020

если myGraphDto виден в it, просто сделайте следующий 

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

, если вы используете OnPush, тогда просто используйте myGraphDto.accountsById = JSON.parse(JSON.stringify(myGraphDto.accountsById)), чтобы встряхнуть все узлы объекта.

Если этого недостаточно, создайте BehaviorSubject, который виден в блоке describe, и используйте его 

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

в it, вы можете сделать 

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

В противном случае вам нужно сделать любую его часть видимой, чтобы получить доступ к значению в тесте. 

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