Comments (6)
Hi, could you create sample test and share it?
from ng-mocks.
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.
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.
Uggh I forgot to sign in to stackblitz so my changes weren't saved. Will redo them.
from ng-mocks.
Updated the stackblitz and it saved this time:
https://stackblitz.com/edit/ng-mocks-examples?file=app%2Fapp.component.spec.ts
from ng-mocks.
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)
- Bug: HOT 2
- Bug: Performance issues since v14.5 HOT 2
- Bug: Maximum call stack size exceeded HOT 5
- docs: a16 id check HOT 1
- Extension methods for MockBuilder HOT 11
- Potential memory leak? HOT 6
- Feature Request: Documentation to unit test functional router guard HOT 3
- Bug: `MockModule`, `NgFor` and `@happy-dom/jest-environment` HOT 10
- Bug: Mocking a component declared in a module imported in a standalone component leads to a duplicate declaration exception HOT 1
- Bug: MockBuilder doesn't detect kept modules in standalone components HOT 1
- Feature Request: docs about how to mock dependencies in initialization logic HOT 1
- Testing components using injection tokens (multi) HOT 1
- Bug: "component threw errors during cleanup" with Angular Material HOT 2
- Bug: mockComponent of standalone component breaks ngIf HOT 4
- Feature Request: cover MatStepper HOT 2
- Bug: Unable to mock providers of a standalone component HOT 4
- Bug: mock observables with ease
- Bug:
- Bug:
- Bug: `RangeError: Maximum call stack size exceeded` when encountering circular reference in component imported using `forwardRef` HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng-mocks.