如何测试包含第三方指令的组件答案

【问题标题】：How to test a component containing a third party directive如何测试包含第三方指令的组件
【发布时间】：2018-08-28 21:38:09
【问题描述】：

我有一个包含ngxPermissionsOnly 指令的基本组件，它按预期工作。该库位于 github here。我使用@angular-cli 生成了组件，它也自动生成了单元测试。

例如组件

@Component({
    selector: 'project-card',
    template: '<div class="some-style"><div *ngxPermissionsOnly="['testPermission']"'>Hide Me</div></div>'
    styleUrls: ['./project-card.component.scss']
})
export class ProjectCardComponent implements OnInit {
    //Do some stuff here
}

例如测试

describe('ProjectCardComponent', () => {
    let component: ProjectCardComponent;
    let fixture: ComponentFixture<ProjectCardComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                ProjectCardComponent,
            ]
        })
        .compileComponents();
      }));

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

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

当我运行测试时，出现以下错误；

Can't bind to 'ngxPermissionsOnly' since it isn't a known property of 'div'

我尝试将NgxPermissionsDirective 添加到TestBed 声明中，但是该指令依赖于该库中的服务，并且我还必须注入它们。我也尝试导入 NgxPermissionsModule 本身，但它有自己的错误。注入一大堆服务来测试一个简单的组件似乎违反直觉。有没有办法模拟这个指令？还是其他解决方案？

【问题讨论】：

标签： angular angular-cli karma-jasmine

【解决方案1】：

我认为您可以在测试文件中创建具有相同名称的 mocked/stub 指令并在您的测试中声明它。

或者，您也可以在测试中使用 CUSTOM_ELEMENTS_SCHEMA 或 NO_ERRORS_SCHEMA（更多信息 here）作为架构：

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

describe('ProjectCardComponent', () => {
    let component: ProjectCardComponent;
    let fixture: ComponentFixture<ProjectCardComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [
                ProjectCardComponent,
            ],
            schemas: [CUSTOM_ELEMENTS_SCHEMA]
        })
        .compileComponents();
      }));

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

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

这将跳过 DOM 中的未知属性，但如果您想实际测试指令如何与您的组件一起使用，则不应使用它。

【讨论】：

【解决方案2】：

我必须导入NgxPermissionsModule 并提供NgxPermissionsService；

TestBed.configureTestingModule({
  imports: [
    NgxPermissionsModule.forRoot(),
    ...
  ],
  declarations: [
    ProjectCardComponent,
    ...
  ],
  providers: [
    NgxPermissionsService,
    ...
  ]
})

【讨论】：

这对我来说似乎是部分修复，但我现在收到错误：NgxPermissionsConfigurationStore 没有提供者！
@Loenix 我回去看了看我的代码，我再次调整了它。我会更新答案。我不需要权限模块的任何特殊配置，也不需要模拟权限服务。