openvidu-testapp: upgrade dependencies, including Angular 22

pull/875/merge
pabloFuente 2026-07-11 16:10:20 +02:00
parent e831d35da1
commit 4651dd1414
34 changed files with 1625 additions and 1515 deletions

View File

@ -81,6 +81,7 @@
"test": {
"builder": "@angular/build:karma",
"options": {
"externalDependencies": ["node:crypto"],
"polyfills": [
"zone.js",
"zone.js/testing",

File diff suppressed because it is too large Load Diff

View File

@ -18,22 +18,22 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^21.2.14",
"@angular/cdk": "^21.2.12",
"@angular/common": "^21.2.14",
"@angular/compiler": "^21.2.14",
"@angular/core": "^21.2.14",
"@angular/forms": "^21.2.14",
"@angular/material": "^21.2.12",
"@angular/platform-browser": "^21.2.14",
"@angular/router": "^21.2.14",
"@livekit/protocol": "^1.46.0",
"@angular/animations": "^22.0.6",
"@angular/cdk": "^22.0.4",
"@angular/common": "^22.0.6",
"@angular/compiler": "^22.0.6",
"@angular/core": "^22.0.6",
"@angular/forms": "^22.0.6",
"@angular/material": "^22.0.4",
"@angular/platform-browser": "^22.0.6",
"@angular/router": "^22.0.6",
"@livekit/protocol": "^1.49.0",
"@livekit/track-processors": "^0.7.2",
"buffer": "^6.0.3",
"crypto-browserify": "^3.12.1",
"json-stringify-safe": "5.0.1",
"livekit-client": "2.19.0",
"livekit-server-sdk": "^2.15.3",
"livekit-client": "2.20.1",
"livekit-server-sdk": "^2.17.0",
"rxjs": "~7.8.2",
"stream-browserify": "^3.0.0",
"tslib": "^2.8.1",
@ -41,21 +41,22 @@
"zone.js": "~0.16.2"
},
"devDependencies": {
"@angular/build": "^21.2.12",
"@angular/cli": "~21.2.12",
"@angular/compiler-cli": "^21.2.14",
"@types/dom-mediacapture-transform": "^0.1.11",
"@angular/build": "^22.0.6",
"@angular/cli": "~22.0.6",
"@angular/compiler-cli": "^22.0.6",
"@types/dom-mediacapture-transform": "^0.1.12",
"@types/events": "^3.0.3",
"@types/jasmine": "~6.0.0",
"@types/json-stringify-safe": "^5.0.3",
"@types/node": "^25.9.1",
"@types/node": "^26.1.1",
"http-server": "^14.1.1",
"jasmine-core": "~6.2.0",
"istanbul-lib-instrument": "^6.0.3",
"jasmine-core": "~6.3.0",
"karma": "~6.4.4",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.1",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.2.0",
"typescript": "~5.9.3"
"typescript": "~6.0.3"
}
}

View File

@ -1,29 +1,18 @@
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(() => TestBed.configureTestingModule({
imports: [RouterTestingModule],
declarations: [AppComponent]
}));
beforeEach(() =>
TestBed.configureTestingModule({
imports: [AppComponent],
providers: [provideRouter([])],
})
);
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'openvidu-testapp-livekit'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('openvidu-testapp-livekit');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('.content span')?.textContent).toContain('openvidu-testapp-livekit app is running!');
});
});

View File

@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Router, RouterOutlet, RouterLink } from '@angular/router';
import { LogLevel, setLogLevel } from 'livekit-client';
@ -13,6 +13,7 @@ import { MatButtonModule } from '@angular/material/button';
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css',
changeDetection: ChangeDetectionStrategy.Eager,
imports: [FormsModule, RouterOutlet, RouterLink, MatSidenavModule, MatToolbarModule, MatFormFieldModule, MatInputModule, MatButtonModule],
})
export class AppComponent {

View File

@ -1,4 +1,5 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TrackPublication } from 'livekit-client';
import { AudioTrackComponent } from './audio-track.component';
@ -8,10 +9,14 @@ describe('AudioTrackComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [AudioTrackComponent]
imports: [AudioTrackComponent]
});
fixture = TestBed.createComponent(AudioTrackComponent);
component = fixture.componentInstance;
fixture.componentRef.setInput('trackPublication', {
source: 'microphone',
} as unknown as TrackPublication);
fixture.componentRef.setInput('index', 0);
fixture.detectChanges();
});

View File

