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

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

Spec:

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

Output:

ReferenceError: userInfo is not defined

I have made it work by creating a method inside the component which will return userInfo global variable.

getuserInfo():any{
    return userInfo;
}

And mocking that method in spec:

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

Is it not possible to mock such global variables without having to encapsulate it within methods and then mocking the method instead of variable? I would like to keep the application code untouched when written by somebody else.

Answer 1

You can't access any variables of any other files. You can't mock imports either. Your best friend is DI, as you can provide mock class in place of original for testing.

You will have to mock the service that provides the data, not having the data in a separate file. The only way would be to export JSON, or object and use the exported object.

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

And implement the stub as this.

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

Note:

If you are dealing with mocking HTTP calls use HttpTestingController .