角度操纵内部测试服务值

Question

我试图在测试中操作服务返回值，并将该值附加到components字段。

因此，我在myService中模拟Test1，并将其值操作为true，以便它始终返回true。通过调用fixture.detectChanges();，我在PageComponent中调用this.myService.getProperty('param');，它应该返回true并使myField的值也是true。但事实并非如此，这个字段的值仍然是false。当然，Test1失败了。

我不知道发生了什么。为什么我可以在测试中定义返回值true，并据此使组件值？

测试

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { anything, instance, mock, reset, verify, when } from 'ts-mockito';
import { MyService } from '../services/myservice.service';

describe('Test', () => {
    let component: PageComponent;
    let fixture: ComponentFixture<PageComponent>;
    let myServiceMock: myService = mock(MyService);

    describe('PageComponent', () => {
        beforeEach(() => {
            TestBed.configureTestingModule({
                imports: [],
                declarations: [PageComponent],
                schemas: [NO_ERRORS_SCHEMA],
                providers: [
                    { provide: myService, useValue: instance(myServiceMock) },
                ]
            }).compileComponents();

            fixture = TestBed.createComponent(PageComponent);
            component = fixture.componentInstance;
            fixture.detectChanges();
        });

        afterEach(() => {
            reset(myServiceMock);
        });

        it('Test1 - property should be true', () => {
            when(myServiceMock.getProperty(anything())).thenReturn(true);
            fixture.detectChanges();
            verify(myServiceMock.getProperty(anything())).once();
            expect(component.isCountryInfoVisible).toBeTrue();
            // Test Failed
            // Expected value to be true:
            //  true
            // Received:
            //  false
        });
    });
});

PageComponent

export class PageComponent implements OnInit {
    myField: boolean;

    constructor(private myService: MyService) {}

    ngOnInit(): void {
        this.myField = this.myService.getProperty('param');
    }
}

MyService

@Injectable()
export class MyService {

    private properties: Map<string, string> = new Map<string, string>();

    constructor() { }

    public getProperty(key: string): string {
        return this.properties.get(key);
    }

    ....
}

Answer 1

多亏@Estus烧瓶，我才知道发生了什么；

我的服务调用在ngOnInit中，它已经被第一个fixture.detectChanges();调用了。在这种情况下，第二个fixture.detectChanges();根本没有任何效果，因为它再也不会被调用。

解决方案:将when(myServiceMock.getProperty(anything())).thenReturn(true);移动到第一个fixture.detectChanges();上方，如下所示：

fixture = TestBed.createComponent(PageComponent);
component = fixture.componentInstance;

when(myServiceMock.getProperty(anything())).thenReturn(true);

fixture.detectChanges();