How to use ng-mocks - 10 common examples

it('should render something inside of the dependency component', () => {
    const localFixture = MockRender(`
      
        <p>inside template</p>
        <p>inside content</p>
      
    `);

    // injected ng-content says as it was.
    const mockedNgContent = localFixture.debugElement
      .query(By.directive(DependencyComponent))
      .nativeElement.innerHTML;
    expect(mockedNgContent).toContain('<p>inside content</p>');

    // because component does have @ContentChild we need to render them first with proper context.
    const mockedElement = localFixture.debugElement.query(By.directive(DependencyComponent));
    const mockedComponent: MockedComponent = mockedElement.componentInstance;
    mockedComponent.__render('something');

it('renders template', () => {
    const spy = jasmine.createSpy();
    const fixture = MockRender(
      `
        
          
            something as ng-template
          
          something as ng-content
        
      `,
      {
        myListener1: spy,
        myParam1: 'something1',
      }
    );

    // assert on some side effect
    const componentInstance = fixture.debugElement.query(By.directive(TestedComponent))

it('renders component', () => {
    const spy = jasmine.createSpy();
    // generates template like:
    // 
    // and returns fixture with a component with properties value1, value2 and empty callback trigger.
    const fixture = MockRender(TestedComponent, {
      trigger: spy,
      value1: 'something2',
    });

    // assert on some side effect
    const componentInstance = fixture.debugElement.query(By.directive(TestedComponent))
      .componentInstance as TestedComponent;
    componentInstance.trigger.emit('foo2');
    expect(componentInstance.value1).toEqual('something2');
    expect(componentInstance.value2).toBeUndefined();
    expect(spy).toHaveBeenCalledWith('foo2');
  });
});

it('should render something inside of the dependency component', () => {
    const localFixture = MockRender(`
      
        <p>inside content</p>
      
    `);
    // because component does not have any @ContentChild we can access html directly.
    // assert on some side effect
    const mockedNgContent = localFixture.debugElement
      .query(By.directive(DependencyComponent))
      .nativeElement.innerHTML;
    expect(mockedNgContent).toContain('<p>inside content</p>');
  });

it('should send the correct value to the dependency component input', () => {
    component.value = 'foo';
    fixture.detectChanges();

    // let's pretend Dependency Directive (unmocked) has 'someInput' as an input
    // the input value will be passed into the mocked directive so you can assert on it
    const mockedDirectiveInstance = MockHelper.getDirective(
      fixture.debugElement.query(By.css('span')),
      DependencyDirective,
    );
    expect(mockedDirectiveInstance).toBeTruthy();
    if (mockedDirectiveInstance) {
      expect(mockedDirectiveInstance.someInput).toEqual('foo');
    }
    // assert on some side effect
  });

it('should do something when the dependency directive emits on its output', () => {
    spyOn(component, 'trigger');
    fixture.detectChanges();

    // again, let's pretend DependencyDirective has an output called 'someOutput'
    // emit on the output that MockDirective setup when generating the mock of Dependency Directive
    const mockedDirectiveInstance = MockHelper.getDirective(
      fixture.debugElement.query(By.css('span')),
      DependencyDirective,
    );
    expect(mockedDirectiveInstance).toBeTruthy();
    if (mockedDirectiveInstance) {
      mockedDirectiveInstance.someOutput.emit({
        payload: 'foo',
      }); // if you casted mockedDirective as the original component type then this is type safe
    }
    // assert on some side effect
  });
});

it('should display structural directive content', () => {
    const mockedDirective = MockHelper
    .findDirective(fixture.debugElement, ExampleStructuralDirective) as MockedDirective;

    // structural directives should be rendered first.
    mockedDirective.__render();
    fixture.detectChanges();
    expect(mockedDirective.exampleStructuralDirective).toBeTruthy();

    const debugElement = fixture.debugElement.query(By.css('#example-structural-directive'));
    expect(debugElement.nativeElement.innerHTML).toContain('hi');
  });

// tslint:disable-next-line no-unnecessary-type-assertion
    return setup.mockCache.add(thing, thing.map(t => ngMock(t, setup))) as any; // Recursion
  }

  if (setup.dontMock.includes(thing) || (isModuleWithProviders(thing) && setup.dontMock.includes(thing.ngModule))) {
    return thing;
  }

  let mock: NgMockable;
  try {
    if (ngModuleResolver.isNgModule(thing) || isModuleWithProviders(thing)) {
      mock = mockModule(thing, setup);
    } else if (isPipeTransform(thing)) {
      mock = MockPipe(thing as Type, setup.mockPipes.get(thing));
    } else if (typeof thing === 'function') { // tslint:disable-line strict-type-predicates
      mock = MockDeclaration(thing as Type);
      if (
        setup.withStructuralDirectives.get(thing as Type)
        || (setup.alwaysRenderStructuralDirectives && setup.withStructuralDirectives.get(thing as Type) !== false)
      ) {
        mock.prototype.ngOnInit = () => undefined;
        testFramework.spyOn(mock.prototype, 'ngOnInit', function() {
          // tslint:disable-next-line: no-empty
          try { this.__render(); } catch (e) { }
        });
      }
      fixEmptySelector(thing as Type, mock);
      const stubs = setup.mocks.get(thing);
      if (stubs) {
        mock = class extends (mock as Type) {
          constructor() {
            super();

it('finds mocked directives', () => {
      const {findDirective} = new Rendering(fixture, element, instance, {}, testSetup);

      expect(findDirective(DirectiveToMock) instanceof MockDirective(DirectiveToMock)).toBe(true);
    });

it('renders everything what is not template', () => {
    const fixture = MockRender(`
      
        <div>header</div>
        
          template w/ directive w/o binding
        
        
          template w/ directive w/ binding {{ value[0] }}
        
        
          template w/ directive w/ binding {{ value[0] }}
        
        
          template w/o directive w/o binding
        
        
          template w/o directive w/ binding {{ value[0] }}