How to use the ng-mocks.MockRender function in ng-mocks

To help you get started, we’ve selected a few ng-mocks examples, based on popular ways it is used in public projects.

github ike18t / ng-mocks / examples / MockComponent / MockComponent.spec.ts View on Github external
it('should render something inside of the dependency component', () => {
    const localFixture = MockRender(`
      <dependency-component-selector>
        <ng-template #something><p>inside template</p></ng-template>
        <p>inside content</p>
      </dependency-component-selector>
    `);

    // 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<DependencyComponent> = mockedElement.componentInstance;
    mockedComponent.__render('something');
github ike18t / ng-mocks / examples / MockRender / MockRender.spec.ts View on Github external
it('renders template', () => {
    const spy = jasmine.createSpy();
    const fixture = MockRender(
      `
        <tested (trigger)="myListener1($event)" [value1]="myParam1" value2="check">
          <ng-template #header>
            something as ng-template
          </ng-template>
          something as ng-content
        </tested>
      `,
      {
        myListener1: spy,
        myParam1: 'something1',
      }
    );

    // assert on some side effect
    const componentInstance = fixture.debugElement.query(By.directive(TestedComponent))
github ike18t / ng-mocks / examples / MockRender / MockRender.spec.ts View on Github external
it('renders component', () => {
    const spy = jasmine.createSpy();
    // generates template like:
    // <tested [value1]="value1" [value2]="value2" (trigger)="trigger"></tested>
    // 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');
  });
});
github ike18t / ng-mocks / examples / MockComponent / MockComponent.spec.ts View on Github external
it('should render something inside of the dependency component', () => {
    const localFixture = MockRender(`
      <dependency-component-selector>
        <p>inside content</p>
      </dependency-component-selector>
    `);
    // 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>');
  });
github ike18t / ng-mocks / e2e / context-with-directives / context-with-directives.spec.ts View on Github external
it('renders everything what is not template', () => {
    const fixture = MockRender(`
      <custom-root>
        <div>header</div>
        <ng-template [type]="'template'">
          template w/ directive w/o binding
        </ng-template>
        <ng-template [type]="'template1'" let-value>
          template w/ directive w/ binding {{ value[0] }}
        </ng-template>
        <ng-template [type]="'template2'" let-value>
          template w/ directive w/ binding {{ value[0] }}
        </ng-template>
        <ng-template>
          template w/o directive w/o binding
        </ng-template>
        <ng-template let-value>
          template w/o directive w/ binding {{ value[0] }}
github ike18t / ng-mocks / e2e / context-with-directives / context-with-directives.spec.ts View on Github external
it('renders everything right', () => {
    const fixture = MockRender(`
      <custom-root>
        <div>header</div>
        <ng-template [type]="'template'">
          template w/ directive w/o binding
        </ng-template>
        <ng-template [type]="'template1'" let-value>
          template w/ directive w/ binding {{ value[0] }}
        </ng-template>
        <ng-template [type]="'template2'" let-value>
          template w/ directive w/ binding w/o render
        </ng-template>
        <ng-template>
          template w/o directive w/o binding
        </ng-template>
        <ng-template let-value>
          template w/o directive w/ binding {{ value[0] }}

ng-mocks

An Angular testing library for creating mock services, components, directives, pipes and modules in unit tests. It provides shallow rendering, precise stubs to fake child dependencies. ng-mocks works with Angular 5 6 7 8 9 10 11 12 13 14 15, jasmine and j

MIT
Latest version published 6 days ago

Package Health Score

89 / 100
Full package analysis

Similar packages