TypeScript testing.MockNgZone類代碼示例

describe('ConnectedPositionStrategy', () => {
  let overlay: Overlay;
  let overlayContainer: OverlayContainer;
  let zone: MockNgZone;
  let overlayRef: OverlayRef;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ScrollingModule, OverlayModule, OverlayTestModule],
      providers: [{provide: NgZone, useFactory: () => zone = new MockNgZone()}]
    });

    inject([Overlay, OverlayContainer], (o: Overlay, oc: OverlayContainer) => {
      overlay = o;
      overlayContainer = oc;
    })();
  });

  afterEach(() => {
    overlayContainer.ngOnDestroy();

    if (overlayRef) {
      overlayRef.dispose();
    }
  });

  function attachOverlay(positionStrategy: ConnectedPositionStrategy) {
    overlayRef = overlay.create({positionStrategy});
    overlayRef.attach(new ComponentPortal(TestOverlay));
    zone.simulateZoneExit();
  }

  describe('with origin on document body', () => {
    const ORIGIN_HEIGHT = DEFAULT_HEIGHT;
    const ORIGIN_WIDTH = DEFAULT_WIDTH;
    const OVERLAY_HEIGHT = DEFAULT_HEIGHT;
    const OVERLAY_WIDTH = DEFAULT_WIDTH;

    let originElement: HTMLElement;
    let positionStrategy: ConnectedPositionStrategy;
    let fakeElementRef: ElementRef<HTMLElement>;

    let originRect: ClientRect | null;
    let originCenterX: number | null;
    let originCenterY: number | null;

    beforeEach(() => {
      // The origin and overlay elements need to be in the document body in order to have geometry.
      originElement = createPositionedBlockElement();
      document.body.appendChild(originElement);
      fakeElementRef = new ElementRef<HTMLElement>(originElement);
    });

    afterEach(() => {
      document.body.removeChild(originElement);

      // Reset the origin geometry after each test so we don't accidently keep state between tests.
      originRect = null;
      originCenterX = null;
      originCenterY = null;
    });

    describe('when not near viewport edge, not scrolled', () => {
      // Place the original element close to the center of the window.
      // (1024 / 2, 768 / 2). It's not exact, since outerWidth/Height includes browser
      // chrome, but it doesn't really matter for these tests.
      const ORIGIN_LEFT = 500;
      const ORIGIN_TOP = 350;

      beforeEach(() => {
        originElement.style.left = `${ORIGIN_LEFT}px`;
        originElement.style.top = `${ORIGIN_TOP}px`;

        originRect = originElement.getBoundingClientRect();
        originCenterX = originRect.left + (ORIGIN_WIDTH / 2);
        originCenterY = originRect.top + (ORIGIN_HEIGHT / 2);
      });

      // Preconditions are set, now just run the full set of simple position tests.
      runSimplePositionTests();
    });

    describe('when scrolled', () => {
      // Place the original element decently far outside the unscrolled document (1024x768).
      const ORIGIN_LEFT = 2500;
      const ORIGIN_TOP = 2500;

      // Create a very large element that will make the page scrollable.
      let veryLargeElement: HTMLElement = document.createElement('div');
      veryLargeElement.style.width = '4000px';
      veryLargeElement.style.height = '4000px';

      beforeEach(() => {
        // Scroll the page such that the origin element is roughly in the
        // center of the visible viewport (2500 - 1024/2, 2500 - 768/2).
        document.body.appendChild(veryLargeElement);
        document.body.scrollTop = 2100;
        document.body.scrollLeft = 2100;

        originElement.style.top = `${ORIGIN_TOP}px`;
//.........這裏部分代碼省略.........

describe('GlobalPositonStrategy', () => {
  let overlayRef: OverlayRef;
  let overlay: Overlay;
  let zone: MockNgZone;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [GlobalOverlayTestModule],
      providers: [{provide: NgZone, useFactory: () => zone = new MockNgZone()}]
    });

    inject([Overlay], (o: Overlay) => {
      overlay = o;
    })();
  });

  afterEach(inject([OverlayContainer], (overlayContainer: OverlayContainer) => {
    if (overlayRef) {
      overlayRef.dispose();
      overlayRef = null!;
    }

    overlayContainer.ngOnDestroy();
  }));

  function attachOverlay(config: OverlayConfig): OverlayRef {
    const portal = new ComponentPortal(BlankPortal);
    overlayRef = overlay.create(config);
    overlayRef.attach(portal);
    zone.simulateZoneExit();
    return overlayRef;
  }

  it('should position the element to the (top, left) with an offset', () => {
    attachOverlay({
      positionStrategy: overlay.position()
        .global()
        .top('10px')
        .left('40px')
    });

    const elementStyle = overlayRef.overlayElement.style;
    const parentStyle = (overlayRef.overlayElement.parentNode as HTMLElement).style;

    expect(elementStyle.marginTop).toBe('10px');
    expect(elementStyle.marginLeft).toBe('40px');
    expect(elementStyle.marginBottom).toBe('');
    expect(elementStyle.marginRight).toBe('');

    expect(parentStyle.justifyContent).toBe('flex-start');
    expect(parentStyle.alignItems).toBe('flex-start');
  });

  it('should position the element to the (bottom, right) with an offset', () => {
    attachOverlay({
      positionStrategy: overlay.position()
        .global()
        .bottom('70px')
        .right('15em')
    });

    const elementStyle = overlayRef.overlayElement.style;
    const parentStyle = (overlayRef.overlayElement.parentNode as HTMLElement).style;

    expect(elementStyle.marginTop).toBe('');
    expect(elementStyle.marginLeft).toBe('');
    expect(elementStyle.marginBottom).toBe('70px');
    expect(elementStyle.marginRight).toBe('15em');

    expect(parentStyle.justifyContent).toBe('flex-end');
    expect(parentStyle.alignItems).toBe('flex-end');
  });

  it('should overwrite previously applied positioning', () => {
    const positionStrategy = overlay.position()
      .global()
      .centerHorizontally()
      .centerVertically();

    attachOverlay({positionStrategy});
    positionStrategy.top('10px').left('40%');
    overlayRef.updatePosition();

    const elementStyle = overlayRef.overlayElement.style;
    const parentStyle = (overlayRef.overlayElement.parentNode as HTMLElement).style;

    expect(elementStyle.marginTop).toBe('10px');
    expect(elementStyle.marginLeft).toBe('40%');
    expect(elementStyle.marginBottom).toBe('');
    expect(elementStyle.marginRight).toBe('');

    expect(parentStyle.justifyContent).toBe('flex-start');
    expect(parentStyle.alignItems).toBe('flex-start');

    positionStrategy.bottom('70px').right('15em');
    overlayRef.updatePosition();

    expect(elementStyle.marginTop).toBe('');
    expect(elementStyle.marginLeft).toBe('');
    expect(elementStyle.marginBottom).toBe('70px');
//.........這裏部分代碼省略.........

 function attachOverlay(config: OverlayConfig): OverlayRef {
   const portal = new ComponentPortal(BlankPortal);
   overlayRef = overlay.create(config);
   overlayRef.attach(portal);
   zone.simulateZoneExit();
   return overlayRef;
 }

 function attachOverlay(positionStrategy: ConnectedPositionStrategy) {
   overlayRef = overlay.create({positionStrategy});
   overlayRef.attach(new ComponentPortal(TestOverlay));
   zone.simulateZoneExit();
 }