@testgorilla/tgo-ai-interview-test 0.0.1

package/src/lib/components/ai-interview-test/ai-interview-test.component.ts

@@ -0,0 +1,193 @@
+import { InterviewStreamComponent } from '../interview-stream/interview-stream.component';
+import { firstValueFrom, Observable, takeUntil } from 'rxjs';
+import { transition, style, animate, trigger } from '@angular/animations';
+import {
+  ElementRef,
+  OnDestroy,
+  signal,
+  ViewChild,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+  OnInit,
+  Inject,
+  ChangeDetectorRef,
+} from '@angular/core';
+import { Subject } from 'rxjs';
+import {
+  ButtonComponentModule,
+  DialogService,
+  IconComponentModule,
+} from '@testgorilla/tgo-ui';
+import { CommonModule } from '@angular/common';
+import {
+  TRANSLOCO_SCOPE,
+  TranslocoModule,
+  TranslocoScope,
+  TranslocoService,
+} from '@ngneat/transloco';
+import {
+  AudioAnimationComponent,
+  Question,
+  TestResultRead,
+  SelectedMediaDevices,
+  ISubmissionState,
+  ROOT_TRANSLATIONS_SCOPE,
+  MediaService,
+  ThemeService,
+  TranslocoLazyModuleUtils,
+  getAvailableLangs,
+} from '@testgorilla/tgo-test-shared';
+import { IQuestionDataContract } from '../../models';
+
+@Component({
+  selector: 'tgo-ai-interview-test',
+  templateUrl: './ai-interview-test.component.html',
+  styleUrl: './ai-interview-test.component.scss',
+  animations: [
+    trigger('fadeInFadeOut', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate('600ms', style({ opacity: 1 })),
+      ]),
+      transition(':leave', [animate('600ms', style({ opacity: 0 }))]),
+    ]),
+  ],
+  standalone: true,
+  imports: [
+    TranslocoModule,
+    ButtonComponentModule,
+    IconComponentModule,
+    CommonModule,
+    AudioAnimationComponent,
+    InterviewStreamComponent,
+  ],
+  providers: [
+    TranslocoLazyModuleUtils.getScopeProvider(
+      'tgo-ai-interview-test',
+      getAvailableLangs(),
+      ROOT_TRANSLATIONS_SCOPE,
+      (lang: string) => import(`../../../assets/i18n/${lang}.json`)
+    ),
+    DialogService,
+    ThemeService,
+  ],
+})
+export class AiInterviewTestComponent
+  implements OnInit, OnDestroy, IQuestionDataContract
+{
+  @ViewChild('video') videoElement?: ElementRef<HTMLVideoElement>;
+  @ViewChild('audio') audioElement?: ElementRef<HTMLAudioElement>;
+  @Input({ required: true }) question!: Question;
+  @Input({ required: true }) test!: TestResultRead;
+  @Input() isFirstQuestion?: boolean = false;
+  @Input() selectedMediaDevices?: SelectedMediaDevices;
+  @Input() conversationUrl?: string;
+  @Input() mediaAccessChanged?: Observable<SelectedMediaDevices> | undefined;
+
+  @Output() submissionStateChanged =
+    new EventEmitter<ISubmissionState | null>();
+  @Output() loadingStateChanged: EventEmitter<boolean> =
+    new EventEmitter<boolean>();
+  @Output() requestMediaAccess: EventEmitter<void> = new EventEmitter<void>();
+
+  isInterviewInProgress = signal(false);
+  candidateVideoStreamReady = signal(false);
+  translations: { [key: string]: string } = {};
+  hasMediaPermissions = signal(false);
+
+  private unsubscribe$ = new Subject<void>();
+  private mediaService = inject(MediaService);
+  private translocoService = inject(TranslocoService);
+  private cdr = inject(ChangeDetectorRef);
+  private themeService = inject(ThemeService);
+
+  companyColor = this.themeService.getCompanyColor();
+
+  constructor(
+    @Inject(TRANSLOCO_SCOPE) private translationScope: TranslocoScope
+  ) {}
+
+  ngOnInit(): void {
+    this.initMediaAccessSubscription();
+    this.loadingStateChanged.emit(true);
+    this.mediaService.setSelectedMediaDevices(this.selectedMediaDevices);
+    void this.checkMediaPermissions();
+
+    void this.setTranslations();
+    void this.initVideoStream();
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+  }
+
+  onVideoLoad() {
+    this.candidateVideoStreamReady.set(true);
+  }
+
+  interviewStarted() {
+    this.isInterviewInProgress.set(true);
+    this.loadingStateChanged.emit(false);
+  }
+
+  interviewEnded() {
+    this.isInterviewInProgress.set(false);
+    this.submissionStateChanged.emit({
+      text: '',
+    });
+  }
+
+  async checkMediaPermissions() {
+    if (
+      !(await this.mediaService.checkPermission({ audio: true, video: false }))
+    ) {
+      this.hasMediaPermissions.set(false);
+      this.requestMediaAccess.emit();
+      return;
+    } else {
+      this.hasMediaPermissions.set(true);
+    }
+  }
+
+  private async initVideoStream() {
+    try {
+      const stream = await this.mediaService.getMediaStream({
+        video: true,
+        audio: false,
+      });
+      if (this.videoElement) {
+        this.videoElement.nativeElement.srcObject = stream;
+        await this.videoElement?.nativeElement.play();
+      }
+    } catch (error) {
+      console.error('Error initializing video stream:', error);
+      this.candidateVideoStreamReady.set(false);
+    }
+  }
+
+  private async setTranslations() {
+    this.translations = await firstValueFrom(
+      this.translocoService.selectTranslateObject(
+        `TEST`,
+        {},
+        this.translationScope as string
+      )
+    );
+    this.cdr.markForCheck();
+  }
+
+  private initMediaAccessSubscription() {
+    this.mediaAccessChanged
+      ?.pipe(takeUntil(this.unsubscribe$))
+      .subscribe((selectedMediaDevices) => {
+        this.mediaService.setSelectedMediaDevices(selectedMediaDevices);
+        this.checkMediaPermissions();
+        void this.initVideoStream();
+      });
+  }
+}
+

