feat(tests): upgrade jest-preset-angular with Jest 27

ghiscoding · Jun 5, 2021 · e2447ba · e2447ba
1 parent fd964ae
commit e2447ba
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -148,10 +148,9 @@
     "@types/moment": "^2.13.0",
     "@types/node": "^15.12.1",
     "@types/text-encoding-utf-8": "^1.0.1",
-    "@typescript-eslint/eslint-plugin": "4.23.0",
-    "@typescript-eslint/parser": "4.23.0",
+    "@typescript-eslint/eslint-plugin": "4.26.0",
+    "@typescript-eslint/parser": "4.26.0",
     "autoprefixer": "^10.2.6",
-    "babel-jest": "^24.9.0",
     "bootstrap": "^5.0.1",
     "codecov": "^3.8.2",
     "codelyzer": "^6.0.2",
@@ -161,10 +160,10 @@
     "custom-event-polyfill": "^1.0.7",
     "del": "^6.0.0",
     "del-cli": "^3.0.1",
-    "eslint": "^7.26.0",
-    "jest": "^26.6.3",
+    "eslint": "^7.28.0",
+    "jest": "^27.0.4",
     "jest-extended": "^0.11.5",
-    "jest-preset-angular": "^8.4.0",
+    "jest-preset-angular": "^9.0.1",
     "ng-packagr": "^12.0.3",
     "ngx-bootstrap": "^6.2.0",
     "npm-run-all": "^4.1.5",

diff --git a/src/app/modules/angular-slickgrid/extensions/__tests__/rowDetailViewExtension.spec.ts b/src/app/modules/angular-slickgrid/extensions/__tests__/rowDetailViewExtension.spec.ts
@@ -6,7 +6,7 @@ import { RowDetailViewExtension } from '../rowDetailViewExtension';
 import { ExtensionUtility } from '../extensionUtility';
 import { SharedService } from '../../services/shared.service';
 import { FilterService, SortService, AngularUtilService } from '../../services';
-import { Column, CurrentFilter } from '../../models';
+import { Column, CurrentFilter, SlickEventHandler } from '../../models';
 import { of, Subject } from 'rxjs';
 import { RowDetailView } from '../../../../../../dist/public_api';
 
