如何在Angular 2单元测试中访问方法局部变量并编写测试用例

Alright, let's break this down step by step. First off, the key thing to understand here is that you can't directly access local variables inside a method from your unit tests—that's a fundamental part of JavaScript/TypeScript's scoping rules. Instead, you test the behavior that the local variable drives, which is actually the best practice for unit testing anyway (since you care about what the method does, not how it does it under the hood).

Let's start with a concrete example. Suppose you have a component method that uses a local variable to pick which service function to call:

import { Component } from '@angular/core';
import { DataService } from './data.service';
import { tap } from 'rxjs/operators';

@Component({
  selector: 'app-user-handler',
  template: ''
})
export class UserHandlerComponent {
  constructor(private dataService: DataService) {}

  fetchUserContent(isPremiumUser: boolean) {
    // Local variable that determines the service method to call
    const contentFetcher = isPremiumUser 
      ? this.dataService.getPremiumContent 
      : this.dataService.getBasicContent;

    // Execute the selected method and return the result
    return contentFetcher().pipe(
      tap(content => console.log('Loaded content:', content))
    );
  }
}

In this case, contentFetcher is the local variable we care about. We can't grab it directly in our tests, but we can verify that the correct service method gets called based on the input to fetchUserContent.

Step 1: Set Up Your Test Environment #

First, we'll mock the DataService dependency so we can spy on its methods and track calls:

import { TestBed } from '@angular/core/testing';
import { UserHandlerComponent } from './user-handler.component';
import { DataService } from './data.service';
import { of } from 'rxjs';

// Mock the DataService with spy methods
class MockDataService {
  getPremiumContent = jasmine.createSpy('getPremiumContent')
    .and.returnValue(of({ accessLevel: 'premium', content: 'exclusive articles' }));
  getBasicContent = jasmine.createSpy('getBasicContent')
    .and.returnValue(of({ accessLevel: 'basic', content: 'free tutorials' }));
}

Step 2: Write the Unit Tests #

Now we'll write tests to verify that the correct service method is invoked based on the input parameter:

describe('UserHandlerComponent', () => {
  let component: UserHandlerComponent;
  let mockDataService: MockDataService;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [UserHandlerComponent],
      providers: [
        { provide: DataService, useClass: MockDataService }
      ]
    }).compileComponents();

    // Get the injected mock service
    mockDataService = TestBed.inject(DataService) as unknown as MockDataService;
  });

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

  it('should call getPremiumContent when isPremiumUser is true', () => {
    // Call the method with true
    component.fetchUserContent(true).subscribe();

    // Assert the correct service method was called
    expect(mockDataService.getPremiumContent).toHaveBeenCalled();
    expect(mockDataService.getBasicContent).not.toHaveBeenCalled();
  });

  it('should call getBasicContent when isPremiumUser is false', () => {
    component.fetchUserContent(false).subscribe();

    expect(mockDataService.getBasicContent).toHaveBeenCalled();
    expect(mockDataService.getPremiumContent).not.toHaveBeenCalled();
  });

  it('should return the correct content based on user type', done => {
    // Test premium content
    component.fetchUserContent(true).subscribe(content => {
      expect(content.accessLevel).toBe('premium');
      done();
    });

    // Test basic content
    component.fetchUserContent(false).subscribe(content => {
      expect(content.accessLevel).toBe('basic');
      done();
    });
  });
});

What If You Really Need to Check the Local Variable? #

While it's not recommended (because it couples your tests to internal implementation details, making them fragile to refactoring), if you have a specific use case, you can extract the logic that sets the local variable into a private method, then access it via type assertion:

Refactor the Component: #

private selectContentFetcher(isPremiumUser: boolean) {
  return isPremiumUser 
    ? this.dataService.getPremiumContent 
    : this.dataService.getBasicContent;
}

fetchUserContent(isPremiumUser: boolean) {
  const contentFetcher = this.selectContentFetcher(isPremiumUser);
  return contentFetcher().pipe(
    tap(content => console.log('Loaded content:', content))
  );
}

Test the Private Method: #

it('should return getPremiumContent for premium users', () => {
  // Use type assertion to access the private method
  const fetcherMethod = (component as any).selectContentFetcher(true);
  expect(fetcherMethod).toBe(mockDataService.getPremiumContent);
});

Again, I strongly advise against this unless absolutely necessary. Unit tests should focus on public behavior, not internal code structure.

内容的提问来源于stack exchange，提问作者Atul Sachan