@testgorilla/tgo-ai-interview-test 0.0.1

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"
+          }
+        ]
+      }
+    },
+    {
+      "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/README.md

@@ -0,0 +1,91 @@
+# @testgorilla/tgo-ai-interview-test
+
+AI Interview component for TestGorilla assessments.
+
+## Installation
+
+```bash
+npm install @testgorilla/tgo-ai-interview-test
+```
+
+## Usage
+
+```typescript
+import { AiInterviewTestComponent } from '@testgorilla/tgo-ai-interview-test';
+
+@Component({
+  imports: [AiInterviewTestComponent],
+  template: `
+    <tgo-ai-interview-test
+      [question]="question"
+      [test]="test"
+      [isFirstQuestion]="false"
+      [conversationUrl]="conversationUrl"
+      [selectedMediaDevices]="selectedMediaDevices"
+      [mediaAccessChanged]="mediaAccessChanged"
+      (submissionStateChanged)="onSubmissionStateChanged($event)"
+      (loadingStateChanged)="onLoadingStateChanged($event)"
+      (requestMediaAccess)="onRequestMediaAccess()"
+    ></tgo-ai-interview-test>
+  `,
+})
+export class MyComponent {}
+```
+
+## API
+
+### Inputs
+
+| Name                | Type                              | Required | Default | Description                                      |
+| ------------------- | --------------------------------- | -------- | ------- | ------------------------------------------------ |
+| question            | Question                          | Yes      | -       | Question data containing text/media content      |
+| test                | TestResultRead                    | Yes      | -       | Test configuration and metadata                 |
+| isFirstQuestion     | boolean                           | No       | false   | Whether this is the first question in the test   |
+| conversationUrl     | string                            | No       | -       | Daily.co conversation URL for the AI interview   |
+| selectedMediaDevices| SelectedMediaDevices              | No       | -       | Selected audio/video device IDs                  |
+| mediaAccessChanged  | Observable\<SelectedMediaDevices\>| No       | -       | Observable for media device changes              |
+
+### Outputs
+
+| Name                 | Type                        | Description                                    |
+| -------------------- | --------------------------- | ---------------------------------------------- |
+| submissionStateChanged| EventEmitter\<ISubmissionState \| null\> | Emits submission state when answer is submitted |
+| loadingStateChanged  | EventEmitter\<boolean\>    | Emits loading state changes                    |
+| requestMediaAccess   | EventEmitter\<void\>       | Emits when media access permission is needed   |
+
+## Peer Dependencies
+
+This library requires the following peer dependencies:
+
+- `@angular/common` ~18.2.13
+- `@angular/core` ~18.2.13
+- `@angular/animations` ~18.2.13
+- `@angular/material` ~18.2.14 (for dialog support)
+- `@ngneat/transloco` ~4.3.0
+- `@testgorilla/tgo-ui` ~3.14.10
+- `@daily-co/daily-js` ^0.79.0
+- `rxjs` ~7.8.1
+
+## Internal Dependencies
+
+All required services, models, and components are included within this library:
+
+- `MediaService` - Handles audio/video recording and playback
+- `ThemeService` - Provides theme/company color configuration
+- `Question`, `TestResultRead`, `SelectedMediaDevices`, `ISubmissionState` - Type definitions
+- `AudioAnimationComponent`, `VideoCountdownComponent`, `VimeoVideoComponent` - UI components
+- `InterviewStreamComponent` - Daily.co video call integration component
+- `InterviewVideoComponent` - Video display component
+- `ReviewInstructionsDialogComponent` - Dialog component for review instructions
+- `TranslocoLazyModuleUtils`, `getAvailableLangs` - Translation utilities
+
+## Features
+
+- AI-powered interview via Daily.co video calls
+- Candidate video recording
+- Real-time video/audio stream handling
+- Media device selection
+- Translation support via Transloco
+- Review instructions dialog
+- Preview mode support
+

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>/../tgo-test-shared/src/test-mocks/tgo-ui.mock.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

@@ -0,0 +1,25 @@
+{
+  "name": "@testgorilla/tgo-ai-interview-test",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "~18.2.13",
+    "@angular/core": "~18.2.13",
+    "@angular/animations": "~18.2.13",
+    "@ngneat/transloco": "~4.3.0",
+    "@testgorilla/tgo-ui": "~3.14.10",
+    "@testgorilla/tgo-test-shared": "~0.0.1",
+    "@daily-co/daily-js": "^0.79.0",
+    "jest-preset-angular": "~14.2.4",
+    "rxjs": "~7.8.1"
+  },
+  "typings": "src/lib/types",
+  "sideEffects": false,
+  "license": "PROPRIETARY",
+  "publishConfig": {
+    "access": "restricted",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "displayName": "AI Interview",
+  "description": "AI Interview component"
+}
+

package/project.json

@@ -0,0 +1,37 @@
+{
+  "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/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/assets/i18n/en.json

@@ -0,0 +1,19 @@
+{
+  "TEST": {
+    "YOU": "You",
+    "RECORDING_STARTED": "Recording started",
+    "ANSWER_THE_QUESTION": "Answer the customer's question, then submit.",
+    "ANSWER_COMPLETED": "Submit answer",
+    "ANSWER": "Answer",
+    "CUSTOMER": "Customer",
+    "AUDIO_READY": "Your audio file is ready.",
+    "AUDIO_PREVIEW": "Audio is only available during practice questions.",
+    "REVIEW_INSTRUCTIONS": "Review Instructions",
+    "GET_READY": "Get ready to answer the customer's question.",
+    "TOOL_CALL": {
+      "ALL_FOR_TODAY": "That's all the questions for today. Thank you for your time.",
+      "NEXT_QUESTION": "Let's move to the next question."
+    }
+  }
+}
+

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/components';
+export * from './lib/components/ai-interview-test/ai-interview-test.component';
+export * from './lib/models';

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,211 @@
+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],
+    })
+      .overrideComponent(AiInterviewTestComponent, {
+        add: {
+          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'),
+              },
+            },
+          ],
+        },
+      })
+      .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: '',
+          });
+        });
+      });
+    });
+  });
+});