How to use tpl1tpl1dir method in ng-mocks

Best JavaScript code snippet using ng-mocks

component.spec.ts

Source:component.spec.ts

1import { CommonModule } from '@angular/common';2import {3  Component,4  ContentChild,5  ContentChildren,6  Directive,7  Input,8  NgModule,9  QueryList,10  TemplateRef,11} from '@angular/core';12import { isMockOf, MockBuilder, MockRender, ngMocks } from 'ng-mocks';13@Directive({14  selector: '[tpl1]',15})16class Mock1Directive {17  @Input('tpl1') public readonly name: string | null = null;18  public constructor(public readonly tpl: TemplateRef<any>) {}19}20@Directive({21  selector: '[tpl2]',22})23class Mock2Directive {24  @Input('tpl2') public readonly name: string | null = null;25  public constructor(public readonly tpl: TemplateRef<any>) {}26}27@Directive({28  selector: '[tpl3]',29})30class Mock3Directive {31  @Input('tpl3') public readonly name: string | null = null;32  @ContentChild('info', {} as any)33  public readonly tpl?: TemplateRef<any>;34}35@Component({36  selector: 'component',37  template: `38    <div data-role="header" *ngIf="header">39      <ng-container *ngTemplateOutlet="header"></ng-container>40    </div>41    <div data-role="info" *ngIf="info">42      <ng-container43        *ngTemplateOutlet="44          info.tpl;45          context: { $implicit: info.name }46        "47      ></ng-container>48    </div>49    <div data-role="templates" *ngIf="templates">50      <ng-container *ngFor="let template of templates">51        <ng-container52          *ngTemplateOutlet="53            template;54            context: { $implicit: 'template' }55          "56        ></ng-container>57      </ng-container>58    </div>59    <div data-role="directives" *ngIf="directives">60      <ng-container *ngFor="let directive of directives">61        <ng-container62          *ngTemplateOutlet="63            directive.tpl;64            context: { $implicit: directive.name }65          "66        ></ng-container>67      </ng-container>68    </div>69  `,70})71class MockComponent {72  @ContentChildren(Mock2Directive, {} as any)73  public readonly directives?: QueryList<Mock2Directive>;74  @ContentChild('header', {} as any)75  public readonly header?: TemplateRef<any>;76  @ContentChild(Mock3Directive, {} as any)77  public readonly info?: Mock3Directive;78  @ContentChildren(Mock1Directive, {79    read: TemplateRef,80  } as any)81  public readonly templates?: QueryList<TemplateRef<any>>;82}83@Component({84  selector: 'target',85  template: `86    <component>87      :step:1:88      <ng-template #header>rendered-header</ng-template>89      :step:2:90      <ng-template tpl1="tpl1" let-param91        >rendered-tpl1-1-{{ param }}</ng-template92      >93      :step:3:94      <div *tpl1="'tpl2'; let param">rendered-tpl1-2-{{ param }}</div>95      :step:4:96      <ng-template tpl2="tpl1" let-param97        >rendered-tpl2-1-{{ param }}</ng-template98      >99      :step:5:100      <div *tpl2="'tpl2'; let param">rendered-tpl2-2-{{ param }}</div>101      :step:6:102      <div tpl3="info">103        :step:7:104        <ng-template #info let-param105          >rendered-info-{{ param }}</ng-template106        >107        :step:8:108      </div>109      :step:9:110    </component>111  `,112})113class TargetComponent {}114@NgModule({115  declarations: [116    Mock1Directive,117    Mock2Directive,118    Mock3Directive,119    MockComponent,120    TargetComponent,121  ],122  imports: [CommonModule],123})124class TargetModule {}125// fix for jest without jasmine assertions126const assertion: any =127  typeof jasmine === 'undefined' ? expect : jasmine;128describe('ng-mocks-render:component:real', () => {129  beforeEach(() => MockBuilder(TargetComponent).keep(TargetModule));130  it('renders templates properly', () => {131    const fixture = MockRender(TargetComponent);132    const html = ngMocks.formatHtml(fixture.nativeElement);133    expect(html).not.toContain(':step:');134    expect(html).toContain('rendered-header');135    expect(html).toContain('rendered-info-info');136    expect(html).toContain('rendered-tpl1-1-template');137    expect(html).toContain('rendered-tpl1-2-template');138    expect(html).toContain('rendered-tpl2-1-tpl1');139    expect(html).toContain('rendered-tpl2-2-tpl2');140  });141});142describe('ng-mocks-render:component:mock', () => {143  beforeEach(() => MockBuilder(TargetComponent, TargetModule));144  it('renders directives on their positions', () => {145    let html = '';146    const fixture = MockRender(TargetComponent);147    html = ngMocks.formatHtml(fixture.nativeElement);148    expect(html).toContain(':step:2: :step:3: :step:4:');149    for (const directive of ngMocks.findInstances(Mock1Directive)) {150      if (isMockOf(directive, Mock1Directive, 'd')) {151        directive.__render('mock');152      }153    }154    html = ngMocks.formatHtml(fixture.nativeElement);155    expect(html).toContain(156      ':step:2: rendered-tpl1-1-mock :step:3: <div>rendered-tpl1-2-mock</div> :step:4:',157    );158  });159  it('renders queries of components in the end', () => {160    let html = '';161    const fixture = MockRender(TargetComponent);162    html = ngMocks.formatHtml(fixture.nativeElement);163    expect(html).toContain(':step:1: :step:2:');164    const component = ngMocks.findInstance(MockComponent);165    if (isMockOf(component, MockComponent, 'c')) {166      component.__render('header');167      component.__render(['templates'], ':templates:');168    }169    html = ngMocks.formatHtml(fixture.nativeElement);170    // component renders own queries in the end of own template.171    expect(html).toContain(':step:1: :step:2:');172    expect(html).toContain(173      ':step:9: ' +174        '<div data-key="header">rendered-header</div>' +175        '<div data-prop="templates">' +176        'rendered-tpl1-1-:templates:' +177        '<div>rendered-tpl1-2-:templates:</div>' +178        '</div>',179    );180  });181  it('renders all desired templates', () => {182    let html = '';183    const fixture = MockRender(TargetComponent);184    const tplHeader = ngMocks.findTemplateRef('header');185    const tpl1tpl1 = ngMocks.findTemplateRef(['tpl1', 'tpl1']);186    const tpl1tpl2 = ngMocks.findTemplateRef(['tpl1', 'tpl2']);187    const tpl2tpl1 = ngMocks.findTemplateRef(['tpl2', 'tpl1']);188    const tpl2tpl2 = ngMocks.findTemplateRef(['tpl2', 'tpl2']);189    const tpl3 = ngMocks.findTemplateRef('info');190    expect(tplHeader).toEqual(assertion.any(TemplateRef));191    expect(tpl1tpl1).toEqual(assertion.any(TemplateRef));192    expect(tpl1tpl2).toEqual(assertion.any(TemplateRef));193    expect(tpl2tpl1).toEqual(assertion.any(TemplateRef));194    expect(tpl2tpl2).toEqual(assertion.any(TemplateRef));195    expect(tpl3).toEqual(assertion.any(TemplateRef));196    // our render entrypoint component197    const component = ngMocks.findInstance(MockComponent);198    // render tplHeader199    html = ngMocks.formatHtml(fixture.nativeElement);200    expect(html).toContain(':step:1: :step:2:');201    ngMocks.render(component, tplHeader);202    html = ngMocks.formatHtml(fixture.nativeElement);203    expect(html).toContain(':step:1: rendered-header :step:2:');204    // render tpl1tpl1205    html = ngMocks.formatHtml(fixture.nativeElement);206    expect(html).toContain(':step:2: :step:3:');207    ngMocks.render(component, tpl1tpl1, 'tpl1tpl1');208    html = ngMocks.formatHtml(fixture.nativeElement);209    expect(html).toContain(210      ':step:2: rendered-tpl1-1-tpl1tpl1 :step:3:',211    );212    // render tpl1tpl2213    html = ngMocks.formatHtml(fixture.nativeElement);214    expect(html).toContain(':step:3: :step:4:');215    ngMocks.render(component, tpl1tpl2, 'tpl1tpl2');216    html = ngMocks.formatHtml(fixture.nativeElement);217    expect(html).toContain(218      ':step:3: <div>rendered-tpl1-2-tpl1tpl2</div> :step:4:',219    );220    // render tpl2tpl1221    html = ngMocks.formatHtml(fixture.nativeElement);222    expect(html).toContain(':step:4: :step:5:');223    ngMocks.render(component, tpl2tpl1, 'tpl2tpl1');224    html = ngMocks.formatHtml(fixture.nativeElement);225    expect(html).toContain(226      ':step:4: rendered-tpl2-1-tpl2tpl1 :step:5:',227    );228    // render tpl2tpl2229    html = ngMocks.formatHtml(fixture.nativeElement);230    expect(html).toContain(':step:5: :step:6:');231    ngMocks.render(component, tpl2tpl2, 'tpl2tpl2');232    html = ngMocks.formatHtml(fixture.nativeElement);233    expect(html).toContain(234      ':step:5: <div>rendered-tpl2-2-tpl2tpl2</div> :step:6:',235    );236    // render tpl3237    html = ngMocks.formatHtml(fixture.nativeElement);238    expect(html).toContain(':step:7: :step:8:');239    ngMocks.render(component, tpl3, 'tpl3');240    html = ngMocks.formatHtml(fixture.nativeElement);241    expect(html).toContain(':step:7: rendered-info-tpl3 :step:8:');242    // update tpl1tpl1 as directive243    const tpl1tpl1dir = ngMocks.findInstance(Mock1Directive);244    ngMocks.render(tpl1tpl1dir, tpl1tpl1dir, 'tpl1tpl1dir');245    html = ngMocks.formatHtml(fixture.nativeElement);246    expect(html).toContain(247      ':step:2: rendered-tpl1-1-tpl1tpl1dir :step:3:',248    );249    // update tpl3250    ngMocks.render(component, tpl3, 'tpl3-updated');251    html = ngMocks.formatHtml(fixture.nativeElement);252    expect(html).toContain(253      ':step:7: rendered-info-tpl3-updated :step:8:',254    );255    // hide tplHeader256    expect(html).not.toContain(':step:1: :step:2:');257    ngMocks.hide(component, tplHeader);258    html = ngMocks.formatHtml(fixture.nativeElement);259    expect(html).toContain(':step:1: :step:2:');260    // hide tpl1tpl1261    expect(html).not.toContain(':step:2: :step:3:');262    ngMocks.hide(component, tpl1tpl1);263    html = ngMocks.formatHtml(fixture.nativeElement);264    expect(html).toContain(':step:2: :step:3:');265    // hide tpl1tpl2266    const [, tpl1tpl2dir] = ngMocks.findInstances(Mock1Directive);267    expect(html).not.toContain(':step:3: :step:4:');268    ngMocks.hide(tpl1tpl2dir);269    html = ngMocks.formatHtml(fixture.nativeElement);270    expect(html).toContain(':step:3: :step:4:');271    // hide tpl2tpl1272    const [tpl2tpl1dir] = ngMocks.findInstances(Mock2Directive);273    expect(html).not.toContain(':step:4: :step:5:');274    ngMocks.hide(tpl2tpl1dir);275    html = ngMocks.formatHtml(fixture.nativeElement);276    expect(html).toContain(':step:4: :step:5:');277    // hide tpl2tpl2278    expect(html).not.toContain(':step:5: :step:6:');279    ngMocks.hide(280      component,281      ngMocks.findTemplateRef(['tpl2', 'tpl2']),282    );283    html = ngMocks.formatHtml(fixture.nativeElement);284    expect(html).toContain(':step:5: :step:6:');285    // hide tpl3286    expect(html).not.toContain(':step:7: :step:8:');287    ngMocks.hide(component, tpl3);288    html = ngMocks.formatHtml(fixture.nativeElement);289    expect(html).toContain(':step:7: :step:8:');290  });291  it('throws if not a mock instance has been passed', () => {292    MockRender(TargetComponent);293    const tpl = ngMocks.findTemplateRef('header');294    expect(() => ngMocks.render({}, tpl)).toThrowError(295      'Only instances of mock declarations are accepted',296    );297  });298  it('throws if TemplateRef cannot be found on render request', () => {299    MockRender(TargetComponent);300    const directive = ngMocks.findInstance(Mock3Directive);301    const tpl = ngMocks.findTemplateRef('header');302    expect(() => ngMocks.render(directive, tpl)).toThrowError(303      'Cannot find path to the TemplateRef',304    );305  });306  it('throws if no template has been passed on render request', () => {307    MockRender(TargetComponent);308    const directive = ngMocks.findInstance(Mock3Directive);309    expect(() =>310      ngMocks.render(directive, undefined as any),311    ).toThrowError(312      'Unknown template has been passed, only TemplateRef or a mock structural directive are supported',313    );314  });315  it('throws if TemplateRef cannot be found on hide request', () => {316    MockRender(TargetComponent);317    const directive = ngMocks.findInstance(Mock3Directive);318    const tpl = ngMocks.findTemplateRef('header');319    expect(() => ngMocks.hide(directive, tpl)).toThrowError(320      'Cannot find path to the TemplateRef',321    );322  });...

