Angular中处理和测试全局事件：HostListener的最佳实践

// 不推荐在Angular中直接使用此方法
navigate() {
    window.addEventListener('popstate', (event) => {
        // 假设event.state['tab']是'new-page'
        if (event.state && event.state['tab'] === 'new-page') {
            window.location.href = 'www.test-this-page.abcd';
        }
    });
}

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<!-- component template -->`
})
export class MyComponent {

  constructor() { }

  /**
   * 监听全局window对象的popstate事件
   * 当浏览器历史记录发生变化时触发（如点击浏览器返回/前进按钮）
   * @param event 原生的PopStateEvent事件对象
   */
  @HostListener('window:popstate', ['$event'])
  onWindowPopstate(event: PopStateEvent): void {
    // 确保event.state存在且包含预期的属性
    if (event.state && event.state['navigation'] === 'new-page') {
      console.log('Popstate event detected for new-page navigation.');
      // 注意：直接修改window.location.href会刷新页面，
      // 在Angular应用中，通常会使用Router服务进行导航
      window.location.href = 'www.test-this-page.abcd';
    }
  }

  // 其他组件方法...
}

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MyComponent } from './my-component.component';

describe('MyComponent', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ MyComponent ]
    })
    .compileComponents();
  });

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

  it('should call window.location.href when popstate event state matches "new-page"', () => {
    const mockPopStateEvent = {
      state: { navigation: 'new-page' }
    } as PopStateEvent; // 强制类型转换，模拟PopStateEvent

    // 监听window.location.href的setter方法
    const locationHrefSpy = spyOnProperty(window.location, 'href', 'set');

    // 直接调用组件的事件处理方法
    component.onWindowPopstate(mockPopStateEvent);

    // 验证window.location.href是否被正确设置
    expect(locationHrefSpy).toHaveBeenCalledWith('www.test-this-page.abcd');
  });

  it('should not call window.location.href when popstate event state does not match "new-page"', () => {
    const mockPopStateEvent = {
      state: { navigation: 'other-page' }
    } as PopStateEvent;

    const locationHrefSpy = spyOnProperty(window.location, 'href', 'set');

    component.onWindowPopstate(mockPopStateEvent);

    expect(locationHrefSpy).not.toHaveBeenCalled();
  });

  it('should not call window.location.href when popstate event state is null', () => {
    const mockPopStateEvent = {
      state: null
    } as PopStateEvent;

    const locationHrefSpy = spyOnProperty(window.location, 'href', 'set');

    component.onWindowPopstate(mockPopStateEvent);

    expect(locationHrefSpy).not.toHaveBeenCalled();
  });
});