How to use ngIf method in ng-mocks

Best JavaScript code snippet using ng-mocks

ng_if.d.ts

Source:ng_if.d.ts

1/**2 * @license3 * Copyright Google Inc. All Rights Reserved.4 *5 * Use of this source code is governed by an MIT-style license that can be6 * found in the LICENSE file at https://angular.io/license7 */8import { TemplateRef, ViewContainerRef } from '@angular/core';9/**10 * Conditionally includes a template based on the value of an `expression`.11 *12 * `ngIf` evaluates the `expression` and then renders the `then` or `else` template in its place13 * when expression is truthy or falsy respectively. Typically the:14 *  - `then` template is the inline template of `ngIf` unless bound to a different value.15 *  - `else` template is blank unless it is bound.16 *17 * # Most common usage18 *19 * The most common usage of the `ngIf` directive is to conditionally show the inline template as20 * seen in this example:21 * {@example common/ngIf/ts/module.ts region='NgIfSimple'}22 *23 * # Showing an alternative template using `else`24 *25 * If it is necessary to display a template when the `expression` is falsy use the `else` template26 * binding as shown. Note that the `else` binding points to a `<ng-template>` labeled `#elseBlock`.27 * The template can be defined anywhere in the component view but is typically placed right after28 * `ngIf` for readability.29 *30 * {@example common/ngIf/ts/module.ts region='NgIfElse'}31 *32 * # Using non-inlined `then` template33 *34 * Usually the `then` template is the inlined template of the `ngIf`, but it can be changed using35 * a binding (just like `else`). Because `then` and `else` are bindings, the template references can36 * change at runtime as shown in this example.37 *38 * {@example common/ngIf/ts/module.ts region='NgIfThenElse'}39 *40 * # Storing conditional result in a variable41 *42 * A common pattern is that we need to show a set of properties from the same object. If the43 * object is undefined, then we have to use the safe-traversal-operator `?.` to guard against44 * dereferencing a `null` value. This is especially the case when waiting on async data such as45 * when using the `async` pipe as shown in folowing example:46 *47 * ```48 * Hello {{ (userStream|async)?.last }}, {{ (userStream|async)?.first }}!49 * ```50 *51 * There are several inefficiencies in the above example:52 *  - We create multiple subscriptions on `userStream`. One for each `async` pipe, or two in the53 *    example above.54 *  - We cannot display an alternative screen while waiting for the data to arrive asynchronously.55 *  - We have to use the safe-traversal-operator `?.` to access properties, which is cumbersome.56 *  - We have to place the `async` pipe in parenthesis.57 *58 * A better way to do this is to use `ngIf` and store the result of the condition in a local59 * variable as shown in the the example below:60 *61 * {@example common/ngIf/ts/module.ts region='NgIfAs'}62 *63 * Notice that:64 *  - We use only one `async` pipe and hence only one subscription gets created.65 *  - `ngIf` stores the result of the `userStream|async` in the local variable `user`.66 *  - The local `user` can then be bound repeatedly in a more efficient way.67 *  - No need to use the safe-traversal-operator `?.` to access properties as `ngIf` will only68 *    display the data if `userStream` returns a value.69 *  - We can display an alternative template while waiting for the data.70 *71 * ### Syntax72 *73 * Simple form:74 * - `<div *ngIf="condition">...</div>`75 * - `<div template="ngIf condition">...</div>`76 * - `<ng-template [ngIf]="condition"><div>...</div></ng-template>`77 *78 * Form with an else block:79 * ```80 * <div *ngIf="condition; else elseBlock">...</div>81 * <ng-template #elseBlock>...</ng-template>82 * ```83 *84 * Form with a `then` and `else` block:85 * ```86 * <div *ngIf="condition; then thenBlock else elseBlock"></div>87 * <ng-template #thenBlock>...</ng-template>88 * <ng-template #elseBlock>...</ng-template>89 * ```90 *91 * Form with storing the value locally:92 * ```93 * <div *ngIf="condition as value; else elseBlock">{{value}}</div>94 * <ng-template #elseBlock>...</ng-template>95 * ```96 *97 * @stable98 */99export declare class NgIf {100    private _viewContainer;101    private _context;102    private _thenTemplateRef;103    private _elseTemplateRef;104    private _thenViewRef;105    private _elseViewRef;106    constructor(_viewContainer: ViewContainerRef, templateRef: TemplateRef<NgIfContext>);107    ngIf: any;108    ngIfThen: TemplateRef<NgIfContext>;109    ngIfElse: TemplateRef<NgIfContext>;110    private _updateView();111}112/**113 * @stable114 */115export declare class NgIfContext {116    $implicit: any;117    ngIf: any;...

Using AI Code Generation

1import { ngIf } from 'ng-mocks';2describe('TestComponent', () => {3  let component: TestComponent;4  let fixture: ComponentFixture<TestComponent>;5  beforeEach(async(() => {6    TestBed.configureTestingModule({7    })8    .compileComponents();9  }));10  beforeEach(() => {11    fixture = TestBed.createComponent(TestComponent);12    component = fixture.componentInstance;13    fixture.detectChanges();14  });15  it('should create', () => {16    expect(component).toBeTruthy();17  });18});

Using AI Code Generation

1import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';2import { Component } from '@angular/core';3import { MyComponent } from './my.component';4describe('MyComponent', () => {5  beforeEach(() => MockBuilder(MyComponent));6  it('renders', () => {7    const fixture = MockRender(MyComponent);8    const element = ngMocks.find('h1');9    expect(element).toBeDefined();10    expect(element.innerHTML).toEqual('MyComponent');11  });12  it('renders with ngIf', () => {13    const fixture = MockRender(MyComponent);14    const element = ngMocks.find('h1');15    expect(element).toBeDefined();16    expect(element.innerHTML).toEqual('MyComponent');17    ngMocks.input(fixture.debugElement.componentInstance, 'show', false);18    fixture.detectChanges();19    expect(ngMocks.find('h1')).toBeUndefined();20  });21});22import { Component, Input } from '@angular/core';23@Component({24})25export class MyComponent {26  @Input() show = true;27}28import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';29import { Component } from '@angular/core';30import { MyComponent } from './my.component';31describe('MyComponent', () => {32  beforeEach(() => MockBuilder(MyComponent));33  it('renders', () => {34    const fixture = MockRender(MyComponent);35    const element = ngMocks.find('h1');36    expect(element).toBeDefined();37    expect(element.innerHTML).toEqual('MyComponent');38  });39  it('renders with ngIf', () => {40    const fixture = MockRender(MyComponent);41    const element = ngMocks.find('h1');42    expect(element).toBeDefined();43    expect(element.innerHTML).toEqual('MyComponent');44    ngMocks.input(fixture.debugElement.componentInstance, 'show', false);45    fixture.detectChanges();46    expect(ngMocks.find('h1')).toBeUndefined();47  });48});49import { Component, Input } from '@angular/core';

Using AI Code Generation

1import { NgIf } from '@angular/common';2import { Component, Input } from '@angular/core';3import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';4@Component({5})6class TargetComponent {7  @Input()8  public condition: boolean = false;9}10describe('ngIf', () => {11  beforeEach(() => MockBuilder(TargetComponent));12  it('shows ngIf', () => {13    const fixture = MockRender(`<target>content</target>`);14    expect(ngMocks.formatText(fixture)).toEqual('content');15    fixture.point.componentInstance.condition = true;16    fixture.detectChanges();17    expect(ngMocks.formatText(fixture)).toEqual('content');18  });19  it('hides ngIf', () => {20    const fixture = MockRender(`<target>content</target>`);21    expect(ngMocks.formatText(fixture)).toEqual('content');22    fixture.point.componentInstance.condition = false;23    fixture.detectChanges();24    expect(ngMocks.formatText(fixture)).toEqual('');25  });26});

Using AI Code Generation

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

Using AI Code Generation

1import {ngMocks} from 'ng-mocks';2import {ComponentFixture, TestBed} from '@angular/core/testing';3import {Component} from '@angular/core';4@Component({5})6export class MyComponent {}7describe('ng-mocks', () => {8  let fixture: ComponentFixture<MyComponent>;9  beforeEach(() => {10    TestBed.configureTestingModule({11    });12    fixture = TestBed.createComponent(MyComponent);13  });14  it('should work', () => {15    fixture.detectChanges();16    expect(ngMocks.formatText(fixture)).toEqual('Hello!');17  });18});19import 'zone.js/dist/zone-testing';20import {getTestBed} from '@angular/core/testing';21import {22} from '@angular/platform-browser-dynamic/testing';23getTestBed().initTestEnvironment(24  platformBrowserDynamicTesting()25);26module.exports = function(config) {27  config.set({28      require('karma-jasmine'),29      require('karma-chrome-launcher'),30      require('karma-jasmine-html-reporter'),31      require('karma-coverage-istanbul-reporter'),32      require('@angular-devkit/build-angular/plugins/karma')33    client: {34    },35    coverageIstanbulReporter: {36      dir: require('path').join(__dirname, './coverage/ng-mocks'),37    },38    angularCli: {39    },40  });41};

Using AI Code Generation

1import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';2import { MyComponent } from './my.component';3describe('MyComponent', () => {4  beforeEach(() => MockBuilder(MyComponent));5  it('renders the component', () => {6    const fixture = MockRender(MyComponent);7    expect(ngMocks.find(MyComponent)).toBeDefined();8  });9});10import { Component } from '@angular/core';11@Component({12})13export class MyComponent {}14import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';15import { MyComponent } from './my.component';16describe('MyComponent', () => {17  beforeEach(() => MockBuilder(MyComponent));18  it('renders the component', () => {19    const fixture = MockRender(MyComponent);20    expect(ngMocks.find(MyComponent)).toBeDefined();21  });22});23import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';24import { MyComponent } from './my.component';25describe('MyComponent', () => {26  beforeEach(() => MockBuilder(MyComponent));27  it('renders the component', () => {28    const fixture = MockRender(MyComponent);29    expect(ngMocks.find(MyComponent)).toBeDefined();30  });31});32div {33  color: blue;34}35import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';36import { MyComponent } from './my.component';37describe('MyComponent', () => {38  beforeEach(() => MockBuilder(MyComponent));39  it('renders the component', () => {40    const fixture = MockRender(MyComponent);41    expect(ngMocks.find(MyComponent)).toBeDefined();42  });43});44div {45  color: blue;46}47import { MockBuilder, MockRender, ngMocks } from 'ng-mocks';48import { MyComponent } from './my.component';49describe('MyComponent', () => {50  beforeEach(() => MockBuilder(MyComponent));51  it('renders the component', () => {52    const fixture = MockRender(MyComponent

Using AI Code Generation

1import { ngMocks } from 'ng-mocks';2import { MyComponent } from './my.component';3import { MyService } from './my.service';4describe('MyComponent', () => {5  ngMocks.faster();6  it('should work', () => {7    const fixture = ngMocks.faster();8    const component = ngMocks.findInstance(MyComponent);9    const service = ngMocks.findInstance(MyService);10    fixture.detectChanges();11    expect(service).toBeDefined();12    expect(component).toBeDefined();13  });14});15import { Injectable } from '@angular/core';16@Injectable()17export class MyService {18  constructor() {19    console.log('MyService instantiated');20  }21}22import { Component } from '@angular/core';23@Component({24})25export class MyComponent {26  constructor() {27    console.log('MyComponent instantiated');28  }29}30import { NgModule } from '@angular/core';31import { MyComponent } from './my.component';32import { MyService } from './my.service';33@NgModule({34})35export class MyModule {}36import { ngMocks } from 'ng-mocks';37import { MyComponent } from './my.component';38import { MyService } from './my.service';39import { MyModule } from './my.module';40describe('MyComponent', () => {41  ngMocks.faster();42  it('should work', () => {43    const fixture = ngMocks.faster();44    const component = ngMocks.findInstance(MyComponent);45    const service = ngMocks.findInstance(MyService);46    fixture.detectChanges();47    expect(service).toBeDefined();48    expect(component).toBeDefined();49  });50});51import { Component } from '@angular/core';52@Component({53})54export class MyComponent {55  constructor() {56    console.log('MyComponent instantiated');57  }58}59import { Injectable } from '@angular/core';60@Injectable()61export class MyService {62  constructor() {63    console.log('MyService instantiated');64  }65}66import { NgModule

Using AI Code Generation

1it('should display the title', () => {2  const fixture = TestBed.createComponent(AppComponent);3  fixture.detectChanges();4  const compiled = fixture.debugElement.nativeElement;5  expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');6});7it('should display the title', () => {8  const fixture = TestBed.createComponent(AppComponent);9  fixture.detectChanges();10  const compiled = fixture.debugElement.nativeElement;11  expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');12});

Using AI Code Generation

1import { MockRender } from 'ng-mocks';2import { AppComponent } from './app.component';3import { AppModule } from './app.module';4import { MatButton } from '@angular/material/button';5describe('AppComponent', () => {6  beforeEach(() => {7    MockRender(AppComponent, AppModule);8  });9  it('should create the app', () => {10    const fixture = MockRender(AppComponent, AppModule);11    const app = fixture.debugElement.componentInstance;12    expect(app).toBeTruthy();13  });14  it('should render title in a h1 tag', () => {15    const fixture = MockRender(AppComponent, AppModule);16    expect(fixture.debugElement.nativeElement.querySelector('h1').textContent).toContain('Welcome to ng-mocks!');17  });18  it('should render button', () => {19    const fixture = MockRender(AppComponent, AppModule);20    const button = fixture.debugElement.query(By.directive(MatButton)).nativeElement;21    expect(button).toBeTruthy();22  });23});24<h1>Welcome to {{ title }}!</h1>25import { NgModule } from '@angular/core';26import { BrowserModule } from '@angular/platform-browser';27import { BrowserAnimationsModule } from '@angular/platform-browser/animations';28import { MatButtonModule } from '@angular/material/button';29import { MatToolbarModule } from '@angular/material/toolbar';30import { AppComponent } from './app.component';31@NgModule({32  imports: [BrowserModule, BrowserAnimationsModule, MatButtonModule, MatToolbarModule],33})34export class AppModule {}35    ✓ should create the app (7ms)36    ✓ should render title in a h1 tag (2ms)37    ✓ should render button (2ms)38      at Object.<anonymous> (test.js:13:13)39      at step (test.js:32:23)40      at Object.next (test.js:13:53)41      at fulfilled (test.js:4:58)

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.