@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { NgClass } from '@angular/common';
import { LocalTrack } from 'livekit-client';
import { MatIconModule } from '@angular/material/icon';
@ -9,6 +9,7 @@ import { TrackComponent } from '../track/track.component';
selector: 'app-audio-track',
templateUrl: './audio-track.component.html',
styleUrl: './audio-track.component.css',
changeDetection: ChangeDetectionStrategy.Eager,
imports: [NgClass, MatIconModule, MatTooltipModule],
})
export class AudioTrackComponent extends TrackComponent {

View File

@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, Output, ChangeDetectorRef } from '@angular/core';
import { Component, EventEmitter, Input, Output, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatTooltipModule } from '@angular/material/tooltip';
import {
@ -15,6 +15,7 @@ import {
selector: 'app-data-track',
templateUrl: './data-track.component.html',
styleUrl: './data-track.component.css',
changeDetection: ChangeDetectionStrategy.Eager,
imports: [MatIconModule, MatTooltipModule],
})
export class DataTrackComponent {

View File

@ -1,4 +1,4 @@
import { Component, inject } from '@angular/core';
import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
import { SlicePipe } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@ -81,6 +81,7 @@ export interface EventGroup {
'.group-label:first-child { margin-top: 0; }',
'.extra-toggle { margin-top: 5px; }'
],
changeDetection: ChangeDetectionStrategy.Eager,
imports: [SlicePipe, FormsModule, MatDialogModule, MatSlideToggleModule, MatDividerModule, MatButtonModule],
})
export class EventsDialogComponent {

View File

@ -1,5 +1,6 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { InfoDialogComponent } from './info-dialog.component';
describe('InfoDialogComponent', () => {
@ -8,7 +9,8 @@ describe('InfoDialogComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [InfoDialogComponent]
imports: [InfoDialogComponent],
providers: [{ provide: MAT_DIALOG_DATA, useValue: {} }]
});
fixture = TestBed.createComponent(InfoDialogComponent);
component = fixture.componentInstance;

View File

@ -1,4 +1,4 @@
import { Component, NgZone, OnDestroy, ViewChild, inject } from '@angular/core';
import { Component, NgZone, OnDestroy, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
import { take } from 'rxjs/operators';
@ -11,6 +11,7 @@ import { MatButtonModule } from '@angular/material/button';
selector: 'app-info-dialog',
templateUrl: './info-dialog.component.html',
styleUrl: './info-dialog.component.css',
changeDetection: ChangeDetectionStrategy.Eager,
imports: [FormsModule, CdkTextareaAutosize, MatDialogModule, MatFormFieldModule, MatInputModule, MatButtonModule],
})
export class InfoDialogComponent implements OnDestroy {

View File

@ -1,5 +1,6 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { OptionsDialogComponent } from './options-dialog.component';
describe('OptionsDialogComponent', () => {
@ -8,7 +9,11 @@ describe('OptionsDialogComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [OptionsDialogComponent]
imports: [OptionsDialogComponent],
providers: [
{ provide: MatDialogRef, useValue: {} },
{ provide: MAT_DIALOG_DATA, useValue: {} },
]
});
fixture = TestBed.createComponent(OptionsDialogComponent);
component = fixture.componentInstance;

View File

@ -1,4 +1,4 @@
import { Component, inject } from '@angular/core';
import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
import { NgClass, UpperCasePipe } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
@ -27,6 +27,7 @@ import {
selector: 'app-options-dialog',
templateUrl: './options-dialog.component.html',
styleUrl: './options-dialog.component.css',
changeDetection: ChangeDetectionStrategy.Eager,
imports: [NgClass, UpperCasePipe, FormsModule, MatDialogModule, MatRadioModule, MatDividerModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatButtonModule, VideoResolutionComponent],
})
export class OptionsDialogComponent {

View File

@ -8,7 +8,7 @@ describe('VideoResolutionComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [VideoResolutionComponent]
imports: [VideoResolutionComponent]
});
fixture = TestBed.createComponent(VideoResolutionComponent);
component = fixture.componentInstance;

View File

@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
@ -7,6 +7,7 @@ import { MatInputModule } from '@angular/material/input';
selector: 'app-video-resolution',
templateUrl: './video-resolution.component.html',
styleUrl: './video-resolution.component.css',
changeDetection: ChangeDetectionStrategy.Eager,
imports: [FormsModule, MatFormFieldModule, MatInputModule],
})
export class VideoResolutionComponent {

View File

@ -5,6 +5,7 @@ import {
OnDestroy,
ViewChild,
inject,
ChangeDetectionStrategy
} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
@ -28,6 +29,7 @@ import {
selector: 'app-processor-dialog',
templateUrl: './processor-dialog.component.html',
styleUrl: './processor-dialog.component.css',
changeDetection: ChangeDetectionStrategy.Eager,
imports: [FormsModule, MatDialogModule, MatSlideToggleModule, MatFormFieldModule, MatSelectModule, MatSliderModule, MatButtonModule, MatTooltipModule, MatDividerModule, MatIconModule, MatInputModule],
})
export class ProcessorDialogComponent implements AfterViewInit, OnDestroy {

View File

@ -1,6 +1,6 @@
import { LiveAnnouncer } from '@angular/cdk/a11y';
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { Component, inject } from '@angular/core';
import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@ -40,6 +40,7 @@ import {
selector: 'app-room-api-dialog',
templateUrl: './room-api-dialog.component.html',
styleUrl: './room-api-dialog.component.css',
changeDetection: ChangeDetectionStrategy.Eager,
imports: [FormsModule, MatDialogModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatCheckboxModule, MatDividerModule, MatSelectModule, MatChipsModule, MatIconModule, MatTooltipModule, MatSlideToggleModule],
})
export class RoomApiDialogComponent {

View File

@ -1,5 +1,6 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RoomConf } from '../test-sessions/test-sessions.component';
import { OpenviduInstanceComponent } from './openvidu-instance.component';
describe('OpenviduInstanceComponent', () => {
@ -8,10 +9,18 @@ describe('OpenviduInstanceComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [OpenviduInstanceComponent]
imports: [OpenviduInstanceComponent]
});
fixture = TestBed.createComponent(OpenviduInstanceComponent);
component = fixture.componentInstance;
const roomConf: RoomConf = {
uid: 0,
subscriber: true,
publisher: true,
startSession: false,
};
fixture.componentRef.setInput('roomConf', roomConf);
fixture.componentRef.setInput('index', 0);
fixture.detectChanges();
});

