如何模拟另一个文件中定义的全局变量？

Question

mockData.js

var userInfo = {
    URLs: {
        AppURL: "A" 
    },
    EncryptedBPC: "B"
};

karma.config.js

config.set({
    basePath: '',
    files:['mockData.js' ],
    .....

ComponentDetailsComponent：

.....some imports
import { ComponentDetailsService } from '../component-details.service';
declare var userInfo: any;
@Component({
    .....more code

    rfxFilter() {     
        return userInfo.URLs.AppURL;
    }
}

规格：

describe('ComponentDetailsComponent', () => {
    let subject:any;
    let fixture: ComponentFixture<ComponentDetailsComponent>; 

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [ ComponentDetailsComponent ],
            providers: [{ provide: ComponentDetailsService, useClass: 
            ComponentDetailsServiceStub }],
        });
        fixture = TestBed.createComponent(ComponentDetailsComponent);
        subject = fixture.componentInstance;          
    });

    it('should return X', () => {
        subject.userInfo = {
            URLs: {
                AppURL: "X"
            },
            EncryptedBPC: "Y"
        };
        let result = subject.rfxFilter();
        expect(result).toBe("X");
    });   
});

输出：

ReferenceError: userInfo 未定义

我通过在组件内创建一个返回 userInfo 全局变量的方法使其工作。

getuserInfo():any{
    return userInfo;
}

并在规范中模拟该方法：

let m = {
    URLs: {
        AppURL: "mockvalueAppURL",
    },
    EncryptedBPC: "mockEncryptedBPC",
};
let spy = spyOn(subject, 'getuserInfo').and.returnValue(m);

是否可以模拟这样的全局变量而不必将其封装在方法中，然后模拟方法而不是变量？我希望在由其他人编写时保持应用程序代码不变。

Answer 1

您无法访问任何其他文件的任何变量。你也不能模拟进口。您最好的朋友是 DI，因为您可以提供模拟类代替原始类进行测试。

您必须模拟提供数据的服务，而不是将数据放在单独的文件中。唯一的方法是导出 JSON 或对象并使用导出的对象。

TestBed.configureTestingModule({
    imports: [
    ],
    declarations: [
        ComponentDetailsComponent,
    ],
    providers: [
        {
            provide: RealService,
            useExisting: StubService,
        },
    ],
}).compileComponents();

并像这样实现存根。

class StubService implements Partial<RealService> {
    getuserInfo() {
        return { ...mockedData };
    }
}

注意：

如果您正在处理模拟 HTTP 调用，请使用 HttpTestingController。