Using AI Code Generation

1var tpl1 = require('ng-mocks').tpl1;2var tpl1dir = require('ng-mocks').tpl1dir;3var tpl2 = require('ng-mocks').tpl2;4var tpl2dir = require('ng-mocks').tpl2dir;5var tpl3 = require('ng-mocks').tpl3;6var tpl3dir = require('ng-mocks').tpl3dir;7var tpl4 = require('ng-mocks').tpl4;8var tpl4dir = require('ng-mocks').tpl4dir;9var tpl5 = require('ng-mocks').tpl5;10var tpl5dir = require('ng-mocks').tpl5dir;11var tpl6 = require('ng-mocks').tpl6;12var tpl6dir = require('ng-mocks').tpl6dir;13var tpl7 = require('ng-mocks').tpl7;14var tpl7dir = require('ng-mocks').tpl7dir;15var tpl8 = require('ng-mocks').tpl8;16var tpl8dir = require('ng-mocks').tpl8dir;17var tpl9 = require('ng-mocks').tpl9;18var tpl9dir = require('ng-mocks').tpl9dir;19var tpl10 = require('ng-mocks').tpl10;20var tpl10dir = require('ng-mocks').tpl10dir;21var tpl11 = require('ng-mocks').tpl11;22var tpl11dir = require('ng-mocks').tpl11dir;23var tpl12 = require('ng-mocks').tpl12;24var tpl12dir = require('ng-mocks').tpl12dir;25var tpl13 = require('ng-mocks').tpl13;26var tpl13dir = require('ng-mocks').tpl13dir;27var tpl14 = require('ng-mocks').tpl14;28var tpl14dir = require('ng-mocks').tpl14dir;29var tpl15 = require('ng-mocks').tpl15;30var tpl15dir = require('ng-mocks').tpl15dir;31var tpl16 = require('ng-mocks').tpl16;32var tpl16dir = require('ng-mocks').tpl16dir;33var tpl17 = require('ng-mocks').tpl17;34var tpl17dir = require('ng-mocks').tpl17dir;35var tpl18 = require('ng-mocks').tpl18;36var tpl18dir = require('ng-mocks

Using AI Code Generation

1import { tpl1dir } from 'ng-mocks';2import { tpl2dir } from 'ng-mocks';3describe('test', () => {4  it('should test', () => {5    const fixture = MockRender(`6    `);7    expect(tpl1dir(fixture.debugElement).tpl2dir).toBeDefined();8    expect(tpl2dir(fixture.debugElement).tpl1dir).toBeDefined();9  });10});11The tpl1dir() method returns an instance of the Tpl1dirComponent component and the tpl2

Using AI Code Generation

1import tpl1tpl1dir from 'ng-mocks/dist/lib/template/tpl1tpl1dir';2import tpl1tpl1dir from 'ng-mocks/dist/lib/template/tpl1tpl1dir';3import tpl1tpl1dir from 'ng-mocks/dist/lib/template/tpl1tpl1dir';4import tpl1tpl1dir from 'ng-mocks/dist/lib/template/tpl1tpl1dir';5import tpl1tpl1dir from 'ng-mocks/dist/lib/template/tpl1tpl1dir';6import tpl1tpl1dir from 'ng-mocks/dist/lib/template/tpl1tpl1dir';7import tpl1tpl1dir from 'ng-mocks/dist/lib/template/tpl1tpl1dir';8import tpl1tpl1dir from 'ng-mocks/dist/lib/template/tpl1tpl1dir';9import tpl1tpl1dir from 'ng-mocks/dist/lib/template/tpl1tpl1dir';10import tpl1tpl1dir from 'ng-mocks/dist/lib/template/tpl1tpl1dir';11import tpl1tpl1dir from 'ng-mocks/dist/lib/template/tpl1tpl1dir';12import tpl1tpl1dir from 'ng-mocks/dist/lib/template/tpl1tpl1dir';13import tpl1tpl1dir from 'ng-mocks/dist/lib/template/tpl1tpl1dir';

Using AI Code Generation

1const tpl1 = tpl1dir(Tpl1Component);2const tpl2 = tpl2dir(Tpl2Component);3const tpl3 = tpl3dir(Tpl3Component);4const tpl1 = tpl1dir(Tpl1Component);5const tpl2 = tpl2dir(Tpl2Component);6const tpl3 = tpl3dir(Tpl3Component);7const tpl1 = tpl1dir(Tpl1Component);8const tpl2 = tpl2dir(Tpl2Component);9const tpl3 = tpl3dir(Tpl3Component);10const tpl1 = tpl1dir(Tpl1Component);11const tpl2 = tpl2dir(Tpl2Component);

Using AI Code Generation

1import { ngMocks } from 'ng-mocks';2const tpl1 = ngMocks.tpl1('path/to/tpl1.html');3const tpl1dir = ngMocks.tpl1dir('path/to/tpl1.html');4import { MockBuilder, MockRender } from 'ng-mocks';5beforeEach(() => MockBuilder().mock(Template1Component));6it('uses tpl1', () => {7  const fixture = MockRender(tpl1);8  expect(fixture.debugElement.nativeElement.innerHTML).toEqual('tpl1');9});10it('uses tpl1dir', () => {11  const fixture = MockRender(tpl1dir);12  expect(fixture.debugElement.nativeElement.innerHTML).toEqual('tpl1dir');13});

Using AI Code Generation

1const $ = require('jquery');2const angular = require('angular');3require('angular-mocks');4const tpl1 = require('./tpl1.html');5angular.module('test', []);6angular.module('test').component('testComponent', {7});8describe('testComponent', () => {9  let $compile;10  let $rootScope;11  let $scope;12  let element;13  beforeEach(() => {14    angular.mock.module('test');15    angular.mock.inject((_$compile_, _$rootScope_) => {16      $compile = _$compile_;17      $rootScope = _$rootScope_;18      $scope = $rootScope.$new();19      element = $compile('<test-component></test-component>')($scope);20      $scope.$digest();21    });22  });23  it('should display the template', () => {24    expect(element.html()).toContain('Hello');25  });26});

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.