devtools/projects/ng-devtools/src/lib/shared/split/responsive-split.directive.spec.ts - main - githubmirror/angular

devtools/projects/ng-devtools/src/lib/shared/split/responsive-split.directive.spec.ts
136 строк3 KB
Matthieu Riegler
refactor(devtools): use `whenStable` instead of `detectChanges`
05 янв 2026, 20:24
05 янв 2026, 20:246a94300
/**
 * @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 {Component, DebugElement, ElementRef, viewChild} from '@angular/core';
import {TestBed} from '@angular/core/testing';
import {By} from '@angular/platform-browser';

import {
  RESIZE_DEBOUNCE,
  ResponsiveSplitConfig,
  ResponsiveSplitDirective,
} from './responsive-split.directive';
import {WINDOW} from '../../application-providers/window_provider';
import {SplitComponent} from './split.component';
import {SplitAreaDirective} from './splitArea.directive';

//
// `ResizeObserver` mock.
//

interface ResizeObserverMock extends ResizeObserver {
  trigger: (width: number, height: number) => void;
}

let observerInstance: ResizeObserverMock | undefined;

function getResizeObserver() {
  if (!observerInstance) {
    throw new Error('The ResizeObserver mock is not instantiated.');
  }
  return observerInstance;
}

class ResizeObserverMockImpl implements ResizeObserverMock {
  constructor(private readonly cb: (e: Partial<ResizeObserverEntry>[]) => void) {
    observerInstance = this;
  }

  trigger(width: number, height: number) {
    this.cb([{contentBoxSize: [{inlineSize: width, blockSize: height}]}]);
  }

  disconnect() {}
  observe() {}
  unobserve() {}
}

// Test component
@Component({
  selector: 'ng-test-cmp',
  imports: [SplitComponent, SplitAreaDirective, ResponsiveSplitDirective],
  template: `
    <as-split #host [ngResponsiveSplit]="config">
      <as-split-area>
        <p>Foo</p>
      </as-split-area>
      <as-split-area>
        <p>Bar</p>
      </as-split-area>
    </as-split>
  `,
})
class TestComponent {
  readonly split = viewChild.required(SplitComponent);
  readonly host = viewChild.required<ElementRef>('host');

  readonly config: ResponsiveSplitConfig = {
    defaultDirection: 'horizontal',
    aspectRatioBreakpoint: 1.5,
    breakpointDirection: 'vertical',
  };
}

async function initTestComponent(
  width: number,
  height: number,
): Promise<{host: DebugElement; split: SplitComponent}> {
  TestBed.configureTestingModule({
    providers: [{provide: WINDOW, useValue: {...window, ResizeObserver: ResizeObserverMockImpl}}],
  });
  const fixture = TestBed.createComponent(TestComponent);
  await fixture.whenStable();

  const host = fixture.debugElement.query(By.css('as-split'));
  const split = host.componentInstance;

  getResizeObserver().trigger(width, height);

  // Should be equal or greater than the resize debounce.
  jasmine.clock().tick(RESIZE_DEBOUNCE + 10);

  return {
    host,
    split,
  };
}

//
// Tests
//

describe('responsive-split', () => {
  beforeEach(() => {
    jasmine.clock().uninstall();
    jasmine.clock().install();
  });

  it('should use horizontal direction (ratio == 1)', async () => {
    const {split} = await initTestComponent(200, 200);

    expect(split.direction()).toEqual('horizontal');
  });

  it('should use horizontal direction (ratio == 1.49)', async () => {
    const {split} = await initTestComponent(299, 200);

    expect(split.direction()).toEqual('horizontal');
  });

  it('should use vertical direction (ratio == 1.5)', async () => {
    const {split} = await initTestComponent(350, 200);

    expect(split.direction()).toEqual('vertical');
  });

  it('should use vertical direction (ratio == 2)', async () => {
    const {split} = await initTestComponent(400, 200);

    expect(split.direction()).toEqual('vertical');
  });
});