Angular4单元测试：window.location.href跳转外部链接失效求助

我太懂这种情况了——功能跑起来完全正常，但单元测试就是卡在window.location.href的mock上，之前试了间接函数还是没解决？别慌，这是因为原生window对象在测试环境（比如Jasmine/Karma）里本来就很难直接mock，得换个依赖抽象的思路来解决。

核心逻辑是：不要让组件直接依赖全局的window对象，而是把浏览器的location操作封装成一个可注入的服务，这样测试时就能轻松替换成mock版本。

1. 封装一个Window服务来代理原生操作 #

先写一个简单的服务，把所有和window.location相关的操作都包进去：

// window.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class WindowService {
  // 暴露location对象，方便获取origin、pathname等属性
  get location(): Location {
    return window.location;
  }

  // 封装跳转操作
  redirectTo(href: string): void {
    window.location.href = href;
  }
}

2. 改造组件，用服务替换直接调用window的代码 #

把你组件里原本直接操作window的地方，换成调用这个服务：

// 你的component.ts
import { Component } from '@angular/core';
import { WindowService } from './window.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  constructor(private windowService: WindowService) {}

  doRedirect(hreflink: string) {
    // 替换成服务的跳转方法
    this.windowService.redirectTo(hreflink);
  }

  logOut() {
    // 用服务获取location信息，不再直接用window.location
    const hrefUrl = this.windowService.location.origin + this.windowService.location.pathname;
    // 你的其他退出逻辑...
    // 最后调用跳转
    this.doRedirect('你的外部退出链接');
  }
}

3. 单元测试中Mock这个Window服务 #

现在测试时，你可以完全控制这个服务的行为，再也不用跟原生window较劲了：

// your-component.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { YourComponent } from './your-component.component';
import { WindowService } from './window.service';

describe('YourComponent', () => {
  let component: YourComponent;
  let fixture: ComponentFixture<YourComponent>;
  // 声明mock服务的spy对象
  let mockWindowService: jasmine.SpyObj<WindowService>;

  beforeEach(async () => {
    // 创建mock服务：指定要spy的方法，以及模拟的location属性
    mockWindowService = jasmine.createSpyObj('WindowService', ['redirectTo'], {
      location: { origin: 'http://test-dev', pathname: '/test-page' }
    });

    await TestBed.configureTestingModule({
      declarations: [YourComponent],
      providers: [
        // 用mock服务替换真实的WindowService
        { provide: WindowService, useValue: mockWindowService }
      ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should trigger redirect to external link when logOut is called', () => {
    const expectedExternalUrl = 'https://your-external-logout-url.com';
    // 调用退出方法
    component.logOut();

    // 验证跳转方法被正确调用
    expect(mockWindowService.redirectTo).toHaveBeenCalledWith(expectedExternalUrl);
    // 也可以验证location属性的读取是否符合预期
    expect(mockWindowService.location.origin).toBe('http://test-dev');
  });
});

为什么之前的间接函数没用？ #

如果之前你只是把window.location.href的调用放到组件内的另一个函数里，本质上还是让组件直接依赖全局的window对象——而测试环境无法直接mock这个原生全局对象的属性（比如href是只读的）。通过服务抽象，我们把对浏览器原生API的依赖转移到了一个可注入的服务上，这才是Angular测试中处理全局依赖的标准做法。

如果不想单独创建服务，也可以用注入全局Window的方式应急，但这种方式不如服务抽象优雅，这里就不展开了。

内容的提问来源于stack exchange，提问作者C. T.