How to use sourceUrl method in wpt

Best JavaScript code snippet using wpt

template_mapping_spec.ts

Source:template_mapping_spec.ts

1/**2 * @license3 * Copyright Google LLC 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 */8/// <reference types="node" />9import {inspect} from 'util';10import {runInEachFileSystem} from '../../src/ngtsc/file_system/testing';11import {loadStandardTestFiles} from '../../src/ngtsc/testing';12import {NgtscTestEnvironment} from './env';13import {getMappedSegments, SegmentMapping} from './sourcemap_utils';14const testFiles = loadStandardTestFiles();15runInEachFileSystem((os) => {16  describe('template source-mapping', () => {17    let env!: NgtscTestEnvironment;18    beforeEach(() => {19      env = NgtscTestEnvironment.setup(testFiles);20      env.tsconfig({sourceMap: true, target: 'es2015', enableI18nLegacyMessageIdFormat: false});21    });22    describe('Inline templates', () => {23      describe('(element creation)', () => {24        it('should map simple element with content', () => {25          const mappings = compileAndMap('<h1>Heading 1</h1>');26          expectMapping(27              mappings,28              {source: '<h1>', generated: 'i0.ÉµÉµelementStart(0, "h1")', sourceUrl: '../test.ts'});29          expectMapping(mappings, {30            source: 'Heading 1',31            generated: 'i0.ÉµÉµtext(1, "Heading 1")',32            sourceUrl: '../test.ts'33          });34          expectMapping(35              mappings, {source: '</h1>', generated: 'i0.ÉµÉµelementEnd()', sourceUrl: '../test.ts'});36        });37        it('should map void element', () => {38          const mappings = compileAndMap('<hr>');39          expectMapping(40              mappings,41              {source: '<hr>', generated: 'i0.ÉµÉµelement(0, "hr")', sourceUrl: '../test.ts'});42        });43      });44      describe('(interpolations)', () => {45        it('should map a mix of interpolated and static content', () => {46          const mappings = compileAndMap('<h3>Hello {{ name }}</h3>');47          expectMapping(48              mappings,49              {source: '<h3>', generated: 'i0.ÉµÉµelementStart(0, "h3")', sourceUrl: '../test.ts'});50          expectMapping(mappings, {51            source: 'Hello {{ name }}',52            generated: 'i0.ÉµÉµtextInterpolate1("Hello ", ctx.name, "")',53            sourceUrl: '../test.ts'54          });55          expectMapping(56              mappings, {source: '</h3>', generated: 'i0.ÉµÉµelementEnd()', sourceUrl: '../test.ts'});57        });58        it('should map a complex interpolated expression', () => {59          const mappings = compileAndMap('<h2>{{ greeting + " " + name }}</h2>');60          expectMapping(61              mappings,62              {source: '<h2>', generated: 'i0.ÉµÉµelementStart(0, "h2")', sourceUrl: '../test.ts'});63          expectMapping(mappings, {64            source: '{{ greeting + " " + name }}',65            generated: 'i0.ÉµÉµtextInterpolate(ctx.greeting + " " + ctx.name)',66            sourceUrl: '../test.ts'67          });68          expectMapping(69              mappings, {source: '</h2>', generated: 'i0.ÉµÉµelementEnd()', sourceUrl: '../test.ts'});70        });71        it('should map interpolated properties', () => {72          const mappings = compileAndMap('<div id="{{name}}"></div>');73          expectMapping(mappings, {74            source: '<div id="{{name}}"></div>',75            generated: 'i0.ÉµÉµelement(0, "div", 0)',76            sourceUrl: '../test.ts'77          });78          expectMapping(mappings, {79            source: 'id="{{name}}"',80            generated: 'i0.ÉµÉµpropertyInterpolate("id", ctx.name)',81            sourceUrl: '../test.ts'82          });83        });84        it('should map interpolation with pipe', () => {85          const mappings = compileAndMap('<div>{{200.3 | percent : 2 }}</div>');86          expectMapping(87              mappings,88              {source: '<div>', generated: 'i0.ÉµÉµelementStart(0, "div")', sourceUrl: '../test.ts'});89          expectMapping(mappings, {90            source: '{{200.3 | percent : 2 }}',91            generated: 'i0.ÉµÉµtextInterpolate(i0.ÉµÉµpipeBind2(2, 1, 200.3, 2))',92            sourceUrl: '../test.ts'93          });94          expectMapping(95              mappings,96              {source: '</div>', generated: 'i0.ÉµÉµelementEnd()', sourceUrl: '../test.ts'});97        });98      });99      describe('(property bindings)', () => {100        it('should map a simple input binding expression', () => {101          const mappings = compileAndMap('<div [attr]="name"></div>');102          expectMapping(mappings, {103            source: '<div [attr]="name"></div>',104            generated: 'i0.ÉµÉµelement(0, "div", 0)',105            sourceUrl: '../test.ts'106          });107          expectMapping(mappings, {108            source: '[attr]="name"',109            generated: 'i0.ÉµÉµproperty("attr", ctx.name)',110            sourceUrl: '../test.ts'111          });112        });113        it('should map a complex input binding expression', () => {114          const mappings = compileAndMap('<div [attr]="greeting + name"></div>');115          expectMapping(mappings, {116            source: '<div [attr]="greeting + name"></div>',117            generated: 'i0.ÉµÉµelement(0, "div", 0)',118            sourceUrl: '../test.ts'119          });120          expectMapping(mappings, {121            source: '[attr]="greeting + name"',122            generated: 'i0.ÉµÉµproperty("attr", ctx.greeting + ctx.name)',123            sourceUrl: '../test.ts'124          });125        });126        it('should map a longhand input binding expression', () => {127          const mappings = compileAndMap('<div bind-attr="name"></div>');128          expectMapping(mappings, {129            source: '<div bind-attr="name"></div>',130            generated: 'i0.ÉµÉµelement(0, "div", 0)',131            sourceUrl: '../test.ts'132          });133          expectMapping(mappings, {134            source: 'bind-attr="name"',135            generated: 'i0.ÉµÉµproperty("attr", ctx.name)',136            sourceUrl: '../test.ts'137          });138        });139        it('should map a simple output binding expression', () => {140          const mappings = compileAndMap('<button (click)="doSomething()">Do it</button>');141          expectMapping(mappings, {142            source: '<button (click)="doSomething()">',143            generated: 'i0.ÉµÉµelementStart(0, "button", 0)',144            sourceUrl: '../test.ts'145          });146          expectMapping(147              mappings,148              {source: 'Do it', generated: 'i0.ÉµÉµtext(1, "Do it")', sourceUrl: '../test.ts'});149          expectMapping(150              mappings,151              {source: 'doSomething()', generated: 'ctx.doSomething()', sourceUrl: '../test.ts'});152          expectMapping(153              mappings,154              {source: '</button>', generated: 'i0.ÉµÉµelementEnd()', sourceUrl: '../test.ts'});155        });156        it('should map a complex output binding expression', () => {157          const mappings = compileAndMap(158              `<button (click)="items.push('item' + items.length)">Add Item</button>`);159          expectMapping(mappings, {160            source: `<button (click)="items.push('item' + items.length)">`,161            generated: 'i0.ÉµÉµelementStart(0, "button", 0)',162            sourceUrl: '../test.ts'163          });164          expectMapping(165              mappings,166              {source: 'Add Item', generated: 'i0.ÉµÉµtext(1, "Add Item")', sourceUrl: '../test.ts'});167          expectMapping(168              mappings,169              {source: 'items.push(', generated: 'ctx.items.push(', sourceUrl: '../test.ts'});170          expectMapping(mappings, {source: `'item'`, generated: `"item"`, sourceUrl: '../test.ts'});171          expectMapping(mappings, {172            source: ' + items.length)',173            generated: ' + ctx.items.length)',174            sourceUrl: '../test.ts'175          });176          expectMapping(177              mappings,178              {source: '</button>', generated: 'i0.ÉµÉµelementEnd()', sourceUrl: '../test.ts'});179        });180        it('should map a longhand output binding expression', () => {181          const mappings = compileAndMap('<button on-click="doSomething()">Do it</button>');182          expectMapping(mappings, {183            source: '<button on-click="doSomething()">',184            generated: 'i0.ÉµÉµelementStart(0, "button", 0)',185            sourceUrl: '../test.ts'186          });187          expectMapping(188              mappings,189              {source: 'Do it', generated: 'i0.ÉµÉµtext(1, "Do it")', sourceUrl: '../test.ts'});190          expectMapping(191              mappings,192              {source: 'doSomething()', generated: 'ctx.doSomething()', sourceUrl: '../test.ts'});193          expectMapping(194              mappings,195              {source: '</button>', generated: 'i0.ÉµÉµelementEnd()', sourceUrl: '../test.ts'});196        });197        it('should map a two-way binding expression', () => {198          const mappings = compileAndMap('Name: <input [(ngModel)]="name">');199          expectMapping(mappings, {200            source: '<input [(ngModel)]="name">',201            generated: 'i0.ÉµÉµelementStart(1, "input", 0)',202            sourceUrl: '../test.ts'203          });204          // TODO: improve mappings here205          expectMapping(mappings, {206            source: '[(ngModel)]="name"',207            generated:208                'i0.ÉµÉµlistener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) { return ctx.name = $event; })',209            sourceUrl: '../test.ts'210          });211          expectMapping(mappings, {212            source: '<input [(ngModel)]="name">',213            generated: 'i0.ÉµÉµelementEnd()',214            sourceUrl: '../test.ts'215          });216        });217        it('should map a longhand two-way binding expression', () => {218          const mappings = compileAndMap('Name: <input bindon-ngModel="name">');219          expectMapping(mappings, {220            source: '<input bindon-ngModel="name">',221            generated: 'i0.ÉµÉµelementStart(1, "input", 0)',222            sourceUrl: '../test.ts'223          });224          // TODO: improve mappings here225          expectMapping(mappings, {226            source: 'bindon-ngModel="name"',227            generated:228                'i0.ÉµÉµlistener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) { return ctx.name = $event; })',229            sourceUrl: '../test.ts'230          });231          expectMapping(mappings, {232            source: '<input bindon-ngModel="name">',233            generated: 'i0.ÉµÉµelementEnd()',234            sourceUrl: '../test.ts'235          });236        });237        it('should map a class input binding', () => {238          const mappings = compileAndMap('<div [class.initial]="isInitial">Message</div>');239          expectMapping(mappings, {240            source: '<div [class.initial]="isInitial">',241            generated: 'i0.ÉµÉµelementStart(0, "div")',242            sourceUrl: '../test.ts'243          });244          // TODO: Add better mappings for binding245          expectMapping(246              mappings,247              {source: 'Message', generated: 'i0.ÉµÉµtext(1, "Message")', sourceUrl: '../test.ts'});248          expectMapping(249              mappings,250              {source: '</div>', generated: 'i0.ÉµÉµelementEnd()', sourceUrl: '../test.ts'});251        });252      });253      describe('(structural directives)', () => {254        it('should map *ngIf scenario', () => {255          const mappings = compileAndMap('<div *ngIf="showMessage()">{{ name }}</div>');256          expectMapping(mappings, {257            source: '<div *ngIf="showMessage()">',258            generated: 'i0.ÉµÉµelementStart(0, "div")',259            sourceUrl: '../test.ts'260          });261          // TODO - map the bindings better262          expectMapping(263              mappings,264              {source: '</div>', generated: 'i0.ÉµÉµelementEnd()', sourceUrl: '../test.ts'});265          // TODO: the `ctx_r...` appears to be dependent upon previous tests!!!266          // expectMapping(mappings, {267          //   source: '{{ name }}',268          //   generated: 'i0.ÉµÉµtextInterpolate(ctx_r0.name)',269          //   sourceUrl: '../test.ts'270          // });271        });272        it('should map ng-template [ngIf] scenario', () => {273          const mappings = compileAndMap(274              `<ng-template [ngIf]="showMessage()">\n` +275              `  <div>{{ name }}</div>\n` +276              `  <hr>\n` +277              `</ng-template>`);278          expectMapping(279              mappings,280              {source: '<div>', generated: 'i0.ÉµÉµelementStart(0, "div")', sourceUrl: '../test.ts'});281          // TODO - map the bindings better282          expectMapping(283              mappings,284              {source: '</div>', generated: 'i0.ÉµÉµelementEnd()', sourceUrl: '../test.ts'});285          // TODO: the `ctx_r...` appears to be dependent upon previous tests!!!286          // expectMapping(mappings, {287          //   source: '{{ name }}',288          //   generated: 'i0.ÉµÉµtextInterpolate(ctx_r0.name)',289          //   sourceUrl: '../test.ts'290          // });291        });292        it('should map *ngFor scenario', () => {293          const mappings = compileAndMap(294              '<div *ngFor="let item of items; index as i; trackBy: trackByFn">{{ item }}</div>');295          expectMapping(mappings, {296            source: '<div *ngFor="let item of items; index as i; trackBy: trackByFn">',297            generated: 'i0.ÉµÉµelementStart(0, "div")',298            sourceUrl: '../test.ts'299          });300          // TODO - map the bindings better301          expectMapping(302              mappings,303              {source: '</div>', generated: 'i0.ÉµÉµelementEnd()', sourceUrl: '../test.ts'});304        });305        it('should map ng-template [ngFor] scenario', () => {306          const mappings = compileAndMap(307              `<ng-template ngFor [ngForOf]="items" let-item>{{ item }}</ng-template>`);308          // TODO - map the bindings better309        });310      });311      describe('(content projection)', () => {312        it('should map default and selected projection', () => {313          const mappings = compileAndMap(314              `<h3><ng-content select="title"></ng-content></h3>\n` +315              `<div><ng-content></ng-content></div>`);316          expectMapping(317              mappings,318              {source: '<h3>', generated: 'i0.ÉµÉµelementStart(0, "h3")', sourceUrl: '../test.ts'});319          expectMapping(mappings, {320            source: '<ng-content select="title"></ng-content>',321            generated: 'i0.ÉµÉµprojection(1)',322            sourceUrl: '../test.ts'323          });324          expectMapping(325              mappings, {source: '</h3>', generated: 'i0.ÉµÉµelementEnd()', sourceUrl: '../test.ts'});326          expectMapping(327              mappings,328              {source: '<div>', generated: 'i0.ÉµÉµelementStart(2, "div")', sourceUrl: '../test.ts'});329          expectMapping(mappings, {330            source: '<ng-content></ng-content>',331            generated: 'i0.ÉµÉµprojection(3, 1)',332            sourceUrl: '../test.ts'333          });334          expectMapping(335              mappings,336              {source: '</div>', generated: 'i0.ÉµÉµelementEnd()', sourceUrl: '../test.ts'});337        });338      });339      describe('$localize', () => {340        it('should create simple i18n message source-mapping', () => {341          const mappings = compileAndMap(`<div i18n>Hello, World!</div>`);342          expectMapping(mappings, {343            source: '<div i18n>',344            generated: 'i0.ÉµÉµelementStart(0, "div")',345            sourceUrl: '../test.ts',346          });347          expectMapping(mappings, {348            source: 'Hello, World!',349            generated: '`Hello, World!`',350            sourceUrl: '../test.ts',351          });352        });353        it('should create placeholder source-mappings', () => {354          const mappings = compileAndMap(`<div i18n>Hello, {{name}}!</div>`);355          expectMapping(mappings, {356            source: '<div i18n>',357            generated: 'i0.ÉµÉµelementStart(0, "div")',358            sourceUrl: '../test.ts',359          });360          expectMapping(mappings, {361            source: '</div>',362            generated: 'i0.ÉµÉµelementEnd()',363            sourceUrl: '../test.ts',364          });365          expectMapping(mappings, {366            source: 'Hello, ',367            generated: '`Hello, ${',368            sourceUrl: '../test.ts',369          });370          expectMapping(mappings, {371            source: '{{name}}',372            generated: '"\\uFFFD0\\uFFFD"',373            sourceUrl: '../test.ts',374          });375          expectMapping(mappings, {376            source: '!',377            generated: '}:INTERPOLATION:!`',378            sourceUrl: '../test.ts',379          });380        });381        it('should correctly handle collapsed whitespace in interpolation placeholder source-mappings',382           () => {383             const mappings = compileAndMap(384                 `<div i18n title="  pre-title {{name}}  post-title" i18n-title>  pre-body {{greeting}}  post-body</div>`);385             expectMapping(mappings, {386               source: '<div i18n title="  pre-title {{name}}  post-title" i18n-title>',387               generated: 'i0.ÉµÉµelementStart(0, "div", 0)',388               sourceUrl: '../test.ts',389             });390             expectMapping(mappings, {391               source: '</div>',392               generated: 'i0.ÉµÉµelementEnd()',393               sourceUrl: '../test.ts',394             });395             expectMapping(mappings, {396               source: '  pre-body ',397               generated: '` pre-body ${',398               sourceUrl: '../test.ts',399             });400             expectMapping(mappings, {401               source: '{{greeting}}',402               generated: '"\\uFFFD0\\uFFFD"',403               sourceUrl: '../test.ts',404             });405             expectMapping(mappings, {406               source: '  post-body',407               generated: '}:INTERPOLATION: post-body`',408               sourceUrl: '../test.ts',409             });410           });411        it('should correctly handle collapsed whitespace in element placeholder source-mappings',412           () => {413             const mappings =414                 compileAndMap(`<div i18n>\n  pre-p\n  <p>\n    in-p\n  </p>\n  post-p\n</div>`);415             // $localize expressions416             expectMapping(mappings, {417               sourceUrl: '../test.ts',418               source: '\n  pre-p\n  ',419               generated: '` pre-p ${',420             });421             expectMapping(mappings, {422               sourceUrl: '../test.ts',423               source: '<p>',424               generated: '"\\uFFFD#2\\uFFFD"',425             });426             expectMapping(mappings, {427               sourceUrl: '../test.ts',428               source: '\n    in-p\n  ',429               generated: '}:START_PARAGRAPH: in-p ${',430             });431             expectMapping(mappings, {432               sourceUrl: '../test.ts',433               source: '</p>',434               generated: '"\\uFFFD/#2\\uFFFD"',435             });436             expectMapping(mappings, {437               sourceUrl: '../test.ts',438               source: '\n  post-p\n',439               generated: '}:CLOSE_PARAGRAPH: post-p\n`',440             });441             // ivy instructions442             expectMapping(mappings, {443               sourceUrl: '../test.ts',444               source: '<div i18n>',445               generated: 'i0.ÉµÉµelementStart(0, "div")',446             });447             expectMapping(mappings, {448               sourceUrl: '../test.ts',449               source: '<div i18n>',450               generated: 'i0.ÉµÉµi18nStart(1, 0)',451             });452             expectMapping(mappings, {453               sourceUrl: '../test.ts',454               source: '<p>\n    in-p\n  </p>',455               generated: 'i0.ÉµÉµelement(2, "p")',456             });457             expectMapping(mappings, {458               sourceUrl: '../test.ts',459               source: '</div>',460               generated: 'i0.ÉµÉµi18nEnd()',461             });462             expectMapping(mappings, {463               sourceUrl: '../test.ts',464               source: '</div>',465               generated: 'i0.ÉµÉµelementEnd()',466             });467           });468        it('should create tag (container) placeholder source-mappings', () => {469          const mappings = compileAndMap(`<div i18n>Hello, <b>World</b>!</div>`);470          expectMapping(mappings, {471            source: '<div i18n>',472            generated: 'i0.ÉµÉµelementStart(0, "div")',473            sourceUrl: '../test.ts',474          });475          expectMapping(mappings, {476            source: '</div>',477            generated: 'i0.ÉµÉµelementEnd()',478            sourceUrl: '../test.ts',479          });480          expectMapping(mappings, {481            source: 'Hello, ',482            generated: '`Hello, ${',483            sourceUrl: '../test.ts',484          });485          expectMapping(mappings, {486            source: '<b>',487            generated: '"\\uFFFD#2\\uFFFD"',488            sourceUrl: '../test.ts',489          });490          expectMapping(mappings, {491            source: 'World',492            generated: '}:START_BOLD_TEXT:World${',493            sourceUrl: '../test.ts',494          });495          expectMapping(mappings, {496            source: '</b>',497            generated: '"\\uFFFD/#2\\uFFFD"',498            sourceUrl: '../test.ts',499          });500          expectMapping(mappings, {501            source: '!',502            generated: '}:CLOSE_BOLD_TEXT:!`',503            sourceUrl: '../test.ts',504          });505        });506      });507      it('should create (simple string) inline template source-mapping', () => {508        const mappings = compileAndMap('<div>this is a test</div><div>{{ 1 + 2 }}</div>');509        // Creation mode510        expectMapping(511            mappings,512            {generated: 'i0.ÉµÉµelementStart(0, "div")', source: '<div>', sourceUrl: '../test.ts'});513        expectMapping(mappings, {514          generated: 'i0.ÉµÉµtext(1, "this is a test")',515          source: 'this is a test',516          sourceUrl: '../test.ts'517        });518        expectMapping(519            mappings, {generated: 'i0.ÉµÉµelementEnd()', source: '</div>', sourceUrl: '../test.ts'});520        expectMapping(521            mappings,522            {generated: 'i0.ÉµÉµelementStart(2, "div")', source: '<div>', sourceUrl: '../test.ts'});523        expectMapping(524            mappings, {generated: 'i0.ÉµÉµtext(3)', source: '{{ 1 + 2 }}', sourceUrl: '../test.ts'});525        expectMapping(526            mappings, {generated: 'i0.ÉµÉµelementEnd()', source: '</div>', sourceUrl: '../test.ts'});527        // Update mode528        expectMapping(mappings, {529          generated: 'i0.ÉµÉµtextInterpolate(1 + 2)',530          source: '{{ 1 + 2 }}',531          sourceUrl: '../test.ts'532        });533      });534      it('should create correct inline template source-mapping when the source contains escape sequences',535         () => {536           // Note that the escaped double quotes, which need un-escaping to be parsed correctly.537           const mappings = compileAndMap('<div class=\\"some-class\\">this is a test</div>');538           expectMapping(mappings, {539             generated: 'i0.ÉµÉµelementStart(0, "div", 0)',540             source: '<div class=\\"some-class\\">',541             sourceUrl: '../test.ts'542           });543           const attrsMapping =544               mappings.find(mapping => /consts: \[\[1, "some-class"\]\]/.test(mapping.generated));545           expect(attrsMapping).toBeDefined();546         });547    });548    describe('External templates (where TS supports source-mapping)', () => {549      it('should create external template source-mapping', () => {550        const mappings =551            compileAndMap('<div>this is a test</div><div>{{ 1 + 2 }}</div>', './dir/test.html');552        // Creation mode553        expectMapping(mappings, {554          generated: 'i0.ÉµÉµelementStart(0, "div")',555          source: '<div>',556          sourceUrl: '../dir/test.html'557        });558        expectMapping(mappings, {559          generated: 'i0.ÉµÉµtext(1, "this is a test")',560          source: 'this is a test',561          sourceUrl: '../dir/test.html'562        });563        expectMapping(564            mappings,565            {generated: 'i0.ÉµÉµelementEnd()', source: '</div>', sourceUrl: '../dir/test.html'});566        expectMapping(mappings, {567          generated: 'i0.ÉµÉµelementStart(2, "div")',568          source: '<div>',569          sourceUrl: '../dir/test.html'570        });571        expectMapping(572            mappings,573            {generated: 'i0.ÉµÉµtext(3)', source: '{{ 1 + 2 }}', sourceUrl: '../dir/test.html'});574        expectMapping(575            mappings,576            {generated: 'i0.ÉµÉµelementEnd()', source: '</div>', sourceUrl: '../dir/test.html'});577        // Update mode578        expectMapping(mappings, {579          generated: 'i0.ÉµÉµtextInterpolate(1 + 2)',580          source: '{{ 1 + 2 }}',581          sourceUrl: '../dir/test.html'582        });583      });584      it('should create correct mappings when templateUrl is in a different rootDir', () => {585        const mappings = compileAndMap(586            '<div>this is a test</div><div>{{ 1 + 2 }}</div>', 'extraRootDir/test.html');587        // Creation mode588        expectMapping(mappings, {589          generated: 'i0.ÉµÉµelementStart(0, "div")',590          source: '<div>',591          sourceUrl: '../extraRootDir/test.html'592        });593        expectMapping(mappings, {594          generated: 'i0.ÉµÉµtext(1, "this is a test")',595          source: 'this is a test',596          sourceUrl: '../extraRootDir/test.html'597        });598        expectMapping(mappings, {599          generated: 'i0.ÉµÉµelementEnd()',600          source: '</div>',601          sourceUrl: '../extraRootDir/test.html'602        });603        expectMapping(mappings, {604          generated: 'i0.ÉµÉµelementStart(2, "div")',605          source: '<div>',606          sourceUrl: '../extraRootDir/test.html'607        });608        expectMapping(mappings, {609          generated: 'i0.ÉµÉµtext(3)',610          source: '{{ 1 + 2 }}',611          sourceUrl: '../extraRootDir/test.html'612        });613        expectMapping(mappings, {614          generated: 'i0.ÉµÉµelementEnd()',615          source: '</div>',616          sourceUrl: '../extraRootDir/test.html'617        });618        // Update mode619        expectMapping(mappings, {620          generated: 'i0.ÉµÉµtextInterpolate(1 + 2)',621          source: '{{ 1 + 2 }}',622          sourceUrl: '../extraRootDir/test.html'623        });624      });625    });626    function compileAndMap(template: string, templateUrl: string|null = null) {627      const templateConfig = templateUrl ? `templateUrl: '${templateUrl}'` :628                                           ('template: `' + template.replace(/`/g, '\\`') + '`');629      env.write('test.ts', `630        import {Component, Directive, Input, Output, EventEmitter, Pipe, NgModule} from '@angular/core';631        @Directive({632          selector: '[ngModel],[attr],[ngModelChange]'633        })634        export class AllDirective {635          @Input() ngModel!: any;636          @Output() ngModelChange = new EventEmitter<any>();637          @Input() attr!: any;638        }639        @Pipe({name: 'percent'})640        export class PercentPipe {641          transform(v: any) {}642        }643        @Component({644          selector: 'test-cmp',645          ${templateConfig}646        })647        export class TestCmp {648          name = '';649          isInitial = false;650          doSomething() {}651          items: any[] = [];652          greeting = '';653        }654        @NgModule({655          declarations: [TestCmp, AllDirective, PercentPipe],656        })657        export class Module {}658    `);659      if (templateUrl) {660        env.write(templateUrl, template);661      }662      env.driveMain();663      return getMappedSegments(env, 'test.js');664    }665    /**666     * Helper function for debugging failed mappings.667     * This lays out the segment mappings in the console to make it easier to compare.668     */669    function dumpMappings(mappings: SegmentMapping[]) {670      mappings.forEach(map => {671        // tslint:disable-next-line:no-console672        console.log(673            padValue(map.sourceUrl, 20, 0) + ' : ' + padValue(inspect(map.source), 100, 23) +674            ' : ' + inspect(map.generated));675      });676      function padValue(value: string, max: number, start: number) {677        const padding = value.length > max ? ('\n' +678                                              ' '.repeat(max + start)) :679                                             ' '.repeat(max - value.length);680        return value + padding;681      }682    }683    function expectMapping(mappings: SegmentMapping[], expected: SegmentMapping): void {684      if (mappings.some(685              m => m.generated === expected.generated && m.source === expected.source &&686                  m.sourceUrl === expected.sourceUrl)) {687        return;688      }689      const matchingGenerated = mappings.filter(m => m.generated === expected.generated);690      const matchingSource = mappings.filter(m => m.source === expected.source);691      const message = [692        'Expected mappings to contain the following mapping',693        prettyPrintMapping(expected),694      ];695      if (matchingGenerated.length > 0) {696        message.push('');697        message.push('There are the following mappings that match the generated text:');698        matchingGenerated.forEach(m => message.push(prettyPrintMapping(m)));699      }700      if (matchingSource.length > 0) {701        message.push('');702        message.push('There are the following mappings that match the source text:');703        matchingSource.forEach(m => message.push(prettyPrintMapping(m)));704      }705      fail(message.join('\n'));706    }707    function prettyPrintMapping(mapping: SegmentMapping): string {708      return [709        '{',710        `  generated: ${JSON.stringify(mapping.generated)}`,711        `  source:    ${JSON.stringify(mapping.source)}`,712        `  sourceUrl: ${JSON.stringify(mapping.sourceUrl)}`,713        '}',714      ].join('\n');715    }716  });...

