@testgorilla/tgo-immersive-test 0.0.1

package/src/lib/components/immersive-test/immersive-test.component.spec.ts

@@ -0,0 +1,581 @@
+import { ChangeDetectorRef, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, signal } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+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 { DialogService } from '@testgorilla/tgo-ui';
+import { of, Subject } from 'rxjs';
+import { ImmersiveTestComponent } from './immersive-test.component';
+
+describe('ImmersiveTestComponent', () => {
+  let component: ImmersiveTestComponent;
+  let fixture: ComponentFixture<ImmersiveTestComponent>;
+  let transLocoServiceMock: Partial<jest.Mocked<TranslocoService>>;
+  let getMediaStreamSpy: jest.SpyInstance;
+  let checkMediaPermissionSpy: jest.SpyInstance;
+  let recordAudioSpy: jest.SpyInstance;
+  let stopRecordingSpy: jest.SpyInstance;
+  let playAudioSpy: jest.SpyInstance;
+  let submissionStateChangedSpy: jest.SpyInstance;
+  let requestMediaAccessSpy: jest.SpyInstance;
+  let openDialogSpy: jest.SpyInstance;
+  let expirationSubject$: Subject<void>;
+  let mediaAccessChanged$: Subject<SelectedMediaDevices>;
+  let setSelectedMediaDevicesSpy: jest.SpyInstance;
+
+  const mockedTranslations = { testTranslationKey: 'test-translation' };
+  const mockVideoUrl = 'https://player.vimeo.com/video/1234';
+  const mockedQuestionWithVideo = {
+    text: `<p>mock</p><iframe src="${mockVideoUrl}"></iframe>`,
+  } as Question;
+  const mockAudioUrl = 'https://test.com/audio.mp3';
+  const mockedQuestionWithAudio = {
+    text: `<p>mock</p><iframe src="${mockAudioUrl}"></iframe>`,
+  } as Question;
+  const mockedTest = {
+    is_preview_mode: false,
+  } as TestResultRead;
+  const mockedObjectUrl = 'objectUrl';
+
+  const selectors = {
+    getStartQuestionBtn: () =>
+      fixture.debugElement.query(By.css('[data-testid="immersive-test.start-question-btn"]')),
+    getStopRecordingBtn: () =>
+      fixture.debugElement.query(By.css('[data-testid="immersive-test.stop-recording-btn"]')),
+    getReviewInstructionsBtn: () =>
+      fixture.debugElement.query(By.css('[data-testid="immersive-test.review-instructions-btn"]')),
+  };
+
+  const DialogServiceMock = {
+    open: jest.fn(),
+  };
+
+  const mockedVolumeValue = 0.5;
+  const mockedFile = new Blob();
+
+  let hasMediaPermission = true;
+
+  class MediaServiceMock {
+    private recordSubject = new Subject();
+
+    isRecording = signal(false);
+
+    setSelectedMediaDevices() {
+      // Mock implementation - no-op for testing
+    }
+
+    getMediaStream() {
+      return Promise.resolve();
+    }
+
+    recordAudio() {
+      this.isRecording.set(true);
+      if (hasMediaPermission) {
+        window.setTimeout(() => {
+          this.recordSubject.next({ type: 'volume', value: mockedVolumeValue });
+        });
+      } else {
+        this.recordSubject.error('Permission denied');
+        this.recordSubject.complete();
+      }
+
+      return this.recordSubject.asObservable();
+    }
+
+    checkPermission() {
+      return Promise.resolve(hasMediaPermission);
+    }
+
+    stopRecording() {
+      this.isRecording.set(false);
+      this.recordSubject.next({ type: 'complete', file: mockedFile });
+      this.recordSubject.complete();
+    }
+
+    playAudio() {
+      return Promise.resolve();
+    }
+  }
+
+  beforeEach(async () => {
+    transLocoServiceMock = {
+      selectTranslateObject: jest.fn().mockReturnValue(of(mockedTranslations)),
+    };
+
+    if (!navigator.mediaDevices) {
+      Object.defineProperty(navigator, 'mediaDevices', {
+        value: {},
+      });
+    }
+
+    if (!navigator.mediaDevices.getUserMedia) {
+      Object.defineProperty(navigator.mediaDevices, 'getUserMedia', {
+        value: jest.fn(),
+      });
+    }
+
+    if (!window.URL.createObjectURL) {
+      Object.defineProperty(URL, 'createObjectURL', {
+        value: jest.fn().mockReturnValue(mockedObjectUrl),
+      });
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const mockedMediaService = new MediaServiceMock() as any as MediaService;
+
+    await TestBed.configureTestingModule({
+      declarations: [],
+      imports: [
+        TranslocoTestingModule.forRoot({
+          translocoConfig: {
+            availableLangs: ['en'],
+            defaultLang: 'en',
+            reRenderOnLangChange: true,
+          },
+          preloadLangs: true,
+        }),
+        NoopAnimationsModule,
+        ImmersiveTestComponent,
+      ],
+      schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
+    })
+      .overrideComponent(ImmersiveTestComponent, {
+        add: {
+          providers: [
+            { provide: TranslocoService, useValue: transLocoServiceMock },
+            { provide: MediaService, useValue: mockedMediaService },
+            {
+              provide: ChangeDetectorRef,
+              useValue: { markForCheck: jest.fn() },
+            },
+            {
+              provide: DialogService,
+              useValue: DialogServiceMock,
+            },
+            {
+              provide: ThemeService,
+              useValue: {
+                uiTheme: 'dark',
+                getCompanyColor: jest.fn().mockReturnValue('#D410AA'),
+              },
+            },
+          ],
+        },
+      })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(ImmersiveTestComponent);
+    component = fixture.componentInstance;
+
+    getMediaStreamSpy = jest.spyOn(mockedMediaService, 'getMediaStream');
+    checkMediaPermissionSpy = jest.spyOn(mockedMediaService, 'checkPermission');
+    recordAudioSpy = jest.spyOn(mockedMediaService, 'recordAudio');
+    playAudioSpy = jest.spyOn(mockedMediaService, 'playAudio');
+    stopRecordingSpy = jest.spyOn(mockedMediaService, 'stopRecording');
+    openDialogSpy = jest.spyOn(DialogServiceMock, 'open');
+    setSelectedMediaDevicesSpy = jest.spyOn(mockedMediaService, 'setSelectedMediaDevices');
+    submissionStateChangedSpy = jest.spyOn(component.submissionStateChanged, 'emit');
+
+    requestMediaAccessSpy = jest.spyOn(component.requestMediaAccess, 'emit');
+
+    expirationSubject$ = new Subject();
+    mediaAccessChanged$ = new Subject<SelectedMediaDevices>();
+    component.expirationObservable = expirationSubject$.asObservable();
+    component.mediaAccessChanged = mediaAccessChanged$.asObservable();
+    hasMediaPermission = true;
+  });
+
+  afterEach(() => {
+    fixture.destroy();
+    jest.clearAllMocks();
+  });
+
+  describe('when component is initialized with isFirstQuestion = false and with question video content', () => {
+    beforeEach(() => {
+      component.question = mockedQuestionWithVideo;
+      component.test = mockedTest;
+      component.isFirstQuestion = false;
+      component.ngOnInit();
+      fixture.detectChanges();
+    });
+
+    it('should set the translations', () => {
+      expect(component.translations).toEqual(mockedTranslations);
+    });
+
+    it('should start playing first video', () => {
+      expect(component.isQuestionPlaying()).toBe(true);
+    });
+
+    it('should not show start question btn', () => {
+      expect(selectors.getStartQuestionBtn()).toBeFalsy();
+    });
+
+    it('should init stream', () => {
+      expect(getMediaStreamSpy).toHaveBeenCalled();
+    });
+
+    it('should return video content type and url', () => {
+      expect(component.isVideo).toBe(true);
+      expect(component.fileUrl).toBe(mockVideoUrl);
+    });
+
+    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 review instruction btn is clicked', () => {
+      beforeEach(() => {
+        selectors.getReviewInstructionsBtn()?.nativeElement.click();
+        fixture.detectChanges();
+      });
+
+      it('should open review instruction dialog', () => {
+        expect(openDialogSpy).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('when component is initialized with isFirstQuestion = true and with question video content', () => {
+    beforeEach(() => {
+      component.question = mockedQuestionWithVideo;
+      component.test = mockedTest;
+      component.isFirstQuestion = true;
+      component.ngOnInit();
+      fixture.detectChanges();
+    });
+
+    it('should not start playing first video', () => {
+      expect(component.isQuestionPlaying()).toBe(false);
+    });
+
+    it('should show start question btn', () => {
+      expect(selectors.getStartQuestionBtn()).toBeTruthy();
+    });
+
+    describe('when start question btn is clicked ', () => {
+      beforeEach(() => {
+        selectors.getStartQuestionBtn()?.nativeElement.click();
+        fixture.detectChanges();
+      });
+
+      it('should start playing first video', () => {
+        expect(component.isQuestionPlaying()).toBe(true);
+      });
+
+      it('should not show start question btn', () => {
+        expect(selectors.getStartQuestionBtn()).toBeFalsy();
+      });
+    });
+  });
+
+  describe('when component is initialized with isFirstQuestion = false and with question audio content', () => {
+    beforeEach(() => {
+      component.question = mockedQuestionWithAudio;
+      component.test = mockedTest;
+      component.isFirstQuestion = false;
+      component.ngOnInit();
+      fixture.detectChanges();
+    });
+
+    it('should start playing first audio', () => {
+      expect(component.isQuestionPlaying()).toBe(true);
+      expect(playAudioSpy).toHaveBeenCalledWith(mockAudioUrl);
+    });
+
+    it('should not show start question btn', () => {
+      expect(selectors.getStartQuestionBtn()).toBeFalsy();
+    });
+
+    it('should call initStream', () => {
+      expect(getMediaStreamSpy).toHaveBeenCalled();
+    });
+
+    it('should return audio content type and url', () => {
+      expect(component.isVideo).toBe(false);
+      expect(component.fileUrl).toBe(mockAudioUrl);
+    });
+
+    it('should not show stop recording btn', () => {
+      expect(selectors.getStopRecordingBtn()).toBeFalsy();
+    });
+
+    describe('when question finishes playing', () => {
+      beforeEach(() => {
+        // for playAudio() Promise is resolved immediately
+        fixture.detectChanges();
+      });
+
+      it('should check permission', () => {
+        expect(checkMediaPermissionSpy).toHaveBeenCalled();
+      });
+
+      it('should start countdown', () => {
+        expect(component.isCountingDown()).toBe(true);
+      });
+
+      describe('when recording started', () => {
+        beforeEach(() => {
+          component.startRecordAnswer();
+          fixture.detectChanges();
+        });
+
+        it('should update volume value', async () => {
+          fixture.detectChanges();
+          await fixture.whenStable();
+          // Wait for setTimeout in MediaServiceMock.recordAudio()
+          await new Promise(resolve => setTimeout(resolve, 10));
+          fixture.detectChanges();
+
+          expect(component.volume()).toBe(mockedVolumeValue);
+        });
+
+        it('should show stop recording btn', () => {
+          expect(selectors.getStopRecordingBtn()).toBeTruthy();
+        });
+
+        describe('when stop Recording button is clicked', () => {
+          beforeEach(() => {
+            selectors.getStopRecordingBtn()?.nativeElement.click();
+            fixture.detectChanges();
+          });
+
+          it('should call mediaService.stopRecording() method', () => {
+            expect(stopRecordingSpy).toHaveBeenCalled();
+          });
+
+          it('should change isAnswering value to false', () => {
+            expect(component.isAnswering()).toBe(false);
+          });
+
+          it('should submit answer', () => {
+            expect(submissionStateChangedSpy).toHaveBeenCalledWith({
+              file: mockedFile,
+              text: '',
+            });
+          });
+        });
+
+        describe('when expirationObservable is called', () => {
+          beforeEach(() => {
+            expirationSubject$.next();
+            fixture.detectChanges();
+          });
+
+          it('should call mediaService.stopRecording() method', () => {
+            expect(stopRecordingSpy).toHaveBeenCalled();
+          });
+
+          it('should change isAnswering value to false', () => {
+            expect(component.isAnswering()).toBe(false);
+          });
+
+          it('should submit answer', () => {
+            expect(submissionStateChangedSpy).toHaveBeenCalledWith({
+              file: mockedFile,
+              text: '',
+            });
+          });
+        });
+
+        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();
+          });
+
+          it('should reinitialize countdown', () => {
+            expect(component.isCountingDown()).toBe(true);
+          });
+        });
+      });
+
+      describe('when recording started with no media permissions', () => {
+        beforeEach(() => {
+          hasMediaPermission = false;
+          component.startRecordAnswer();
+          fixture.detectChanges();
+        });
+
+        it('should emit requestMediaAccess event', () => {
+          expect(requestMediaAccessSpy).toHaveBeenCalled();
+        });
+
+        it('should set isAnswering to false', () => {
+          expect(component.isAnswering()).toBe(false);
+        });
+      });
+
+      describe('when expirationObservable is called before question play finish', () => {
+        beforeEach(() => {
+          expirationSubject$.next();
+          fixture.detectChanges();
+        });
+
+        it('should submit empty answer', () => {
+          expect(submissionStateChangedSpy).toHaveBeenCalledWith({
+            file: undefined,
+            text: '',
+          });
+        });
+      });
+    });
+  });
+
+  describe('when component is initialized with isFirstQuestion = false and with question audio content and there is no media permission', () => {
+    beforeEach(() => {
+      component.question = mockedQuestionWithAudio;
+      component.test = {
+        is_preview_mode: false,
+      } as TestResultRead;
+      component.isFirstQuestion = false;
+      hasMediaPermission = false;
+      component.ngOnInit();
+      fixture.detectChanges();
+    });
+
+    describe('when question finishes playing', () => {
+      beforeEach(() => {
+        // for playAudio() Promise is resolved immediately
+        fixture.detectChanges();
+      });
+
+      it('should check permission', () => {
+        expect(checkMediaPermissionSpy).toHaveBeenCalled();
+      });
+
+      it('should not start countdown', () => {
+        expect(component.isCountingDown()).toBe(false);
+      });
+
+      it('should emit requestMediaAccess event', () => {
+        expect(requestMediaAccessSpy).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('when component is initialized with isFirstQuestion = true and with question audio content', () => {
+    beforeEach(() => {
+      component.question = mockedQuestionWithAudio;
+      component.test = mockedTest;
+      component.isFirstQuestion = true;
+      component.ngOnInit();
+      fixture.detectChanges();
+    });
+
+    it('should not start playing first audio', () => {
+      expect(component.isQuestionPlaying()).toBe(false);
+    });
+
+    it('should show start question btn', () => {
+      expect(selectors.getStartQuestionBtn()).toBeTruthy();
+    });
+
+    describe('when start question btn is clicked ', () => {
+      beforeEach(() => {
+        selectors.getStartQuestionBtn()?.nativeElement.click();
+        fixture.detectChanges();
+      });
+
+      it('should start playing first video', () => {
+        expect(component.isQuestionPlaying()).toBe(true);
+        expect(playAudioSpy).toHaveBeenCalledWith(mockAudioUrl);
+      });
+
+      it('should not show start question btn', () => {
+        expect(selectors.getStartQuestionBtn()).toBeFalsy();
+      });
+    });
+  });
+
+  describe('when component is initialized with isFirstQuestion = false and with question audio content in preview mode', () => {
+    beforeEach(() => {
+      component.question = mockedQuestionWithAudio;
+      component.test = {
+        is_preview_mode: true,
+      } as TestResultRead;
+      component.isFirstQuestion = false;
+      component.ngOnInit();
+      fixture.detectChanges();
+    });
+
+    describe('when question finishes playing', () => {
+      beforeEach(() => {
+        // for playAudio() Promise is resolved immediately
+        fixture.detectChanges();
+      });
+
+      it('should check permission', () => {
+        expect(checkMediaPermissionSpy).toHaveBeenCalled();
+      });
+
+      it('should start countdown', () => {
+        expect(component.isCountingDown()).toBe(true);
+      });
+
+      describe('when recording started', () => {
+        beforeEach(() => {
+          component.startRecordAnswer();
+          fixture.detectChanges();
+        });
+
+        it('should start recording answer', () => {
+          expect(recordAudioSpy).toHaveBeenCalled();
+        });
+
+        it('should has empty audioUrl', () => {
+          expect(component.audioUrl()).toBe('');
+        });
+
+        describe('when stop Recording button is clicked', () => {
+          beforeEach(() => {
+            selectors.getStopRecordingBtn()?.nativeElement.click();
+            fixture.detectChanges();
+          });
+
+          it('should call mediaService.stopRecording() method', () => {
+            expect(stopRecordingSpy).toHaveBeenCalled();
+          });
+
+          it('should set audioUrl', () => {
+            expect(component.audioUrl()).toBe(mockedObjectUrl);
+          });
+        });
+      });
+    });
+  });
+});