Issue
I'm trying create tests with jasmine in a Angular 12 project and I would to test the receive of data coming of an modal opened with ngx-smart-modal
. My test is structured creating and opening the modal on beforeEach
function because the behavior which I want to test is on construct.
New Updates
Adding a little more of context, I'm testing a component which i call with Ngx Smart Modal trying to reproduce the same comportment calling on the component.spec.ts file a function to open it as modal. I'm giving a main error whos is these: enter image description here
Here is the error dump:
TypeError: Cannot read properties of null (reading 'markForCheck')
at NgxSmartModalComponent.markForCheck (http://localhost:9876/_karma_webpack_/webpack:/node_modules/ngx-smart-modal/__ivy_ngcc__/esm2015/ngx-smart-modal.js:295:1)
at NgxSmartModalComponent.setData (http://localhost:9876/_karma_webpack_/webpack:/node_modules/ngx-smart-modal/__ivy_ngcc__/esm2015/ngx-smart-modal.js:246:1)
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/src/app/core/components/commom/verify-trade-document-infos/verify-trade-document-infos.component.spec.ts:32:8)
at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:364:1)
at ProxyZoneSpec.push.QpwO.ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:292:1)
at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:363:1)
at Zone.run (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-evergreen.js:123:1)
at runInTestZone (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:545:1)
at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:560:1)
at <Jasmine>
component.spec.ts
describe('PseudoComponentComponent', () => {
let component: PseudoComponentComponent;
let fixture: ComponentFixture<PseudoComponentComponent>;
let modal: NgxSmartModalComponent;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [NgxSmartModalModule, SharedModule, CoreModule],
declarations: [PseudoComponentComponent],
providers: [
{ provide: NgxSmartModalService, useValue: ngxSmartModalServiceStub },
],
}).compileComponents().
});
beforeEach(() => {
fixture = TestBed.createComponent(PseudoComponentComponent);
component = fixture.componentInstance;
modal = ngxSmartModalServiceStub
.create('myIdenfier', PseudoComponentComponent)
.setData({
mainData: new PseudoClass(),
type: 'dataType',
});
fixture.detectChanges();
});
it('should have a modalInitialized', () => {
expect(component.data).toBeInstanceOf(PseudoClass);
});
});
The stub class
class NgxSmartModalServiceStub {
ngxSmartModalService: Partial<NgxSmartModalService>;
closeAll = () => null;
closeLatestModal = () => null;
getModal = (id: string): NgxSmartModalComponent =>
new NgxSmartModalComponent(null, null, null, {}, {});
getModalData = (id: string): any => this.getModal(id).getData();
getTopOpenedModal = (): NgxSmartModalComponent =>
new NgxSmartModalComponent(null, null, null, {}, {});
create = <T>(
id: string,
content: Content<T>,
options?: INgxSmartModalOptions
): NgxSmartModalComponent =>
new NgxSmartModalComponent(null, null, null, {}, {});
getStub() {
this.ngxSmartModalService = {
closeAll: this.closeAll,
closeLatestModal: this.closeLatestModal,
getModal: this.getModal,
get: this.getModal,
// getTopOpenedModal: this.getTopOpenedModal,
create: this.create,
};
return this.ngxSmartModalService;
}
}
const ngxSmartModalServiceStub = new NgxSmartModalServiceStub();
export { ngxSmartModalServiceStub };
Solution
Heey everyone!! Its more easily than i think, is just create the modal with the service!
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [NgxSmartModalModule.forRoot()],
declarations: [PseudoComponent],
}).compileComponents();
service = TestBed.inject(NgxSmartModalService);
});
beforeEach(() => {
service
.create('modalIdentifier', PseudoComponent)
.setData({ data: youtData });
fixture = TestBed.createComponent(PseudoComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
Answered By - Ruan Vinicius
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.