Angular单元测试Mock document.location.href遇问题，求替代服务

问题分析 #

你当前的测试代码通过jasmine.createSpyObj创建的document spy仅模拟了location属性，完全替换了原document对象，导致querySelector等原生方法丢失，进而引发测试失败。Angular没有专门提供返回绝对路径的服务，但可以通过以下两种合理方式解决问题：

方案1：部分模拟DOCUMENT对象（不丢失原生方法） #

无需完全替换document，而是基于原始document对象，仅覆盖location.href属性，保留其他原生方法的可用性：

it('should return current URL when no URL provided and og:url meta tag does not exist', () => {
  const currentUrl: string = 'https://example.com/current';
  
  // 继承原始document的所有属性和方法，仅覆盖location.href
  const mockDocument = {
    ...document,
    location: { ...document.location, href: currentUrl }
  };

  TestBed.configureTestingModule({
    providers: [
      ShareService,
      { provide: DOCUMENT, useValue: mockDocument }
    ]
  });

  service = TestBed.inject(ShareService);

  expect((service as any).getComputedUrl('')).toEqual(currentUrl);
});

方案2：使用Angular的Location服务替代直接操作document #

如果可以修改ShareService，建议依赖注入Angular官方的Location服务（来自@angular/common）来获取当前URL，避免直接操作全局document，这样测试会更简洁可控：

第一步：修改ShareService

import { Injectable } from '@angular/core';
import { Location } from '@angular/common';

@Injectable()
export class ShareService {
  constructor(private location: Location) {}

  getComputedUrl(url: string): string {
    if (url) return url;
    // 通过Location服务组合当前绝对路径
    return this.location.origin + this.location.path();
  }
}

第二步：编写测试代码

import { Location } from '@angular/common';
import { TestBed } from '@angular/core/testing';

it('should return current URL when no URL provided and og:url meta tag does not exist', () => {
  const currentUrl: string = 'https://example.com/current';
  
  // 创建Location服务的模拟对象
  const locationSpy = jasmine.createSpyObj('Location', [], {
    origin: 'https://example.com',
    path: () => '/current'
  });

  TestBed.configureTestingModule({
    providers: [
      ShareService,
      { provide: Location, useValue: locationSpy }
    ]
  });

  service = TestBed.inject(ShareService);

  expect((service as any).getComputedUrl('')).toEqual(currentUrl);
});

这种方式更符合Angular的依赖注入设计理念，降低了对全局对象的耦合度，测试维护成本更低。

内容的提问来源于stack exchange，提问作者Murhaf Sousli