@testgorilla/tgo-ai-interview-test 2.0.0 → 2.0.2

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

@@ -1,212 +0,0 @@
-import { ChangeDetectorRef, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, signal } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { TranslocoService, TranslocoTestingModule } from '@ngneat/transloco';
-import {
-  MediaService,
-  Question,
-  SelectedMediaDevices,
-  TestResultRead,
-  ThemeService,
-} from '@testgorilla/tgo-test-shared';
-import { ButtonComponentModule, IconComponentModule } from '@testgorilla/tgo-ui';
-import { of, Subject } from 'rxjs';
-import { AiInterviewTestComponent } from './ai-interview-test.component';
-
-describe('AiInterviewTestComponent', () => {
-  let component: AiInterviewTestComponent;
-  let fixture: ComponentFixture<AiInterviewTestComponent>;
-  let transLocoServiceMock: Partial<jest.Mocked<TranslocoService>>;
-  let getMediaStreamSpy: jest.SpyInstance;
-  let submissionStateChangedSpy: jest.SpyInstance;
-  let mediaAccessChanged$: Subject<SelectedMediaDevices>;
-  let setSelectedMediaDevicesSpy: jest.SpyInstance;
-  let loadingStateChangedSpy: jest.SpyInstance;
-
-  const mockedTranslations = { testTranslationKey: 'test-translation' };
-  const mockStreamUrl = 'https://stream.com';
-
-  const mockedTest = {
-    is_preview_mode: false,
-  } as TestResultRead;
-
-  let hasMediaPermission = true;
-
-  class MediaServiceMock {
-    private recordSubject = new Subject();
-
-    isRecording = signal(false);
-
-    setSelectedMediaDevices(): void {
-      return;
-    }
-
-    getMediaStream() {
-      return Promise.resolve();
-    }
-
-    checkPermission() {
-      return Promise.resolve(hasMediaPermission);
-    }
-  }
-
-  beforeEach(async () => {
-    transLocoServiceMock = {
-      selectTranslateObject: jest.fn().mockReturnValue(of(mockedTranslations)),
-    };
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const mockedMediaService = new MediaServiceMock() as any as MediaService;
-
-    await TestBed.configureTestingModule({
-      imports: [
-        TranslocoTestingModule.forRoot({
-          translocoConfig: {
-            availableLangs: ['en'],
-            defaultLang: 'en',
-            reRenderOnLangChange: true,
-          },
-          preloadLangs: true,
-        }),
-        IconComponentModule,
-        ButtonComponentModule,
-        NoopAnimationsModule,
-        AiInterviewTestComponent,
-      ],
-      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
-      providers: [
-        { provide: TranslocoService, useValue: transLocoServiceMock },
-        { provide: MediaService, useValue: mockedMediaService },
-        {
-          provide: ChangeDetectorRef,
-          useValue: { markForCheck: jest.fn() },
-        },
-        {
-          provide: ThemeService,
-          useValue: {
-            uiTheme: 'dark',
-            getCompanyColor: jest.fn().mockReturnValue('#D410AA'),
-          },
-        },
-      ],
-    })
-      .overrideComponent(AiInterviewTestComponent, {
-        set: {
-          template: '',
-        },
-      })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(AiInterviewTestComponent);
-    component = fixture.componentInstance;
-
-    getMediaStreamSpy = jest.spyOn(mockedMediaService, 'getMediaStream');
-    setSelectedMediaDevicesSpy = jest.spyOn(mockedMediaService, 'setSelectedMediaDevices');
-    submissionStateChangedSpy = jest.spyOn(component.submissionStateChanged, 'emit');
-
-    loadingStateChangedSpy = jest.spyOn(component.loadingStateChanged, 'emit');
-
-    mediaAccessChanged$ = new Subject<SelectedMediaDevices>();
-    component.mediaAccessChanged = mediaAccessChanged$.asObservable();
-    hasMediaPermission = true;
-  });
-
-  afterEach(() => {
-    fixture.destroy();
-    jest.clearAllMocks();
-  });
-
-  describe('when component is initialized with and with question video content', () => {
-    beforeEach(() => {
-      component.question = {
-        text: ``,
-      } as Question;
-      component.test = mockedTest;
-      component.conversationUrl = mockStreamUrl;
-      component.ngOnInit();
-      fixture.detectChanges();
-    });
-
-    it('should set the translations', () => {
-      expect(component.translations).toEqual(mockedTranslations);
-    });
-
-    it('should init stream', () => {
-      expect(getMediaStreamSpy).toHaveBeenCalled();
-    });
-
-    it('should return stream content url', () => {
-      expect(component.conversationUrl).toBe(mockStreamUrl);
-    });
-
-    it('should has candidateStreamReady = false by default', () => {
-      expect(component.candidateVideoStreamReady()).toBe(false);
-    });
-
-    describe('when video is loaded', () => {
-      beforeEach(() => {
-        component.onVideoLoad();
-        fixture.detectChanges();
-      });
-
-      it('should set candidateStreamReady to true', () => {
-        expect(component.candidateVideoStreamReady()).toBe(true);
-      });
-    });
-
-    describe('when mediaAccessChange is called', () => {
-      const changedAudioDeviceId = 'test_audio_changed';
-      const changedVideoDeviceId = 'test_video_changed';
-      beforeEach(() => {
-        mediaAccessChanged$.next({
-          audioDeviceId: changedAudioDeviceId,
-          videoDeviceId: changedVideoDeviceId,
-        });
-        fixture.detectChanges();
-      });
-
-      it('should call mediaService.setSelectedMediaDevices() method with new devices Ids', () => {
-        expect(setSelectedMediaDevicesSpy).toHaveBeenCalledWith({
-          audioDeviceId: changedAudioDeviceId,
-          videoDeviceId: changedVideoDeviceId,
-        });
-      });
-
-      it('should reinitialize video stream', () => {
-        expect(getMediaStreamSpy).toHaveBeenCalled();
-      });
-    });
-
-    describe('when interviewStarted is called', () => {
-      beforeEach(() => {
-        component.interviewStarted();
-        fixture.detectChanges();
-      });
-
-      it('should set isInterviewInProgress to true', () => {
-        expect(component.isInterviewInProgress()).toBe(true);
-      });
-
-      it('should emit loadingStateChanged with false', () => {
-        expect(loadingStateChangedSpy).toHaveBeenCalledWith(false);
-      });
-
-      describe('when interviewEnded is called', () => {
-        beforeEach(() => {
-          component.interviewEnded();
-          fixture.detectChanges();
-        });
-
-        it('should set isInterviewInProgress to false', () => {
-          expect(component.isInterviewInProgress()).toBe(false);
-        });
-
-        it('should emit submissionStateChanged with empty text', () => {
-          expect(submissionStateChangedSpy).toHaveBeenCalledWith({
-            text: '',
-          });
-        });
-      });
-    });
-  });
-});

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

@@ -1,192 +0,0 @@
-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 }))]),
-        ]),
-    ],
-    imports: [
-        TranslocoModule,
-        ButtonComponentModule,
-        IconComponentModule,
-        CommonModule,
-        AudioAnimationComponent,
-        InterviewStreamComponent,
-    ],
-    providers: [
-        TranslocoLazyModuleUtils.getScopeProvider('tgo-ai-interview-test', getAvailableLangs(), ROOT_TRANSLATIONS_SCOPE, (lang: string) => {
-            // Fetch from app assets; demo app copies the library assets to
-            // /assets/tgo-ai-interview-test via project.json.
-            const url = new URL(`assets/tgo-ai-interview-test/i18n/${lang}.json`, document.baseURI).href;
-            return fetch(url).then((res) => res.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/interview-stream/interview-stream.component.html

@@ -1,9 +0,0 @@
-<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

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

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

@@ -1,259 +0,0 @@
-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)}`;
-  }
-}
-
-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();
-      });
-    });
-  });
-});