Using AI Code Generation

1var wpt = require('webpagetest');2var wpt = new WebPageTest('www.webpagetest.org');3wpt.runTest(url, function(err, data) {4    if (err) return console.error(err);5    wpt.getTestResults(data.data.testId, function(err, data) {6        if (err) return console.error(err);7        console.log(data);8    });9});

Using AI Code Generation

1var wpt = require('webpagetest');2var client = wpt('www.webpagetest.org');3var options = {4};5var testId;6client.runTest(url, options, function(err, data) {7    if (err) {8        console.log(err);9    } else {10        console.log(data);11        testId = data.data.testId;12        client.getTestStatus(testId, function(err, data) {13            if (err) {14                console.log(err);15            } else {16                console.log(data);17                client.getTestResults(testId, function(err, data) {18                    if (err) {19                        console.log(err);20                    } else {21                        console.log(data);22                    }23                });24            }25        });26    }27});

Using AI Code Generation

1var webPage = require('webpage');2var page = webPage.create();3page.open(url, function(status) {4    if (status === 'success') {5        console.log(page.sourceUrl);6        phantom.exit();7    }8});9var webPage = require('webpage');10var page = webPage.create();11page.open(url, function(status) {12    if (status === 'success') {13        console.log(page.url);14        phantom.exit();15    }16});

