How to use tpl1tpl1 method in ng-mocks

Best JavaScript code snippet using ng-mocks

component.spec.ts

Source:component.spec.ts Github

copy

Full Screen

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 });...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { tpl1 } from 'ng-mocks';2import { tpl2 } from 'ng-mocks';3import { tpl3 } from 'ng-mocks';4import { tpl4 } from 'ng-mocks';5import { tpl5 } from 'ng-mocks';6import { tpl6 } from 'ng-mocks';7import { tpl7 } from 'ng-mocks';8import { tpl8 } from 'ng-mocks';9import { tpl9 } from 'ng-mocks';10import { tpl10 } from 'ng-mocks';11import { tpl11 } from 'ng-mocks';12import { tpl12 } from 'ng-mocks';13import { tpl13 } from 'ng-mocks';14import { tpl14 } from 'ng-mocks';15import { tpl15 } from 'ng-mocks';16import { tpl16 } from 'ng-mocks';17import { tpl17 } from 'ng-mocks';18import { tpl18 } from 'ng-mocks';19import { tpl19 } from 'ng-mocks';20import { tpl20 } from 'ng-mocks';

Full Screen

Using AI Code Generation

copy

Full Screen

1import { tpl1tpl1 } from 'ng-mocks';2import { tpl2tpl2 } from 'ng-mocks';3import { tpl3tpl3 } from 'ng-mocks';4import { tpl4tpl4 } from 'ng-mocks';5import { tpl5tpl5 } from 'ng-mocks';6import { tpl6tpl6 } from 'ng-mocks';7import { tpl7tpl7 } from 'ng-mocks';8import { tpl8tpl8 } from 'ng-mocks';9import { tpl9tpl9 } from 'ng-mocks';10import { tpl10tpl10 } from 'ng-mocks';11import { tpl11tpl11 } from 'ng-mocks';12import { tpl12tpl12 } from 'ng-mocks';13import { tpl13tpl13 } from 'ng-mocks';14import { tpl14tpl14 } from 'ng-mocks';15import { tpl15tpl15 } from 'ng-mocks';16import { tpl16tpl16 } from 'ng-mocks';17import { tpl17tpl17 } from 'ng-mocks';18import { tpl18tpl18 } from 'ng-mocks';19import { tpl19tpl19 } from 'ng-mocks';

Full Screen

Using AI Code Generation

copy

Full Screen

1import { tpl1 } from './test.js';2import { tpl1 } from './test.js';3import { tpl1 } from './test.js';4import { tpl1 } from './test.js';5import { tpl1 } from './test.js';6import { tpl1 } from './test.js';7import

Full Screen

Using AI Code Generation

copy

Full Screen

1import { tpl1tpl1 } from 'ng-mocks';2describe('TestComponent', () => {3 it('should render the component', () => {4 const fixture = tpl1tpl1('<test-component></test-component>', TestComponent);5 expect(fixture).toBeDefined();6 });7});

Full Screen

Using AI Code Generation

copy

Full Screen

1import { tpl1tpl1 } from 'ng-mocks';2describe('test', () => {3 it('should render', () => {4 const fixture = tpl1tpl1('<div>test</div>');5 expect(fixture.nativeElement.innerHTML).toEqual('test');6 });7});8import { tpl1tpl1 } from 'ng-mocks';9describe('test', () => {10 it('should render', () => {11 const fixture = tpl1tpl1('<div>test</div>');12 expect(fixture.nativeElement.innerHTML).toEqual('test');13 });14});15I have a project with a lot of tests, and I want to run them in parallel. I have changed the karma.conf.js to run with concurrency. The problem is that when running the tests in parallel, I get the following error: ERROR in ./src/app/components/hero-card/hero-card.component.html Module build failed (from ./node_modules/html-loader/dist/cjs.js): Error: Can't resolve 'src/assets/images/hero-card-bg.jpg' in '/Users/.../src/app/components/hero-card' @ ./src/app/components/hero-card/hero-card.component.html 1:0-98 1:0-98 I have tried to change the path of the image to /src/assets/images/hero-card-bg.jpg and also to /src/assets/images/hero-card-bg.jpg but the error persists. I have also tried to u

Full Screen

Using AI Code Generation

copy

Full Screen

1import { tpl1 } from 'ng-mocks';2import { MyComponent } from './my.component';3import { MyModule } from './my.module';4describe('MyComponent', () => {5 let fixture: ComponentFixture<MyComponent>;6 beforeEach(() => {7 fixture = tpl1(MyComponent, MyModule, {name: 'John'});8 });9 it('should render name', () => {10 expect(fixture.nativeElement.textContent).toContain('John');11 });12});13import { Component, Input } from '@angular/core';14@Component({15 <p>My name is {{name}}</p>16})17export class MyComponent {18 @Input() name: string;19}20import { NgModule } from '@angular/core';21import { CommonModule } from '@angular/common';22import { MyComponent } from './my.component';23@NgModule({24 imports: [CommonModule],25})26export class MyModule {}27tpl1(MyComponent, MyModule, {name: 'John'}, {name: 'John'});28tpl1(MyComponent, MyModule,

Full Screen

Using AI Code Generation

copy

Full Screen

1import { tpl1 } from 'ng-mocks';2describe('test', () => {3 it('test', () => {4 const fixture = tpl1(`5 `);6 });7});8import { Component } from '@angular/core';9@Component({10})11export class AppComponent {}12import { tpl1 } from 'ng-mocks';13describe('test', () => {14 it('test', () => {15 const fixture = tpl1(`16 `);17 });18});19import { tpl1 } from 'ng-mocks';20describe('test', () => {21 it('test', () => {22 const fixture = tpl1(`23 `);24 });25});26import { tpl1 } from 'ng-mocks';27describe('test', () => {28 it('test', () => {29 const fixture = tpl1(`30 `);31 });32});33import { tpl1 } from 'ng-mocks';34describe('test', () => {35 it('test', () => {36 const fixture = tpl1(`37 `);38 });39});40import { tpl1 } from 'ng-mocks';41describe('test', () => {42 it('test', () => {43 const fixture = tpl1(`44 `);45 });46});47import { tpl1 } from 'ng-mocks';48describe('test', () => {49 it('test', () => {50 const fixture = tpl1(`

Full Screen

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.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run ng-mocks automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful