feat(lib): upgrade to RxJs 7.5.x

- adjust RxJs imports, adjust tests, adjuts peer deps

Author: tomastrajan

package-lock.json

@@ -57,7 +57,7 @@
     "highlight.js": "^11.3.1",
     "ngx-highlightjs": "^7.0.0",
     "ngx-markdown": "^14.0.1",
-    "rxjs": "^6.6.3",
+    "rxjs": "^7.5.0",
     "tslib": "^2.3.1",
     "zone.js": "~0.11.4"
   },

package.json

@@ -1,8 +1,14 @@
 import { MatDrawerMode, MatSidenav } from '@angular/material/sidenav';
 import { SwUpdate } from '@angular/service-worker';
 import { Component, OnInit, ViewChild, HostBinding } from '@angular/core';
-import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
-import { delay, map, tap } from 'rxjs/operators';
+import {
+  BehaviorSubject,
+  combineLatest,
+  Observable,
+  delay,
+  map,
+  tap,
+} from 'rxjs';
 
 import { ResponsiveLayoutService } from './core/layout/responsive-layout.service';
 import { RefreshService } from './core/refresh.service';

projects/elements-demo/src/app/app.component.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { combineLatest, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { combineLatest, Observable, map } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',

projects/elements-demo/src/app/core/layout/responsive-layout.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { SwUpdate } from '@angular/service-worker';
-import { take } from 'rxjs/operators';
+import { take } from 'rxjs';
 
 @Injectable({
   providedIn: 'root',

projects/elements-demo/src/app/core/refresh.service.ts

@@ -2,8 +2,9 @@
   "name": "@angular-extensions/elements",
   "version": "14.0.0",
   "peerDependencies": {
-    "@angular/common": ">=12",
-    "@angular/core": ">=12"
+    "@angular/common": ">=14",
+    "@angular/core": ">=14",
+    "rxjs": ">=7.5.0"
   },
   "dependencies": {
     "tslib": "^2.1.0"

projects/elements/package.json

@@ -1,5 +1,5 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { LazyElementDynamicDirective } from './lazy-element-dynamic.directive';
 
@@ -36,12 +36,12 @@ describe('LazyElementDirectiveDynamic', () => {
   let fixture: ComponentFixture<TestHostComponent>;
   let appendChildSpy: jest.SpyInstance;
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
       declarations: [TestHostComponent, LazyElementDynamicDirective],
     }).compileComponents();
-  }));
+  });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TestHostComponent);

projects/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.spec.ts

@@ -13,8 +13,7 @@ import {
   ViewContainerRef,
 } from '@angular/core';
 import { DOCUMENT, isPlatformServer } from '@angular/common';
