date-range-input-harness.spec.ts

import {HarnessLoader, parallel} from '@angular/cdk/testing';
import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
import {Component} from '@angular/core';
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {FormsModule} from '@angular/forms';
import {MATERIAL_ANIMATIONS, MatNativeDateModule} from '../../core';
import {
  MatDatepickerModule,
  MatDateRangeInput,
  MatDateRangePicker,
  MatEndDate,
  MatStartDate,
} from '../../datepicker';
import {MatFormFieldModule} from '../../form-field';
import {MatCalendarHarness} from './calendar-harness';
import {
  MatDateRangeInputHarness,
  MatEndDateHarness,
  MatStartDateHarness,
} from './date-range-input-harness';

describe('matDateRangeInputHarness', () => {
  let fixture: ComponentFixture<DateRangeInputHarnessTest>;
  let loader: HarnessLoader;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [MatNativeDateModule, MatDatepickerModule, FormsModule, DateRangeInputHarnessTest],
      providers: [{provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}}],
    });
    fixture = TestBed.createComponent(DateRangeInputHarnessTest);
    fixture.detectChanges();
    loader = TestbedHarnessEnvironment.loader(fixture);
  });

  it('should load all date range input harnesses', async () => {
    const inputs = await loader.getAllHarnesses(MatDateRangeInputHarness);
    expect(inputs.length).toBe(3);
  });

  it('should load date range input with a specific label', async () => {
    const inputs = await loader.getAllHarnesses(
      MatDateRangeInputHarness.with({label: 'Date range'}),
    );
    expect(inputs.length).toBe(1);
  });

  it('should get whether the input is disabled', async () => {
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));
    expect(await input.isDisabled()).toBe(false);

    fixture.componentInstance.disabled = true;
    fixture.changeDetectorRef.markForCheck();
    expect(await input.isDisabled()).toBe(true);
  });

  it('should get whether the input is required', async () => {
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));
    expect(await input.isRequired()).toBe(false);

    fixture.componentInstance.required = true;
    fixture.changeDetectorRef.markForCheck();
    expect(await input.isRequired()).toBe(true);
  });

  it('should get the input separator', async () => {
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));
    expect(await input.getSeparator()).toBe('–');
  });

  it('should get the combined input value including the separator', async () => {
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));

    fixture.componentInstance.startDate = new Date(2020, 0, 1, 12, 0, 0);
    fixture.componentInstance.endDate = new Date(2020, 1, 2, 12, 0, 0);
    fixture.changeDetectorRef.markForCheck();

    expect(await input.getValue()).toBe('1/1/2020 – 2/2/2020');
  });

  it('should get harnesses for the inner inputs', async () => {
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));
    const [start, end] = await parallel(() => [input.getStartInput(), input.getEndInput()]);
    expect(start).toBeInstanceOf(MatStartDateHarness);
    expect(end).toBeInstanceOf(MatEndDateHarness);
  });

  it('should be able to open and close a calendar in popup mode', async () => {
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));
    expect(await input.isCalendarOpen()).toBe(false);

    await input.openCalendar();
    expect(await input.isCalendarOpen()).toBe(true);

    await input.closeCalendar();
    expect(await input.isCalendarOpen()).toBe(false);
  });

  it('should be able to open and close a calendar in touch mode', async () => {
    fixture.componentInstance.touchUi = true;
    fixture.changeDetectorRef.markForCheck();
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));
    expect(await input.isCalendarOpen()).toBe(false);

    await input.openCalendar();
    expect(await input.isCalendarOpen()).toBe(true);

    await input.closeCalendar();
    expect(await input.isCalendarOpen()).toBe(false);
  });

  it('should be able to get the harness for the associated calendar', async () => {
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));
    await input.openCalendar();
    expect(await input.getCalendar()).toBeInstanceOf(MatCalendarHarness);
  });

  it('should get whether the inner inputs are disabled', async () => {
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));
    const [start, end] = await parallel(() => [input.getStartInput(), input.getEndInput()]);

    expect(await parallel(() => [start.isDisabled(), end.isDisabled()])).toEqual([false, false]);

    fixture.componentInstance.subInputsDisabled = true;
    fixture.changeDetectorRef.markForCheck();
    expect(await parallel(() => [start.isDisabled(), end.isDisabled()])).toEqual([true, true]);
  });

  it('should get whether the inner inputs are required', async () => {
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));
    const [start, end] = await parallel(() => [input.getStartInput(), input.getEndInput()]);

    expect(await parallel(() => [start.isRequired(), end.isRequired()])).toEqual([false, false]);

    fixture.componentInstance.subInputsRequired = true;
    fixture.changeDetectorRef.markForCheck();
    expect(await parallel(() => [start.isRequired(), end.isRequired()])).toEqual([true, true]);
  });

  it('should get the values of the inner inputs', async () => {
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));
    const [start, end] = await parallel(() => [input.getStartInput(), input.getEndInput()]);

    fixture.componentInstance.startDate = new Date(2020, 0, 1, 12, 0, 0);
    fixture.componentInstance.endDate = new Date(2020, 1, 2, 12, 0, 0);
    fixture.changeDetectorRef.markForCheck();

    expect(
      await parallel(() => {
        return [start.getValue(), end.getValue()];
      }),
    ).toEqual(['1/1/2020', '2/2/2020']);
  });

  it('should set the values of the inner inputs', async () => {
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));
    const [start, end] = await parallel(() => [input.getStartInput(), input.getEndInput()]);

    expect(await parallel(() => [start.getValue(), end.getValue()])).toEqual(['', '']);

    await parallel(() => [start.setValue('1/1/2020'), end.setValue('2/2/2020')]);

    expect(
      await parallel(() => {
        return [start.getValue(), end.getValue()];
      }),
    ).toEqual(['1/1/2020', '2/2/2020']);
  });

  it('should get the placeholders of the inner inputs', async () => {
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));
    const [start, end] = await parallel(() => [input.getStartInput(), input.getEndInput()]);

    expect(await parallel(() => [start.getPlaceholder(), end.getPlaceholder()])).toEqual([
      'Start date',
      'End date',
    ]);
  });

  it('should be able to change the inner input focused state', async () => {
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));
    const [start, end] = await parallel(() => [input.getStartInput(), input.getEndInput()]);

    expect(await start.isFocused()).toBe(false);
    await start.focus();
    expect(await start.isFocused()).toBe(true);
    await start.blur();
    expect(await start.isFocused()).toBe(false);

    expect(await end.isFocused()).toBe(false);
    await end.focus();
    expect(await end.isFocused()).toBe(true);
    await end.blur();
    expect(await end.isFocused()).toBe(false);
  });

  it('should get the minimum date of the inner inputs', async () => {
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));
    const [start, end] = await parallel(() => [input.getStartInput(), input.getEndInput()]);

    expect(await parallel(() => [start.getMin(), end.getMin()])).toEqual([null, null]);

    fixture.componentInstance.minDate = new Date(2020, 0, 1, 12, 0, 0);
    fixture.changeDetectorRef.markForCheck();
    expect(
      await parallel(() => {
        return [start.getMin(), end.getMin()];
      }),
    ).toEqual(['2020-01-01', '2020-01-01']);
  });

  it('should get the maximum date of the inner inputs', async () => {
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));
    const [start, end] = await parallel(() => [input.getStartInput(), input.getEndInput()]);

    expect(await parallel(() => [start.getMax(), end.getMax()])).toEqual([null, null]);

    fixture.componentInstance.maxDate = new Date(2020, 0, 1, 12, 0, 0);
    fixture.changeDetectorRef.markForCheck();

    expect(
      await parallel(() => {
        return [start.getMax(), end.getMax()];
      }),
    ).toEqual(['2020-01-01', '2020-01-01']);
  });

  it('should dispatch the dateChange event when the inner input values have changed', async () => {
    const input = await loader.getHarness(MatDateRangeInputHarness.with({selector: '[basic]'}));
    const [start, end] = await parallel(() => [input.getStartInput(), input.getEndInput()]);

    expect(fixture.componentInstance.startDateChangeCount).toBe(0);
    expect(fixture.componentInstance.endDateChangeCount).toBe(0);

    await parallel(() => [start.setValue('1/1/2020'), end.setValue('2/2/2020')]);

    expect(fixture.componentInstance.startDateChangeCount).toBe(1);
    expect(fixture.componentInstance.endDateChangeCount).toBe(1);
  });
});

