Angular 角度测试：在测试床中提供注入的@Attribute

我有一个组件，它通过

@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写一个测试。不幸的是，我找不到任何关于如何通过

测试台

注入器在测试中提供此属性的文档

这就是我所尝试的：

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。

还努力提供

@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 {
}

从“@angular/core/testing”导入{TestBed}；
从“@angular/core”导入{Attribute，Component}”；
从“@angular/platform browser”导入{By}”；
描述（'FooComponent'，（）=>{
它（'应该允许您使用属性装饰'，（）=>{
TestBed.configureTestingModule({
声明：[FooComponent，WrapperComponent]，
});
const wrapperFixture=TestBed.createComponent（WrapperComponent）；
wrapperFixture.detectChanges（）；
const fooComponent=wrapperFixture.debugElement.query（By.directive（fooComponent））.componentInstance；
expect（fooComponent.bar）.toEqual（'baz'）；
});
});
@组成部分({
选择器：“foo组件”，
模板：“Foo-works:{{bar}
”，
})
类组件{
酒吧：''；
构造函数（@Attribute（'foo'）私有foo:string）{
this.bar=foo；
}
}
@组成部分({
选择器：“包装器组件”，
模板：“”
})
类包装器组件{
}

我认为在组件上使用
@Input（）
对我来说会更好。到目前为止，我看不出有任何负面影响
 感谢您对包装器组件的测试建议。至少我能够用这种方法编写一个测试。不幸的是，我不能使用
@Input
，因为我想读取宿主元素的
class
属性上提供的类并在内部存储它们。然后，这些类与反映有关内部状态的附加信息的动态附加类集合并，合并的类集通过覆盖整个类属性的
@HostBinding（'class'）
公开。