Using AI Code Generation

1var webPage = require('webpage');2var page = webPage.create();3  console.log("Status: " + status);4  if(status === "success") {5    page.sourceUrl(function(source) {6      console.log(source);7      phantom.exit();8    });9  }10});

Using AI Code Generation

1var wpt = require('webpagetest');2var options = {3 lighthouseConfig: {4 settings: {5 },6 },

Using AI Code Generation

1var wpt = require('webpagetest');2var options = {3};4var webpagetest = wpt(options);5  videoParams: {6  }7}, function(err, data) {8  if (err) return console.error(err);9  console.log(data);10  webpagetest.getVideo(data.data.testId, 'video_1', function(err, video) {11    if (err) return console.error(err);12    console.log(video);13  });14});15var wpt = require('webpagetest');16var options = {17};18var webpagetest = wpt(options);19  videoParams: {20  }21}, function(err, data) {22  if (err) return console.error(err);23  console.log(data);24  webpagetest.getTestResults(data.data.testId, function(err, testResults) {

Using AI Code Generation

1var fs = require('fs');2var wpt = new WPT('A.2f7f7c8b8a2d2c13f1d9c9b9f8b0d7e9');3var options = {4};5wpt.runTest(url, options, function(err, data) {6    if (err) return console.log(err);7    console.log(data);8    wpt.getTestResults(data.data.testId, function(err, data) {9        if (err) return console.log(err);10        console.log(data);11    });12});13var options = {14    source: fs.createReadStream('/Users/rahul/Documents/Dev/NodeJs/NodeJs-WebPageTest/test.js')15};16wpt.runTest(url, options, function(err, data) {17    if (err) return console.log(err);18    console.log(data);19    wpt.getTestResults(data.data.testId, function(err, data) {20        if (err) return console.log(err);21        console.log(data);22    });23});

Using AI Code Generation

1var wpt = require('webpagetest');2var options = {3};4var webpagetest = new wpt('www.webpagetest.org', options);5webpagetest.runTest(testUrl, function(err, data) {6  if (err) return console.error(err);7  console.log('Test Results: %j', data);8var wpt = new WPT('A.2f7f7c8b8a2d2c13f1d9c9b9f8b0d7e9');9var options = {10};11wpt.runTest(url, options, function(err, data) {12    if (err) return console.log(err);13    console.log(data);14    wpt.getTestResults(data.data.testId, function(err, data) {15        if (err) return console.log(err);16        console.log(data);17    });18});19var options = {20    source: fs.createReadStream('/Users/rahul/Documents/Dev/NodeJs/NodeJs-WebPageTest/test.js')21};22wpt.runTest(url, options, function(err, data) {23    if (err) return console.log(err);24    console.log(data);25    wpt.getTestResults(data.data.testId, function(err, data) {26        if (err) return console.log(err);27        console.log(data);28    });29});

Using AI Code Generation

1var wpt = require('webpagetest');2var options = {3};4var webpagetest = new wpt('www.webpagetest.org', options);5webpagetest.runTest(testUrl, function(err, data) {6  if (err) return console.error(err);7  console.log('Test Results: %j', data);

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.