fix: mock webcontainer api and xterm for unit test

apps/showcase/src/app/sdk-training/sdk-training.spec.ts

@@ -9,6 +9,15 @@ import {
 describe('SdkTrainingComponent', () => {
   let component: SdkTrainingComponent;
   let fixture: ComponentFixture<SdkTrainingComponent>;
+  global.fetch = jest.fn(() => Promise.resolve({
+    ok: true,
+    json: () => Promise.resolve({}),
+    headers: {},
+    redirected: false,
+    status: 200,
+    statusText: 'OK',
+    text: () => Promise.resolve('')
+  } as Response));
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({

apps/showcase/src/components/showcase/sdk/sdk-pres.spec.ts

@@ -20,6 +20,16 @@ describe('SdkPresComponent', () => {
   petApiFixture.findPetsByStatus = petApiFixture.findPetsByStatus.mockResolvedValue([]);
 
   beforeEach(() => {
+    global.fetch = jest.fn(() => Promise.resolve({
+      ok: true,
+      json: () => Promise.resolve({}),
+      headers: {},
+      redirected: false,
+      status: 200,
+      statusText: 'OK',
+      text: () => Promise.resolve('')
+    } as Response));
+
     TestBed.configureTestingModule({
       imports: [SdkPresComponent],
       providers: [

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

@@ -7,7 +7,6 @@ import {
   ElementRef,
   EventEmitter,
   inject,
-  type OnDestroy,
   Output,
   ViewChild,
 } from '@angular/core';
@@ -25,7 +24,7 @@ import {
   imports: [],
   template: '<div #terminal class="h-100"></div>'
 })
-export class CodeEditorTerminalComponent implements OnDestroy, AfterViewChecked, AfterViewInit {
+export class CodeEditorTerminalComponent implements AfterViewChecked, AfterViewInit {
   /**
    * Terminal component that can be used as input/output element for a webcontainer process
    */
@@ -65,7 +64,11 @@ export class CodeEditorTerminalComponent implements OnDestroy, AfterViewChecked,
     const disposable = this.terminal.onWriteParsed(() => {
       this.terminalActivity.emit();
     });
-    inject(DestroyRef).onDestroy(() => disposable.dispose());
+    inject(DestroyRef).onDestroy(() => {
+      disposable.dispose();
+      this.terminal.dispose();
+      this.disposed.emit();
+    });
   }
 
   /**
@@ -89,12 +92,4 @@ export class CodeEditorTerminalComponent implements OnDestroy, AfterViewChecked,
   public ngAfterViewChecked() {
     this.fitAddon.fit();
   }
-
-  /**
-   * @inheritDoc
-   */
-  public ngOnDestroy() {
-    this.terminal.dispose();
-    this.disposed.emit();
-  }
 }

apps/showcase/src/components/training/training.component.spec.ts

@@ -9,8 +9,17 @@ import {
 describe('SdkTrainingComponent', () => {
   let component: TrainingComponent;
   let fixture: ComponentFixture<TrainingComponent>;
-
   beforeEach(async () => {
+    global.fetch = jest.fn(() => Promise.resolve({
+      ok: true,
+      json: () => Promise.resolve({}),
+      headers: {},
+      redirected: false,
+      status: 200,
+      statusText: 'OK',
+      text: () => Promise.resolve('')
+    } as Response));
+
     await TestBed.configureTestingModule({
       imports: [TrainingComponent]
     })

apps/showcase/testing/mocks/webcontainer-api.mock.ts

@@ -0,0 +1,5 @@
+export class WebContainerApiMock {
+  public static boot = jest.fn(() => Promise.resolve({
+    on: jest.fn(() => jest.fn())
+  }));
+}

apps/showcase/testing/mocks/x-term.mock.ts

@@ -0,0 +1,11 @@
+export class XtermTerminalMock {
+  public loadAddon = jest.fn(() => Promise.resolve());
+  public open = jest.fn();
+  public clear = jest.fn();
+  public kill = jest.fn();
+  public getWriter = jest.fn();
+  public dispose = jest.fn();
+  public onWriteParsed = () => ({
+    dispose: jest.fn()
+  });
+}

apps/showcase/testing/setup-jest.ts

@@ -1 +1,19 @@
 import 'jest-preset-angular/setup-jest';
+import {
+  WebContainerApiMock,
+} from './mocks/webcontainer-api.mock';
+import {
+  XtermTerminalMock,
+} from './mocks/x-term.mock';
+
+jest.mock('@webcontainer/api',
+  () => ({
+    WebContainer: WebContainerApiMock
+  }), {
+    virtual: true
+  });
+
+jest.mock('@xterm/xterm',
+  () => ({ Terminal: XtermTerminalMock }), {
+    virtual: true
+  });