package/src/lib/components/index.ts

@@ -0,0 +1,3 @@
+export * from './ai-interview-test/ai-interview-test.component';
+export * from './interview-stream/interview-stream.component';
+export * from './interview-video/interview-video.component';

package/src/lib/components/interview-stream/interview-stream.component.html

@@ -0,0 +1,9 @@
+<div class="interview-stream">
+  @if (avatarParticipant) {
+  <tgo-interview-video
+    [videoTrack]="avatarParticipant.videoTrack"
+    [audioTrack]="avatarParticipant.audioTrack"
+  ></tgo-interview-video>
+  }
+</div>
+

package/src/lib/components/interview-stream/interview-stream.component.scss

@@ -0,0 +1,5 @@
+.interview-stream {
+  width: 100%;
+  height: 100%;
+}
+

package/src/lib/components/interview-stream/interview-stream.component.spec.ts

@@ -0,0 +1,285 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  DailyEventObjectFatalError,
+  DailyEventObjectNoPayload,
+  DailyEventObjectParticipant,
+  DailyEventObjectParticipantLeft,
+  DailyEventObjectParticipants,
+  DailyEventObjectTrack,
+  DailyParticipant,
+} from '@daily-co/daily-js';
+import { InterviewStreamComponent } from './interview-stream.component';
+
+class MediaStreamTrackMock {
+  kind: string;
+  enabled: boolean;
+  id: string;
+  constructor(kind = 'video') {
+    this.kind = kind;
+    this.enabled = true;
+    this.id = `${kind}-track-${Math.random().toString(36).substring(2, 15)}`;
+  }
+}
+
+// Mock Daily.co
+jest.mock('@daily-co/daily-js', () => {
+  const mockCallObject = {
+    on: jest.fn().mockReturnThis(),
+    off: jest.fn().mockReturnThis(),
+    join: jest.fn().mockResolvedValue(undefined),
+    leave: jest.fn(),
+    destroy: jest.fn(),
+    stopRecording: jest.fn(),
+    setInputDevicesAsync: jest.fn().mockResolvedValue(undefined),
+    startRecording: jest.fn(),
+    sendAppMessage: jest.fn(),
+  };
+
+  const mockDailyIframe = {
+    getCallInstance: jest.fn().mockReturnValue(null),
+    createCallObject: jest.fn().mockReturnValue(mockCallObject),
+  };
+
+  return {
+    __esModule: true,
+    default: mockDailyIframe,
+    DailyIframe: mockDailyIframe,
+  };
+});
+
+describe('InterviewStreamComponent', () => {
+  let component: InterviewStreamComponent;
+  let fixture: ComponentFixture<InterviewStreamComponent>;
+  let streamStartSpy: jest.SpyInstance;
+  let streamEndSpy: jest.SpyInstance;
+
+  beforeEach(async () => {
+    // Mock MediaStream for InterviewVideoComponent
+    class MediaStreamMock {
+      tracks: MediaStreamTrack[] = [];
+      constructor(initialTracks: MediaStreamTrack[]) {
+        this.tracks = [...initialTracks];
+      }
+
+      addTrack(track: MediaStreamTrack) {
+        this.tracks.push(track);
+      }
+
+      removeTrack(track: MediaStreamTrack) {
+        const index = this.tracks.findIndex(t => t.id === track.id);
+        if (index !== -1) {
+          this.tracks.splice(index, 1);
+        }
+      }
+      getVideoTracks() {
+        return this.tracks.filter(t => t.kind === 'video');
+      }
+      getAudioTracks() {
+        return this.tracks.filter(t => t.kind === 'audio');
+      }
+    }
+
+    Object.defineProperty(global, 'MediaStream', {
+      writable: true,
+      value: jest.fn().mockImplementation(tracks => new MediaStreamMock(tracks)),
+    });
+
+    await TestBed.configureTestingModule({
+      imports: [InterviewStreamComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(InterviewStreamComponent);
+    component = fixture.componentInstance;
+    streamStartSpy = jest.spyOn(component.streamStart, 'emit');
+    streamEndSpy = jest.spyOn(component.streamEnd, 'emit');
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+    jest.clearAllMocks();
+  });
+
+  describe('when component is initialized with conversationUrl', () => {
+    beforeEach(() => {
+      component.conversationUrl = 'https://example.com/conversation';
+      component.ngOnInit();
+      fixture.detectChanges();
+    });
+
+    it('should initialize the call object', () => {
+      expect(component.callObject).toBeDefined();
+    });
+
+    describe('when candidateJoinMeeting event is triggered', () => {
+      beforeEach(() => {
+        component['candidateJoinMeeting']({} as DailyEventObjectParticipants);
+      });
+
+      it('should emit streamStart event', () => {
+        expect(streamStartSpy).toHaveBeenCalled();
+      });
+
+      it('should set candidateJoined to true', () => {
+        expect(component.candidateJoined()).toBe(true);
+      });
+    });
+
+    describe('when candidateLeaveMeeting event is triggered', () => {
+      beforeEach(() => {
+        component['handleLeftMeeting']({} as DailyEventObjectNoPayload);
+      });
+
+      it('should emit streamEnd event', () => {
+        expect(streamEndSpy).toHaveBeenCalled();
+      });
+
+      it('should set candidateJoined to false', () => {
+        expect(component.candidateJoined()).toBe(false);
+      });
+    });
+
+    describe('when participantJoined event is triggered', () => {
+      const testSessionId = '123';
+      const testUserName = 'Test User';
+      beforeEach(() => {
+        component['participantJoined']({
+          participant: {
+            user_name: testUserName,
+            session_id: testSessionId,
+            tracks: {},
+          } as DailyParticipant,
+        } as DailyEventObjectParticipant);
+      });
+
+      it('should set avatarParticipant with the participant data', () => {
+        expect(component.avatarParticipant?.userName).toEqual(testUserName);
+        expect(component.avatarParticipant?.sessionId).toEqual(testSessionId);
+      });
+
+      describe('when video ready track-started event is triggered', () => {
+        beforeEach(() => {
+          const videoTrack = new MediaStreamTrackMock('video') as MediaStreamTrack;
+          component.candidateJoined.set(true);
+          const event = {
+            action: 'track-started',
+            participant: {
+              user_name: testUserName,
+              session_id: testSessionId,
+              tracks: {
+                video: {
+                  state: 'playable',
+                  persistentTrack: videoTrack,
+                },
+              },
+            } as unknown as DailyParticipant,
+            type: 'video',
+          } as DailyEventObjectTrack;
+          component['handleTrackStartedStopped'](event);
+        });
+
+        it('should set videoReady to true for the participant', () => {
+          expect(component.avatarParticipant?.videoReady).toBe(true);
+        });
+
+        it('should set videoTrack for the participant', () => {
+          expect(component.avatarParticipant?.videoTrack).toBeDefined();
+        });
+
+        it('should not set audioReady for the participant', () => {
+          expect(component.avatarParticipant?.audioReady).toBe(false);
+        });
+
+        it('should not set audioTrack for the participant', () => {
+          expect(component.avatarParticipant?.audioTrack).toBeUndefined();
+        });
+      });
+
+      describe('when audio ready track-started event is triggered', () => {
+        const testSessionId = '123';
+        const testUserName = 'Test User';
+        beforeEach(() => {
+          const audioTrack = new MediaStreamTrackMock('audio') as MediaStreamTrack;
+          component.candidateJoined.set(true);
+          const event = {
+            action: 'track-started',
+            participant: {
+              user_name: testUserName,
+              session_id: testSessionId,
+              tracks: {
+                audio: {
+                  state: 'playable',
+                  persistentTrack: audioTrack,
+                },
+              },
+            } as unknown as DailyParticipant,
+            type: 'audio',
+          } as DailyEventObjectTrack;
+          component['handleTrackStartedStopped'](event);
+        });
+
+        it('should set audioReady to true for the participant', () => {
+          expect(component.avatarParticipant?.audioReady).toBe(true);
+        });
+
+        it('should set audioTrack for the participant', () => {
+          expect(component.avatarParticipant?.audioTrack).toBeDefined();
+        });
+
+        it('should not set videoReady for the participant', () => {
+          expect(component.avatarParticipant?.videoReady).toBe(false);
+        });
+
+        it('should not set videoTrack for the participant', () => {
+          expect(component.avatarParticipant?.videoTrack).toBeUndefined();
+        });
+      });
+    });
+
+    describe('when participantLeft event is triggered', () => {
+      let callObjectLeaveSpy: jest.SpyInstance;
+      beforeEach(() => {
+        const testSessionId = '123';
+        const testUserName = 'Test User';
+        if (component.callObject) {
+          callObjectLeaveSpy = jest.spyOn(component.callObject, 'leave');
+        }
+        component['handleParticipantLeft']({
+          participant: {
+            user_name: testUserName,
+            session_id: testSessionId,
+            tracks: {},
+          } as DailyParticipant,
+        } as DailyEventObjectParticipantLeft);
+      });
+
+      it('should call callObject.leave()', () => {
+        expect(callObjectLeaveSpy).toHaveBeenCalled();
+      });
+    });
+
+    describe('when handleError event is triggered', () => {
+      let callObjectLeaveSpy: jest.SpyInstance;
+      let consoleErrorSpy: jest.SpyInstance;
+
+      beforeEach(() => {
+        consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+        if (component.callObject) {
+          callObjectLeaveSpy = jest.spyOn(component.callObject, 'leave');
+        }
+        component['handleError']({
+          errorMsg: 'Test',
+        } as DailyEventObjectFatalError);
+      });
+
+      afterEach(() => {
+        consoleErrorSpy.mockRestore();
+      });
+
+      it('should call callObject.leave()', () => {
+        expect(callObjectLeaveSpy).toHaveBeenCalled();
+      });
+    });
+  });
+});