Угловой 6-компонентный тест с переменной в HTML

Question

Я новичок в тесте Angular и у меня проблема.Первая проблема связана с переменной username в компоненте, который я использую для отображения зарегистрированного имени пользователя на HTML-странице: это тестовый файл:

describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;
  let app;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HeaderComponent, DialogListConfigurationComponent, DialogConfirmNewConfigurationComponent ],
      providers: [ MessageService, JwtHelperService, AuthService ],  
      imports: [ DialogModule, MenubarModule, FontAwesomeModule, RouterTestingModule, TreeModule, HttpClientTestingModule, JwtModule.forRoot({
        config: {
          tokenGetter: () => {
            return sessionStorage.getItem(environment.tokenName);
          },
          //Exclude this URL from JWT (doesn't add the authentication header)
          blacklistedRoutes: [
            '/api/login',
          ]
        }
      }), ]
    })
    .compileComponents();
  }));

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

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Компонент такой:

export class HeaderComponent implements OnInit {
  @Output() sidebarEvent = new EventEmitter();
  @Output() clickOkButtonListConfigurationsEvent = new EventEmitter();
  username: String = this.authService.decodeToken.username;
  items = [] as MenuItem[];
  dialogListConfigurationVisible: boolean = false;
  faUserCircle = faUserCircle;
  defaultConfigurations: Configuration[];
  configurationCreated: boolean = false;
  dialogConfirmCreationVisible: boolean = false;
  constructor(private configurationService: ConfigurationService, private authService: AuthService) {   }

  ngOnInit() {
  ...
  }

Метод аутентификации:

get decodeToken(): Jwt {
  return this.jwtHelper.decodeToken(this.getSessionToken);
}

Сбой теста should create с TypeError: Cannot read property 'username' of null

Answer 1

Вам нужно Макет вашего AuthService , так как это компонентный тест.

Вы можете сделать это, указав объект в коде инициализации модуля

TestBed.configureTestingModule({
  declarations: [ HeaderComponent, DialogListConfigurationComponent, DialogConfirmNewConfigurationComponent ],
  providers: [
    MessageService,
    JwtHelperService,
    {provide: AuthService, useClass: AuthServiceMock} ],  
  imports: [ DialogModule, MenubarModule, FontAwesomeModule, RouterTestingModule, TreeModule, HttpClientTestingModule, JwtModule.forRoot({
    config: {
      tokenGetter: () => {
        return sessionStorage.getItem(environment.tokenName);
      },
      //Exclude this URL from JWT (doesn't add the authentication header)
      blacklistedRoutes: [
        '/api/login',
      ]
    }
  }), ]
})
.compileComponents();

класс AuthServiceMock должен реализовывать тот же интерфейс, что и исходный. это может быть что-то вроде этого:

export class AuthServiceMock {
  // ...
  decodeToken: {
    username: 'testUser'
  };
}

чем, перед созданием компонента настройте класс макета, если вы не хотите устанавливать по умолчанию внутри макета.

ПРИМЕЧАНИЕ: вы можете сделать этот последний шаг, не создавая насмешки, но это нарушит разделение проблем в ваших тестах.

beforeEach(() => {
    let authServiceMock: AuthServiceMock = TestBed.get(AuthService);
    authServiceMock.decodeToken = { username: 'anotheruser' };

    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

Это должно позволить HeaderComponent запустить строку this.authService.decodedToken.username.

В качестве руководства: необходимо смоделировать зависимости, которые зависят от внешних данных.

Вы также можете удалить зависимости исходного AuthService, если ранее вы включили их в инициализацию тестового модуля. Например, если JwtHelperService используется только для AuthService, тестовый модуль может исключить этого поставщика.

Answer 2

Из ответа @Thatkookooguy у меня возникла проблема, и я добавил эти два необработанных текста в beforeEach, чтобы избежать использования фиктивного объекта

const authService: AuthService = TestBed.get(AuthService);
authService.saveToken("token string");