@Component({
  template: `
    <mat-date-range-input
      basic
      [disabled]="disabled"
      [required]="required"
      [min]="minDate"
      [max]="maxDate"
      [rangePicker]="picker">
      <input
        matStartDate
        [(ngModel)]="startDate"
        (dateChange)="startDateChangeCount = startDateChangeCount + 1"
        [disabled]="subInputsDisabled"
        [required]="subInputsRequired"
        placeholder="Start date">
      <input
        matEndDate
        [(ngModel)]="endDate"
        (dateChange)="endDateChangeCount = endDateChangeCount + 1"
        [disabled]="subInputsDisabled"
        [required]="subInputsRequired"
        placeholder="End date">
    </mat-date-range-input>
    <mat-date-range-picker #picker [touchUi]="touchUi"></mat-date-range-picker>

    <mat-date-range-input no-range-picker>
      <input matStartDate>
      <input matEndDate>
    </mat-date-range-input>

    <mat-form-field>
      <mat-label>Date range</mat-label>
      <mat-date-range-input basic>
      <input matStartDate>
      <input matEndDate>
    </mat-date-range-input>
    </mat-form-field>
  `,
  imports: [
    MatNativeDateModule,
    MatDateRangeInput,
    MatStartDate,
    MatEndDate,
    MatDateRangePicker,
    MatFormFieldModule,
    FormsModule,
  ],
})
class DateRangeInputHarnessTest {
  startDate: Date | null = null;
  endDate: Date | null = null;
  minDate: Date | null = null;
  maxDate: Date | null = null;
  touchUi = false;
  disabled = false;
  required = false;
  subInputsDisabled = false;
  subInputsRequired = false;
  startDateChangeCount = 0;
  endDateChangeCount = 0;
}