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

package/.eslintrc.json

@@ -0,0 +1,46 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "tgo",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "tgo",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/prefer-standalone": "off"
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    },
+    {
+      "files": ["*.json"],
+      "parser": "jsonc-eslint-parser",
+      "rules": {
+        "@nx/dependency-checks": [
+          "error",
+          {
+            "ignoredFiles": ["{projectRoot}/eslint.config.{js,cjs,mjs}"]
+          }
+        ]
+      }
+    }
+  ]
+}

package/jest.config.ts

@@ -0,0 +1,29 @@
+export default {
+  displayName: 'tgo-ai-interview-test',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  coverageDirectory: '../../coverage/packages/tgo-ai-interview-test',
+  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/*.spec.[jt]s?(x)'],
+  testPathIgnorePatterns: ['/node_modules/', '/src/lib/models/'],
+  moduleNameMapper: {
+    '^@testgorilla/tgo-ui$': '<rootDir>/../shared/src/test-mocks/tgo-ui.mock.ts',
+    '^@testgorilla/tgo-test-shared$': '<rootDir>/src/shared/index.ts',
+  },
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!.*\\.mjs$|lodash-es|@testgorilla|ng2-charts|chart\\.js|chartjs-plugin-datalabels|@daily-co)',
+  ],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

package/ng-package.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/packages/tgo-ai-interview-test",
+  "assets": [
+    {
+      "glob": "**/*",
+      "input": "./src/assets",
+      "output": "./assets"
+    }
+  ],
+  "lib": {
+    "entryFile": "./src/index.ts"
+  },
+  "allowedNonPeerDependencies": []
+}
+

package/package.json

@@ -1,34 +1,19 @@
 {
   "name": "@testgorilla/tgo-ai-interview-test",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "peerDependencies": {
-    "@angular/common": "~18.2.13",
-    "@angular/core": "~18.2.13",
-    "@angular/animations": "~18.2.13",
+    "@angular/common": "~19.2.17",
+    "@angular/core": "~19.2.17",
+    "@angular/animations": "~19.2.17",
     "@ngneat/transloco": "~4.3.0",
-    "@testgorilla/tgo-ui": "~3.14.10",
+    "@testgorilla/tgo-ui": "~4.0.0",
     "@daily-co/daily-js": "^0.79.0",
-    "jest-preset-angular": "~14.2.4",
+    "jest-preset-angular": "14.4.2",
     "rxjs": "~7.8.1"
   },
-  "typings": "index.d.ts",
+  "typings": "src/lib/types",
   "sideEffects": false,
   "license": "PROPRIETARY",
   "displayName": "AI Interview",
-  "description": "AI Interview component",
-  "module": "fesm2022/testgorilla-tgo-ai-interview-test.mjs",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/testgorilla-tgo-ai-interview-test.mjs",
-      "esm": "./esm2022/testgorilla-tgo-ai-interview-test.mjs",
-      "default": "./fesm2022/testgorilla-tgo-ai-interview-test.mjs"
-    }
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  }
+  "description": "AI Interview component"
 }

package/project.json

