adev/src/app/editor/preview/preview.component.spec.ts - main - githubmirror/angular

adev/src/app/editor/preview/preview.component.spec.ts
169 строк6 KB
Kam
feat(docs-infra): add Angie to the embedded editor loading steps
09 июл 2026, 22:00
09 июл 2026, 22:00c92d995
/*!
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.dev/license
 */

import {TestBed} from '@angular/core/testing';
import {DebugElement, signal} from '@angular/core';
import {By} from '@angular/platform-browser';
import {of} from 'rxjs';

import {NodeRuntimeSandbox} from '../node-runtime-sandbox.service';
import {Preview} from './preview.component';
import {LoadingStep} from '../enums/loading-steps';
import {NodeRuntimeError, NodeRuntimeState} from '../node-runtime-state.service';
import {PreviewError} from './preview-error.component';

describe('Preview', () => {
  // Before each is used as a callable function to prevent conflicts between tests
  const beforeEach = () => {
    const PREVIEW_URL = 'https://angular.dev/';

    const fakeNodeRuntimeSandbox: Partial<NodeRuntimeSandbox> = {
      previewUrl$: of(PREVIEW_URL),
    };

    const fakeNodeRuntimeState = {
      loadingStep: signal(LoadingStep.NOT_STARTED),
      error: signal<NodeRuntimeError | undefined>(undefined),
    };

    TestBed.configureTestingModule({
      imports: [Preview],
      providers: [
        {
          provide: NodeRuntimeSandbox,
          useValue: fakeNodeRuntimeSandbox,
        },
        {
          provide: NodeRuntimeState,
          useValue: fakeNodeRuntimeState,
        },
      ],
    });

    const fixture = TestBed.createComponent(Preview);

    const component = fixture.componentInstance;
    const iframeElement = fixture.debugElement.query(By.css('iframe'));

    return {
      fixture,
      component,
      iframeElement,
      PREVIEW_URL,
      fakeNodeRuntimeState,
      fakeNodeRuntimeSandbox,
      getLoadingElementsWrapper: () =>
        fixture.debugElement.query(By.css('adev-embedded-editor-preview-loading')),
    };
  };

  it('should set iframe src', async () => {
    const {fixture, PREVIEW_URL} = beforeEach();
    await fixture.whenStable();
    const iframeElement = fixture.debugElement.query(By.css('iframe'));
    expect(iframeElement?.nativeElement?.src).toBe(PREVIEW_URL);
  });

  it('should not render loading elements if the loadingStep is READY or ERROR', async () => {
    const {fixture, fakeNodeRuntimeState, getLoadingElementsWrapper} = beforeEach();

    fakeNodeRuntimeState.loadingStep.set(LoadingStep.READY);
    await fixture.whenStable();

    expect(getLoadingElementsWrapper()).toBeNull();

    fakeNodeRuntimeState.loadingStep.set(LoadingStep.ERROR);
    await fixture.whenStable();

    expect(getLoadingElementsWrapper()).toBeNull();
  });

  it('should render the correct loading element based on loadingStep', async () => {
    const {fixture, fakeNodeRuntimeState} = beforeEach();

    function getDebugElements(): Record<number, DebugElement | null> {
      return {
        [LoadingStep.NOT_STARTED]: fixture.debugElement.query(
          By.css('.adev-embedded-editor-preview-loading-starting'),
        ),
        [LoadingStep.BOOT]: fixture.debugElement.query(
          By.css('.adev-embedded-editor-preview-loading-boot'),
        ),
        [LoadingStep.LOAD_FILES]: fixture.debugElement.query(
          By.css('.adev-embedded-editor-preview-loading-load-files'),
        ),
        [LoadingStep.INSTALL]: fixture.debugElement.query(
          By.css('.adev-embedded-editor-preview-loading-install'),
        ),
        [LoadingStep.START_DEV_SERVER]: fixture.debugElement.query(
          By.css('.adev-embedded-editor-preview-loading-start-dev-server'),
        ),
      };
    }

    for (
      let componentLoadingStep = 0;
      componentLoadingStep < LoadingStep.READY;
      componentLoadingStep++
    ) {
      fakeNodeRuntimeState.loadingStep.set(componentLoadingStep);
      await fixture.whenStable();

      const loadingElements = getDebugElements();

      for (
        let elementLoadingStep = 0;
        elementLoadingStep < LoadingStep.READY;
        elementLoadingStep++
      ) {
        if (elementLoadingStep === componentLoadingStep) {
          expect(loadingElements[elementLoadingStep]).toBeDefined();
        } else {
          expect(loadingElements[elementLoadingStep]).toBeNull();
        }
      }
    }
  });

  it('should show the matching Angie pose for each loading step', async () => {
    const {fixture, fakeNodeRuntimeState} = beforeEach();

    const poseByStep: Record<number, string> = {
      [LoadingStep.NOT_STARTED]: 'greeting',
      [LoadingStep.BOOT]: 'greeting',
      [LoadingStep.LOAD_FILES]: 'greeting',
      [LoadingStep.INSTALL]: 'coding-01',
      [LoadingStep.START_DEV_SERVER]: 'superhero',
    };

    for (const step of Object.keys(poseByStep).map(Number)) {
      fakeNodeRuntimeState.loadingStep.set(step);
      await fixture.whenStable();

      const angie = fixture.debugElement.query(
        By.css('.adev-embedded-editor-preview-loading-angie'),
      );
      expect(angie).not.toBeNull();
      expect(angie.nativeElement.getAttribute('src')).toBe(
        `assets/images/angie/${poseByStep[step]}.svg`,
      );
    }
  });

  it('should render the error component and hide the iframe and loading element if loadingStep is ERROR', async () => {
    const {fixture, fakeNodeRuntimeState, iframeElement, getLoadingElementsWrapper} = beforeEach();

    fakeNodeRuntimeState.loadingStep.set(LoadingStep.ERROR);
    fakeNodeRuntimeState.error.set({message: 'Error message', type: undefined});
    await fixture.whenStable();

    expect(fixture.debugElement.query(By.directive(PreviewError))).toBeDefined();
    expect(getLoadingElementsWrapper()).toBeNull();
    expect(iframeElement).toBeNull();
  });
});