Угловое тестирование: предоставить введенный @Attribute в TestBed

Question

У меня есть компонент, который получает атрибут, введенный через @Attribute:

@Component({
  selector: 'app-foo',
  templateUrl: './foo.component.html'
})
export class FooComponent implements OnInit {

  constructor(@Attribute('foo') private foo: string) {
    // do something with foo
  }
}

Теперь я хотел бы написать тест с использованием Jasmine и Karma.К сожалению, я не могу найти никакой документации о том, как предоставить этот атрибут в тесте через инжектор TestBed.

Вот что я попробовал:

describe('FooComponent', () => {

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [
        {provide: 'foo', useValue: 'bar'},
        {provide: Attribute('foo'), useValue: 'bar'},
      ],
      declarations: [FooComponent],
    })
      .compileComponents();
  }));

  it('should merge outer class', () => {
    const fixture = TestBed.createComponent(FooComponent);
    const component = fixture.componentInstance;
    fixture.detectChanges();

    // do actual testing
  });
});

После некоторых исследований я такжеопределил следующее, но безуспешно:

Inject('foo')(FooComponent, null, 0);
Attribute('foo')(FooComponent, null, 0);

Параметр, передаваемый конструктору, всегда равен null.Кто-нибудь знает решение?Я использую Angular 5.2.10.

Answer 1

Также изо всех сил пытается обеспечить @Attribute() переопределение декоратора.

В качестве обходного пути вы можете изменить @Attribute() в конструкторе на @Input() foo: string; в классе компонента.Или используйте компонент-оболочку и установите атрибут для компонента-оболочки, как показано ниже:

import { TestBed } from "@angular/core/testing";
import { Attribute, Component } from "@angular/core";
import { By } from "@angular/platform-browser";

describe('FooComponent', () => {
  it('should allow you to use attribute decorator', () => {
    TestBed.configureTestingModule({
      declarations: [FooComponent, WrapperComponent],
    });

    const wrapperFixture = TestBed.createComponent(WrapperComponent);
    wrapperFixture.detectChanges();

    const fooComponent = wrapperFixture.debugElement.query(By.directive(FooComponent)).componentInstance;
    expect(fooComponent.bar).toEqual('baz');
  });
});

@Component({
  selector: "foo-component",
  template: "<p>Foo works: {{bar}}</p>",
})
class FooComponent {
  bar: '';
  constructor(@Attribute('foo') private foo: string) {
    this.bar = foo;
  }
}

@Component({
  selector: "wrapper-component",
  template: "<foo-component foo='baz'></foo-component>"
})
class WrapperComponent {
}

Я думаю, использование @Input() для компонента будет работать лучше для меня.Пока не вижу никаких недостатков.