View File

@ -5,6 +5,7 @@ import {
Input,
Output,
inject,
ChangeDetectionStrategy
} from '@angular/core';
import { NgClass, KeyValuePipe } from '@angular/common';
import { FormsModule } from '@angular/forms';
@ -77,6 +78,7 @@ import {
selector: 'app-openvidu-instance',
templateUrl: './openvidu-instance.component.html',
styleUrl: './openvidu-instance.component.css',
changeDetection: ChangeDetectionStrategy.Eager,
imports: [NgClass, KeyValuePipe, FormsModule, MatCardModule, MatFormFieldModule, MatInputModule, MatIconModule, MatButtonModule, MatCheckboxModule, MatExpansionModule, ParticipantComponent],
})
export class OpenviduInstanceComponent {

View File

@ -1,4 +1,5 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Room } from 'livekit-client';
import { ParticipantComponent } from './participant.component';
@ -8,10 +9,14 @@ describe('ParticipantComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ParticipantComponent]
imports: [ParticipantComponent]
});
fixture = TestBed.createComponent(ParticipantComponent);
component = fixture.componentInstance;
const room = new Room();
fixture.componentRef.setInput('room', room);
fixture.componentRef.setInput('participant', room.localParticipant);
fixture.componentRef.setInput('index', 0);
fixture.detectChanges();
});

View File

@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, Output, ChangeDetectorRef, inject } from '@angular/core';
import { Component, EventEmitter, Input, Output, ChangeDetectorRef, inject, ChangeDetectionStrategy } from '@angular/core';
import { NgClass, KeyValuePipe } from '@angular/common';
import { MatDialog } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
@ -47,6 +47,7 @@ import {
selector: 'app-participant',
templateUrl: './participant.component.html',
styleUrl: './participant.component.css',
changeDetection: ChangeDetectionStrategy.Eager,
imports: [NgClass, KeyValuePipe, MatIconModule, MatTooltipModule, MatExpansionModule, VideoTrackComponent, AudioTrackComponent, DataTrackComponent],
})
export class ParticipantComponent {

View File

@ -8,7 +8,7 @@ describe('TestScenariosComponent', () => {
beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [ TestScenariosComponent ]
imports: [TestScenariosComponent]
})
.compileComponents();
}));

View File

@ -1,4 +1,4 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component, OnDestroy, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Subscription } from 'rxjs';
@ -49,6 +49,7 @@ export interface User {
selector: 'app-test-scenarios',
templateUrl: './test-scenarios.component.html',
styleUrl: './test-scenarios.component.css',
changeDetection: ChangeDetectionStrategy.Eager,
imports: [FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatIconModule, UsersTableComponent],
})
export class TestScenariosComponent implements OnInit, OnDestroy {

View File

@ -8,7 +8,7 @@ describe('TestSessionsComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestSessionsComponent]
imports: [TestSessionsComponent]
});
fixture = TestBed.createComponent(TestSessionsComponent);
component = fixture.componentInstance;

