fix: test and visual testing update for otter training

apps/showcase/src/components/training/code-editor-view/code-editor-view.component.spec.ts

@@ -6,7 +6,7 @@ import {
   CodeEditorViewComponent,
 } from './code-editor-view.component';
 
-describe('ViewComponent', () => {
+describe('CodeEditorViewComponent', () => {
   let component: CodeEditorViewComponent;
   let fixture: ComponentFixture<CodeEditorViewComponent>;
 

apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts

@@ -195,7 +195,9 @@ export class CodeEditorViewComponent implements OnDestroy {
    */
   private readonly monacoPromise = firstValueFrom(this.newMonacoEditorCreated.pipe(
     map(() => window.monaco)
-  ));
+  )).catch(
+    (err) => console.error(err)
+  );
 
   /**
    * Configuration for the Monaco Editor
@@ -309,6 +311,9 @@ export class CodeEditorViewComponent implements OnDestroy {
       }
     });
     void this.monacoPromise.then((monaco) => {
+      if (!monaco) {
+        return;
+      }
       monaco.editor.registerEditorOpener({
         openCodeEditor: (_source: Monaco.editor.ICodeEditor, resource: Monaco.Uri, selectionOrPosition?: Monaco.IRange | Monaco.IPosition) => {
           const filePath = resource.path.slice(1);
@@ -388,23 +393,27 @@ export class CodeEditorViewComponent implements OnDestroy {
    */
   private async cleanAllModelsFromMonaco() {
     const monaco = await this.monacoPromise;
-    monaco.editor.getModels().forEach((m) => m.dispose());
+    if (monaco) {
+      monaco.editor.getModels().forEach((m) => m.dispose());
+    }
   }
 
   /**
    * Load all the files from `this.project` as Models in the global monaco editor.
    */
   private async loadAllProjectFilesToMonaco() {
     const monaco = await this.monacoPromise;
-    const flatFiles = flattenTree(this.project().files);
-    flatFiles.forEach(({ filePath, content }) => {
-      const language = editorOptionsLanguage[filePath.split('.').at(-1) || ''] || '';
-      monaco.editor.createModel(content, language, monaco.Uri.from({ scheme: 'file', path: filePath }));
-    });
-    // Refresh tsconfig paths mapping
-    monaco.languages.typescript.typescriptDefaults.setCompilerOptions(
-      monaco.languages.typescript.typescriptDefaults.getCompilerOptions()
-    );
+    if (monaco) {
+      const flatFiles = flattenTree(this.project().files);
+      flatFiles.forEach(({ filePath, content }) => {
+        const language = editorOptionsLanguage[filePath.split('.').at(-1) || ''] || '';
+        monaco.editor.createModel(content, language, monaco.Uri.from({ scheme: 'file', path: filePath }));
+      });
+      // Refresh tsconfig paths mapping
+      monaco.languages.typescript.typescriptDefaults.setCompilerOptions(
+        monaco.languages.typescript.typescriptDefaults.getCompilerOptions()
+      );
+    }
   }
 
   /**
@@ -426,7 +435,9 @@ export class CodeEditorViewComponent implements OnDestroy {
         { filePath: 'file:///node_modules/@ama-sdk/client-fetch/index.d.ts', content: 'export * from "./src/public_api.d.ts";' }
       ];
       const monaco = await this.monacoPromise;
-      monaco.languages.typescript.typescriptDefaults.setExtraLibs(declarationTypes);
+      if (monaco) {
+        monaco.languages.typescript.typescriptDefaults.setExtraLibs(declarationTypes);
+      }
     }
   }
 

apps/showcase/src/components/training/save-code-dialog/save-code-dialog.component.ts

@@ -12,6 +12,7 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [],
+  providers: [NgbActiveModal],
   templateUrl: './save-code-dialog.template.html'
 })
 export class SaveCodeDialogComponent {