I have made a custom snackbar component named as UndoSnackBar and am using in one of the components which is Translation-Suggestion-Review-modal.component.ts.
I am not able to write proper unit tests for the part where I am using undosnackbar in Translation-Suggestion-Review-modal.component.ts.
I would appreciate any help on this matter.
Here are some relevant codes:
UndoSnackbarComponent.ts
import { Component } from '@angular/core';
import { MatSnackBarRef } from '@angular/material/snack-bar';
@Component({
selector: 'app-custom-snackbar',
templateUrl: './undo-snackbar.component.html'
})
export class UndoSnackbarComponent {
message!: string;
constructor(private snackBarRef: MatSnackBarRef<UndoSnackbarComponent>) {}
onUndo(): void {
this.snackBarRef.dismissWithAction();
}
onDismiss(): void {
this.snackBarRef.dismiss();
}
}
TranslationSuggestionReviewModalComponent.ts
showSnackbar(): void {
this.currentSnackbarRef = this.snackBar
.openFromComponent<UndoSnackbarComponent>(
UndoSnackbarComponent, {
duration: COMMIT_TIMEOUT_DURATION,
verticalPosition: 'bottom',
horizontalPosition: 'right'
});
this.currentSnackbarRef.instance.message = 'Suggestion queued';
this.currentSnackbarRef.onAction().subscribe(() => {
this.undoReviewAction();
});
this.currentSnackbarRef.afterDismissed().subscribe(() => {
if (this.hasQueuedSuggestion) {
this.commitQueuedSuggestion();
}
});
}
Translation-Suggestion-Review-Modal.component.spec.ts
class MockMatSnackBarRef {
instance = { message: '' };
afterDismissed = () => of({ action: '', dismissedByAction: false });
onAction = () => of(undefined);
}
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
imports: [
HttpClientTestingModule,
OverlayModule,
MatSnackBarModule
],
declarations: [TranslationSuggestionReviewModalComponent],
providers: [
NgbActiveModal,
AlertsService,
ContributionAndReviewService,
LanguageUtilService,
SiteAnalyticsService,
ThreadDataBackendApiService,
UserService,
{
provide: ChangeDetectorRef,
useValue: changeDetectorRef
},
MatSnackBar
],
schemas: [NO_ERRORS_SCHEMA],
}).compileComponents();
}));
beforeEach(() => {
snackBarSpy = spyOn(snackBar, 'openFromComponent').and.returnValue(
new MockMatSnackBarRef() as unknown as MatSnackBarRef<unknown>
);
)};
So far I tried the above mentioned and also a couple of more approaches which I could find over internet but I had no luck.
The error :
Chrome Headless 121.0.6167.160 (Mac OS 10.15.7) Translation Suggestion Review Modal Component when reviewing suggestions with deleted opportunites should reject suggestion in suggestion modal service when clicking on reject and review next suggestion button FAILED Error: No component factory found for UndoSnackbarComponent. Did you add it to @NgModule.entryComponents? error properties: Object({ ngComponent: Function }) Error: No component factory found for UndoSnackbarComponent. Did you add it to @NgModule.entryComponents? at noComponentFactoryError (core/templates/combined-tests.spec.js:361179:19) at CodegenComponentFactoryResolver.resolveComponentFactory (core/templates/combined-tests.spec.js:361220:19) at CdkPortalOutlet.attachComponentPortal (core/templates/combined-tests.spec.js:294266:43) at MatSnackBarContainer.attachComponentPortal (core/templates/combined-tests.spec.js:401092:35) at MatSnackBar._attach (core/templates/combined-tests.spec.js:401401:42) at MatSnackBar.openFromComponent (core/templates/combined-tests.spec.js:401325:21) at TranslationSuggestionReviewModalComponent.showSnackbar (core/templates/combined-tests.spec.js:106440:114681) at TranslationSuggestionReviewModalComponent.rejectAndReviewNext (core/templates/combined-tests.spec.js:106440:111706) at UserContext. (core/templates/combined-tests.spec.js:106128:23) at ./node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (core/templates/combined-tests.spec.js:785320:30)