TypeScript theme.NbDatepickerDirective類代碼示例

describe('nb-datepicker', () => {
  let fixture: ComponentFixture<NbDatepickerTestComponent>;
  let appRef: ApplicationRef;
  let datepicker: NbDatepickerComponent<Date>;
  let datepickerDirective: NbDatepickerDirective<Date>;
  let overlay: HTMLElement;
  let input: HTMLInputElement;

  const showDatepicker = () => {
    datepicker.show();
    appRef.tick();
  };

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule.withRoutes([]),
        NbThemeModule.forRoot(),
        NbLayoutModule,
        NbDatepickerModule.forRoot(),
      ],
      declarations: [NbDatepickerTestComponent],
    });

    fixture = TestBed.createComponent(NbDatepickerTestComponent);
    appRef = TestBed.get(ApplicationRef);

    fixture.detectChanges();
  });

  beforeEach(() => {
    datepicker = fixture.componentInstance.datepicker;
    datepickerDirective = fixture.componentInstance.datepickerDirective;
    overlay = fixture.nativeElement.querySelector('nb-layout');
    input = fixture.nativeElement.querySelector('input');
  });

  it('should render calendar', () => {
    showDatepicker();
    const calendar = overlay.querySelector('nb-calendar');
    expect(calendar).toBeTruthy();
  });

  it('should not render overlay on load', () => {
    const datepickerContainer = overlay.querySelector('nb-datepicker-container');
    expect(datepickerContainer).toBeNull();
  });

  it('should render overlay lazily', () => {
    const datepickerContainer = overlay.querySelector('nb-datepicker-container');
    expect(datepickerContainer).toBeNull();
    showDatepicker();
    const calendar = overlay.querySelector('nb-calendar');
    expect(calendar).toBeTruthy();
  });

  it('should write selected date in the input', () => {
    const date = new Date(2018, 8, 17);
    datepicker.visibleDate = date;
    showDatepicker();

    datepicker.dateChange.subscribe(e => {
      expect(e).toEqual(date);
      expect(input.value).toEqual('Sep 17, 2018');
    });

    const cell = overlay.querySelectorAll('.day-cell')[22]; // it's visible date cell
    cell.dispatchEvent(new Event('click'));
  });

  it('should start from date typed into the input', () => {
    input.value = 'Sep 17, 2018';
    input.dispatchEvent(new Event('input'));
    showDatepicker();
    appRef.tick();

    const cell = overlay.querySelector('.day-cell.selected'); // it's input value date cell

    expect(cell.textContent).toContain('17');
  });

  it('should start from current date if input is empty', () => {
    showDatepicker();
    appRef.tick();
    expect(overlay.querySelector('.day-cell.today')).toBeDefined();
  });

  it('should start from current date if input value is invalid', () => {
    input.value = 'definitely not a date';
    input.dispatchEvent(new Event('input'));
    showDatepicker();
    appRef.tick();
    expect(overlay.querySelector('.day-cell.today')).toBeDefined();
  });

  it('should update visible date if input value changed', () => {
    const initialDate = new Date(2000, 0, 1);
    datepicker.visibleDate = initialDate;

    const date = 17;
//.........這裏部分代碼省略.........

  it('should not be valid if empty contain incorrectly formatted date', () => {
    input.value = 'somecurruptedinput';
    input.dispatchEvent(new Event('input'));
    showRangepicker();

    expect(datepickerDirective.validate()).not.toBe(null);
  });