KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta Join TestMu Conference

How to use mockDirective method in ng-mocks

Best JavaScript code snippet using ng-mocks

directives.js

Source:directives.js

2    var nextTick = require('vue/src/utils').nextTick,3        VM = require('vue/src/viewmodel')4    5    describe('attr', function () {6        var dir = mockDirective('attr', 'input'),7            el = dir.el8        it('should set a truthy attribute value', function () {9            var value = 'Arrrrrr!'10            dir.arg = 'value'11            dir.update(value)12            assert.strictEqual(el.getAttribute('value'), value)13        })14        it('should set attribute value to `0`', function () {15            dir.arg = 'value'16            dir.update(0)17            assert.strictEqual(el.getAttribute('value'), '0')18        })19        it('should remove an attribute if value is `false`', function () {20            dir.arg = 'disabled'21            el.setAttribute('disabled', 'disabled')22            dir.update(false)23            assert.strictEqual(el.getAttribute('disabled'), null)24        })25        it('should remove an attribute if value is `null`', function () {26            dir.arg = 'disabled'27            el.setAttribute('disabled', 'disabled')28            dir.update(null)29            assert.strictEqual(el.getAttribute('disabled'), null)30        })31        it('should remove an attribute if value is `undefined`', function () {32            dir.arg = 'disabled'33            el.setAttribute('disabled', 'disabled')34            dir.update(undefined)35            assert.strictEqual(el.getAttribute('disabled'), null)36        })37    })38    describe('text', function () {39        var dir = mockDirective('text')40        dir.bind()41        it('should work with a string', function () {42            dir.update('hallo')43            assert.strictEqual(dir.el.textContent, 'hallo')44        })45        it('should work with a number', function () {46            dir.update(12345)47            assert.strictEqual(dir.el.textContent, '12345')48        })49        it('should work with booleans', function () {50            dir.update(true)51            assert.strictEqual(dir.el.textContent, 'true')52        })53        it('should work with objects', function () {54            dir.update({foo:"bar"})55            assert.strictEqual(dir.el.textContent, '{"foo":"bar"}')56        })57        it('should be empty with null & undefined', function () {58            dir.update(null)59            assert.strictEqual(dir.el.textContent, '')60            dir.update(undefined)61            assert.strictEqual(dir.el.textContent, '')62        })63    })64    describe('html', function () {65        66        var dir = mockDirective('html')67        it('should work with a string', function () {68            dir.update('hi!!!')69            assert.strictEqual(dir.el.innerHTML, 'hi!!!')70            dir.update('<span>haha</span><a>lol</a>')71            assert.strictEqual(dir.el.querySelector('span').textContent, 'haha')72        })73        it('should work with a number', function () {74            dir.update(12345)75            assert.strictEqual(dir.el.innerHTML, '12345')76        })77        it('should work with booleans', function () {78            dir.update(true)79            assert.strictEqual(dir.el.textContent, 'true')80        })81        it('should work with objects', function () {82            dir.update({foo:"bar"})83            assert.strictEqual(dir.el.textContent, '{"foo":"bar"}')84        })85        it('should be empty with with null & undefined', function () {86            dir.update(null)87            assert.strictEqual(dir.el.innerHTML, '')88            dir.update(undefined)89            assert.strictEqual(dir.el.innerHTML, '')90        })91        it('should swap html if el is a comment placeholder', function () {92            var dir = mockDirective('html'),93                comment = document.createComment('hi'),94                parent = dir.el95            parent.innerHTML = 'what!'96            parent.appendChild(comment)97            dir.el = comment98            dir.bind()99            assert.ok(dir.nodes)100            var pre = 'what!',101                after = '<!--hi-->',102                h1 = '<span>hello</span><span>world</span>',103                h2 = '<a>whats</a><a>up</a>'104            dir.update(h1)105            assert.strictEqual(parent.innerHTML, pre + h1 + after)106            dir.update(h2)107            assert.strictEqual(parent.innerHTML, pre + h2 + after)108        })109    })110    describe('show', function () {111        112        var dir = mockDirective('show')113        it('should be default value when value is truthy', function () {114            dir.update(1)115            assert.strictEqual(dir.el.style.display, '')116            dir.update('hi!')117            assert.strictEqual(dir.el.style.display, '')118            dir.update(true)119            assert.strictEqual(dir.el.style.display, '')120            dir.update({})121            assert.strictEqual(dir.el.style.display, '')122            dir.update(function () {})123            assert.strictEqual(dir.el.style.display, '')124        })125        it('should be none when value is falsy', function () {126            dir.update(0)127            assert.strictEqual(dir.el.style.display, 'none')128            dir.update('')129            assert.strictEqual(dir.el.style.display, 'none')130            dir.update(false)131            assert.strictEqual(dir.el.style.display, 'none')132            dir.update(null)133            assert.strictEqual(dir.el.style.display, 'none')134            dir.update(undefined)135            assert.strictEqual(dir.el.style.display, 'none')136        })137    })138    describe('class', function () {139        function contains (el, cls) {140            var cur = ' ' + el.className + ' '141            return cur.indexOf(' ' + cls + ' ') > -1142        }143        it('should set class to the value if it has no arg', function () {144            var dir = mockDirective('class')145            dir.update('test')146            assert.ok(contains(dir.el, 'test'))147            dir.update('hoho')148            assert.ok(!contains(dir.el, 'test'))149            assert.ok(contains(dir.el, 'hoho'))150        })151        it('should add/remove class based on truthy/falsy if it has an arg', function () {152            var dir = mockDirective('class')153            dir.arg = 'test'154            dir.update(true)155            assert.ok(contains(dir.el, 'test'))156            dir.update(false)157            assert.ok(!contains(dir.el, 'test'))158        })159    })160    describe('model', function () {161        describe('input[checkbox]', function () {162            var dir = mockDirective('model', 'input', 'checkbox')163            dir.bind()164            before(function () {165                document.body.appendChild(dir.el)166            })167            it('should set checked on update()', function () {168                dir.update(true)169                assert.ok(dir.el.checked)170                dir.update(false)171                assert.ok(!dir.el.checked)172            })173            it('should trigger vm.$set when clicked', function () {174                var triggered = false175                dir.key = 'foo'176                dir.ownerVM = { $set: function (key, val) {177                    assert.strictEqual(key, 'foo')178                    assert.strictEqual(val, true)179                    triggered = true180                }}181                dir.el.dispatchEvent(mockMouseEvent('click'))182                assert.ok(triggered)183            })184            it('should remove event listener with unbind()', function () {185                var removed = true186                dir.ownerVM = {187                    $set: function () {188                       removed = false189                    }190                }191                dir.unbind()192                dir.el.dispatchEvent(mockMouseEvent('click'))193                assert.ok(removed)194            })195            after(function () {196                document.body.removeChild(dir.el)197            })198        })199        describe('input[radio]', function () {200            201            var dir1 = mockDirective('model', 'input', 'radio'),202                dir2 = mockDirective('model', 'input', 'radio')203            dir1.el.name = 'input-radio'204            dir2.el.name = 'input-radio'205            dir1.el.value = '12345'206            dir2.el.value = '54321'207            dir1.bind()208            dir2.bind()209            before(function () {210                document.body.appendChild(dir1.el)211                document.body.appendChild(dir2.el)212            })213            it('should set el.checked on update()', function () {214                assert.notOk(dir1.el.checked)215                dir1.update(12345)216                assert.ok(dir1.el.checked)217            })218            it('should trigger vm.$set when clicked', function () {219                var triggered = false220                dir2.key = 'radio'221                dir2.ownerVM = { $set: function (key, val) {222                    triggered = true223                    assert.strictEqual(key, 'radio')224                    assert.strictEqual(val, dir2.el.value)225                }}226                dir2.el.dispatchEvent(mockMouseEvent('click'))227                assert.ok(triggered)228                assert.ok(dir2.el.checked)229                assert.notOk(dir1.el.checked)230            })231            it('should remove listeners on unbind()', function () {232                var removed = true233                dir1.ownerVM = { $set: function () {234                    removed = false235                }}236                dir1.unbind()237                dir1.el.dispatchEvent(mockMouseEvent('click'))238                assert.ok(removed)239            })240            after(function () {241                document.body.removeChild(dir1.el)242                document.body.removeChild(dir2.el)243            })244        })245        describe('select', function () {246            247            var dir = mockDirective('model', 'select'),248                o1 = document.createElement('option'),249                o2 = document.createElement('option')250            o1.value = 0251            o2.value = 1252            dir.el.appendChild(o1)253            dir.el.appendChild(o2)254            dir.bind()255            before(function () {256                document.body.appendChild(dir.el)257            })258            it('should set value on update()', function () {259                dir.update(0)260                assert.strictEqual(dir.el.value, '0')261            })262            it('should trigger vm.$set when value is changed', function () {263                var triggered = false264                dir.key = 'select'265                dir.ownerVM = { $set: function (key, val) {266                    triggered = true267                    assert.strictEqual(key, 'select')268                    assert.equal(val, 1)269                }}270                dir.el.options.selectedIndex = 1271                dir.el.dispatchEvent(mockHTMLEvent('change'))272                assert.ok(triggered)273            })274            it('should remove listener on unbind()', function () {275                var removed = true276                dir.ownerVM = { $set: function () {277                    removed = false278                }}279                dir.unbind()280                dir.el.dispatchEvent(mockHTMLEvent('change'))281                assert.ok(removed)282            })283            after(function () {284                document.body.removeChild(dir.el)285            })286        })287        288        describe('input[text] and others', function () {289            290            var dir = mockDirective('model', 'input', 'text')291            dir.bind()292            293            before(function () {294                document.body.appendChild(dir.el)295            })296            it('should set the value on update()', function () {297                dir.update('foobar')298                assert.strictEqual(dir.el.value, 'foobar')299            })300            // `lazy` option is tested in the API suite301            it('should trigger vm.$set when value is changed via input', function () {302                var triggered = false303                dir.key = 'foo'304                dir.ownerVM = { $set: function (key, val) {305                    assert.ok(dir.lock, 'the directive should be locked if it has no filters')306                    assert.strictEqual(key, 'foo')307                    assert.strictEqual(val, 'bar')308                    triggered = true309                }}310                dir.el.value = 'bar'311                dir.el.dispatchEvent(mockHTMLEvent('input'))312                assert.ok(triggered)313            })314            it('should remove event listener with unbind()', function () {315                var removed = true316                dir.ownerVM = {317                    $set: function () {318                        removed = false319                    }320                }321                dir.unbind()322                dir.el.dispatchEvent(mockHTMLEvent('input'))323                assert.ok(removed)324            })325            it('should not lock during vm.$set if it has filters', function (done) {326                var triggered = false327                var dir = mockDirective('model', 'input', 'text')328                dir.filters = []329                dir.bind()330                dir.ownerVM = {$set:function () {331                    assert.notOk(dir.lock)332                    triggered = true333                }}334                dir.el.value = 'foo'335                document.body.appendChild(dir.el)336                dir.el.dispatchEvent(mockHTMLEvent('input'))337                // timeout becuase the update is async338                setTimeout(function () {339                    assert.ok(triggered)340                    document.body.removeChild(dir.el)341                    done()342                }, 1)343            })344            after(function () {345                document.body.removeChild(dir.el)346            })347        })348    })349    describe('on', function () {350        351        var dir = mockDirective('on')352        dir.arg = 'click'353        dir.bind()354        before(function () {355            document.body.appendChild(dir.el)356        })357        it('should set the handler to be triggered by arg through update()', function () {358            var triggered = false359            dir.update(function () {360                triggered = true361            })362            dir.el.dispatchEvent(mockMouseEvent('click'))363            assert.ok(triggered)364        })365        it('should remove previous handler when update() a new handler', function () {366            var triggered1 = false,367                triggered2 = false368            dir.update(function () {369                triggered1 = true370            })371            dir.update(function () {372                triggered2 = true373            })374            dir.el.dispatchEvent(mockMouseEvent('click'))375            assert.notOk(triggered1)376            assert.ok(triggered2)377        })378        it('should wrap the handler to supply expected args', function () {379            var vm = dir.binding.compiler.vm, // owner VM380                e  = mockMouseEvent('click'), // original event381                triggered = false382            dir.update(function (ev) {383                assert.strictEqual(this, vm, 'handler should be called on owner VM')384                assert.strictEqual(ev, e, 'event should be passed in')385                assert.strictEqual(ev.targetVM, dir.vm)386                triggered = true387            })388            dir.el.dispatchEvent(e)389            assert.ok(triggered)390        })391        it('should remove the handler in unbind()', function () {392            var triggered = false393            dir.update(function () {394                triggered = true395            })396            dir.unbind()397            dir.el.dispatchEvent(mockMouseEvent('click'))398            assert.notOk(triggered)399        })400        after(function () {401            document.body.removeChild(dir.el)402        })403    })404    describe('pre', function () {405        406        it('should skip compilation', function () {407            var testId = 'pre-test'408            mock(testId, '<span v-pre><strong>{{lol}}</strong><a v-text="hi"></a></span>')409            var t = new Vue({410                el: '#' + testId,411                data: {412                    lol: 'heyhey',413                    hi: 'hohoho'414                }415            })416            assert.strictEqual(t.$el.querySelector('strong').textContent, '{{lol}}')417            assert.strictEqual(t.$el.querySelector('a').textContent, '')418            assert.ok(t.$el.querySelector('a').hasAttribute('v-text'))419        })420    })421    describe('component', function () {422        423        it('should create a child viewmodel with given constructor', function () {424            var testId = 'component-test'425            mock(testId, '<div v-component="' + testId + '"></div>')426            var t = new Vue({427                el: '#' + testId,428                data: {429                    msg: '123'430                },431                components: {432                    'component-test': {433                        template: '<span>{{msg}}</span>'434                    }435                }436            })437            assert.strictEqual(t.$el.querySelector('span').textContent, '123')438        })439    })440    describe('with', function () {441        442        it('should create a child viewmodel with given data', function () {443            var testId = 'with-test'444            mock(testId, '<span v-component v-with="test">{{msg}}</span>')445            var t = new Vue({446                el: '#' + testId,447                data: {448                    test: {449                        msg: testId450                    }451                }452            })453            assert.strictEqual(t.$el.querySelector('span').textContent, testId)454        })455        it('should accept args and sync parent and child', function (done) {456            var t = new Vue({457                template:458                    '<span>{{test.msg}} {{n}}</span>'459                    + '<p v-component v-with="childMsg:test.msg, n:n" v-ref="child">{{childMsg}} {{n}}</p>',460                data: {461                    n: 1,462                    test: {463                        msg: 'haha!'464                    }465                }466            })467            nextTick(function () {468                assert.strictEqual(t.$el.querySelector('span').textContent, 'haha! 1')469                assert.strictEqual(t.$el.querySelector('p').textContent, 'haha! 1')470                testParentToChild()471            })472            473            function testParentToChild () {474                // test sync from parent to child475                t.test = { msg: 'hehe!' }476                nextTick(function () {477                    assert.strictEqual(t.$el.querySelector('p').textContent, 'hehe! 1')478                    testChildToParent()479                })480            }481            482            function testChildToParent () {483                // test sync back484                t.$.child.childMsg = 'hoho!'485                t.$.child.n = 2486                assert.strictEqual(t.test.msg, 'hoho!')487                assert.strictEqual(t.n, 2)488                nextTick(function () {489                    assert.strictEqual(t.$el.querySelector('span').textContent, 'hoho! 2')490                    assert.strictEqual(t.$el.querySelector('p').textContent, 'hoho! 2')491                    done()492                })493            }494        })495    })496    describe('ref', function () {497        var t498        499        it('should register a VM isntance on its parent\'s $', function () {500            var called = false501            var Child = Vue.extend({502                methods: {503                    test: function () {504                        called = true505                    }506                }507            })508            t = new Vue({509                template: '<div v-component="child" v-ref="hihi"></div>',510                components: {511                    child: Child512                }513            })514            assert.ok(t.$.hihi instanceof Child)515            t.$.hihi.test()516            assert.ok(called)517        })518        it('should remove the reference if child is destroyed', function () {519            t.$.hihi.$destroy()520            assert.notOk('hihi' in t.$)521        })522        it('should register an Array of VMs with v-repeat', function () {523            t = new Vue({524                template: '<p v-repeat="list" v-ref="list"></p>',525                data: { list: [{a:1}, {a:2}, {a:3}] }526            })527            assert.equal(t.$.list.length, 3)528            assert.ok(t.$.list[0] instanceof Vue)529            assert.equal(t.$.list[1].a, 2)530        })531        it('should work with interpolation', function () {532            t = new Vue({533                template: '<div v-component v-with="obj" v-ref="{{ok ? \'a\' : \'b\'}}"></div>',534                data: { obj: { a: 123 } }535            })536            assert.equal(t.$.b.a, 123)537        })538    })539    describe('partial', function () {540        541        it('should replace the node\'s content', function () {542            var t = new Vue({543                template: '<div v-partial="test"></div>',544                partials: {545                    test: '<a>ahahaha!</a>'546                }547            })548            assert.strictEqual(t.$el.innerHTML, '<div><a>ahahaha!</a></div>')549        })550        it('should work with interpolation', function () {551            var t = new Vue({552                template: '<div v-partial="{{ ready ? \'a\' : \'b\'}}"></div>',553                partials: {554                    a: 'A',555                    b: 'B'556                },557                data: {558                    ready: true559                }560            })561            assert.strictEqual(t.$el.innerHTML, '<div>A</div>')562        })563    })564    describe('style', function () {565        566        it('should apply a normal style', function () {567            var d = mockDirective('style')568            d.arg = 'text-align'569            d.bind()570            assert.strictEqual(d.prop, 'text-align')571            d.update('center')572            assert.strictEqual(d.el.style.textAlign, 'center')573        })574        it('should apply style with !important priority', function () {575            var d = mockDirective('style')576            d.arg = 'font-size'577            d.bind()578            d.update('100px !important')579            assert.strictEqual(d.el.style.getPropertyPriority('font-size'), 'important')580        })581        it('should auto prefix styles', function () {582            var d = mockDirective('style')583            d.arg = '$transform'584            d.bind()585            assert.ok(d.prefixed)586            assert.strictEqual(d.prop, 'transform')587            // mock the el's CSSStyleDeclaration object588            // so we can test setProperty calls589            var results = []590            d.el = {591                style: {592                    setProperty: function (prop, value) {593                        results.push({594                            prop: prop,595                            value: value596                        })597                    }598                }599            }600            var val = 'scale(2)'601            d.update(val)602            assert.strictEqual(results.length, 4)603            assert.strictEqual(results[0].prop, 'transform')604            assert.strictEqual(results[1].prop, '-ms-transform')605            assert.strictEqual(results[2].prop, '-moz-transform')606            assert.strictEqual(results[3].prop, '-webkit-transform')607            assert.strictEqual(results[0].value, val)608            assert.strictEqual(results[1].value, val)609            assert.strictEqual(results[2].value, val)610            assert.strictEqual(results[3].value, val)611        })612        it('should set cssText if no arg', function () {613            var d = mockDirective('style')614            d.bind()615            var val = 'color:#fff'616            d.update(val)617            assert.strictEqual(d.el.style.color, 'rgb(255, 255, 255)')618        })619        it('should work with numbers', function () {620            var d = mockDirective('style')621            d.arg = 'line-height'622            d.bind()623            d.update(0)624            assert.strictEqual(d.el.style.lineHeight, '0')625        })626    })627    describe('cloak', function () {628        629        it('should remove itself after the instance is ready', function () {630            // it doesn't make sense to test with a mock for this one, so...631            var v = new Vue({632                template: '<div v-cloak></div>',633                replace: true,634                ready: function () {...

dynamic-directives.directive.spec.ts

Source:dynamic-directives.directive.spec.ts

1/* eslint-disable @typescript-eslint/dot-notation */2/* eslint-disable @angular-eslint/directive-selector */3import { CommonModule, NgClass } from '@angular/common';4import {5  AfterContentChecked,6  AfterContentInit,7  AfterViewChecked,8  AfterViewInit,9  ChangeDetectorRef,10  Directive,11  ElementRef,12  Input,13  OnChanges,14  OnDestroy,15  OnInit,16  Output,17  SimpleChange,18  ViewContainerRef19} from '@angular/core';20import { ComponentFixture, TestBed } from '@angular/core/testing';21import { By } from '@angular/platform-browser';22import { Subject } from 'rxjs';23import {24  ComponentInjectorComponent,25  InjectedComponent,26  MockedInjectedComponent,27  TestComponent,28  TestModule29} from '../../test';30import {31  ComponentOutletInjectorDirective,32  DynamicComponentInjectorToken33} from '../component-injector';34import { IoFactoryService } from '../io';35import { WindowRefService, WindowRefToken } from '../window-ref';36import {37  DirectiveRef,38  DynamicDirectiveDef,39  dynamicDirectiveDef,40  DynamicDirectivesDirective41} from './dynamic-directives.directive';42@Directive({ selector: 'mock' })43class MockDirective44  implements45    OnInit,46    OnDestroy,47    OnChanges,48    AfterViewInit,49    AfterViewChecked,50    AfterContentInit,51    AfterContentChecked52{53  static INSTANCES = new Set<MockDirective>();54  @Input()55  set in(val: any) {56    this.logHook('inputSet:' + val)();57    this._in = val;58  }59  get in(): any {60    return this._in;61  }62  // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle, id-blacklist, id-match63  private _in: any;64  @Input()65  in2: any;66  @Output()67  out = new Subject<any>();68  @Output()69  out2 = new Subject<any>();70  ngAfterContentChecked = jest71    .fn()72    .mockImplementation(this.logHook('ngAfterContentChecked'));73  ngAfterContentInit = jest74    .fn()75    .mockImplementation(this.logHook('ngAfterContentInit'));76  ngAfterViewChecked = jest77    .fn()78    .mockImplementation(this.logHook('ngAfterViewChecked'));79  ngAfterViewInit = jest80    .fn()81    .mockImplementation(this.logHook('ngAfterViewInit'));82  ngOnChanges = jest.fn().mockImplementation(this.logHook('ngOnChanges'));83  ngOnInit = jest.fn().mockImplementation(this.logHook('ngOnInit'));84  ngDoCheck = jest.fn().mockImplementation(this.logHook('ngDoCheck'));85  ngOnDestroy = jest.fn().mockImplementation(() => {86    this.hooksOrder.push('ngOnDestroy');87    MockDirective.INSTANCES.delete(this);88  });89  hooksOrder = [];90  constructor() {91    MockDirective.INSTANCES.add(this);92  }93  private logHook(name: string) {94    return () => this.hooksOrder.push(name);95  }96}97@Directive({ selector: 'mock2' })98class Mock2Directive extends MockDirective {}99describe('Directive: DynamicDirectives', () => {100  beforeEach(() => {101    MockDirective.INSTANCES.clear();102    TestBed.configureTestingModule({103      imports: [TestModule],104      declarations: [105        DynamicDirectivesDirective,106        TestComponent,107        ComponentInjectorComponent,108        ComponentOutletInjectorDirective109      ],110      providers: [111        {112          provide: DynamicComponentInjectorToken,113          useExisting: ComponentInjectorComponent114        },115        { provide: WindowRefToken, useValue: window },116        WindowRefService,117        IoFactoryService118      ]119    });120  });121  describe('directives', () => {122    let fixture: ComponentFixture<TestComponent>;123    let hostComp: { dirs: DynamicDirectiveDef<any>[] };124    beforeEach(() => {125      const template = `<component-injector><div [ndcDynamicDirectives]="dirs"></div></component-injector>`;126      TestBed.overrideComponent(TestComponent, { set: { template } });127      fixture = TestBed.createComponent(TestComponent);128      hostComp = fixture.componentInstance as any;129    });130    it('should init directives', () => {131      hostComp.dirs = [132        dynamicDirectiveDef(MockDirective),133        dynamicDirectiveDef(Mock2Directive)134      ];135      expect(MockDirective.INSTANCES.size).toBe(0);136      fixture.detectChanges();137      expect(MockDirective.INSTANCES.size).toBe(2);138    });139    it('should destroy all directives', () => {140      hostComp.dirs = [141        dynamicDirectiveDef(MockDirective),142        dynamicDirectiveDef(Mock2Directive)143      ];144      fixture.detectChanges();145      expect(MockDirective.INSTANCES.size).toBeGreaterThan(0);146      fixture.destroy();147      expect(MockDirective.INSTANCES.size).toBe(0);148    });149    it('should call static life-cycle hooks in order', () => {150      hostComp.dirs = [dynamicDirectiveDef(MockDirective)];151      fixture.detectChanges();152      const dir = getFirstDir();153      expect(dir.ngOnInit).toHaveBeenCalledTimes(1);154      expect(dir.ngAfterContentInit).toHaveBeenCalledTimes(1);155      expect(dir.ngAfterContentChecked).toHaveBeenCalledTimes(1);156      expect(dir.ngAfterViewInit).toHaveBeenCalledTimes(1);157      expect(dir.ngAfterViewChecked).toHaveBeenCalledTimes(1);158      // Verify order159      expect(dir.hooksOrder).toEqual([160        'ngOnInit',161        'ngDoCheck',162        'ngAfterContentInit',163        'ngAfterContentChecked',164        'ngAfterViewInit',165        'ngAfterViewChecked'166      ]);167    });168    it('should set inputs before ngOnInit hook called', () => {169      hostComp.dirs = [dynamicDirectiveDef(MockDirective, { in: true })];170      fixture.detectChanges();171      const dir = getFirstDir();172      expect(dir.hooksOrder[0]).toBe('inputSet:true');173      expect(dir.hooksOrder[1]).toBe('ngOnChanges');174      expect(dir.hooksOrder[2]).toBe('ngOnInit');175    });176    it('should not init directives of same type', () => {177      hostComp.dirs = [178        dynamicDirectiveDef(MockDirective),179        dynamicDirectiveDef(MockDirective),180        dynamicDirectiveDef(MockDirective)181      ];182      fixture.detectChanges();183      expect(MockDirective.INSTANCES.size).toBe(1);184    });185    it('should init added directive', () => {186      hostComp.dirs = [dynamicDirectiveDef(MockDirective)];187      fixture.detectChanges();188      expect(MockDirective.INSTANCES.size).toBe(1);189      hostComp.dirs = [190        dynamicDirectiveDef(MockDirective),191        dynamicDirectiveDef(Mock2Directive)192      ];193      fixture.detectChanges();194      expect(MockDirective.INSTANCES.size).toBe(2);195    });196    it('should init pushed directive', () => {197      const dirs = [dynamicDirectiveDef(MockDirective)];198      hostComp.dirs = dirs;199      fixture.detectChanges();200      expect(MockDirective.INSTANCES.size).toBe(1);201      dirs.push(dynamicDirectiveDef(Mock2Directive));202      fixture.detectChanges();203      expect(MockDirective.INSTANCES.size).toBe(2);204    });205    it('should destroy removed directive', () => {206      hostComp.dirs = [207        dynamicDirectiveDef(MockDirective),208        dynamicDirectiveDef(Mock2Directive)209      ];210      fixture.detectChanges();211      expect(MockDirective.INSTANCES.size).toBe(2);212      hostComp.dirs = [dynamicDirectiveDef(MockDirective)];213      fixture.detectChanges();214      expect(MockDirective.INSTANCES.size).toBe(1);215    });216    it('should not do anything when no component', () => {217      hostComp.dirs = [dynamicDirectiveDef(MockDirective)];218      const compInjectorElem = fixture.debugElement.query(219        By.directive(ComponentInjectorComponent)220      );221      expect(compInjectorElem).toBeTruthy();222      const compInjector =223        compInjectorElem.componentInstance as ComponentInjectorComponent;224      compInjector.component = null;225      fixture.detectChanges();226      expect(MockDirective.INSTANCES.size).toBe(0);227    });228    it('should destroy directives when component unset', () => {229      const compInjectorElem = fixture.debugElement.query(230        By.directive(ComponentInjectorComponent)231      );232      expect(compInjectorElem).toBeTruthy();233      const compInjector =234        compInjectorElem.componentInstance as ComponentInjectorComponent;235      hostComp.dirs = [dynamicDirectiveDef(MockDirective)];236      fixture.detectChanges();237      expect(MockDirective.INSTANCES.size).toBe(1);238      const dir = getFirstDir();239      expect(dir).toEqual(expect.any(MockDirective));240      compInjector.component = null;241      fixture.detectChanges();242      expect(MockDirective.INSTANCES.size).toBe(0);243      expect(dir.ngOnDestroy).toHaveBeenCalled();244    });245    it('should re-create directives when component changed', () => {246      const compInjectorElem = fixture.debugElement.query(247        By.directive(ComponentInjectorComponent)248      );249      expect(compInjectorElem).toBeTruthy();250      const compInjector =251        compInjectorElem.componentInstance as ComponentInjectorComponent;252      hostComp.dirs = [dynamicDirectiveDef(MockDirective)];253      fixture.detectChanges();254      expect(MockDirective.INSTANCES.size).toBe(1);255      const dir = getFirstDir();256      expect(dir).toEqual(expect.any(MockDirective));257      compInjector.component = new MockedInjectedComponent();258      fixture.detectChanges();259      expect(MockDirective.INSTANCES.size).toBe(1);260      expect(dir.ngOnDestroy).toHaveBeenCalled();261      const newDir = getFirstDir();262      expect(newDir).toEqual(expect.any(MockDirective));263      expect(newDir).not.toBe(dir);264    });265  });266  describe('@Output(ndcDynamicDirectivesCreated)', () => {267    let fixture: ComponentFixture<TestComponent>;268    let hostComp: { dirs: DynamicDirectiveDef<any>[]; created: jest.Mock };269    const created = jest.fn();270    beforeEach(() => {271      created.mockReset();272      const template = `<component-injector><div273        [ndcDynamicDirectives]="dirs"274        (ndcDynamicDirectivesCreated)="created($event)"></div></component-injector>`;275      TestBed.overrideComponent(TestComponent, { set: { template } });276      fixture = TestBed.createComponent(TestComponent);277      hostComp = fixture.componentInstance as any;278      hostComp.created = created;279    });280    it('should emit with dynamic directive refs', () => {281      hostComp.dirs = [dynamicDirectiveDef(MockDirective)];282      fixture.detectChanges();283      const dir = getFirstDir();284      expect(dir).toBeTruthy();285      expect(created).toHaveBeenCalledWith([286        expect.objectContaining({287          type: MockDirective,288          instance: dir289        })290      ]);291    });292    it('should emit with only added directive refs', () => {293      const dirs = [dynamicDirectiveDef(MockDirective)];294      hostComp.dirs = dirs;295      fixture.detectChanges();296      created.mockReset();297      dirs.push(dynamicDirectiveDef(Mock2Directive));298      fixture.detectChanges();299      const dir = Array.from(MockDirective.INSTANCES).pop();300      expect(created).toHaveBeenCalledWith([301        expect.objectContaining({302          type: Mock2Directive,303          instance: dir304        })305      ]);306    });307  });308  describe('with `ngComponentOutlet`', () => {309    let fixture: ComponentFixture<TestComponent>;310    const created = jest.fn<MockDirective, any>();311    beforeEach(() => {312      created.mockReset();313      const template = `<ng-container [ngComponentOutlet]="comp"314        [ndcDynamicDirectives]="dirs"315        (ndcDynamicDirectivesCreated)="created($event)"></ng-container>`;316      TestBed.overrideComponent(TestComponent, { set: { template } });317      fixture = TestBed.createComponent(TestComponent);318      fixture.componentInstance['comp'] = InjectedComponent;319      fixture.componentInstance['created'] = created;320    });321    it('should apply directives', () => {322      fixture.componentInstance['dirs'] = [dynamicDirectiveDef(MockDirective)];323      fixture.detectChanges();324      expect(created).toHaveBeenCalled();325      const dir = getCreateDirs(created);326      expect(dir).toBeTruthy();327    });328  });329  describe('with `*ngComponentOutlet`', () => {330    let fixture: ComponentFixture<TestComponent>;331    const created = jest.fn<MockDirective, any>();332    beforeEach(() => {333      created.mockReset();334      const template = `<ng-container *ngComponentOutlet="comp; ndcDynamicDirectives: dirs"></ng-container>`;335      TestBed.overrideComponent(TestComponent, { set: { template } });336      fixture = TestBed.createComponent(TestComponent);337      fixture.componentInstance['comp'] = InjectedComponent;338      fixture.componentInstance['created'] = created;339    });340    it('should apply directives', () => {341      fixture.componentInstance['dirs'] = [dynamicDirectiveDef(MockDirective)];342      fixture.detectChanges();343      // @Output(ndcDynamicDirectivesCreated) cannot be used with `*` syntax!344      expect(MockDirective.INSTANCES.size).toBe(1);345    });346  });347  describe('injector', () => {348    let fixture: ComponentFixture<TestComponent>;349    const created = jest.fn<any, any>();350    beforeEach(() => {351      created.mockReset();352      const template = `<ng-container353        [ngComponentOutlet]="comp"354        [ndcDynamicDirectives]="dirs"355        (ndcDynamicDirectivesCreated)="created($event)"></ng-container>`;356      TestBed.resetTestingModule()357        .configureTestingModule({358          imports: [CommonModule, TestModule],359          declarations: [360            DynamicDirectivesDirective,361            TestComponent,362            ComponentOutletInjectorDirective363          ]364        })365        .overrideComponent(TestComponent, { set: { template } });366      fixture = TestBed.createComponent(TestComponent);367      fixture.componentInstance['comp'] = InjectedComponent;368      fixture.componentInstance['created'] = created;369    });370    it('should be able to inject `ElementRef`', () => {371      @Directive({ selector: 'mock' })372      class TestDirective {373        constructor(public elem: ElementRef) {}374      }375      fixture.componentInstance['dirs'] = [dynamicDirectiveDef(TestDirective)];376      fixture.detectChanges();377      const [{ instance }] = getCreateDirs<TestDirective>(created);378      expect(instance).toBeTruthy();379      expect(instance.elem).toBeInstanceOf(ElementRef);380    });381    it('should be able to inject `ChangeDetectorRef`', () => {382      @Directive({ selector: 'mock' })383      class TestDirective {384        constructor(public cdr: ChangeDetectorRef) {}385      }386      fixture.componentInstance['dirs'] = [dynamicDirectiveDef(TestDirective)];387      fixture.detectChanges();388      const [{ instance }] = getCreateDirs<TestDirective>(created);389      expect(instance).toBeTruthy();390      expect(instance.cdr).toEqual(391        expect.objectContaining(ChangeDetectorRef.prototype)392      );393    });394    it('should be able to inject `ViewContainerRef`', () => {395      @Directive({ selector: 'mock' })396      class TestDirective {397        constructor(public vcr: ViewContainerRef) {}398      }399      fixture.componentInstance['dirs'] = [dynamicDirectiveDef(TestDirective)];400      fixture.detectChanges();401      const [{ instance }] = getCreateDirs<TestDirective>(created);402      expect(instance).toBeTruthy();403      expect(instance.vcr).toEqual(404        expect.objectContaining(ViewContainerRef.prototype)405      );406    });407  });408  describe('directive inputs', () => {409    let fixture: ComponentFixture<TestComponent>;410    const created = jest.fn<MockDirective, any>();411    let hostComp: any;412    beforeEach(() => {413      created.mockReset();414      const template = `<ng-container [ngComponentOutlet]="comp"415        [ndcDynamicDirectives]="dirs"416        (ndcDynamicDirectivesCreated)="created($event)"></ng-container>`;417      TestBed.overrideComponent(TestComponent, { set: { template } });418      fixture = TestBed.createComponent(TestComponent);419      hostComp = fixture.componentInstance;420      hostComp.comp = InjectedComponent;421      hostComp.created = created;422    });423    it('should set inputs on directive instance', () => {424      hostComp.dirs = [425        dynamicDirectiveDef(MockDirective, { in: 'in' }),426        dynamicDirectiveDef(Mock2Directive, { in2: 'in2' })427      ];428      fixture.detectChanges();429      const [dir1, dir2] = getCreateDirs(created);430      expect(dir1.instance.in).toBe('in');431      expect(dir2.instance.in2).toBe('in2');432    });433    it('should call `OnChanges` hook with initial changes', () => {434      hostComp.dirs = [435        dynamicDirectiveDef(MockDirective, { in: 'val' }),436        dynamicDirectiveDef(Mock2Directive, { in2: 'val2' })437      ];438      fixture.detectChanges();439      const [dir1, dir2] = getCreateDirs(created);440      expect(dir1.instance.ngOnChanges).toHaveBeenCalledWith({441        in: new SimpleChange(undefined, 'val', true)442      });443      expect(dir2.instance.ngOnChanges).toHaveBeenCalledWith({444        in2: new SimpleChange(undefined, 'val2', true)445      });446    });447    it('should call `OnChanges` when inputs change', () => {448      const inputs1 = { in: 'val' };449      const inputs2 = { in2: 'val2' };450      hostComp.dirs = [451        dynamicDirectiveDef(MockDirective, inputs1),452        dynamicDirectiveDef(Mock2Directive, inputs2)453      ];454      fixture.detectChanges();455      const [dir1, dir2] = getCreateDirs(created);456      dir1.instance.ngOnChanges.mockReset();457      dir2.instance.ngOnChanges.mockReset();458      inputs1.in = 'new-val';459      fixture.detectChanges();460      expect(dir1.instance.ngOnChanges).toHaveBeenCalledWith({461        in: new SimpleChange('val', 'new-val', false)462      });463      expect(dir2.instance.ngOnChanges).not.toHaveBeenCalled();464      dir1.instance.ngOnChanges.mockReset();465      dir2.instance.ngOnChanges.mockReset();466      inputs2.in2 = 'new-val2';467      fixture.detectChanges();468      expect(dir1.instance.ngOnChanges).not.toHaveBeenCalled();469      expect(dir2.instance.ngOnChanges).toHaveBeenCalledWith({470        in2: new SimpleChange('val2', 'new-val2', false)471      });472    });473    it('should call `OnChanges` when inputs replaced', () => {474      const dirDef1 = dynamicDirectiveDef(MockDirective, { in: 'val' });475      const dirDef2 = dynamicDirectiveDef(Mock2Directive, { in2: 'val2' });476      hostComp.dirs = [dirDef1, dirDef2];477      fixture.detectChanges();478      const [dir1, dir2] = getCreateDirs(created);479      dir1.instance.ngOnChanges.mockReset();480      dir2.instance.ngOnChanges.mockReset();481      dirDef1.inputs = { in: 'new-val' };482      fixture.detectChanges();483      expect(dir1.instance.ngOnChanges).toHaveBeenCalledWith({484        in: new SimpleChange('val', 'new-val', false)485      });486      expect(dir2.instance.ngOnChanges).not.toHaveBeenCalled();487      dir1.instance.ngOnChanges.mockReset();488      dir2.instance.ngOnChanges.mockReset();489      dirDef2.inputs = { in2: 'new-val2' };490      fixture.detectChanges();491      expect(dir1.instance.ngOnChanges).not.toHaveBeenCalled();492      expect(dir2.instance.ngOnChanges).toHaveBeenCalledWith({493        in2: new SimpleChange('val2', 'new-val2', false)494      });495    });496  });497  describe('directive outputs', () => {498    let fixture: ComponentFixture<TestComponent>;499    const created = jest.fn<MockDirective, any>();500    let hostComp: any;501    beforeEach(() => {502      created.mockReset();503      const template = `<ng-container [ngComponentOutlet]="comp"504        [ndcDynamicDirectives]="dirs"505        (ndcDynamicDirectivesCreated)="created($event)"></ng-container>`;506      TestBed.overrideComponent(TestComponent, { set: { template } });507      fixture = TestBed.createComponent(TestComponent);508      hostComp = fixture.componentInstance;509      hostComp.comp = InjectedComponent;510      hostComp.created = created;511    });512    it('should be connected', () => {513      const callback1 = jest.fn();514      const callback2 = jest.fn();515      hostComp.dirs = [516        dynamicDirectiveDef(MockDirective, null, { out: callback1 }),517        dynamicDirectiveDef(Mock2Directive, null, { out: callback2 })518      ];519      fixture.detectChanges();520      const [dir1, dir2] = getCreateDirs(created);521      dir1.instance.out.next('data');522      dir2.instance.out.next('data2');523      expect(callback1).toHaveBeenCalledWith('data');524      expect(callback2).toHaveBeenCalledWith('data2');525    });526    it('should be connected when changed and disconnected from old', () => {527      const callback = jest.fn();528      const outputs = { out: callback };529      hostComp.dirs = [dynamicDirectiveDef(MockDirective, null, outputs)];530      fixture.detectChanges();531      const [{ instance }] = getCreateDirs(created);532      const callback2 = jest.fn();533      outputs.out = callback2;534      fixture.detectChanges();535      instance.out.next('data');536      expect(callback2).toHaveBeenCalledWith('data');537      expect(callback).not.toHaveBeenCalledWith('data');538    });539    it('should disconnect when removed', () => {540      const callback = jest.fn();541      const outputs = { out: callback };542      hostComp.dirs = [dynamicDirectiveDef(MockDirective, null, outputs)];543      fixture.detectChanges();544      const [{ instance }] = getCreateDirs(created);545      outputs.out = undefined;546      fixture.detectChanges();547      instance.out.next('data');548      expect(callback).not.toHaveBeenCalled();549    });550    it('should disconnect when host component destroyed', () => {551      const callback = jest.fn();552      hostComp.dirs = [553        dynamicDirectiveDef(MockDirective, null, { out: callback })554      ];555      fixture.detectChanges();556      const [{ instance }] = getCreateDirs(created);557      fixture.destroy();558      instance.out.next('data');559      expect(callback).not.toHaveBeenCalled();560    });561  });562  describe('example: NgClass', () => {563    type HostComponent = { dirs: DynamicDirectiveDef<any>[]; comp: any };564    let fixture: ComponentFixture<HostComponent>;565    let hostComp: HostComponent;566    beforeEach(() => {567      TestBed.resetTestingModule()568        .configureTestingModule({569          imports: [CommonModule, TestModule],570          declarations: [571            DynamicDirectivesDirective,572            TestComponent,573            ComponentOutletInjectorDirective574          ]575        })576        .overrideTemplate(577          TestComponent,578          `<ng-container *ngComponentOutlet="comp; ndcDynamicDirectives: dirs"></ng-container>`579        );580      fixture = TestBed.createComponent(TestComponent as any);581      hostComp = fixture.componentInstance;582      hostComp.comp = InjectedComponent;583    });584    it('should apply classes', () => {585      hostComp.dirs = [dynamicDirectiveDef(NgClass, { ngClass: 'cls1 cls2' })];586      fixture.detectChanges();587      const injectedComp = fixture.debugElement.query(588        By.directive(InjectedComponent)589      );590      expect(injectedComp).toBeTruthy();591      expect(injectedComp.classes.cls1).toBeTruthy();592      expect(injectedComp.classes.cls2).toBeTruthy();593    });594  });595});596function getFirstDir() {597  return getFirstFrom(MockDirective.INSTANCES);598}599function getFirstFrom<T>(set: Set<T>): T {600  return set.values().next().value;601}602function getCreateDirs<T>(mockFn: jest.Mock<T>): DirectiveRef<T>[] {603  return mockFn.mock.calls[0][0];...

input.directive.spec.ts

Source:input.directive.spec.ts

1import { InputDirective } from './../input.directive';2import { By } from '@angular/platform-browser';3import { Component } from '@angular/core';4import { async, ComponentFixture, TestBed } from '@angular/core/testing';5describe('WrapperComponent', () => {6  @Component({7    selector: 'app-mock-directive',8    template: `<input type="text" appInput />`,9  })10  class MockDirective {}11  let component: MockDirective;12  let fixture: ComponentFixture<MockDirective>;13  beforeEach(async(() => {14    TestBed.configureTestingModule({15      declarations: [MockDirective, InputDirective],16    }).compileComponents();17  }));18  beforeEach(() => {19    fixture = TestBed.createComponent(MockDirective);20    component = fixture.componentInstance;21    fixture.detectChanges();22  });23  it('should add class form-group__input', () => {24    expect(component).toBeDefined();25    const input = fixture.debugElement.query(By.css('.form-group__input'))26      .nativeElement;27    expect(input).toBeDefined();28  });...

Using AI Code Generation

1import { mockDirective } from 'ng-mocks';2import { Directive, Input } from '@angular/core';3@Directive({4})5export class MockDirective {6  @Input() appMockDirective: string;7}8import { mockPipe } from 'ng-mocks';9import { Pipe, PipeTransform } from '@angular/core';10@Pipe({11})12export class MockPipe implements PipeTransform {13  transform(value: any, args?: any): any {14    return value;15  }16}17import { mockComponent } from 'ng-mocks';18import { Component, Input } from '@angular/core';19@Component({20})21export class MockComponent {22  @Input() appMockComponent: string;23}24import { mockProvider } from 'ng-mocks';25import { Injectable } from '@angular/core';26@Injectable()27export class MockProvider {28  mockProviderMethod() {29    return 'mock provider method';30  }31}32import { mockModule } from 'ng-mocks';33import { NgModule } from '@angular/core';34@NgModule({35})36export class MockModule {}37import { mockInstance } from 'ng-mocks';38import { of } from 'rxjs';39import { Injectable } from '@angular/core';40@Injectable()41export class MockInstance {42  mockInstanceMethod() {43    return of('mock instance method');44  }45}46import { mockProvider } from 'ng-mocks';47import { Injectable } from '@angular/core';48@Injectable()49export class MockProvider {50  mockProviderMethod() {51    return 'mock provider method';52  }53}54import { mockModule } from 'ng-mocks';55import { NgModule } from '@angular/core';56@NgModule({57})58export class MockModule {}59import { mockInstance } from 'ng-mocks';60import { of }

Using AI Code Generation

1describe('test', () => {2  beforeEach(async(() => {3    TestBed.configureTestingModule({4      declarations: [TestComponent, mockDirective(MyDirective)],5    }).compileComponents();6  }));7  it('should create', () => {8    const fixture = TestBed.createComponent(TestComponent);9    const component = fixture.componentInstance;10    expect(component).toBeTruthy();11  });12});13describe('test', () => {14  beforeEach(async(() => {15    TestBed.configureTestingModule({16      declarations: [TestComponent, mockDirective(MyDirective)],17    }).compileComponents();18  }));19  it('should create', () => {20    const fixture = TestBed.createComponent(TestComponent);21    const component = fixture.componentInstance;22    expect(component).toBeTruthy();23  });24  it('should have a directive', () => {25    const fixture = TestBed.createComponent(TestComponent);26    const directive = fixture.debugElement.query(By.directive(MyDirective));27    expect(directive).toBeTruthy();28  });29});30describe('test', () => {31  beforeEach(async(() => {32    TestBed.configureTestingModule({33      declarations: [TestComponent, mockDirective(MyDirective)],34    }).compileComponents();35  }));36  it('should create', () => {37    const fixture = TestBed.createComponent(TestComponent);38    const component = fixture.componentInstance;39    expect(component).toBeTruthy();40  });41  it('should have a directive', () => {

Using AI Code Generation

1import { mockDirective } from 'ng-mocks';2import { Directive } from '@angular/core';3import { MatIcon } from '@angular/material/icon';4describe('test', () => {5  it('should mock directive', () => {6    const mock = mockDirective(MatIcon);7    expect(mock).toBeDefined();8  });9});10import { mockDirective } from 'ng-mocks';11import { Directive } from '@angular/core';12import { MatIcon } from '@angular/material/icon';13describe('test', () => {14  it('should mock directive', () => {15    const mock = mockDirective(MatIcon);16    expect(mock).toBeDefined();17  });18});19import { mockDirective } from 'ng-mocks';20describe('test', () => {21  it('should mock directive', () => {22    const mock = mockDirective(MatIcon);23    expect(mock).toBeDefined();24  });25});26import { mockDirective } from 'ng-mocks';27describe('test', () => {28  it('should mock directive', () => {29    const mock = mockDirective(MatIcon);30    expect(mock).toBeDefined();31  });32});33import { mockDirective } from 'ng-mocks';34describe('test', () => {35  it('should mock directive', () => {36    const mock = mockDirective(MatIcon);37    expect(mock).toBeDefined();38  });39});40import { mockDirective } from 'ng-mocks';41describe('test', () => {42  it('should mock directive', () => {43    const mock = mockDirective(MatIcon);44    expect(mock).toBeDefined();45  });46});47import { mockDirective } from 'ng-mocks';48describe('test', () => {49  it('should mock directive', () => {50    const mock = mockDirective(MatIcon);51    expect(mock).toBeDefined();52  });53});54import { mockDirective } from 'ng-mocks';55describe('test', () => {56  it('should mock directive', () => {57    const mock = mockDirective(MatIcon);58    expect(mock).toBeDefined();59  });60});61import { mockDirective } from 'ng-mocks';62describe('test', () => {63  it('should mock directive', () => {64    const mock = mockDirective(MatIcon);65    expect(mock).toBeDefined();66  });67});68import { mockDirective } from 'ng-mocks';69describe('test', () => {70  it('should mock directive', () => {

Using AI Code Generation

1import mockDirective from 'ng-mocks';2describe('test', () => {3  beforeEach(() => {4    mockDirective('directive1');5    mockDirective('directive2');6  });7});8import mockDirective from 'ng-mocks';9describe('directive1', () => {10  beforeEach(() => {11    mockDirective('directive2');12  });13});14import mockDirective from 'ng-mocks';15describe('directive2', () => {16  beforeEach(() => {17    mockDirective('directive1');18  });19});20I have also tried to import ng-mocks in karma.conf.js, but I have got the following error:21preprocessors: {22},23webpack: {24  module: {25      {26          {27            options: {28            }

Using AI Code Generation

1var mock = ngMocks.mockDirective('testDirective', '<div>mocked</div>');2var mock = ngMocks.mockDirective('testDirective', '<div>mocked</div>');3var mock = ngMocks.mockDirective('testDirective', '<div>mocked</div>');4var mock = ngMocks.mockDirective('testDirective', '<div>mocked</div>');5var mock = ngMocks.mockDirective('testDirective', '<div>mocked</div>');6var mock = ngMocks.mockDirective('testDirective', '<div>mocked</div>');7var mock = ngMocks.mockDirective('testDirective', '<div>mocked</div>');8var mock = ngMocks.mockDirective('testDirective', '<div>mocked</div>');9var mock = ngMocks.mockDirective('testDirective', '<div>mocked</div>');

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.