@testgorilla/tgo-immersive-test 0.0.1 → 2.0.0

package/.eslintrc.json

@@ -21,7 +21,8 @@
             "prefix": "tgo",
             "style": "kebab-case"
           }
-        ]
+        ],
+        "@angular-eslint/prefer-standalone": "off"
       }
     },
     {

package/README.md

@@ -32,6 +32,38 @@ import { ImmersiveTestComponent } from '@testgorilla/tgo-immersive-test';
 export class MyComponent {}
 ```
 
+## Assets (translations)
+
+This package ships its translations under `assets/i18n`. Consumer apps must copy these assets into their build output so Transloco can load them at runtime.
+
+- **Angular CLI / Nx**: add an `assets` entry pointing at the package:
+
+```json
+{
+  "assets": [
+    "src/favicon.ico",
+    "src/assets",
+    {
+      "glob": "**/*",
+      "input": "node_modules/@testgorilla/tgo-immersive-test/assets",
+      "output": "assets/tgo-immersive-test"
+    }
+  ]
+}
+```
+
+If you develop inside this repo (consuming the workspace sources), also include the local path:
+
+```json
+{
+  "glob": "**/*",
+  "input": "packages/tgo-immersive-test/src/assets",
+  "output": "assets/tgo-immersive-test"
+}
+```
+
+After adding the asset entries, rebuild/re-serve your app so `/assets/tgo-immersive-test/i18n/en.json` is available.
+
 ## API
 
 ### Inputs

package/jest.config.ts

@@ -1,3 +1,6 @@
+// Detect CI environment
+const isCI = process.env.CI === 'true' || process.env.CIRCLECI === 'true';
+
 export default {
   displayName: 'tgo-immersive-test',
   preset: '../../jest.preset.js',
@@ -5,8 +8,11 @@ export default {
   coverageDirectory: '../../coverage/packages/tgo-immersive-test',
   testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/*.spec.[jt]s?(x)'],
   testPathIgnorePatterns: ['/node_modules/', '/src/lib/models/'],
+  // Run tests sequentially in CI to prevent OOM with media-related tests
+  ...(isCI && { maxWorkers: 1 }),
   moduleNameMapper: {
-    '^@testgorilla/tgo-ui$': '<rootDir>/../tgo-test-shared/src/test-mocks/tgo-ui.mock.ts',
+    '^@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)$': [

package/package.json

@@ -1,25 +1,20 @@
 {
   "name": "@testgorilla/tgo-immersive-test",
-  "version": "0.0.1",
+  "version": "2.0.0",
   "peerDependencies": {
-    "@angular/common": "~18.2.13",
-    "@angular/core": "~18.2.13",
-    "@angular/animations": "~18.2.13",
-    "@angular/material": "~18.2.14",
+    "@angular/common": "~19.2.17",
+    "@angular/core": "~19.2.17",
+    "@angular/animations": "~19.2.17",
+    "@angular/material": "~19.2.19",
     "@ngneat/transloco": "~4.3.0",
-    "@testgorilla/tgo-ui": "~3.14.10",
-    "@testgorilla/tgo-test-shared": "~0.0.1",
-    "jest-preset-angular": "~14.2.4",
-    "ngx-quill": "^26.0.10",
+    "@testgorilla/tgo-ui": "~4.0.0",
+    "jest-preset-angular": "14.4.2",
+    "ngx-quill": "^27.1.2",
     "rxjs": "~7.8.1"
   },
   "typings": "src/lib/types",
   "sideEffects": false,
   "license": "PROPRIETARY",
-  "publishConfig": {
-    "access": "restricted",
-    "registry": "https://registry.npmjs.org/"
-  },
   "displayName": "Immersive Test",
   "description": "Immersive Test component"
 }

package/project.json

@@ -7,6 +7,18 @@
   "tags": [],
   "targets": {
     "build": {
+      "executor": "nx:run-commands",
+      "outputs": ["{workspaceRoot}/dist/packages/tgo-immersive-test"],
+      "options": {
+        "commands": [
+          "nx run tgo-immersive-test:package",
+          "node scripts/replace-shared-alias.js dist/packages/tgo-immersive-test @testgorilla/tgo-test-shared"
+        ],
+        "parallel": false,
+        "forwardAllArgs": false
+      }
+    },
+    "package": {
       "executor": "@nx/angular:package",
       "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
       "options": {
@@ -34,4 +46,3 @@
     }
   }
 }
-

package/src/lib/components/immersive-test/immersive-test.component.html

@@ -74,7 +74,7 @@
               {{ translations['GET_READY'] }}
             </h1>
           </div>
-          <tgo-video-countdown (finish)="startRecordAnswer()"></tgo-video-countdown>
+          <tgo-video-countdown (finished)="startRecordAnswer()"></tgo-video-countdown>
           <div>&nbsp;</div>
         </div>
         <div class="preview" [class.hidden]="!audioUrl()" *ngIf="test.is_preview_mode">

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

@@ -10,7 +10,7 @@ import {
   TestResultRead,
   ThemeService,
 } from '@testgorilla/tgo-test-shared';
-import { DialogService } from '@testgorilla/tgo-ui';
+import { ButtonComponentModule, DialogService, IconComponentModule } from '@testgorilla/tgo-ui';
 import { of, Subject } from 'rxjs';
 import { ImmersiveTestComponent } from './immersive-test.component';
 
@@ -143,6 +143,8 @@ describe('ImmersiveTestComponent', () => {
         }),
         NoopAnimationsModule,
         ImmersiveTestComponent,
+        ButtonComponentModule,
+        IconComponentModule,
       ],
       schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
     })

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

@@ -49,40 +49,39 @@ import {
 } from '@ngneat/transloco';
 
 @Component({
-  selector: 'tgo-immersive-test',
-  templateUrl: './immersive-test.component.html',
-  styleUrl: './immersive-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,
-    VimeoVideoComponent,
-    VideoCountdownComponent,
-    RingingPhoneAnimationComponent,
-    AudioAnimationComponent,
-    ReviewInstructionsDialogComponent,
-  ],
-  providers: [
-    TranslocoLazyModuleUtils.getScopeProvider(
-      'tgo-immersive-test',
-      getAvailableLangs(),
-      ROOT_TRANSLATIONS_SCOPE,
-      (lang: string) => import(`../../../assets/i18n/${lang}.json`)
-    ),
-    DialogService,
-    ThemeService,
-  ],
+    selector: 'tgo-immersive-test',
+    templateUrl: './immersive-test.component.html',
+    styleUrl: './immersive-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,
+        VimeoVideoComponent,
+        VideoCountdownComponent,
+        RingingPhoneAnimationComponent,
+        AudioAnimationComponent,
+        ReviewInstructionsDialogComponent,
+    ],
+    providers: [
+        TranslocoLazyModuleUtils.getScopeProvider('tgo-immersive-test', getAvailableLangs(), ROOT_TRANSLATIONS_SCOPE, (lang: string) => {
+            // Fetch from app assets; demo app copies the library assets to
+            // /assets/tgo-immersive-test via project.json.
+            const url = new URL(`assets/tgo-immersive-test/i18n/${lang}.json`, document.baseURI).href;
+            return fetch(url).then((res) => res.json());
+        }),
+        DialogService,
+        ThemeService,
+    ]
 })
 export class ImmersiveTestComponent
   implements OnInit, OnDestroy, IQuestionDataContract

package/src/lib/components/index.ts

@@ -1,4 +1,4 @@
-// Library-specific components only (shared components are in @testgorilla/tgo-test-shared)
+// Library-specific components only (shared components are bundled from packages/shared)
 export * from './immersive-test/immersive-test.component';
 export * from './review-instructions-dialog';
 export * from './ringing-phone-animation';

package/src/lib/components/review-instructions-dialog/review-instructions-dialog.component.ts

@@ -25,26 +25,25 @@ export interface ReviewInstructionsDialogData {
 }
 
 @Component({
-  selector: 'tgo-review-instructions-dialog',
-  templateUrl: './review-instructions-dialog.component.html',
-  styleUrls: ['./review-instructions-dialog.component.scss'],
-  providers: [
-    TranslocoLazyModuleUtils.getScopeProvider(
-      'tgo-immersive-test-review-instructions',
-      getAvailableLangs(),
-      'INSTRUCTIONS_MODAL',
-      (lang: string) => import(`../../../assets/i18n/${lang}.json`)
-    ),
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  imports: [
-    CommonModule,
-    TranslocoModule,
-    DialogComponentModule,
-    CardComponentModule,
-    QuillViewComponent,
-  ],
+    selector: 'tgo-review-instructions-dialog',
+    templateUrl: './review-instructions-dialog.component.html',
+    styleUrls: ['./review-instructions-dialog.component.scss'],
+    providers: [
+        TranslocoLazyModuleUtils.getScopeProvider('tgo-immersive-test-review-instructions', getAvailableLangs(), 'INSTRUCTIONS_MODAL', (lang: string) => {
+            // Fetch from app assets; demo app copies the library assets to
+            // /assets/tgo-immersive-test via project.json.
+            const url = new URL(`assets/tgo-immersive-test/i18n/${lang}.json`, document.baseURI).href;
+            return fetch(url).then((res) => res.json());
+        }),
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    imports: [
+        CommonModule,
+        TranslocoModule,
+        DialogComponentModule,
+        CardComponentModule,
+        QuillViewComponent,
+    ]
 })
 export class ReviewInstructionsDialogComponent implements OnInit {
   translations: { [key: string]: string } = {};

package/src/lib/components/ringing-phone-animation/ringing-phone-animation.component.spec.ts

@@ -56,10 +56,14 @@ describe('RingingPhoneAnimationComponent', () => {
     });
 
     it('should call "playSpy" if "isRinging" changes to true', () => {
+      // First set it to false
+      component.isRinging = false;
+      component.ringingSignal.set(false);
+      
       const changes: SimpleChanges = {
         isRinging: {
-          previousValue: true,
-          currentValue: false,
+          previousValue: false,
+          currentValue: true,
           firstChange: false,
           isFirstChange: () => false,
         },
@@ -75,10 +79,15 @@ describe('RingingPhoneAnimationComponent', () => {
     });
 
     it('should call "pauseSpy" if isRinging changes to false', () => {
+      // First set it to true and start ringing
+      component.isRinging = true;
+      component.ringingSignal.set(true);
+      component.audio.play();
+      
       const changes: SimpleChanges = {
         isRinging: {
-          previousValue: false,
-          currentValue: true,
+          previousValue: true,
+          currentValue: false,
           firstChange: false,
           isFirstChange: () => false,
         },

package/src/lib/components/ringing-phone-animation/ringing-phone-animation.component.ts

@@ -11,11 +11,10 @@ import { CommonModule } from '@angular/common';
 import { ringingPhoneSound } from './ringing-phone-animation.sound';
 
 @Component({
-  selector: 'tgo-ringing-phone-animation',
-  templateUrl: './ringing-phone-animation.component.html',
-  styleUrls: ['./ringing-phone-animation.component.scss'],
-  standalone: true,
-  imports: [CommonModule],
+    selector: 'tgo-ringing-phone-animation',
+    templateUrl: './ringing-phone-animation.component.html',
+    styleUrls: ['./ringing-phone-animation.component.scss'],
+    imports: [CommonModule]
 })
 export class RingingPhoneAnimationComponent implements OnChanges, OnDestroy {
   @Input() isRinging = true;

package/src/lib/components/video-countdown/video-countdown.component.spec.ts

@@ -1,5 +1,5 @@
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { VideoCountdownComponent } from './video-countdown.component';
 
 describe('VideoCountdownComponent', () => {
@@ -34,11 +34,11 @@ describe('VideoCountdownComponent', () => {
     expect(component.isActive).toBe(true);
   });
 
-  it('should count down from startFrom to endAt', (done) => {
+  it('should count down from startFrom to endAt', done => {
     component.startFrom = 3;
     component.endAt = 0;
     component.interval = 100;
-    const finishSpy = jest.spyOn(component.finish, 'emit');
+    const finishSpy = jest.spyOn(component.finished, 'emit');
 
     component.start();
 
@@ -56,4 +56,3 @@ describe('VideoCountdownComponent', () => {
     expect(clearTimeoutSpy).toHaveBeenCalledWith(component.timeoutId);
   });
 });
-

package/src/lib/components/video-countdown/video-countdown.component.ts

@@ -30,14 +30,13 @@ import {
     ]),
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [CommonModule],
 })
 export class VideoCountdownComponent implements OnInit, OnDestroy {
   @Input() startFrom = 5;
   @Input() endAt = 0;
   @Input() interval = 1325;
-  @Output() finish: EventEmitter<void> = new EventEmitter<void>();
+  @Output() finished: EventEmitter<void> = new EventEmitter<void>();
 
   isActive = false;
   displayNum: { key: number; value: number } = {
@@ -80,7 +79,7 @@ export class VideoCountdownComponent implements OnInit, OnDestroy {
     this.cdr.markForCheck();
 
     if (this.displayNum && this.displayNum.value === this.endAt) {
-      this.finish.emit();
+      this.finished.emit();
       this.isActive = false;
       return;
     }
@@ -99,4 +98,3 @@ export class VideoCountdownComponent implements OnInit, OnDestroy {
     }
   }
 }
-

package/src/test-setup.ts

@@ -20,3 +20,43 @@ jest.mock('@vimeo/player', () => {
   };
 });
 
+// Global cleanup for media elements after each test
+afterEach(() => {
+  // Clean up all audio and video elements in the DOM
+  const audioElements = Array.from(document.querySelectorAll('audio'));
+  const videoElements = Array.from(document.querySelectorAll('video'));
+  
+  [...audioElements, ...videoElements].forEach((element) => {
+    const mediaElement = element as HTMLMediaElement;
+    try {
+      mediaElement.pause();
+      mediaElement.src = '';
+      mediaElement.srcObject = null;
+      // Remove event listeners by cloning
+      const newElement = mediaElement.cloneNode(false);
+      mediaElement.parentNode?.replaceChild(newElement, mediaElement);
+    } catch (error) {
+      // Ignore errors during cleanup
+    }
+  });
+
+  // Clean up MediaStream tracks
+  if (window.MediaStream) {
+    // Stop any active MediaStream tracks
+    const streams = Array.from(document.querySelectorAll('video, audio'));
+    streams.forEach((element) => {
+      const mediaElement = element as HTMLMediaElement;
+      if (mediaElement.srcObject instanceof MediaStream) {
+        mediaElement.srcObject.getTracks().forEach((track) => {
+          track.stop();
+        });
+        mediaElement.srcObject = null;
+      }
+    });
+  }
+
+  // Revoke any object URLs that might have been created
+  // Note: This is a best-effort cleanup since we can't track all created URLs
+  // Components should clean up their own object URLs in ngOnDestroy
+});
+

package/tsconfig.json

@@ -1,6 +1,9 @@
 {
   "compilerOptions": {
-    "target": "es2022"
+    "target": "es2022",
+    "paths": {
+      "@testgorilla/tgo-test-shared": ["./src/shared/index.ts"]
+    }
   },
   "files": [],
   "include": [],

package/tsconfig.lib.json

@@ -5,11 +5,16 @@
     "declaration": true,
     "declarationMap": true,
     "inlineSources": true,
-    "types": [
-      "node",
-    ]
+    "baseUrl": "../../",
+    "moduleResolution": "node",
+    "paths": {
+      "@testgorilla/tgo-test-shared": ["packages/tgo-immersive-test/src/shared/index.ts"]
+    }
+  },
+  "angularCompilerOptions": {
+    "preserveWhitespaces": false
   },
   "exclude": ["src/**/*.spec.ts", "src/test-setup.ts", "jest.config.ts", "src/**/*.test.ts"],
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts", "src/shared/**/*.ts"]
 }
 

package/tsconfig.lib.prod.json

@@ -1,7 +1,8 @@
 {
   "extends": "./tsconfig.lib.json",
   "compilerOptions": {
-    "declarationMap": false
+    "declarationMap": false,
+    "rootDir": "../../"
   },
   "angularCompilerOptions": {
     "compilationMode": "partial"

package/tsconfig.spec.json

@@ -4,10 +4,14 @@
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
     "target": "es2016",
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "baseUrl": "../../",
+    "paths": {
+      "@testgorilla/tgo-test-shared": ["packages/tgo-immersive-test/src/shared/index.ts"]
+    }
   },
   "files": ["src/test-setup.ts"],
-  "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts"],
+  "include": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts", "src/**/*.d.ts", "src/shared/**/*.ts"],
   "exclude": ["src/lib/models/test.ts"]
 }