-import { from, Subscription } from 'rxjs';
-import { mergeMap } from 'rxjs/operators';
+import { from, Subscription, mergeMap } from 'rxjs';
 
 import {
   ElementConfig,

projects/elements/src/lib/lazy-elements/lazy-element-dynamic/lazy-element-dynamic.directive.ts

@@ -1,5 +1,5 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { LazyElementsModule } from '../lazy-elements.module';
 import { LazyElementsLoaderService } from '../lazy-elements-loader.service';
@@ -92,7 +92,6 @@ describe('LazyElementDirective', () => {
   let fixture: ComponentFixture<TestHostComponent>;
   let appendChildSpy: jest.SpyInstance;
   let whenDefinedSpy: jest.SpyInstance;
-  let requestAnimationFrameSpy: jest.SpyInstance;
 
   function getAppendChildFirstScript(): HTMLScriptElement {
     return appendChildSpy.mock.calls[0][0];
@@ -102,8 +101,8 @@ describe('LazyElementDirective', () => {
     return appendChildSpy.mock.calls[1][0];
   }
 
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
       imports: [
         TestModule,
         LazyElementsModule.forRoot({
@@ -119,9 +118,9 @@ describe('LazyElementDirective', () => {
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
       declarations: [TestHostComponent],
     }).compileComponents();
-  }));
+  });
 
-  beforeEach(() => {
+  beforeEach(async () => {
     fixture = TestBed.createComponent(TestHostComponent);
     testHostComponent = fixture.componentInstance;
     appendChildSpy = jest.spyOn(document.body, 'appendChild');
@@ -130,20 +129,13 @@ describe('LazyElementDirective', () => {
       .mockReturnValue(
         Promise.resolve(class DummyElement extends HTMLElement {})
       );
-    requestAnimationFrameSpy = jest
-      .spyOn(window, 'requestAnimationFrame')
-      .mockImplementation((callback) => {
-        const time = 0;
-        callback(time);
-        return time;
-      });
     fixture.detectChanges();
+    await fixture.whenRenderingDone();
   });
 
   afterEach(() => {
     appendChildSpy.mockRestore();
     whenDefinedSpy.mockRestore();
-    requestAnimationFrameSpy.mockRestore();
   });
 
   it('should create', () => {
@@ -167,10 +159,12 @@ describe('LazyElementDirective', () => {
     );
   });
 
-  it('adds multiple script tags if elements have different bundle url', () => {
+  it('adds multiple script tags if elements have different bundle url', async () => {
     testHostComponent.addOtherElement = true;
     fixture.detectChanges();
 
+    await fixture.whenStable();
+
     expect(appendChildSpy).toHaveBeenCalledTimes(2);
     expect(getAppendChildFirstScript().src).toBe(
       'http://elements.com/some-element'
@@ -180,11 +174,12 @@ describe('LazyElementDirective', () => {
     );
   });
 
-  it('renders loading template', () => {
+  it('renders loading template', async () => {
     expect(document.querySelector('.loading')).toBe(null);
 
     testHostComponent.useLoadingTemplate = true;
     fixture.detectChanges();
+    await fixture.whenStable();
 
     expect(document.querySelector('.loading').textContent).toBe('Loading...');
   });
@@ -194,6 +189,7 @@ describe('LazyElementDirective', () => {
 
     testHostComponent.useLoadingTemplate = true;
     fixture.detectChanges();
+    await fixture.whenStable();
 
     expect(document.querySelector('.loading').textContent).toBe('Loading...');
 
@@ -212,6 +208,7 @@ describe('LazyElementDirective', () => {
 
     testHostComponent.useErrorTemplate = true;
     fixture.detectChanges();
+    await fixture.whenStable();
 
     expect(document.querySelector('.loading').textContent).toBe('Loading...');
     expect(document.querySelector('.error')).toBe(null);
@@ -231,7 +228,7 @@ describe('LazyElementDirective', () => {
     consoleErrorSpy.mockRestore();
   });
 
-  it('uses type module on script tag when specified', () => {
+  it('uses type module on script tag when specified', async () => {
     fixture.detectChanges();
 
     expect(appendChildSpy).toHaveBeenCalledTimes(1);
@@ -242,6 +239,7 @@ describe('LazyElementDirective', () => {
 
     testHostComponent.useModule = true;
     fixture.detectChanges();
+    await fixture.whenStable();
 
     expect(appendChildSpy).toHaveBeenCalledTimes(2);
     expect(getAppendChildSecondScript().src).toBe(
@@ -273,14 +271,15 @@ describe('LazyElementDirective', () => {
     );
   });
 
-  it('uses elementConfig for the tag', () => {
+  it('uses elementConfig for the tag', async () => {
     testHostComponent.useElementConfig = true;
     fixture.detectChanges();
+    await fixture.whenStable();
 
     expect(document.querySelector('.loading').textContent).toBe('Spinner...');
   });
 
-  it('should load another element when the `url` binding changes', () => {
+  it('should load another element when the `url` binding changes', async () => {
     // Arrange
     const elementsLoaderService = TestBed.inject(LazyElementsLoaderService);
     const loadElementSpy = jest.spyOn(elementsLoaderService, 'loadElement');
@@ -290,10 +289,12 @@ describe('LazyElementDirective', () => {
     testHostComponent.url =
       'http://elements.com/some-configured-element-module';
     fixture.detectChanges();
+    await fixture.whenStable();
 
     testHostComponent.url =
       'http://elements.com/some-configured-element-module-es2015';
     fixture.detectChanges();
+    await fixture.whenStable();
 
     // Assert
     expect(loadElementSpy).toHaveBeenCalledTimes(2);

projects/elements/src/lib/lazy-elements/lazy-element/lazy-element.directive.spec.ts

@@ -20,8 +20,11 @@ import {
   EMPTY,
   from,
   Subscription,
+  catchError,
+  debounceTime,
+  mergeMap,
+  switchMap,
 } from 'rxjs';
-import { catchError, debounceTime, mergeMap, switchMap } from 'rxjs/operators';
 
 import {
   ElementConfig,