@@ -0,0 +1,48 @@
+{
+  "name": "tgo-ai-interview-test",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/tgo-ai-interview-test/src",
+  "prefix": "tgo",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "outputs": ["{workspaceRoot}/dist/packages/tgo-ai-interview-test"],
+      "options": {
+        "commands": [
+          "nx run tgo-ai-interview-test:package",
+          "node scripts/replace-shared-alias.js dist/packages/tgo-ai-interview-test @testgorilla/tgo-test-shared"
+        ],
+        "parallel": false,
+        "forwardAllArgs": false
+      }
+    },
+    "package": {
+      "executor": "@nx/angular:package",
+      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
+      "options": {
+        "project": "packages/tgo-ai-interview-test/ng-package.json"
+      },
+      "configurations": {
+        "production": {
+          "tsConfig": "packages/tgo-ai-interview-test/tsconfig.lib.prod.json"
+        },
+        "development": {
+          "tsConfig": "packages/tgo-ai-interview-test/tsconfig.lib.json"
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "packages/tgo-ai-interview-test/jest.config.ts"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+<div class="ai-interview-test">
+  <div class="test-container">
+    <div
+      class="media-container"
+      [class.is-video-visible]="isInterviewInProgress()"
+    >
+      <div class="candidate-no-camera" *ngIf="!candidateVideoStreamReady()">
+        <h3>&nbsp;</h3>
+        <ui-icon name="User-profile-in-line" color="white" size="24"></ui-icon>
+        <h3 class="bold">{{ translations['YOU'] }}</h3>
+      </div>
+      <div class="candidate-camera" [hidden]="!candidateVideoStreamReady()">
+        <video
+          height
+          #video
+          id="video"
+          playsinline
+          (loadedmetadata)="onVideoLoad()"
+        ></video>
+        <h3 class="bold" *ngIf="candidateVideoStreamReady()">
+          {{ translations['YOU'] }}
+        </h3>
+      </div>
+      <tgo-audio-animation
+        *ngIf="isInterviewInProgress()"
+        [fakeData]="true"
+      ></tgo-audio-animation>
+      <div class="interview-stream-container">
+        <tgo-interview-stream
+          *ngIf="conversationUrl && hasMediaPermissions()"
+          [selectedMediaDevices]="selectedMediaDevices"
+          [conversationUrl]="conversationUrl"
+          (streamStart)="interviewStarted()"
+          (streamEnd)="interviewEnded()"
+          (checkMediaPermissions)="checkMediaPermissions()"
+          [translations]="translations"
+        ></tgo-interview-stream>
+      </div>
+    </div>
+  </div>
+</div>
+

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

@@ -0,0 +1,167 @@
+@import '@testgorilla/tgo-ui/projects/tgo-canopy-ui/theme/variables';
+
+$border-radius: 10px;
+
+.ai-interview-test {
+  background-color: $black;
+  padding: 24px;
+  display: flex;
+  justify-content: center;
+  min-height: calc(100vh - 80px);
+
+  h3 {
+    color: $tgo-white;
+  }
+
+  .test-container {
+    min-width: 360px;
+    width: 100%;
+    min-height: 300px;
+    height: min(725px, 100%, max(calc(100vw), calc(100vh), 200px));
+    max-width: calc(100vh * (16 / 9) - 80px - 48px);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    position: relative;
+    background-color: $black;
+  }
+
+  .media-container {
+    position: relative;
+    color: $tgo-white;
+    flex-grow: 1;
+
+    .interview-stream-container {
+      border-radius: $border-radius;
+      aspect-ratio: 16 / 9;
+      border: 4px solid $informative-40;
+      margin: 0 auto;
+    }
+
+    .candidate-no-camera {
+      position: absolute;
+      width: 200px;
+      aspect-ratio: 16 / 9;
+      z-index: 3;
+      top: 32px;
+      left: 32px;
+      border-radius: $border-radius;
+      background-color: #1a47aa;
+      display: flex;
+      justify-content: space-between;
+      flex-direction: column;
+      padding: 16px;
+
+      ui-icon {
+        margin: auto;
+      }
+    }
+
+    .candidate-camera {
+      position: absolute;
+      width: 200px;
+      top: 32px;
+      left: 32px;
+      z-index: 3;
+
+      video {
+        width: 200px;
+        border-radius: $border-radius;
+      }
+
+      h3 {
+        position: absolute;
+        bottom: 16px;
+        left: 16px;
+      }
+    }
+
+    tgo-audio-animation {
+      position: absolute;
+      top: 32px;
+      right: 32px;
+      z-index: 1;
+    }
+
+    tgo-vimeo-video {
+      display: none;
+      position: absolute;
+      height: 100%;
+      width: 100%;
+    }
+
+    &.is-video-visible {
+      tgo-vimeo-video {
+        display: block;
+      }
+    }
+
+    &.is-playing {
+      border: 4px solid $informative-40;
+      border-bottom-width: 3px;
+    }
+
+    &.is-answering {
+      .candidate-camera,
+      .candidate-no-camera {
+        tgo-audio-animation {
+          position: absolute;
+          top: 16px;
+          right: 16px;
+        }
+      }
+
+      .candidate-camera video,
+      .candidate-no-camera {
+        border: 3px solid $informative-40;
+        border-radius: $border-radius;
+      }
+
+      tgo-vimeo-video {
+        display: block;
+      }
+    }
+
+    .start,
+    .audio-info,
+    .overlay,
+    .answer {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      gap: 40px;
+      height: 100%;
+    }
+
+    .preview {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: flex-end;
+      padding: 24px;
+
+      p {
+        color: $grayscale-30;
+        margin: 8px 0;
+      }
+
+      audio {
+        margin: 16px 0;
+      }
+
+      &.hidden {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .ai-interview-test {
+    padding: 0 24px;
+    margin-top: 16px;
+  }
+}
+

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

@@ -0,0 +1,212 @@
+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: '',
+          });
+        });
+      });
+    });
+  });
+});