How to test a component containing a third party directive

Question

I have a basic component that contains the ngxPermissionsOnly directive which is working as expected. The library is on github here. I generated the component using the @angular-cli which also auto-generated the unit test.

e.g. Component

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

e.g. Test

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();
      });
});

When I run the test I get the below error;

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

I tried adding the NgxPermissionsDirective to the TestBed declarations, however this directive is dependent on services from that library, and I would also have to inject them. I also tried importing the NgxPermissionsModule itself but it has it's own errors. It seems counter-intuitive to inject a whole bunch of services to test a simple component. Is there a way to mock this directive? Or another solution?

Jags · Accepted Answer · 2018-07-15T22:55:03.173

3

I had to import the NgxPermissionsModule and provide the NgxPermissionsService;

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

edited Jul 15 '18 at 22:55

answered Apr 09 '18 at 22:20

Jags

1,639
1
16
30

It seems to be a partial fix for me but i am now getting error: No provider for NgxPermissionsConfigurationStore! – Loenix Jul 13 '18 at 11:29
@Loenix I went back and took a look at my code, I had adjusted it again. I'll update the answer. I didn't need any special config for the permissions module, and I did not need to mock the permissions service. – Jags Jul 15 '18 at 22:53

score 1 · Answer 2 · answered Mar 20 '18 at 07:18

I think you can just create mocked/stub directive by the same name in the test file and declare that in your test.

Or alternatively you could use CUSTOM_ELEMENTS_SCHEMA or NO_ERRORS_SCHEMA (more info here) as a schema in your tests:

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();
      });
});

This will skip the unknown properties in your DOM, but this shouldn't be used if you want to actually test how the directive works with your component.

How to test a component containing a third party directive

2 Answers2