@@ -77,7 +77,7 @@ describe('rowDetailViewExtension', () => {
   jest.mock('slickgrid/plugins/slick.rowselectionmodel', () => mockSelectionModel);
   Slick.RowSelectionModel = mockSelectionModel;
 
-  let fixture: ComponentFixture<TestPreloadComponent>;
+  let eventHandler: SlickEventHandler;
   let extension: RowDetailViewExtension;
   const div = document.createElement('div');
   div.innerHTML = `<div class="container_loading"></div><div class="container_field1"></div>`;
@@ -105,6 +105,7 @@ describe('rowDetailViewExtension', () => {
   } as unknown as GridOption;
 
   beforeEach(async () => {
+    eventHandler = new Slick.EventHandler();
     await TestBed.configureTestingModule({
       declarations: [TestPreloadComponent],
       providers: [
@@ -118,10 +119,14 @@ describe('rowDetailViewExtension', () => {
       ],
       imports: [TranslateModule.forRoot()]
     });
-    fixture = TestBed.createComponent(TestPreloadComponent);
     extension = TestBed.inject(RowDetailViewExtension);
   });
 
+  afterEach(() => {
+    eventHandler.unsubscribeAll();
+    jest.clearAllMocks();
+  });
+
   it('should return null after calling "create" method when either the column definitions or the grid options is missing', () => {
     const output = extension.create([] as Column[], null as any);
     expect(output).toBeNull();
@@ -449,24 +454,23 @@ describe('rowDetailViewExtension', () => {
       });
     });
 
-    it('should call Angular Util "createAngularComponentAppendToDom" when grid "onColumnsReordered" is triggered', (done) => {
+    it('should call Angular Util "createAngularComponentAppendToDom" when grid "onColumnsReordered" is triggered', () => {
       const mockColumn = { id: 'field1', field: 'field1', width: 100, cssClass: 'red', __collapsed: true };
       const handlerSpy = jest.spyOn(extension.eventHandler, 'subscribe');
       const appendSpy = jest.spyOn(angularUtilServiceStub, 'createAngularComponentAppendToDom').mockReturnValue({ componentRef: { instance: jest.fn() } } as any);
 
       const instance = extension.create(columnsMock, gridOptionsMock);
       extension.register();
-      instance.onBeforeRowDetailToggle.subscribe(() => {
+      eventHandler.subscribe(instance.onBeforeRowDetailToggle, () => {
         gridStub.onColumnsReordered.notify({ impactedColumns: mockColumn }, new Slick.EventData(), gridStub);
         expect(appendSpy).toHaveBeenCalledWith(undefined, expect.objectContaining({ className: 'container_field1' }), true);
-        done();
       });
       instance.onBeforeRowDetailToggle.notify({ item: mockColumn, grid: gridStub }, new Slick.EventData(), gridStub);
 
       expect(handlerSpy).toHaveBeenCalled();
     });
 
-    it('should call "redrawAllViewComponents" when using Row Selection and the event "onSelectedRowsChanged" is triggered', (done) => {
+    it('should call "redrawAllViewComponents" when using Row Selection and the event "onSelectedRowsChanged" is triggered', () => {
       const mockColumn = { id: 'field1', field: 'field1', width: 100, cssClass: 'red', __collapsed: true };
       gridOptionsMock.enableCheckboxSelector = true;
       const handlerSpy = jest.spyOn(extension.eventHandler, 'subscribe');
@@ -476,10 +480,9 @@ describe('rowDetailViewExtension', () => {
       const instance = extension.create(columnsMock, gridOptionsMock);
 
       extension.register();
-      instance.onBeforeRowDetailToggle.subscribe(() => {
+      eventHandler.subscribe(instance.onBeforeRowDetailToggle, () => {
         gridStub.onSelectedRowsChanged.notify({ rows: [0], previousSelectedRows: [] }, new Slick.EventData(), gridStub);
         expect(appendSpy).toHaveBeenCalledWith(undefined, expect.objectContaining({ className: 'container_field1' }), true);
-        done();
       });
       instance.onBeforeRowDetailToggle.notify({ item: mockColumn, grid: gridStub }, new Slick.EventData(), gridStub);
       instance.onBeforeRowDetailToggle.notify({ item: { ...mockColumn, __collapsed: false }, grid: gridStub }, new Slick.EventData(), gridStub);
@@ -488,7 +491,7 @@ describe('rowDetailViewExtension', () => {
       expect(redrawSpy).toHaveBeenCalledTimes(2);
     });
 
-    it('should call "redrawAllViewComponents" when event "filterChanged" is triggered', (done) => {
+    it('should call "redrawAllViewComponents" when event "filterChanged" is triggered', () => {
       const mockColumn = { id: 'field1', field: 'field1', width: 100, cssClass: 'red', __collapsed: true };
       const handlerSpy = jest.spyOn(extension.eventHandler, 'subscribe');
       const redrawSpy = jest.spyOn(extension, 'redrawAllViewComponents');
@@ -497,10 +500,9 @@ describe('rowDetailViewExtension', () => {
       const instance = extension.create(columnsMock, gridOptionsMock);
 
       extension.register();
-      instance.onBeforeRowDetailToggle.subscribe(() => {
+      eventHandler.subscribe(instance.onBeforeRowDetailToggle, () => {
         filterServiceStub.onFilterChanged.next([{ columnId: 'field1', operator: '=', searchTerms: [] }]);
         expect(appendSpy).toHaveBeenCalledWith(undefined, expect.objectContaining({ className: 'container_field1' }), true);
-        done();
       });
       instance.onBeforeRowDetailToggle.notify({ item: mockColumn, grid: gridStub }, new Slick.EventData(), gridStub);
       instance.onBeforeRowDetailToggle.notify({ item: { ...mockColumn, __collapsed: false }, grid: gridStub }, new Slick.EventData(), gridStub);
@@ -610,18 +612,17 @@ describe('rowDetailViewExtension', () => {
       }
     });
 
-    it('should call Angular Util "disposeAllViewComponents" when grid "onSort" is triggered', (done) => {
+    it('should call Angular Util "disposeAllViewComponents" when grid "onSort" is triggered', () => {
       const mockColumn = { id: 'field1', field: 'field1', width: 100, cssClass: 'red', __collapsed: true };
       jest.spyOn(angularUtilServiceStub, 'createAngularComponentAppendToDom').mockReturnValue({ componentRef: { instance: jest.fn(), destroy: jest.fn() } } as any);
       const handlerSpy = jest.spyOn(extension.eventHandler, 'subscribe');
       const disposeSpy = jest.spyOn(extension, 'disposeAllViewComponents');
 
       const instance = extension.create(columnsMock, gridOptionsMock);
       extension.register();
-      instance.onBeforeRowDetailToggle.subscribe(() => {
+      eventHandler.subscribe(instance.onBeforeRowDetailToggle, () => {
         gridStub.onSort.notify({ impactedColumns: mockColumn }, new Slick.EventData(), gridStub);
         expect(disposeSpy).toHaveBeenCalled();
-        done();
       });
       instance.onBeforeRowDetailToggle.notify({ item: mockColumn, grid: gridStub }, new Slick.EventData(), gridStub);
 

diff --git a/test/jest.config.js b/test/jest.config.js
@@ -55,7 +55,7 @@ module.exports = {
   setupFiles: ['<rootDir>/test/jest-pretest.ts'],
   setupFilesAfterEnv: ['jest-extended', '<rootDir>/test/setup-jest.ts'],
   transform: {
-    '^.+\\.(ts|html)$': 'ts-jest'
+    '^.+\\.(ts|html)$': 'jest-preset-angular',
   },
   transformIgnorePatterns: [
     '<rootDir>/node_modules/angular-slickgrid/',