Giter VIP home page Giter VIP logo

Comments (6)

satanTime avatar satanTime commented on May 10, 2024

Hi, could you create sample test and share it?

from ng-mocks.

fsz avatar fsz commented on May 10, 2024

Sure:

import {Component, Input, ViewChild} from '@angular/core';
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {MockComponent} from 'ng-mocks';
import {By} from '@angular/platform-browser';

export class BaseComponent {

  @Input()
  public baseCompInput: string;

  public baseCompAttribute: string;

  public baseCompMethod(): string {
    return 'base';
  }
}

@Component({
  selector: 'test-component',
  template: ''
})
export class ExtendedComponent extends BaseComponent {

  @Input()
  public extendedCompInput: string;

  public extendedCompAttribute: string;

  public extendedCompMethod(): string {
    return 'extended';
  }
}

@Component({
  selector: 'component-container',
  template: '<test-component extendedCompInput="test" baseCompInput="test"></test-component>'
})
export class ComponentContainer {

  @ViewChild(ExtendedComponent)
  private extendedComp: ExtendedComponent;

  public test(): void {
    this.extendedComp.extendedCompMethod();
  }

}

describe('mock extended component', () => {
  let component: ComponentContainer;
  let fixture: ComponentFixture<ComponentContainer>;
  let extendedComponent: ExtendedComponent;

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

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

    extendedComponent = fixture.debugElement.query(By.directive(ExtendedComponent)).componentInstance;
  });

  it('should have the attribute and method of the extended class', () => {
    expect(extendedComponent.extendedCompInput).toBeDefined('input');
    expect(extendedComponent.extendedCompAttribute).toBeDefined('attribute');
    expect(extendedComponent.extendedCompMethod).toBeDefined('method');
  });

  it('should have the attribute and method of the base class', () => {
    expect(extendedComponent.baseCompInput).toBeDefined('input');
    expect(extendedComponent.baseCompAttribute).toBeDefined('attribute');
    expect(extendedComponent.baseCompMethod).toBeDefined('method');
  });

  describe('test', () => {
    beforeEach(() => {
      spyOn(extendedComponent, 'baseCompMethod');
      component.test();
    });

    it('should call baseCompMethod', () => {
      expect(extendedComponent.baseCompMethod).toHaveBeenCalled();
    });
  });
});

from ng-mocks.

ike18t avatar ike18t commented on May 10, 2024

In order for those attributes and methods to be defined they would need to make assumptions as to the default value/implementation which is out of the scope of this lib and could result in some unexpected side-effects in your tests. You can always use a typescript mocking lib to extend one of the ng-mock objects if you need further behavior in a type-safe manner. I have an example of how to do so with https://www.npmjs.com/package/ts-mockery in the below stack blitz.

https://stackblitz.com/edit/ng-mocks-examples?file=app%2Fapp.component.spec.ts

Let me know if I am missing something in your explanation but it does sound out of scope for this lib.

from ng-mocks.

ike18t avatar ike18t commented on May 10, 2024

Uggh I forgot to sign in to stackblitz so my changes weren't saved. Will redo them.

from ng-mocks.

ike18t avatar ike18t commented on May 10, 2024

Updated the stackblitz and it saved this time:
https://stackblitz.com/edit/ng-mocks-examples?file=app%2Fapp.component.spec.ts

from ng-mocks.

fsz avatar fsz commented on May 10, 2024

In my particular case a method was called on a component that I accessed via ViewChild. That's why I included the last test scenario to make clear why it would be useful to not only have access to the inputs and ouputs on the mock but also to all other public attributes and methods.

But I see your point. I've just mocked the called method by myself as you recommended.
Thanks.

from ng-mocks.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.