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)
- Feature Request: MockBuilder strict mode with standalone components
- docs: how to mock with `MockBuilder.provide`
- support vitest
- ngMocksUniverse.global
- Bug: MockMiddleware{Index} HOT 1
- update links in the repo HOT 2
- update sponsor links in the repo HOT 2
- Bug: cannot set return value of DI'ed pipe HOT 1
- Bug: `.keep(ReactiveFormsModule)` does not actually keep HOT 3
- Bug: Angular 17.1.0 `input.required()` issues HOT 14
- Feature Request: Documentation for functional route guards without the use of NgModule
- Bug: Injection of mocked service fails for nested service ... but only sometimes ...
- Bug: cannot `.replace()` a component that has an abstract base class
- Bug: formatHtml on MockedComponentFixture / DebugElement won't give expected value
- Bug: try to avoid recursive parsing when a standalone component imports itself
- Bug: Incompatibility of MockComponent with new viewChild signal function HOT 7
- Bug: MockComponent (Standalone) mocks all components not just the ones specified HOT 3
- Bug: MockRender throws an error on mat-tab HOT 2
- MockComponent function set Signal Inputs as Decorator Inputs
- Bug: Erroneous test setup due to the usage of contentChildren 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.