How to use componentInstance method in ng-mocks

Best JavaScript code snippet using ng-mocks

calendar-month-view.component.spec.ts

Source:calendar-month-view.component.spec.ts

1import {2  inject,3  ComponentFixture,4  TestBed,5  fakeAsync,6  flush,7  tick,8} from '@angular/core/testing';9import { BrowserAnimationsModule } from '@angular/platform-browser/animations';10import moment from 'moment';11import * as sinon from 'sinon';12import { expect } from 'chai';13import { spy } from 'sinon';14import {15  CalendarEventTitleFormatter,16  CalendarEvent,17  CalendarMomentDateFormatter,18  CalendarDateFormatter,19  CalendarModule,20  MOMENT,21  CalendarMonthViewDay,22  DAYS_OF_WEEK,23  CalendarEventTimesChangedEvent,24  CalendarMonthViewComponent,25  DateAdapter,26  CalendarMonthViewEventTimesChangedEvent,27} from '../src';28import { Subject } from 'rxjs';29import { triggerDomEvent } from './util';30import { take } from 'rxjs/operators';31import { adapterFactory } from '../src/date-adapters/date-fns';32import localeDe from '@angular/common/locales/de';33import { registerLocaleData } from '@angular/common';34registerLocaleData(localeDe);35describe('calendarMonthView component', () => {36  beforeEach(() => {37    TestBed.configureTestingModule({38      imports: [39        BrowserAnimationsModule,40        CalendarModule.forRoot(41          {42            provide: DateAdapter,43            useFactory: adapterFactory,44          },45          {46            dateFormatter: {47              provide: CalendarDateFormatter,48              useClass: CalendarMomentDateFormatter,49            },50          }51        ),52      ],53      providers: [{ provide: MOMENT, useValue: moment }],54    });55  });56  let eventTitle: CalendarEventTitleFormatter;57  beforeEach(inject([CalendarEventTitleFormatter], (_eventTitle_) => {58    eventTitle = _eventTitle_;59  }));60  it('should generate the month view', () => {61    const fixture: ComponentFixture<CalendarMonthViewComponent> =62      TestBed.createComponent(CalendarMonthViewComponent);63    fixture.componentInstance.viewDate = new Date('2016-06-27');64    fixture.componentInstance.ngOnChanges({ viewDate: {} });65    expect(fixture.componentInstance.view.rowOffsets).to.deep.equal([66      0, 7, 14, 21, 28,67    ]);68    expect(fixture.componentInstance.view.days.length).to.equal(35);69    expect(fixture.componentInstance.view.totalDaysVisibleInWeek).to.equal(7);70    expect(fixture.componentInstance.view.days[0].date).to.deep.equal(71      moment('2016-05-29').toDate()72    );73    fixture.destroy();74  });75  it('should emit on the columnHeaderClicked output', (done) => {76    const fixture: ComponentFixture<CalendarMonthViewComponent> =77      TestBed.createComponent(CalendarMonthViewComponent);78    fixture.componentInstance.viewDate = new Date('2016-06-29');79    fixture.componentInstance.ngOnChanges({ viewDate: {} });80    fixture.detectChanges();81    fixture.componentInstance.columnHeaderClicked.subscribe((val) => {82      expect(val.isoDayNumber).to.equal(0);83      expect(val.sourceEvent instanceof MouseEvent).to.be.true;84      done();85    });86    fixture.nativeElement.querySelector('.cal-header .cal-cell').click();87    fixture.detectChanges();88  });89  it('should generate the week view with default colors for events', () => {90    const fixture: ComponentFixture<CalendarMonthViewComponent> =91      TestBed.createComponent(CalendarMonthViewComponent);92    fixture.componentInstance.ngOnInit();93    fixture.componentInstance.viewDate = new Date('2016-06-01');94    fixture.componentInstance.events = [95      {96        start: new Date('2016-05-30'),97        end: new Date('2016-06-02'),98        title: 'foo',99      },100    ];101    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });102    fixture.detectChanges();103    const computedStyles: CSSStyleDeclaration = window.getComputedStyle(104      fixture.nativeElement.querySelector('.cal-event')105    );106    expect(computedStyles.getPropertyValue('background-color')).to.equal(107      'rgb(30, 144, 255)'108    );109    expect(computedStyles.getPropertyValue('border-color')).to.equal(110      'rgb(209, 232, 255)'111    );112    expect(computedStyles.getPropertyValue('color')).to.equal(113      'rgb(255, 255, 255)'114    );115    fixture.destroy();116  });117  it('should generate the month view without from week excluded days', () => {118    const fixture: ComponentFixture<CalendarMonthViewComponent> =119      TestBed.createComponent(CalendarMonthViewComponent);120    fixture.componentInstance.viewDate = new Date('2016-01-10');121    fixture.componentInstance.excludeDays = [0, 6];122    fixture.componentInstance.ngOnChanges({ viewDate: {} });123    expect(fixture.componentInstance.view.days.length).to.equal(25);124    expect(fixture.componentInstance.view.totalDaysVisibleInWeek).to.equal(5);125    expect(fixture.componentInstance.view.rowOffsets).to.deep.equal([126      0, 5, 10, 15, 20,127    ]);128    expect(fixture.componentInstance.view.days[0].date).to.deep.equal(129      moment('2015-12-28').toDate()130    );131    fixture.destroy();132  });133  it('should update the month view when excluded days changed', () => {134    const fixture: ComponentFixture<CalendarMonthViewComponent> =135      TestBed.createComponent(CalendarMonthViewComponent);136    fixture.componentInstance.viewDate = new Date('2016-01-10');137    fixture.componentInstance.excludeDays = [0, 1, 2];138    fixture.componentInstance.ngOnChanges({ excludeDays: {} });139    expect(fixture.componentInstance.view.days.length).to.equal(20);140    expect(fixture.componentInstance.view.totalDaysVisibleInWeek).to.equal(4);141    fixture.destroy();142  });143  it('should open and close the active day events list', () => {144    const fixture: ComponentFixture<CalendarMonthViewComponent> =145      TestBed.createComponent(CalendarMonthViewComponent);146    expect(fixture.componentInstance.openRowIndex).to.equal(undefined);147    expect(fixture.componentInstance.openDay).to.equal(undefined);148    fixture.componentInstance.viewDate = moment()149      .startOf('month')150      .startOf('week')151      .add(8, 'days')152      .toDate();153    fixture.componentInstance.activeDayIsOpen = true;154    fixture.componentInstance.ngOnChanges({155      viewDate: {},156      activeDayIsOpen: {},157    });158    expect(fixture.componentInstance.openRowIndex).to.equal(7);159    expect(fixture.componentInstance.openDay).to.equal(160      fixture.componentInstance.view.days[8]161    );162    fixture.componentInstance.activeDayIsOpen = false;163    fixture.componentInstance.ngOnChanges({164      viewDate: {},165      activeDayIsOpen: {},166    });167    expect(!!fixture.componentInstance.openRowIndex).to.equal(false);168    expect(!!fixture.componentInstance.openDay).to.equal(false);169    fixture.destroy();170  });171  it('should use the activeDay input instead of the viewDate to determine the active day', () => {172    const fixture: ComponentFixture<CalendarMonthViewComponent> =173      TestBed.createComponent(CalendarMonthViewComponent);174    expect(fixture.componentInstance.openRowIndex).to.equal(undefined);175    expect(fixture.componentInstance.openDay).to.equal(undefined);176    fixture.componentInstance.viewDate = moment()177      .startOf('month')178      .startOf('week')179      .add(14, 'days')180      .toDate();181    fixture.componentInstance.activeDay = moment()182      .startOf('month')183      .startOf('week')184      .add(8, 'days')185      .toDate();186    fixture.componentInstance.activeDayIsOpen = true;187    fixture.componentInstance.ngOnChanges({188      viewDate: {},189      activeDayIsOpen: {},190    });191    expect(fixture.componentInstance.openRowIndex).to.equal(7);192    expect(fixture.componentInstance.openDay).to.equal(193      fixture.componentInstance.view.days[8]194    );195    fixture.componentInstance.activeDayIsOpen = false;196    fixture.componentInstance.ngOnChanges({197      viewDate: {},198      activeDayIsOpen: {},199    });200    expect(!!fixture.componentInstance.openRowIndex).to.equal(false);201    expect(!!fixture.componentInstance.openDay).to.equal(false);202    fixture.destroy();203  });204  it('should add a custom CSS class to events', () => {205    const fixture: ComponentFixture<CalendarMonthViewComponent> =206      TestBed.createComponent(CalendarMonthViewComponent);207    fixture.componentInstance.viewDate = new Date('2016-06-27');208    fixture.componentInstance.events = [209      {210        start: new Date('2016-05-30'),211        end: new Date('2016-06-02'),212        cssClass: 'foo',213        title: 'foo',214        color: {215          primary: 'blue',216          secondary: '',217        },218      },219    ];220    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });221    fixture.detectChanges();222    const event: HTMLElement = fixture.nativeElement.querySelector(223      '.cal-days .cal-cell-row .cal-cell:nth-child(4) .cal-events .cal-event'224    );225    expect(event.classList.contains('foo')).to.equal(true);226    fixture.destroy();227  });228  it('should add a custom CSS class to days via the beforeViewRender output', () => {229    const fixture: ComponentFixture<CalendarMonthViewComponent> =230      TestBed.createComponent(CalendarMonthViewComponent);231    fixture.componentInstance.viewDate = new Date('2016-06-27');232    fixture.componentInstance.beforeViewRender233      .pipe(take(1))234      .subscribe(({ body }) => {235        body[0].cssClass = 'foo';236      });237    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });238    fixture.detectChanges();239    expect(240      fixture.nativeElement241        .querySelector('.cal-days .cal-cell')242        .classList.contains('foo')243    ).to.equal(true);244    fixture.destroy();245  });246  it('should add a custom CSS class to headers via the beforeViewRender output', () => {247    const fixture: ComponentFixture<CalendarMonthViewComponent> =248      TestBed.createComponent(CalendarMonthViewComponent);249    fixture.componentInstance.viewDate = new Date('2016-06-27');250    fixture.componentInstance.beforeViewRender251      .pipe(take(1))252      .subscribe(({ header }) => {253        header[0].cssClass = 'foo';254      });255    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });256    fixture.detectChanges();257    expect(258      fixture.nativeElement259        .querySelector('.cal-header .cal-cell')260        .classList.contains('foo')261    ).to.equal(true);262    fixture.destroy();263  });264  it('should not remove other classes when removing the cssClass', () => {265    const fixture: ComponentFixture<CalendarMonthViewComponent> =266      TestBed.createComponent(CalendarMonthViewComponent);267    fixture.componentInstance.viewDate = new Date('2016-06-27');268    let firstDay: CalendarMonthViewDay;269    fixture.componentInstance.beforeViewRender270      .pipe(take(1))271      .subscribe(({ body }) => {272        body[0].cssClass = 'foo';273        firstDay = body[0];274      });275    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });276    fixture.detectChanges();277    const cell: HTMLElement = fixture.nativeElement.querySelector(278      '.cal-days .cal-cell'279    );280    expect(cell.classList.contains('foo')).to.equal(true);281    expect(cell.classList.contains('cal-out-month')).to.equal(true);282    delete firstDay.cssClass;283    fixture.detectChanges();284    expect(cell.classList.contains('foo')).to.equal(false);285    expect(cell.classList.contains('cal-out-month')).to.equal(true);286    fixture.destroy();287  });288  it('should add the highlight class to events on mouse over', () => {289    const fixture: ComponentFixture<CalendarMonthViewComponent> =290      TestBed.createComponent(CalendarMonthViewComponent);291    fixture.componentInstance.viewDate = new Date('2016-06-27');292    fixture.componentInstance.events = [293      {294        start: new Date('2016-05-30'),295        end: new Date('2016-06-02'),296        title: 'foo',297        color: {298          primary: 'blue',299          secondary: 'rgb(238, 238, 238)',300        },301      },302    ];303    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });304    fixture.detectChanges();305    const event: HTMLElement = fixture.nativeElement.querySelector(306      '.cal-days .cal-cell-row .cal-cell:nth-child(4) .cal-events .cal-event'307    );308    const day: HTMLElement = fixture.nativeElement.querySelector(309      '.cal-days .cal-cell-row .cal-cell:nth-child(4)'310    );311    triggerDomEvent('mouseenter', event);312    fixture.detectChanges();313    expect(day.style.backgroundColor).to.equal('rgb(238, 238, 238)');314    expect(day.classList.contains('cal-event-highlight')).to.be.true;315    triggerDomEvent('mouseleave', event);316    fixture.detectChanges();317    expect(day.style.backgroundColor).to.be.equal('');318    expect(day.classList.contains('cal-event-highlight')).to.be.false;319  });320  it('should add event actions to the active day events', () => {321    const fixture: ComponentFixture<CalendarMonthViewComponent> =322      TestBed.createComponent(CalendarMonthViewComponent);323    fixture.componentInstance.viewDate = new Date('2016-06-27');324    fixture.componentInstance.events = [325      {326        start: new Date('2016-06-26'),327        end: new Date('2016-06-28'),328        title: 'foo',329        color: {330          primary: 'blue',331          secondary: 'rgb(238, 238, 238)',332        },333        actions: [334          {335            label: '<i class="fa fa-fw fa-times"></i>',336            onClick: spy(),337            cssClass: 'foo',338          },339        ],340      },341    ];342    fixture.componentInstance.activeDayIsOpen = true;343    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });344    fixture.detectChanges();345    const action: HTMLElement = fixture.nativeElement.querySelector(346      '.cal-open-day-events .cal-event-action'347    );348    expect(action.innerHTML).to.equal('<i class="fa fa-fw fa-times"></i>');349    expect(action.classList.contains('foo')).to.equal(true);350    action.click();351    const actionSpy = fixture.componentInstance.events[0].actions[0]352      .onClick as sinon.SinonSpy;353    expect(actionSpy.getCall(0).args[0].event).to.equal(354      fixture.componentInstance.events[0]355    );356    expect(actionSpy.getCall(0).args[0].sourceEvent instanceof MouseEvent).to.be357      .true;358  });359  it('should add event actions to the active day events on enter keypress', () => {360    const fixture: ComponentFixture<CalendarMonthViewComponent> =361      TestBed.createComponent(CalendarMonthViewComponent);362    fixture.componentInstance.viewDate = new Date('2016-06-27');363    fixture.componentInstance.events = [364      {365        start: new Date('2016-06-26'),366        end: new Date('2016-06-28'),367        title: 'foo',368        color: {369          primary: 'blue',370          secondary: 'rgb(238, 238, 238)',371        },372        actions: [373          {374            label: '<i class="fa fa-fw fa-times"></i>',375            onClick: spy(),376            cssClass: 'foo',377          },378        ],379      },380    ];381    fixture.componentInstance.activeDayIsOpen = true;382    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });383    fixture.detectChanges();384    const action: HTMLElement = fixture.nativeElement.querySelector(385      '.cal-open-day-events .cal-event-action'386    );387    expect(action.innerHTML).to.equal('<i class="fa fa-fw fa-times"></i>');388    expect(action.classList.contains('foo')).to.equal(true);389    const sourceEvent = triggerDomEvent('keydown', action, { keyCode: 13 });390    expect(391      fixture.componentInstance.events[0].actions[0].onClick392    ).to.have.been.calledWith({393      event: fixture.componentInstance.events[0],394      sourceEvent,395    });396  });397  it('should call the event clicked callback', () => {398    const fixture: ComponentFixture<CalendarMonthViewComponent> =399      TestBed.createComponent(CalendarMonthViewComponent);400    fixture.componentInstance.viewDate = new Date('2016-06-27');401    fixture.componentInstance.events = [402      {403        start: new Date('2016-06-26'),404        end: new Date('2016-06-28'),405        title: '<span>foo</span>',406        color: {407          primary: 'blue',408          secondary: 'rgb(238, 238, 238)',409        },410      },411    ];412    fixture.componentInstance.activeDayIsOpen = true;413    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });414    fixture.detectChanges();415    const title: HTMLElement = fixture.nativeElement.querySelector(416      '.cal-open-day-events .cal-event-title'417    );418    expect(title.innerHTML).to.equal('<span>foo</span>');419    fixture.componentInstance.eventClicked.subscribe((val) => {420      expect(val).to.deep.equal({421        event: fixture.componentInstance.events[0],422        sourceEvent: window['event'],423      });424    });425    title.click();426  });427  it('should call the event clicked callback on enter keypress', () => {428    const fixture: ComponentFixture<CalendarMonthViewComponent> =429      TestBed.createComponent(CalendarMonthViewComponent);430    fixture.componentInstance.viewDate = new Date('2016-06-27');431    fixture.componentInstance.events = [432      {433        start: new Date('2016-06-26'),434        end: new Date('2016-06-28'),435        title: '<span>foo</span>',436        color: {437          primary: 'blue',438          secondary: 'rgb(238, 238, 238)',439        },440      },441    ];442    fixture.componentInstance.activeDayIsOpen = true;443    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });444    fixture.detectChanges();445    const title: HTMLElement = fixture.nativeElement.querySelector(446      '.cal-open-day-events .cal-event-title'447    );448    expect(title.innerHTML).to.equal('<span>foo</span>');449    fixture.componentInstance.eventClicked.subscribe((val) => {450      expect(val).to.deep.equal({451        event: fixture.componentInstance.events[0],452        sourceEvent: window['event'],453      });454    });455    triggerDomEvent('keydown', title, { keyCode: 13 });456  });457  it('should refresh the view when the refresh observable is emitted on', () => {458    const fixture: ComponentFixture<CalendarMonthViewComponent> =459      TestBed.createComponent(CalendarMonthViewComponent);460    fixture.componentInstance.refresh = new Subject();461    fixture.componentInstance.ngOnInit();462    fixture.componentInstance.viewDate = new Date('2016-06-27');463    fixture.componentInstance.ngOnChanges({ viewDate: {} });464    const event: CalendarEvent = {465      start: new Date('2016-06-01'),466      end: new Date('2016-06-02'),467      title: 'foo',468      color: {469        primary: 'blue',470        secondary: 'lightblue',471      },472    };473    fixture.componentInstance.events.push(event);474    fixture.componentInstance.refresh.next(true);475    expect(fixture.componentInstance.view.days[3].events).to.deep.equal([476      event,477    ]);478    fixture.destroy();479  });480  it('should allow the event title to be customised by the calendarConfig provider', () => {481    const fixture: ComponentFixture<CalendarMonthViewComponent> =482      TestBed.createComponent(CalendarMonthViewComponent);483    eventTitle.month = (event: CalendarEvent) => {484      return `foo ${event.title}`;485    };486    fixture.componentInstance.viewDate = new Date('2016-06-27');487    fixture.componentInstance.events = [488      {489        start: new Date('2016-06-26'),490        end: new Date('2016-06-28'),491        title: 'bar',492        color: {493          primary: 'blue',494          secondary: 'rgb(238, 238, 238)',495        },496      },497    ];498    fixture.componentInstance.activeDayIsOpen = true;499    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });500    fixture.detectChanges();501    const title: HTMLElement = fixture.nativeElement.querySelector(502      '.cal-open-day-events .cal-event-title'503    );504    expect(title.innerHTML).to.equal('foo bar');505  });506  it('should allow the locale to be changed', () => {507    const fixture: ComponentFixture<CalendarMonthViewComponent> =508      TestBed.createComponent(CalendarMonthViewComponent);509    fixture.componentInstance.locale = 'de';510    fixture.componentInstance.viewDate = new Date();511    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });512    fixture.detectChanges();513    expect(514      fixture.nativeElement515        .querySelector('.cal-header .cal-cell')516        .innerHTML.trim()517    ).to.equal('Sonntag');518  });519  it('should allow the badge total to be customised', () => {520    const fixture: ComponentFixture<CalendarMonthViewComponent> =521      TestBed.createComponent(CalendarMonthViewComponent);522    fixture.componentInstance.viewDate = new Date('2016-06-27');523    fixture.componentInstance.beforeViewRender524      .pipe(take(1))525      .subscribe(({ body }) => {526        body[0].badgeTotal = 100;527      });528    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });529    fixture.detectChanges();530    expect(531      fixture.nativeElement.querySelector('.cal-day-badge').innerHTML532    ).to.equal('100');533    fixture.destroy();534  });535  it('should show a tooltip on mouseover of the event', fakeAsync(() => {536    const fixture: ComponentFixture<CalendarMonthViewComponent> =537      TestBed.createComponent(CalendarMonthViewComponent);538    eventTitle.monthTooltip = (e: CalendarEvent) => {539      return `title: ${e.title}`;540    };541    fixture.componentInstance.viewDate = new Date('2016-06-27');542    fixture.componentInstance.events = [543      {544        start: new Date('2016-05-30'),545        end: new Date('2016-06-02'),546        title: 'foo <b>bar</b>',547        color: {548          primary: 'blue',549          secondary: 'rgb(238, 238, 238)',550        },551      },552    ];553    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });554    fixture.detectChanges();555    const event: HTMLElement = fixture.nativeElement.querySelector(556      '.cal-days .cal-cell-row .cal-cell:nth-child(4) .cal-events .cal-event'557    );558    triggerDomEvent('mouseenter', event);559    fixture.detectChanges();560    flush();561    const tooltip: HTMLElement = document.body.querySelector(562      '.cal-tooltip'563    ) as HTMLElement;564    expect(tooltip.querySelector('.cal-tooltip-inner').innerHTML).to.equal(565      'title: foo <b>bar</b>'566    );567    expect(tooltip.classList.contains('cal-tooltip-top')).to.equal(true);568    expect(!!tooltip.style.top).to.equal(true);569    expect(!!tooltip.style.left).to.equal(true);570    triggerDomEvent('mouseleave', event);571    fixture.detectChanges();572    expect(!!document.body.querySelector('.cal-tooltip')).to.equal(false);573  }));574  it('should show a tooltip on mouseover of the event after a delay', fakeAsync(() => {575    const fixture: ComponentFixture<CalendarMonthViewComponent> =576      TestBed.createComponent(CalendarMonthViewComponent);577    eventTitle.monthTooltip = (e: CalendarEvent) => {578      return `title: ${e.title}`;579    };580    fixture.componentInstance.viewDate = new Date('2016-06-27');581    fixture.componentInstance.events = [582      {583        start: new Date('2016-05-30'),584        end: new Date('2016-06-02'),585        title: 'foo <b>bar</b>',586      },587    ];588    fixture.componentInstance.tooltipDelay = 2000;589    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });590    fixture.detectChanges();591    const event: HTMLElement = fixture.nativeElement.querySelector(592      '.cal-days .cal-cell-row .cal-cell:nth-child(4) .cal-events .cal-event'593    );594    triggerDomEvent('mouseenter', event);595    fixture.detectChanges();596    tick(fixture.componentInstance.tooltipDelay - 1);597    expect(!!document.body.querySelector('.cal-tooltip')).to.equal(false);598    tick(1);599    expect(!!document.body.querySelector('.cal-tooltip')).to.equal(true);600    const tooltip: HTMLElement = document.body.querySelector(601      '.cal-tooltip'602    ) as HTMLElement;603    expect(tooltip.querySelector('.cal-tooltip-inner').innerHTML).to.equal(604      'title: foo <b>bar</b>'605    );606    expect(tooltip.classList.contains('cal-tooltip-top')).to.equal(true);607    expect(!!tooltip.style.top).to.equal(true);608    expect(!!tooltip.style.left).to.equal(true);609    triggerDomEvent('mouseleave', event);610    fixture.detectChanges();611    expect(!!document.body.querySelector('.cal-tooltip')).to.equal(false);612  }));613  it('should disable the tooltip', fakeAsync(() => {614    const fixture: ComponentFixture<CalendarMonthViewComponent> =615      TestBed.createComponent(CalendarMonthViewComponent);616    eventTitle.monthTooltip = () => '';617    fixture.componentInstance.viewDate = new Date('2016-06-27');618    fixture.componentInstance.events = [619      {620        start: new Date('2016-05-30'),621        end: new Date('2016-06-02'),622        title: 'foo <b>bar</b>',623        color: {624          primary: 'blue',625          secondary: 'rgb(238, 238, 238)',626        },627      },628    ];629    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });630    fixture.detectChanges();631    const event: HTMLElement = fixture.nativeElement.querySelector(632      '.cal-days .cal-cell-row .cal-cell:nth-child(4) .cal-events .cal-event'633    );634    triggerDomEvent('mouseenter', event);635    fixture.detectChanges();636    flush();637    expect(!!document.body.querySelector('.cal-tooltip')).to.equal(false);638  }));639  it('should allow the start of the week to be changed', () => {640    const fixture: ComponentFixture<CalendarMonthViewComponent> =641      TestBed.createComponent(CalendarMonthViewComponent);642    fixture.componentInstance.viewDate = new Date('2016-06-27');643    fixture.componentInstance.weekStartsOn = 1;644    fixture.componentInstance.ngOnChanges({ viewDate: {} });645    fixture.detectChanges();646    expect(647      fixture.nativeElement.querySelector('.cal-header .cal-cell').innerText648    ).to.deep.equal('Monday');649    fixture.destroy();650  });651  it('should allow events to be dragged and dropped', () => {652    const fixture: ComponentFixture<CalendarMonthViewComponent> =653      TestBed.createComponent(CalendarMonthViewComponent);654    fixture.componentInstance.viewDate = new Date('2016-12-05');655    fixture.componentInstance.events = [656      {657        start: new Date(2016, 11, 5, 10, 39, 14),658        end: new Date(2016, 11, 5, 15, 11, 5),659        title: 'draggable event',660        color: {661          primary: 'blue',662          secondary: 'rgb(238, 238, 238)',663        },664        draggable: true,665      },666    ];667    fixture.componentInstance.ngOnChanges({ viewDate: {} });668    let dragEvent: CalendarMonthViewEventTimesChangedEvent;669    fixture.componentInstance.eventTimesChanged.subscribe((e) => {670      dragEvent = e;671    });672    fixture.detectChanges();673    document.body.appendChild(fixture.nativeElement);674    const cells: HTMLElement[] =675      fixture.nativeElement.querySelectorAll('.cal-day-cell');676    const event: HTMLElement =677      fixture.nativeElement.querySelector('.cal-event');678    event.style.width = '10px';679    event.style.height = '10px';680    const dragToCellPosition: ClientRect = cells[10].getBoundingClientRect();681    const eventStartPosition: ClientRect = event.getBoundingClientRect();682    triggerDomEvent('mousedown', event, {683      clientX: eventStartPosition.left,684      clientY: eventStartPosition.top,685      button: 0,686    });687    fixture.detectChanges();688    triggerDomEvent('mousemove', document.body, {689      clientX: dragToCellPosition.left,690      clientY: dragToCellPosition.top,691    });692    fixture.detectChanges();693    expect(cells[10].classList.contains('cal-drag-over')).to.equal(true);694    const ghostElement = event.nextSibling as HTMLElement;695    const eventAfterDragPosition: ClientRect =696      ghostElement.getBoundingClientRect();697    const movedLeft: number = dragToCellPosition.left - eventStartPosition.left;698    expect(eventAfterDragPosition.left).to.equal(699      eventStartPosition.left + movedLeft700    );701    const movedTop: number = dragToCellPosition.top - eventStartPosition.top;702    expect(Math.round(eventAfterDragPosition.top)).to.equal(703      eventStartPosition.top + movedTop704    );705    triggerDomEvent('mouseup', document.body, {706      clientX: dragToCellPosition.left,707      clientY: dragToCellPosition.top,708      button: 0,709    });710    fixture.detectChanges();711    expect(cells[10].classList.contains('cal-drag-over')).to.equal(false);712    fixture.destroy();713    expect(dragEvent.type).to.equal('drop');714    expect(dragEvent.event).to.equal(fixture.componentInstance.events[0]);715    expect(dragEvent.newStart).to.deep.equal(new Date(2016, 11, 7, 10, 39, 14));716    expect(dragEvent.newEnd).to.deep.equal(new Date(2016, 11, 7, 15, 11, 5));717    expect(dragEvent.day.date).to.deep.equal(new Date('2016-12-07'));718  });719  it('should apply the year, month and date changes in the correct order when dragging and dropping events', () => {720    const fixture: ComponentFixture<CalendarMonthViewComponent> =721      TestBed.createComponent(CalendarMonthViewComponent);722    fixture.componentInstance.viewDate = new Date('2017-02-05');723    fixture.componentInstance.events = [724      {725        start: new Date('2017-02-01'),726        title: 'draggable event',727        draggable: true,728      },729    ];730    fixture.componentInstance.ngOnChanges({ viewDate: {} });731    let dragEvent: CalendarEventTimesChangedEvent;732    fixture.componentInstance.eventTimesChanged.subscribe((e) => {733      dragEvent = e;734    });735    fixture.detectChanges();736    document.body.appendChild(fixture.nativeElement);737    const cells: HTMLElement[] =738      fixture.nativeElement.querySelectorAll('.cal-day-cell');739    const event: HTMLElement =740      fixture.nativeElement.querySelector('.cal-event');741    event.style.width = '10px';742    event.style.height = '10px';743    const dragToCellPosition: ClientRect = cells[2].getBoundingClientRect();744    const eventStartPosition: ClientRect = event.getBoundingClientRect();745    triggerDomEvent('mousedown', event, {746      clientX: eventStartPosition.left,747      clientY: eventStartPosition.top,748      button: 0,749    });750    fixture.detectChanges();751    triggerDomEvent('mousemove', document.body, {752      clientX: dragToCellPosition.left,753      clientY: dragToCellPosition.top,754    });755    fixture.detectChanges();756    triggerDomEvent('mouseup', document.body, {757      clientX: dragToCellPosition.left,758      clientY: dragToCellPosition.top,759      button: 0,760    });761    fixture.detectChanges();762    fixture.destroy();763    expect(dragEvent.type).to.equal('drop');764    expect(dragEvent.event).to.equal(fixture.componentInstance.events[0]);765    expect(dragEvent.newStart).to.deep.equal(new Date('2017-01-31'));766    expect(dragEvent.newEnd).to.deep.equal(undefined);767  });768  it('should not fire drop events when dropping on the source date', () => {769    const fixture: ComponentFixture<CalendarMonthViewComponent> =770      TestBed.createComponent(CalendarMonthViewComponent);771    fixture.componentInstance.viewDate = new Date('2018-10-13');772    fixture.componentInstance.events = [773      {774        start: new Date('2018-10-13'),775        end: new Date('2018-10-14'),776        title: 'draggable event',777        draggable: true,778      },779    ];780    fixture.componentInstance.ngOnChanges({ viewDate: {} });781    const dragSpy = sinon.spy();782    fixture.componentInstance.eventTimesChanged.subscribe((e) => dragSpy(e));783    fixture.detectChanges();784    document.body.appendChild(fixture.nativeElement);785    const cells: HTMLElement[] =786      fixture.nativeElement.querySelectorAll('.cal-day-cell');787    const events: HTMLElement =788      fixture.nativeElement.querySelectorAll('.cal-event');789    const dragToCellPosition: ClientRect = cells[14].getBoundingClientRect();790    const eventStartPosition: ClientRect = events[1].getBoundingClientRect();791    triggerDomEvent('mousedown', events[1], {792      clientX: eventStartPosition.left,793      clientY: eventStartPosition.top,794      button: 0,795    });796    fixture.detectChanges();797    triggerDomEvent('mousemove', document.body, {798      clientX: dragToCellPosition.left + 5,799      clientY: dragToCellPosition.top + 5,800    });801    fixture.detectChanges();802    expect(cells[14].classList.contains('cal-drag-over')).to.equal(true);803    triggerDomEvent('mouseup', document.body, {804      clientX: dragToCellPosition.left + 5,805      clientY: dragToCellPosition.top + 5,806      button: 0,807    });808    fixture.detectChanges();809    expect(cells[14].classList.contains('cal-drag-over')).to.equal(false);810    expect(dragSpy).not.to.have.been.called;811  });812  it('should update the event title', () => {813    const fixture: ComponentFixture<CalendarMonthViewComponent> =814      TestBed.createComponent(CalendarMonthViewComponent);815    fixture.componentInstance.viewDate = new Date('2016-06-01');816    fixture.componentInstance.events = [817      {818        start: new Date('2016-05-30'),819        end: new Date('2016-06-02'),820        title: 'foo',821        color: {822          primary: 'blue',823          secondary: '',824        },825      },826    ];827    fixture.componentInstance.activeDayIsOpen = true;828    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });829    fixture.detectChanges();830    const event: HTMLElement =831      fixture.nativeElement.querySelector('.cal-event-title');832    expect(event.innerHTML).to.equal('foo');833    fixture.componentInstance.events[0].title = 'bar';834    fixture.detectChanges();835    expect(event.innerHTML).to.equal('bar');836    fixture.destroy();837  });838  it('should handle the click event on month cell events', () => {839    const fixture: ComponentFixture<CalendarMonthViewComponent> =840      TestBed.createComponent(CalendarMonthViewComponent);841    fixture.componentInstance.viewDate = new Date('2016-06-27');842    fixture.componentInstance.events = [843      {844        start: new Date('2016-05-30'),845        end: new Date('2016-06-02'),846        title: 'foo',847        color: {848          primary: 'blue',849          secondary: '',850        },851      },852    ];853    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });854    fixture.detectChanges();855    let eventClickedEvent: any;856    fixture.componentInstance.eventClicked.subscribe((e) => {857      eventClickedEvent = e;858    });859    let dayClickedFired: boolean = false;860    fixture.componentInstance.dayClicked.subscribe(() => {861      dayClickedFired = true;862    });863    const event: HTMLElement = fixture.nativeElement.querySelector(864      '.cal-days .cal-cell-row .cal-cell:nth-child(4) .cal-events .cal-event'865    );866    event.click();867    expect(eventClickedEvent.event).to.equal(868      fixture.componentInstance.events[0]869    );870    expect(eventClickedEvent.sourceEvent instanceof MouseEvent).to.be.true;871    expect(dayClickedFired).to.equal(false);872  });873  it('should add helper classes to the header cells', () => {874    const fixture: ComponentFixture<CalendarMonthViewComponent> =875      TestBed.createComponent(CalendarMonthViewComponent);876    fixture.componentInstance.viewDate = new Date('2016-06-27');877    fixture.componentInstance.ngOnChanges({ viewDate: {} });878    fixture.detectChanges();879    const headerCells: HTMLElement[] = fixture.nativeElement.querySelectorAll(880      '.cal-header .cal-cell'881    );882    expect(headerCells[0].classList.contains('cal-past')).to.equal(true);883    expect(headerCells[0].classList.contains('cal-today')).to.equal(false);884    expect(headerCells[0].classList.contains('cal-future')).to.equal(false);885    expect(headerCells[0].classList.contains('cal-weekend')).to.equal(true);886    expect(headerCells[1].classList.contains('cal-weekend')).to.equal(false);887    expect(headerCells[6].classList.contains('cal-weekend')).to.equal(true);888    fixture.destroy();889  });890  it('should allow the weekend days to be customised', () => {891    const fixture: ComponentFixture<CalendarMonthViewComponent> =892      TestBed.createComponent(CalendarMonthViewComponent);893    fixture.componentInstance.viewDate = new Date('2017-06-25');894    fixture.componentInstance.weekendDays = [895      DAYS_OF_WEEK.FRIDAY,896      DAYS_OF_WEEK.SATURDAY,897    ];898    fixture.componentInstance.ngOnChanges({ viewDate: {}, weekendDays: {} });899    fixture.detectChanges();900    expect(fixture.componentInstance.view.days[0].isWeekend).to.equal(false);901    expect(fixture.componentInstance.view.days[5].isWeekend).to.equal(true);902    expect(fixture.componentInstance.view.days[6].isWeekend).to.equal(true);903    const headerCells: HTMLElement[] = fixture.nativeElement.querySelectorAll(904      '.cal-header .cal-cell'905    );906    expect(headerCells[0].classList.contains('cal-weekend')).to.equal(false);907    expect(headerCells[5].classList.contains('cal-weekend')).to.equal(true);908    expect(headerCells[6].classList.contains('cal-weekend')).to.equal(true);909    fixture.destroy();910  });911  it('should only call the beforeViewRender output once when refreshing the view', () => {912    const fixture: ComponentFixture<CalendarMonthViewComponent> =913      TestBed.createComponent(CalendarMonthViewComponent);914    fixture.componentInstance.refresh = new Subject();915    fixture.componentInstance.ngOnInit();916    fixture.componentInstance.viewDate = new Date('2016-06-27');917    fixture.componentInstance.ngOnChanges({ viewDate: {} });918    const beforeViewRenderCalled = sinon.spy();919    // use subscription to test that it was only called a max of one times920    const subscription = fixture.componentInstance.beforeViewRender.subscribe(921      beforeViewRenderCalled922    );923    fixture.componentInstance.refresh.next(true);924    expect(beforeViewRenderCalled).to.have.been.calledOnce;925    subscription.unsubscribe();926    fixture.destroy();927  });928  it('should only call the beforeViewRender output once when changing the view date', () => {929    const fixture: ComponentFixture<CalendarMonthViewComponent> =930      TestBed.createComponent(CalendarMonthViewComponent);931    fixture.componentInstance.ngOnInit();932    fixture.componentInstance.viewDate = new Date('2016-06-27');933    fixture.componentInstance.ngOnChanges({ viewDate: {} });934    const beforeViewRenderCalled = sinon.spy();935    // use subscription to test that it was only called a max of one times936    const subscription = fixture.componentInstance.beforeViewRender.subscribe(937      beforeViewRenderCalled938    );939    fixture.componentInstance.viewDate = new Date('2016-06-28');940    fixture.componentInstance.ngOnChanges({ viewDate: {} });941    expect(beforeViewRenderCalled).to.have.been.calledOnce;942    subscription.unsubscribe();943    fixture.destroy();944  });945  it('should log on invalid events', () => {946    const stub = sinon.stub(console, 'warn');947    const fixture: ComponentFixture<CalendarMonthViewComponent> =948      TestBed.createComponent(CalendarMonthViewComponent);949    fixture.componentInstance.viewDate = new Date('2017-01-01');950    fixture.componentInstance.events = [951      { start: 1234, title: '', color: { primary: '', secondary: '' } },952    ] as any;953    fixture.componentInstance.ngOnChanges({ events: {}, viewDate: {} });954    fixture.detectChanges();955    stub.restore();956    expect(stub).to.have.been.calledOnce; // eslint-disable-line957  });958  it('should expose the view period on the beforeViewRender output', () => {959    const fixture: ComponentFixture<CalendarMonthViewComponent> =960      TestBed.createComponent(CalendarMonthViewComponent);961    const beforeViewRenderCalled = sinon.spy();962    fixture.componentInstance.beforeViewRender963      .pipe(take(1))964      .subscribe(beforeViewRenderCalled);965    fixture.componentInstance.ngOnInit();966    fixture.componentInstance.viewDate = new Date('2016-06-27');967    fixture.componentInstance.ngOnChanges({ viewDate: {} });968    expect(969      beforeViewRenderCalled.getCall(0).args[0].period.start970    ).to.be.an.instanceOf(Date);971    expect(972      beforeViewRenderCalled.getCall(0).args[0].period.end973    ).to.be.an.instanceOf(Date);974    expect(975      Array.isArray(beforeViewRenderCalled.getCall(0).args[0].period.events)976    ).to.equal(true);977    fixture.destroy();978  });979  it('should allow CSS variables for colors', () => {980    const style = document.createElement('style');981    style.setAttribute('type', 'text/css');982    style.innerText = `983    :root {984        --white: #fff;985        --black: #000;986      }987    `;988    document.head.appendChild(style);989    const fixture: ComponentFixture<CalendarMonthViewComponent> =990      TestBed.createComponent(CalendarMonthViewComponent);991    fixture.componentInstance.ngOnInit();992    fixture.componentInstance.viewDate = new Date('2016-06-01');993    fixture.componentInstance.events = [994      {995        start: new Date('2016-05-30'),996        end: new Date('2016-06-02'),997        title: 'foo',998        color: {999          primary: 'var(--white)',1000          secondary: 'var(--black)',1001        },1002      },1003    ];1004    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });1005    fixture.detectChanges();1006    const computedStyles: CSSStyleDeclaration = window.getComputedStyle(1007      fixture.nativeElement.querySelector('.cal-event')1008    );1009    expect(computedStyles.getPropertyValue('background-color')).to.equal(1010      'rgb(255, 255, 255)'1011    );1012    document.head.removeChild(style);1013  });1014  it('should allow the tooltip text to be updated dynamically', fakeAsync(() => {1015    const fixture: ComponentFixture<CalendarMonthViewComponent> =1016      TestBed.createComponent(CalendarMonthViewComponent);1017    fixture.componentInstance.viewDate = new Date('2016-06-27');1018    fixture.componentInstance.events = [1019      {1020        start: new Date('2016-05-30'),1021        end: new Date('2016-06-02'),1022        title: 'foo',1023      },1024    ];1025    fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });1026    fixture.detectChanges();1027    const event: HTMLElement = fixture.nativeElement.querySelector(1028      '.cal-days .cal-cell-row .cal-cell:nth-child(4) .cal-events .cal-event'1029    );1030    triggerDomEvent('mouseenter', event);1031    fixture.detectChanges();1032    flush();1033    const tooltip = document.body.querySelector('.cal-tooltip');1034    expect(tooltip.querySelector('.cal-tooltip-inner').innerHTML).to.equal(1035      'foo'1036    );1037    fixture.componentInstance.events[0].title = 'bar';1038    fixture.detectChanges();1039    expect(tooltip.querySelector('.cal-tooltip-inner').innerHTML).to.equal(1040      'bar'1041    );1042    triggerDomEvent('mouseleave', event);1043    fixture.detectChanges();1044    fixture.destroy();1045  }));...

hooks.d.ts

Source:hooks.d.ts

1import type { ComponentTreeNode, InspectedComponentData, ComponentInstance, ComponentDevtoolsOptions } from './component.js';2import type { App } from './app.js';3import type { CustomInspectorNode, CustomInspectorState, TimelineEvent } from './api.js';4export declare const enum Hooks {5    TRANSFORM_CALL = "transformCall",6    GET_APP_RECORD_NAME = "getAppRecordName",7    GET_APP_ROOT_INSTANCE = "getAppRootInstance",8    REGISTER_APPLICATION = "registerApplication",9    WALK_COMPONENT_TREE = "walkComponentTree",10    VISIT_COMPONENT_TREE = "visitComponentTree",11    WALK_COMPONENT_PARENTS = "walkComponentParents",12    INSPECT_COMPONENT = "inspectComponent",13    GET_COMPONENT_BOUNDS = "getComponentBounds",14    GET_COMPONENT_NAME = "getComponentName",15    GET_COMPONENT_INSTANCES = "getComponentInstances",16    GET_ELEMENT_COMPONENT = "getElementComponent",17    GET_COMPONENT_ROOT_ELEMENTS = "getComponentRootElements",18    EDIT_COMPONENT_STATE = "editComponentState",19    GET_COMPONENT_DEVTOOLS_OPTIONS = "getAppDevtoolsOptions",20    GET_COMPONENT_RENDER_CODE = "getComponentRenderCode",21    INSPECT_TIMELINE_EVENT = "inspectTimelineEvent",22    TIMELINE_CLEARED = "timelineCleared",23    GET_INSPECTOR_TREE = "getInspectorTree",24    GET_INSPECTOR_STATE = "getInspectorState",25    EDIT_INSPECTOR_STATE = "editInspectorState",26    SET_PLUGIN_SETTINGS = "setPluginSettings"27}28export interface ComponentBounds {29    left: number;30    top: number;31    width: number;32    height: number;33}34export declare type HookPayloads = {35    [Hooks.TRANSFORM_CALL]: {36        callName: string;37        inArgs: any[];38        outArgs: any[];39    };40    [Hooks.GET_APP_RECORD_NAME]: {41        app: App;42        name: string;43    };44    [Hooks.GET_APP_ROOT_INSTANCE]: {45        app: App;46        root: ComponentInstance;47    };48    [Hooks.REGISTER_APPLICATION]: {49        app: App;50    };51    [Hooks.WALK_COMPONENT_TREE]: {52        componentInstance: ComponentInstance;53        componentTreeData: ComponentTreeNode[];54        maxDepth: number;55        filter: string;56    };57    [Hooks.VISIT_COMPONENT_TREE]: {58        app: App;59        componentInstance: ComponentInstance;60        treeNode: ComponentTreeNode;61        filter: string;62    };63    [Hooks.WALK_COMPONENT_PARENTS]: {64        componentInstance: ComponentInstance;65        parentInstances: ComponentInstance[];66    };67    [Hooks.INSPECT_COMPONENT]: {68        app: App;69        componentInstance: ComponentInstance;70        instanceData: InspectedComponentData;71    };72    [Hooks.GET_COMPONENT_BOUNDS]: {73        componentInstance: ComponentInstance;74        bounds: ComponentBounds;75    };76    [Hooks.GET_COMPONENT_NAME]: {77        componentInstance: ComponentInstance;78        name: string;79    };80    [Hooks.GET_COMPONENT_INSTANCES]: {81        app: App;82        componentInstances: ComponentInstance[];83    };84    [Hooks.GET_ELEMENT_COMPONENT]: {85        element: HTMLElement | any;86        componentInstance: ComponentInstance;87    };88    [Hooks.GET_COMPONENT_ROOT_ELEMENTS]: {89        componentInstance: ComponentInstance;90        rootElements: (HTMLElement | any)[];91    };92    [Hooks.EDIT_COMPONENT_STATE]: {93        app: App;94        componentInstance: ComponentInstance;95        path: string[];96        type: string;97        state: EditStatePayload;98        set: (object: any, path?: string | (string[]), value?: any, cb?: (object: any, field: string, value: any) => void) => void;99    };100    [Hooks.GET_COMPONENT_DEVTOOLS_OPTIONS]: {101        componentInstance: ComponentInstance;102        options: ComponentDevtoolsOptions;103    };104    [Hooks.GET_COMPONENT_RENDER_CODE]: {105        componentInstance: ComponentInstance;106        code: string;107    };108    [Hooks.INSPECT_TIMELINE_EVENT]: {109        app: App;110        layerId: string;111        event: TimelineEvent;112        all?: boolean;113        data: any;114    };115    [Hooks.TIMELINE_CLEARED]: Record<string, never>;116    [Hooks.GET_INSPECTOR_TREE]: {117        app: App;118        inspectorId: string;119        filter: string;120        rootNodes: CustomInspectorNode[];121    };122    [Hooks.GET_INSPECTOR_STATE]: {123        app: App;124        inspectorId: string;125        nodeId: string;126        state: CustomInspectorState;127    };128    [Hooks.EDIT_INSPECTOR_STATE]: {129        app: App;130        inspectorId: string;131        nodeId: string;132        path: string[];133        type: string;134        state: EditStatePayload;135        set: (object: any, path?: string | (string[]), value?: any, cb?: (object: any, field: string, value: any) => void) => void;136    };137    [Hooks.SET_PLUGIN_SETTINGS]: {138        app: App;139        pluginId: string;140        key: string;141        newValue: any;142        oldValue: any;143        settings: any;144    };145};146export declare type EditStatePayload = {147    value: any;148    newKey?: string | null;149    remove?: undefined | false;150} | {151    value?: undefined;152    newKey?: undefined;153    remove: true;154};155export declare type HookHandler<TPayload, TContext> = (payload: TPayload, ctx: TContext) => void | Promise<void>;156export interface Hookable<TContext> {157    transformCall(handler: HookHandler<HookPayloads[Hooks.TRANSFORM_CALL], TContext>): any;158    getAppRecordName(handler: HookHandler<HookPayloads[Hooks.GET_APP_RECORD_NAME], TContext>): any;159    getAppRootInstance(handler: HookHandler<HookPayloads[Hooks.GET_APP_ROOT_INSTANCE], TContext>): any;160    registerApplication(handler: HookHandler<HookPayloads[Hooks.REGISTER_APPLICATION], TContext>): any;161    walkComponentTree(handler: HookHandler<HookPayloads[Hooks.WALK_COMPONENT_TREE], TContext>): any;162    visitComponentTree(handler: HookHandler<HookPayloads[Hooks.VISIT_COMPONENT_TREE], TContext>): any;163    walkComponentParents(handler: HookHandler<HookPayloads[Hooks.WALK_COMPONENT_PARENTS], TContext>): any;164    inspectComponent(handler: HookHandler<HookPayloads[Hooks.INSPECT_COMPONENT], TContext>): any;165    getComponentBounds(handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_BOUNDS], TContext>): any;166    getComponentName(handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_NAME], TContext>): any;167    getComponentInstances(handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_INSTANCES], TContext>): any;168    getElementComponent(handler: HookHandler<HookPayloads[Hooks.GET_ELEMENT_COMPONENT], TContext>): any;169    getComponentRootElements(handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_ROOT_ELEMENTS], TContext>): any;170    editComponentState(handler: HookHandler<HookPayloads[Hooks.EDIT_COMPONENT_STATE], TContext>): any;171    getComponentDevtoolsOptions(handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_DEVTOOLS_OPTIONS], TContext>): any;172    getComponentRenderCode(handler: HookHandler<HookPayloads[Hooks.GET_COMPONENT_RENDER_CODE], TContext>): any;173    inspectTimelineEvent(handler: HookHandler<HookPayloads[Hooks.INSPECT_TIMELINE_EVENT], TContext>): any;174    timelineCleared(handler: HookHandler<HookPayloads[Hooks.TIMELINE_CLEARED], TContext>): any;175    getInspectorTree(handler: HookHandler<HookPayloads[Hooks.GET_INSPECTOR_TREE], TContext>): any;176    getInspectorState(handler: HookHandler<HookPayloads[Hooks.GET_INSPECTOR_STATE], TContext>): any;177    editInspectorState(handler: HookHandler<HookPayloads[Hooks.EDIT_INSPECTOR_STATE], TContext>): any;178    setPluginSettings(handler: HookHandler<HookPayloads[Hooks.SET_PLUGIN_SETTINGS], TContext>): any;...

