Problems with unit testing in Karma

[sguin3395]

beforeEach(waitForAsync(() => {

TestBed.configureTestingModule({
  declarations: [ JobCommentsComponent ],
  imports: [
    TestHelperModule,
    AngularMaterialIntegrationModule,
    QuillModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader, useClass: TranslateLoaderFactoryMock
      }
    })
  ],
  providers: [
    { provide: DomSanitizer, useValue: sanitizerMock },
    QuillModule.forRoot().providers
  ],
  schemas: [
    NO_ERRORS_SCHEMA,
  ],
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(JobCommentsComponent);
component = fixture.componentInstance;
});

beforeEach(inject([Store], (store: Store) => {
storeMock = store;
storeCallFake = new StoreCallFake(storeMock);
storeCallFake.spyOn();
}));

it('should create', () => {
fixture.detectChanges();
expect(component).toBeTruthy();
});

That is the code in my spec.ts file and I'm running it with Karma

However, I keep encountering this issue

TypeError: injector.get is not a function at new QuillService (http://localhost:9876/_karma_webpack_/vendor.js:392238:30) at Object.QuillService_Factory [as factory] (http://localhost:9876/_karma_webpack_/vendor.js:392277:10) at R3Injector.hydrate (http://localhost:9876/_karma_webpack_/vendor.js:288126:29) at R3Injector.get (http://localhost:9876/_karma_webpack_/vendor.js:288027:23) at ChainedInjector.get (http://localhost:9876/_karma_webpack_/vendor.js:292050:32) at lookupTokenUsingModuleInjector (http://localhost:9876/_karma_webpack_/vendor.js:283487:31) at getOrCreateInjectable (http://localhost:9876/_karma_webpack_/vendor.js:283530:10) at Module.ɵɵdirectiveInject (http://localhost:9876/_karma_webpack_/vendor.js:290084:10) at NodeInjectorFactory.QuillEditorComponent_Factory [as factory] (http://localhost:9876/_karma_webpack_/vendor.js:392990:961) at getNodeInjectable (http://localhost:9876/_karma_webpack_/vendor.js:283701:38)

[sguin3395]

import { Injector } from '@angular/core';
import { Observable } from 'rxjs';
import { QuillConfig, CustomModule } from 'ngx-quill/config';
import * as i0 from "@angular/core";
export declare class QuillService {
    config: QuillConfig;
    private Quill;
    private document;
    private quill$;
    constructor(injector: Injector, config: QuillConfig);
    getQuill(): Observable<any>;
    /**
     * Marked as internal so it won't be available for `ngx-quill` consumers, this is only
     * internal method to be used within the library.
     *
     * @internal
     */
    registerCustomModules(Quill: any, customModules: CustomModule[] | undefined, suppressGlobalRegisterWarning?: boolean): Promise<any>;
    static ɵfac: i0.ɵɵFactoryDeclaration<QuillService, [null, { optional: true; }]>;
    static ɵprov: i0.ɵɵInjectableDeclaration<QuillService>;
}

this is my quill.service.d.ts which comes in with node_modules/ngx-quill/lib

[KillerCodeMonkey]

which angular and ngx-quill version do you use?

[sguin3395]

@KillerCodeMonkey Did you find a workaround for this one? I created an app with just Angular 15.2.7 and ngx-quill@20.0.0 which is working perfectly fine.

However, it isn't working in the case above with the same package versions.

https://github.com/sguin3395/ngxQuillExample.git is where it works perfectly fine.

Following is the package.json file from the affected codebase, where it doesn't work.

{
  "name": "dummy-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "15.2.7",
    "@angular/cdk": "14.2.7",
    "@angular/common": "15.2.7",
    "@angular/compiler": "15.2.7",
    "@angular/core": "15.2.7",
    "@angular/forms": "15.2.7",
    "@angular/material": "14.2.7",
    "@angular/platform-browser": "15.2.7",
    "@angular/platform-browser-dynamic": "15.2.7",
    "@angular/router": "15.2.7",
    "@ngrx/effects": "15.4.0",
    "@ngrx/store": "15.4.0",
    "@ngx-translate/core": "14.0.0",
    "@ngx-translate/http-loader": "7.0.0",
    "@stripe/stripe-js": "^1.5.0",
    "@types/pako": "2.0.0",
    "@types/quill": "2.0.10",
    "@types/three": "0.150.2",
    "add": "2.0.6",
    "ag-grid-angular": "29.3.5",
    "ag-grid-community": "29.3.5",
    "ag-grid-enterprise": "29.3.5",
    "angular-resize-event": "3.2.0",
    "angular2-toaster": "11.0.1",
    "animate.css": "4.1.1",
    "arrive": "2.4.1",
    "blueimp-canvas-to-blob": "3.29.0",
    "bootstrap": "4.6.1",
    "bootstrap-material-design": "4.1.3",
    "bootstrap-notify": "3.1.3",
    "bootstrap-tagsinput": "0.7.1",
    "change-case": "4.1.2",
    "chartist": "^1.3.0",
    "core-js": "3.30.1",
    "domready": "1.0.8",
    "file-saver": "2.0.5",
    "font-awesome": "4.7.0",
    "intersection-observer": "0.12.2",
    "jasny-bootstrap": "4.0.0",
    "jquery": "3.6.4",
    "jquery-validation": "1.19.5",
    "lodash": "4.17.21",
    "material-icons": "1.13.5",
    "moment": "2.29.4",
    "moment-timezone": "0.5.43",
    "ng-in-viewport": "15.0.1",
    "ngx-mat-select-search": "5.0.0",
    "ngx-moment": "6.0.2",
    "ngx-order-pipe": "2.2.0",
    "ngx-quill": "20.0.0",
    "normalizr": "3.6.2",
    "nouislider": "15.7.0",
    "pako": "2.1.0",
    "path": "0.12.7",
    "perfect-scrollbar": "1.5.5",
    "popper": "1.0.1",
    "popper.js": "1.16.1",
    "quill": "1.3.7",
    "quill-delta-to-html": "0.12.1",
    "quill-emoji": "^0.2.0",
    "quill-image-resize-module": "^3.0.0",
    "quill-mention": "^3.1.0",
    "reflect-metadata": "0.1.13",
    "roboto-fontface": "0.10.0",
    "rxjs": "7.8.0",
    "tassign": "1.0.0",
    "three": "0.151.3",
    "three-ply-loader": "1.0.0",
    "tslib": "^2.5.0",
    "typescript-collections": "1.3.3",
    "ua-parser-js": "1.0.35",
    "validate": "5.2.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "15.2.6",
    "@angular-devkit/schematics": "^15.2.6",
    "@angular/cli": "15.2.6",
    "@angular/compiler-cli": "15.2.7",
    "@angular/language-service": "15.2.7",
    "@ngrx/store-devtools": "15.4.0",
    "@nrwl/angular": "15.9.2",
    "@nrwl/workspace": "15.9.2",
    "@types/bootstrap": "4.6.1",
    "@types/chartist": "^1.0.0",
    "@types/file-saver": "2.0.5",
    "@types/jasmine": "~4.3.1",
    "@types/jasminewd2": "2.0.10",
    "@types/lodash": "4.14.194",
    "@types/node": "18.15.12",
    "codelyzer": "^6.0.0",
    "dotenv": "16.0.3",
    "eslint": "^8.38.0",
    "jasmine-core": "~4.6.0",
    "jasmine-marbles": "^0.9.2",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.4.2",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-ie-launcher": "1.0.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.0.0",
    "karma-junit-reporter": "2.0.1",
    "karma-parallel": "0.3.1",
    "karma-teamcity-reporter": "1.1.0",
    "prettier": "2.8.7",
    "protractor": "~7.0.0",
    "ts-node": "10.9.1",
    "typescript": "~4.9.5",
    "webpack-bundle-analyzer": "^4.8.0"
  }
}

[KillerCodeMonkey]

sorry i have a bunch of work these days. could you create a minimal repo where i can reproduce the issue?

[KillerCodeMonkey]

did you solve it?

[sguin3395]

@KillerCodeMonkey I have been a little busy with a few other stuff. Will be putting up a repo where this issue is recreated.

[KillerCodeMonkey]

@sguin3395 any updates?

[KillerCodeMonkey]

closed due to inactivity