Angular含ngOnInit的简单组件测试实操与最佳实践咨询

嘿，作为刚接触测试的Angular新手，你的这些问题都特别典型，我来一步步给你拆解清楚：

1. 是否需要创建localStorageMock？调用saveInStorage()后，是否需验证该Mock包含传入的参数？ #

必须要创建localStorage的Mock！原因很简单：真实的localStorage是浏览器环境的全局对象，在测试运行时（比如Karma或Jest）直接使用它会污染测试环境，不同测试用例之间可能互相干扰，而且我们的测试应该只聚焦于SessionService本身的逻辑，而不是依赖浏览器的真实存储。

另外，调用saveInStorage()后必须验证Mock收到了正确的参数——这是确保你的服务按预期工作的关键。我们要确认两点：一是服务正确调用了localStorage.setItem方法，二是传入的键和值完全符合预期。

举个简单的Mock实现和测试例子：

// 自定义localStorage Mock
class LocalStorageMock {
  private storage: Record<string, string> = {};

  getItem(key: string): string | null {
    return this.storage[key] || null;
  }

  setItem(key: string, value: string): void {
    this.storage[key] = value;
  }
}

// 在测试中使用
describe('SessionService', () => {
  let service: SessionService;
  let localStorageMock: LocalStorageMock;

  beforeEach(() => {
    localStorageMock = new LocalStorageMock();
    // 替换全局的localStorage为Mock
    spyOn(window, 'localStorage').and.returnValue(localStorageMock);
    service = new SessionService();
  });

  it('should save email to storage correctly', () => {
    const testEmail = 'test@example.com';
    service.saveInStorage(testEmail);
    
    // 验证Mock的storage里有正确的值
    expect(localStorageMock.getItem('email')).toBe(JSON.stringify(testEmail));
    // 也可以验证setItem被调用了正确的次数和参数
    expect(localStorage.setItem).toHaveBeenCalledWith('email', JSON.stringify(testEmail));
  });
});

2. 如何测试fetchFromStorage？是否可编写如下Mock：export class { getItem(x){ if(x = 'email') return 'sth'; } }？ #

你的思路是对的，但这个Mock里有个小语法错误：判断条件应该是x === 'email'（全等判断），而不是x = 'email'（赋值操作），不然不管传什么键，都会返回'sth'。

当然可以用这种自定义Mock类的方式，不过也可以用更简洁的Jasmine/Jest Spy来实现，不用写完整的类：

describe('SessionService', () => {
  let service: SessionService;

  beforeEach(() => {
    // Mock localStorage.getItem方法
    spyOn(localStorage, 'getItem').and.returnValue('"test@example.com"');
    service = new SessionService();
  });

  it('should fetch and parse email from storage correctly', () => {
    const result = service.fetchFromStorage();
    // 验证返回的是解析后的对象（这里email是字符串，所以解析后就是原字符串）
    expect(result).toBe('test@example.com');
    // 验证getItem被调用时传入了正确的键
    expect(localStorage.getItem).toHaveBeenCalledWith('email');
  });
});

如果用自定义Mock类，修正后的版本可以是：

class MockLocalStorage {
  getItem(key: string) {
    if (key === 'email') return '"test@example.com"'; // 注意要返回JSON格式的字符串，因为服务里会用JSON.parse
    return null;
  }
}

3. 组件中的ngOnInit逻辑简单，是否有编写测试的必要？ #

必须写！哪怕逻辑再简单，测试也是有价值的：

• 现在逻辑简单，不代表以后不会修改——比如哪天你在ngOnInit里加了额外的逻辑（比如判断email是否为空），现有测试能帮你快速验证新逻辑有没有破坏原有功能；
• 测试能明确组件的行为预期，让其他开发者（包括未来的你）清楚知道ngOnInit应该做什么；
• 这也是养成良好测试习惯的开始，从小逻辑入手建立测试思维。

给你一个LoginComponent的测试例子：

describe('LoginComponent', () => {
  let component: LoginComponent;
  let sessionServiceSpy: jasmine.SpyObj<SessionService>;

  beforeEach(async () => {
    // 创建SessionService的Spy对象
    const spy = jasmine.createSpyObj('SessionService', ['fetchFromStorage', 'saveInStorage']);

    await TestBed.configureTestingModule({
      declarations: [LoginComponent],
      providers: [{ provide: SessionService, useValue: spy }]
    }).compileComponents();

    sessionServiceSpy = TestBed.inject(SessionService) as jasmine.SpyObj<SessionService>;
  });

  beforeEach(() => {
    const fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
  });

  it('should fetch email from service on ngOnInit', () => {
    const testEmail = 'test@example.com';
    // 设置Spy的返回值
    sessionServiceSpy.fetchFromStorage.and.returnValue(testEmail);
    
    // 触发ngOnInit
    component.ngOnInit();
    
    // 验证组件的email属性被正确赋值
    expect(component.email).toBe(testEmail);
    // 验证服务的方法被调用
    expect(sessionServiceSpy.fetchFromStorage).toHaveBeenCalled();
  });

  it('should call saveInStorage when save() is called', () => {
    component.email = 'test@example.com';
    component.save();
    
    expect(sessionServiceSpy.saveInStorage).toHaveBeenCalledWith('test@example.com');
  });
});

内容的提问来源于stack exchange，提问作者Adam Adamski