View File

@ -1,5 +1,5 @@
import { animate, style, transition, trigger } from '@angular/animations';
import { Component } from '@angular/core';
import { Component, ChangeDetectionStrategy } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Subscription } from 'rxjs';
import { TestFeedService } from 'src/app/services/test-feed.service';
@ -30,6 +30,7 @@ export interface RoomConf {
]),
]),
],
changeDetection: ChangeDetectionStrategy.Eager,
imports: [FormsModule, MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, OpenviduInstanceComponent],
})
export class TestSessionsComponent {

View File

@ -5,6 +5,7 @@ import {
Input,
Output,
ViewChild,
ChangeDetectionStrategy
} from '@angular/core';
import {
TrackPublication,
@ -28,6 +29,7 @@ import {
@Component({
selector: 'app-track',
changeDetection: ChangeDetectionStrategy.Eager,
template: '',
})
export class TrackComponent {

View File

@ -4,6 +4,7 @@ import {
AfterViewInit,
ViewChild,
ElementRef,
ChangeDetectionStrategy
} from '@angular/core';
import { AudioTrack, VideoTrack } from 'livekit-client';
@ -12,6 +13,7 @@ import { AudioTrack, VideoTrack } from 'livekit-client';
template: `
<video #mediaElement [id]="videoId" autoplay playsinline></video>
`,
changeDetection: ChangeDetectionStrategy.Eager,
styles: [
`
video {

View File

@ -1,4 +1,4 @@
import { Component, Input } from '@angular/core';
import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { AudioTrack, VideoTrack } from 'livekit-client';
import { MatBadgeModule } from '@angular/material/badge';
import { CallbackPipe } from 'src/app/pipes/callback.pipe';
@ -9,6 +9,7 @@ import { User } from '../test-scenarios/test-scenarios.component';
selector: 'app-users-table',
styleUrl: 'users-table.component.css',
templateUrl: 'users-table.component.html',
changeDetection: ChangeDetectionStrategy.Eager,
imports: [MatBadgeModule, CallbackPipe, TableVideoComponent],
})
export class UsersTableComponent {

View File

@ -8,7 +8,7 @@ describe('VideoTrackComponent', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [VideoTrackComponent]
imports: [VideoTrackComponent]
});
fixture = TestBed.createComponent(VideoTrackComponent);
component = fixture.componentInstance;

View File

@ -1,4 +1,4 @@
import { Component, inject } from '@angular/core';
import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
import { NgClass } from '@angular/common';
import {
LocalTrack,
@ -20,6 +20,7 @@ import { MatSelectModule } from '@angular/material/select';
selector: 'app-video-track',
templateUrl: './video-track.component.html',
styleUrl: './video-track.component.css',
changeDetection: ChangeDetectionStrategy.Eager,
imports: [NgClass, MatIconModule, MatTooltipModule, MatFormFieldModule, MatSelectModule],
})
export class VideoTrackComponent extends TrackComponent {

View File

@ -2,7 +2,7 @@ import { provideZoneChangeDetection } from "@angular/core";
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withHashLocation } from '@angular/router';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClient, withXhr } from '@angular/common/http';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
import { AppComponent } from './app/app.component';
@ -12,7 +12,7 @@ bootstrapApplication(AppComponent, {
providers: [
provideZoneChangeDetection(),provideRouter(routes, withHashLocation()),
provideAnimationsAsync(),
provideHttpClient(),
provideHttpClient(withXhr()),
{
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: { appearance: 'outline', subscriptSizing: 'dynamic' },

View File

@ -14,5 +14,13 @@
],
"include": [
"src/**/*.d.ts"
]
],
"angularCompilerOptions": {
"extendedDiagnostics": {
"checks": {
"nullishCoalescingNotNullable": "suppress",
"optionalChainNotNullable": "suppress"
}
}
}
}

View File

@ -2,7 +2,6 @@
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
@ -22,6 +21,8 @@
"strictPropertyInitialization": false,
"skipLibCheck": true,
"paths": {
"src/*": ["./src/*"],
"node_modules/*": ["./node_modules/*"],
"crypto": ["./node_modules/crypto-browserify"],
"node:crypto": ["./node_modules/crypto-browserify"],
"stream": ["./node_modules/stream-browserify"],

View File

@ -10,5 +10,13 @@
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
],
"angularCompilerOptions": {
"extendedDiagnostics": {
"checks": {
"nullishCoalescingNotNullable": "suppress",
"optionalChainNotNullable": "suppress"
}
}
}
}