Using AI Code Generation

1import { MockBuilder, MockRender, MockInstance } from 'ng-mocks';2import { AppModule } from './app.module';3import { AppComponent } from './app.component';4describe('AppComponent', () => {5  beforeEach(() => MockBuilder(AppComponent, AppModule));6  it('should create the app', () => {7    const fixture = MockRender(AppComponent);8    const app = MockInstance(AppComponent, fixture);9    expect(app).toBeTruthy();10  });11});

Using AI Code Generation

1import { componentInstance } from 'ng-mocks';2import { MyComponent } from './my.component';3describe('MyComponent', () => {4  it('should create', () => {5    const fixture = MockRender(MyComponent);6    const component = componentInstance(fixture);7    expect(component).toBeTruthy();8  });9});10import { Component } from '@angular/core';11@Component({12})13export class MyComponent {}

Using AI Code Generation

1import {componentInstance} from 'ng-mocks';2import {TestBed} from '@angular/core/testing';3import {MyComponent} from './my.component';4describe('MyComponent', () => {5  beforeEach(() => {6    TestBed.configureTestingModule({7    });8  });9  it('should render the component', () => {10    const fixture = TestBed.createComponent(MyComponent);11    fixture.detectChanges();12    const instance = componentInstance(fixture.debugElement, MyComponent);13    expect(instance).toBeTruthy();14  });15});16import {Component} from '@angular/core';17@Component({18})19export class MyComponent {20}21import {componentInstance} from 'ng-mocks';22import {TestBed} from '@angular/core/testing';23import {MyComponent} from './my.component';24describe('MyComponent', () => {25  beforeEach(() => {26    TestBed.configureTestingModule({27    });28  });29  it('should render the component', () => {30    const fixture = TestBed.createComponent(MyComponent);31    fixture.detectChanges();32    const instance = componentInstance(fixture.debugElement, MyComponent);33    expect(instance).toBeTruthy();34  });35});36import {componentInstance} from 'ng-mocks';37import {TestBed} from '@angular/core/testing';38import {MyComponent} from './my.component';39describe('MyComponent', () => {40  beforeEach(() => {41    TestBed.configureTestingModule({42    });43  });44  it('should render the component', () => {45    const fixture = TestBed.createComponent(MyComponent);46    fixture.detectChanges();47    const instance = componentInstance(fixture.debugElement, MyComponent);48    expect(instance).toBeTruthy();49  });50});51import {componentInstance} from 'ng-mocks';52import {TestBed} from '@angular/core/testing';53import {MyComponent} from './my.component';54describe('MyComponent', () => {55  beforeEach(() => {56    TestBed.configureTestingModule({57    });58  });59  it('should render the component', () => {60    const fixture = TestBed.createComponent(MyComponent);61    fixture.detectChanges();62    const instance = componentInstance(fixture.debugElement, MyComponent);63    expect(instance).toBeTruthy();64  });65});66import {componentInstance

Using AI Code Generation

1import { MockRender } from 'ng-mocks';2import { AppComponent } from './app.component';3import { AppModule } from './app.module';4describe('AppComponent', () => {5  beforeEach(() => MockRender(AppComponent, AppModule));6  it('should create the app', () => {7    const app = MockRender(AppComponent, AppModule).point.componentInstance;8    expect(app).toBeTruthy();9  });10});11import { MockRender } from 'ng-mocks';12import { AppComponent } from './app.component';13describe('AppComponent', () => {14  beforeEach(() => MockRender(AppComponent));15  it('should create the app', () => {16    const app = MockRender(AppComponent).point.componentInstance;17    expect(app).toBeTruthy();18  });19});20import { MockRender } from 'ng-mocks';21import { AppComponent } from './app.component';22describe('AppComponent', () => {23  beforeEach(() => MockRender(AppComponent));24  it('should create the app', () => {25    const app = MockRender(AppComponent).point.componentInstance;26    expect(app).toBeTruthy();27  });28});29import { MockRender } from 'ng-mocks';30import { AppComponent } from './app.component';31describe('AppComponent', () => {32  beforeEach(() => MockRender(AppComponent));33  it('should create the app', () => {34    const app = MockRender(AppComponent).point.componentInstance;35    expect(app).toBeTruthy();36  });37});38import { MockRender } from 'ng-mocks';39import { AppComponent } from './app.component';40describe('AppComponent', () => {41  beforeEach(() => MockRender(AppComponent));42  it('should create the app', () => {43    const app = MockRender(AppComponent).point.componentInstance;44    expect(app).toBeTruthy();45  });46});47import { MockRender } from 'ng-mocks';48import { AppComponent } from './app.component';49describe('AppComponent', () => {50  beforeEach(() => MockRender(AppComponent));51  it('should create the app', () =>

Using AI Code Generation

1import { componentInstance } from 'ng-mocks';2import { MyComponent } from './my-component';3describe('MyComponent', () => {4  let fixture: ComponentFixture<MyComponent>;5  let component: MyComponent;6  beforeEach(() => {7    TestBed.configureTestingModule({8    });9    fixture = TestBed.createComponent(MyComponent);10    component = componentInstance(fixture, MyComponent);11  });12  it('should ...', () => {13    expect(component).toBeTruthy();14  });15});

Using AI Code Generation

1import { componentInstance } from 'ng-mocks';2import { createComponent } from 'ng-mocks';3import { createComponent } from 'ng-mocks';4import { createComponent } from 'ng-mocks';5import { createComponent } from 'ng-mocks';6import { createComponent } from 'ng-mocks';7import { createComponent } from 'ng-mocks';8import { createComponent } from 'ng-mocks';9import { createComponent } from 'ng-mocks';10import { createComponent } from 'ng-mocks';11import { createComponent } from 'ng-mocks';12import { createComponent } from 'ng-mocks';13import { createComponent } from 'ng-mocks';14import { createComponent } from 'ng-mocks';15import { createComponent } from 'ng-mocks';16import { createComponent } from 'ng-mocks';17import { createComponent } from 'ng-mocks';18import { createComponent } from 'ng-mocks';19import { createComponent } from 'ng-mocks';20import { createComponent } from 'ng-mocks';21import { createComponent } from 'ng-mocks';22import { createComponent } from 'ng-mocks';

Using AI Code Generation

1import { componentInstance } from 'ng-mocks';2import { MyComponent } from './my-component';3describe('MyComponent', () => {4  it('should set the title', () => {5    const fixture = MockRender(MyComponent);6    const component = componentInstance(fixture.debugElement);7    expect(component.title).toEqual('MyComponent');8  });9});10import { Component, Input } from '@angular/core';11@Component({12  template: '<div>{{ title }}</div>'13})14export class MyComponent {15  @Input() title = 'MyComponent';16}17import { MockRender } from 'ng-mocks';18describe('MyComponent', () => {19  it('should set the title', () => {20    const fixture = MockRender(MyComponent);21    expect(fixture.componentInstance.title).toEqual('MyComponent');22  });23});24import { Component, Input } from '@angular/core';25@Component({26  template: '<div>{{ title }}</div>'27})28export class MyComponent {29  @Input() title = 'MyComponent';30}31import { MockBuilder } from 'ng-mocks';32describe('MyComponent', () => {33  beforeEach(() => MockBuilder(MyComponent));34  it('should set the title', () => {35    const fixture = MockRender(MyComponent);36    expect(fixture.componentInstance.title).toEqual('MyComponent');37  });38});39import { Component, Input } from '@angular/core';40@Component({41  template: '<div>{{ title }}</div>'42})43export class MyComponent {44  @Input() title = 'MyComponent';45}46import { MockInstance } from 'ng-mocks';

Using AI Code Generation

1import { MockComponent } from 'ng-mocks';2import { TestComponent } from './test.component';3import { TestDirective } from './test.directive';4describe('MockComponent', () => {5  it('should be able to mock component', () => {6    const mockComponent = MockComponent(TestComponent);7    const mockDirective = MockComponent(TestDirective);8    expect(mockComponent).toBeDefined();9    expect(mockDirective).toBeDefined();10  });11});12import { MockModule } from 'ng-mocks';13import { TestModule } from './test.module';14describe('MockModule', () => {15  it('should be able to mock module', () => {16    const mockModule = MockModule(TestModule);17    expect(mockModule).toBeDefined();18  });19});20import { MockRender } from 'ng-mocks';21import { TestComponent } from './test.component';22describe('MockRender', () => {23  it('should be able to render component', () => {24    const fixture = MockRender(TestComponent);25    expect(fixture).toBeDefined();26  });27});28import { MockInstance } from 'ng-mocks';29import { TestComponent } from './test.component';30describe('MockInstance', () => {31  it('should be able to mock instance', () => {32    const mockInstance = MockInstance(TestComponent);33    expect(mockInstance).toBeDefined();34  });35});36import { MockDirective } from 'ng-mocks';37import { TestDirective } from './test.directive';38describe('MockDirective', () => {39  it('should be able to mock directive', () => {40    const mockDirective = MockDirective(Test

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.