@angular/core/testing#ComponentFixtureAutoDetect TypeScript Examples

The following examples show how to use @angular/core/testing#ComponentFixtureAutoDetect. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: directive-superclass.spec.ts    From s-libs with MIT License 6 votes vote down vote up 
constructor() {
    super(TestComponent, {
      declarations: [ColorTextComponent],
      providers: [
        {
          provide: 'color$',
          useFactory: (): Observable<string> => this.color$,
        },
        // this can go away with component harnesses eventually
        { provide: ComponentFixtureAutoDetect, useValue: true },
      ],
    });
  }
Example #2
Source File: form-component-superclass.spec.ts    From s-libs with MIT License 5 votes vote down vote up 
describe('FormComponentSuperclass', () => {
  let ctx: ComponentContext<TestComponent>;
  beforeEach(() => {
    ctx = new ComponentContext(TestComponent, {
      imports: [FormsModule],
      declarations: [CounterComponent],
      // this can go away with component harnesses eventually
      providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }],
    });
  });

  function incrementButton(): HTMLButtonElement {
    return find<HTMLButtonElement>(ctx.fixture, 'sl-counter button');
  }

  function toggleDisabledButton(): HTMLButtonElement {
    return findButton(ctx.fixture, 'Toggle Disabled');
  }

  it('provides help for 2-way binding', () => {
    ctx.assignInputs({ value: 15 });
    ctx.run(() => {
      expect(ctx.getComponentInstance().value).toBe(15);
      expect(ctx.fixture.nativeElement.innerText).toContain('15');

      click(incrementButton());
      expect(ctx.getComponentInstance().value).toBe(16);
      expect(ctx.fixture.nativeElement.innerText).toContain('16');
    });
  });

  it('provides help for `onTouched`', () => {
    ctx.run(() => {
      expect(ctx.fixture.nativeElement.innerText).not.toContain('Touched!');
      click(incrementButton());
      expect(ctx.fixture.nativeElement.innerText).toContain('Touched!');
    });
  });

  it('provides help for `[disabled]`', () => {
    ctx.assignInputs({ shouldDisable: true });
    ctx.run(() => {
      expect(incrementButton().disabled).toBe(true);

      click(toggleDisabledButton());
      expect(incrementButton().disabled).toBe(false);
    });
  });

  it('has the right class hierarchy', () => {
    ctx.run(() => {
      const counter = ctx.fixture.debugElement.query(
        By.directive(CounterComponent),
      ).componentInstance;
      expect(counter instanceof InjectableSuperclass).toBe(true);
      expect(counter instanceof DirectiveSuperclass).toBe(true);
    });
  });
});
Example #3
Source File: wrapped-control-superclass.spec.ts    From s-libs with MIT License 4 votes vote down vote up 
describe('WrappedControlSuperclass tests using an old style fixture', () => {
  @Component({
    template: `
      <sl-string-component
        [(ngModel)]="string"
        (ngModelChange)="emissions = emissions + 1"
        #stringControl="ngModel"
        [disabled]="shouldDisable"
      ></sl-string-component>
      <div *ngIf="stringControl.touched">Touched!</div>
      <button (click)="shouldDisable = !shouldDisable">Toggle Disabled</button>
      <hr />
      <sl-date-component [(ngModel)]="date"></sl-date-component>
    `,
  })
  class TestComponent {
    emissions = 0;
    string = '';
    date = new Date();
    shouldDisable = false;
  }

  @Component({
    selector: `sl-string-component`,
    template: ` <input [formControl]="control" /> `,
    providers: [provideValueAccessor(StringComponent)],
    changeDetection: ChangeDetectionStrategy.OnPush,
  })
  class StringComponent extends WrappedControlSuperclass<string> {
    control = new FormControl();
  }

  @Component({
    selector: `sl-date-component`,
    template: ` <input type="datetime-local" [formControl]="control" /> `,
    providers: [provideValueAccessor(DateComponent)],
    changeDetection: ChangeDetectionStrategy.OnPush,
  })
  class DateComponent extends WrappedControlSuperclass<Date, string> {
    control = new FormControl();

    protected override innerToOuter(value: string): Date {
      return new Date(value + 'Z');
    }

    protected override outerToInner(value: Date): string {
      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- happens during initialization
      if (value === null) {
        return '';
      }
      return value.toISOString().substr(0, 16);
    }
  }

  class TestComponentContext extends ComponentContext<TestComponent> {
    constructor() {
      super(TestComponent, {
        imports: [FormsModule, ReactiveFormsModule],
        declarations: [DateComponent, StringComponent],
        // TODO: this can go away with component harnesses eventually
        providers: [{ provide: ComponentFixtureAutoDetect, useValue: true }],
      });
    }
  }

  let masterCtx: TestComponentContext;
  beforeEach(() => {
    masterCtx = new TestComponentContext();
  });

  function stringInput(): HTMLInputElement {
    return find<HTMLInputElement>(
      masterCtx.fixture,
      'sl-string-component input',
    );
  }

  function dateInput(): HTMLInputElement {
    return find<HTMLInputElement>(masterCtx.fixture, 'sl-date-component input');
  }

  function toggleDisabledButton(): HTMLButtonElement {
    return findButton(masterCtx.fixture, 'Toggle Disabled');
  }

  it('provides help for 2-way binding', () => {
    masterCtx.run(() => {
      masterCtx.getComponentInstance().string = 'initial value';
      masterCtx.tick();
      expect(stringInput().value).toBe('initial value');

      setValue(stringInput(), 'edited value');
      expect(masterCtx.getComponentInstance().string).toBe('edited value');
    });
  });

  it('can translate between inner and outer values', () => {
    masterCtx.run(() => {
      masterCtx.getComponentInstance().date = new Date('2018-09-03T21:00Z');
      masterCtx.tick();
      expect(dateInput().value).toBe('2018-09-03T21:00');

      setValue(dateInput(), '1980-11-04T10:00');
      expect(masterCtx.getComponentInstance().date).toEqual(
        new Date('1980-11-04T10:00Z'),
      );
    });
  });

  it('provides help for `onTouched`', () => {
    masterCtx.run(() => {
      expect(masterCtx.fixture.nativeElement.innerText).not.toContain(
        'Touched!',
      );
      stringInput().dispatchEvent(new Event('blur'));
      expect(masterCtx.fixture.nativeElement.innerText).toContain('Touched!');
    });
  });

  it('provides help for `[disabled]`', () => {
    masterCtx.run(() => {
      masterCtx.getComponentInstance().shouldDisable = true;
      masterCtx.tick();
      expect(stringInput().disabled).toBe(true);

      click(toggleDisabledButton());
      expect(stringInput().disabled).toBe(false);

      click(toggleDisabledButton());
      expect(stringInput().disabled).toBe(true);
    });
  });

  it('does not emit after an incoming change', () => {
    masterCtx.run(() => {
      expect(masterCtx.getComponentInstance().emissions).toBe(0);

      setValue(stringInput(), 'changed from within');
      expect(masterCtx.getComponentInstance().emissions).toBe(1);

      masterCtx.getComponentInstance().string = 'changed from without';
      masterCtx.fixture.detectChanges();
      flushMicrotasks();
      expect(masterCtx.getComponentInstance().emissions).toBe(1);

      click(toggleDisabledButton());
      click(toggleDisabledButton());
      expect(masterCtx.getComponentInstance().emissions).toBe(1);
    });
  });

  it('has the right class hierarchy', () => {
    masterCtx.run(() => {
      const component = masterCtx.fixture.debugElement.query(
        By.directive(StringComponent),
      ).componentInstance;
      expect(component instanceof InjectableSuperclass).toBe(true);
      expect(component instanceof DirectiveSuperclass).toBe(true);
      expect(component instanceof FormComponentSuperclass).toBe(true);
    });
  });
});