I have an existing Angular/Laravel app in which Laravel acts as an API to the angular frontend serving only JSON data.  The page that loads the angular app, `index.php`, is currently served by Laravel. From there, Angular takes over. 

I&#39;m have a very difficult time trying to get started with Karma/Jasmine.  When running my tests using `karma start` or `karma start karma.conf.js` from the root directory of my project, I get the following error:

`ReferenceError: module is not defined`

Full output:

    INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
    INFO [launcher]: Starting browser Chrome
    WARN [watcher]: Pattern &quot;/Users/raph/coding/webroot/digitalocean/rugapp/public/rugapp/*.js&quot; does not match any file.
    INFO [Chrome 39.0.2171 (Mac OS X 10.9.5)]: Connected on socket 3OCUMp_xhrGtlGHwiosO with id 7897120
    Chrome 39.0.2171 (Mac OS X 10.9.5) hello world encountered a declaration exception FAILED
    	ReferenceError: module is not defined
    	    at Suite.&lt;anonymous&gt; (/Users/raph/coding/webroot/digitalocean/rugapp/tests/js/test.js:3:16)
    	    at jasmineInterface.describe (/Users/raph/coding/webroot/digitalocean/rugapp/node_modules/karma-jasmine/lib/boot.js:59:18)
    	    at /Users/raph/coding/webroot/digitalocean/rugapp/tests/js/test.js:1:1
    Chrome 39.0.2171 (Mac OS X 10.9.5): Executed 2 of 2 (1 FAILED) (0.005 secs / 0.003 secs)

However, the chrome broswer does launch with the following displayed:

![enter image description here][1]

My `karma.conf.js` file is as follows:

    // Karma configuration
    // Generated on Mon Dec 22 2014 18:13:09 GMT-0500 (EST)
    
    module.exports = function(config) {
      config.set({
    
        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: &#39;public/rugapp/&#39;,
    
    
        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: [&#39;jasmine&#39;],
    
    
        // list of files / patterns to load in the browser
        files: [
          &#39;*.html&#39;,
          &#39;**/*.js&#39;,
          &#39;../../tests/js/test.js&#39;,
          &#39;../../tests/js/angular/angular-mocks.js&#39;
        ],
    
    
        // list of files to exclude
        exclude: [
    
        ],
    
    
        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {
        },
    
    
        // test results reporter to use
        // possible values: &#39;dots&#39;, &#39;progress&#39;
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: [&#39;progress&#39;],
    
    
        // web server port
        port: 9876,
    
    
        // enable / disable colors in the output (reporters and logs)
        colors: true,
    
    
        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,
    
    
        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,
    
    
        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: [&#39;Chrome&#39;],
    
    
        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: false
      });
    };



My `package.json` file is shown below:

    {
      &quot;devDependencies&quot;: {
        &quot;gulp&quot;: &quot;^3.8.8&quot;,
        &quot;karma&quot;: &quot;^0.12.28&quot;,
        &quot;karma-chrome-launcher&quot;: &quot;^0.1.7&quot;,
        &quot;karma-jasmine&quot;: &quot;^0.3.2&quot;,
        &quot;laravel-elixir&quot;: &quot;*&quot;
      }
    }


`test.js`

    describe(&quot;hello world&quot;, function() {
        var CreateInvoiceController;
        beforeEach(module(&quot;MobileAngularUiExamples&quot;));
        beforeEach(inject(function($controller) {
            CreateInvoiceController = $controller(&quot;CreateInvoiceController&quot;);
        }));
    
        describe(&quot;CreateInvoiceController&quot;, function() {
            it(&quot;Should say hello&quot;, function() {
                expect(CreateInvoiceController.message).toBe(&quot;Hello&quot;);
            });
        });
    });
    
    describe(&quot;true&quot;, function() {
        it(&quot;Should be true&quot;, function() {
            expect(true).toBeTruthy();
        });
    });

Any help would be *greatly* appreciated.


  [1]: http://i.stack.imgur.com/a1pD5.jpg

ReferenceError: module is not defined - Karma/Jasmine configuration with Angular/Laravel app

I&#39;m testing a component which subscribe router params. Every test pass and everything works fine. But if I look in the console, I can see an error:


&gt; Error during cleanup of component ApplicationViewComponent
&gt; localConsole.(anonymous function) @ context.js:232

Do you know why this occurs?

**I tried removing the `unsubscribe()` from `ngOnDestroy()` method and the error disappears.**

**Is karma/jasmine supporting `unsubscribe()` automatically?**

Here is the component and tests

## Component

    import { Component, OnInit } from &#39;@angular/core&#39;;   
    import { ActivatedRoute } from &#39;@angular/router&#39;;
    import { Subscription } from &#39;rxjs/Rx&#39;
    
    import { AppService } from &#39;app.service&#39;;
    
    @Component({
      selector: &#39;app-component&#39;,
      templateUrl: &#39;./app.component.html&#39;,
      styleUrls: [&#39;./app.component.scss&#39;]
    })
    export class AppComponent implements OnInit {
      private routeSubscription: Subscription;
    
      // Main ID
      public applicationId: string;
     
    
      constructor(
        private route: ActivatedRoute,
    	private _service: AppService
      ) { }
    
      ngOnInit() {
        this.routeSubscription = this.route.params.subscribe(params =&gt; {
          this.applicationId = params[&#39;id&#39;];
    
          this.getDetails();
          this.getList();
        });
      }
    
      getDetails() {
        this._service.getDetails(this.applicationId).subscribe(
          result =&gt; {     
            console.log(result);
          },
          error =&gt; {  
            console.error(error);        
          },
          () =&gt; {
            console.info(&#39;complete&#39;);
          }
        );
      }
    
      getList(notifyWhenComplete = false) {
        this._service.getList(this.applicationId).subscribe(
          result =&gt; {     
            console.log(result);
          },
          error =&gt; {  
            console.error(error);        
          },
          () =&gt; {
            console.info(&#39;complete&#39;);
          }
        );
      }
    
      ngOnDestroy() {
        this.routeSubscription.unsubscribe();
      }
    
    }

## Component spec file

    import { NO_ERRORS_SCHEMA } from &#39;@angular/core&#39;;
    import {
      async,
      fakeAsync,
      ComponentFixture,
      TestBed,
      tick,
      inject
    } from &#39;@angular/core/testing&#39;;
    import {
      RouterTestingModule
    } from &#39;@angular/router/testing&#39;;
    import {
      HttpModule
    } from &#39;@angular/http&#39;;
    import { Observable } from &#39;rxjs/Observable&#39;;
    import { Router, ActivatedRoute } from &#39;@angular/router&#39;;
    
    // Components
    import { AppComponent } from &#39;./app.component&#39;;
    
    // Service
    import { AppService } from &#39;app.service&#39;;
    import { AppServiceStub } from &#39;./app.service.stub&#39;;
    
    let comp:    AppComponent;
    let fixture: ComponentFixture&lt;AppComponent&gt;;
    let service: AppService;
    
    let expectedApplicationId = &#39;abc123&#39;;
    
    describe(&#39;AppComponent&#39;, () =&gt; {
      beforeEach(async(() =&gt; {
        TestBed.configureTestingModule({
          declarations: [AppComponent],
          imports: [RouterTestingModule, HttpModule],
          providers: [
            FormBuilder,
            {
              provide: ActivatedRoute,
              useValue: {
                params:  Observable.of({id: expectedApplicationId})
              }
            },
            {
              provide: AppService,
              useClass: AppServiceStub
            }    
          ],
          schemas: [ NO_ERRORS_SCHEMA ]
        })
        .compileComponents();
      }));
    
      tests();
    });
    
    function tests() {
      beforeEach(() =&gt; {
        fixture = TestBed.createComponent(AppComponent);
        comp = fixture.componentInstance;
    
        service = TestBed.get(AppService);
      });
    
    
      /*
      *   COMPONENT BEFORE INIT
      */
      it(`should be initialized`, () =&gt; {
        expect(fixture).toBeDefined();
        expect(comp).toBeDefined();
      });
    
    
      /*
      *   COMPONENT INIT
      */
    
      it(`should retrieve param id from ActivatedRoute`, async(() =&gt; {
        fixture.detectChanges();
    
        expect(comp.applicationId).toEqual(expectedApplicationId);
      }));
    
      it(`should get the details after ngOnInit`, async(() =&gt; {
        spyOn(comp, &#39;getDetails&#39;);
        fixture.detectChanges();
    	
    	expect(comp.getDetails).toHaveBeenCalled();
      }));
    
      it(`should get the list after ngOnInit`, async(() =&gt; {
        spyOn(comp, &#39;getList&#39;);
        fixture.detectChanges();
    	
    	expect(comp.getList).toHaveBeenCalled();
      }));
    }

### service.stub

    import { Observable } from &#39;rxjs/Observable&#39;;
    
    export class AppServiceStub {
      getList(id: string) {
        return Observable.from([              
    	  {
    		id: &quot;7a0c6610-f59b-4cd7-b649-1ea3cf72347f&quot;,
    		name: &quot;item 1&quot;
    	  },
    	  {
    		id: &quot;f0354c29-810e-43d8-8083-0712d1c412a3&quot;,
    		name: &quot;item 2&quot;
    	  },
    	  {
    		id: &quot;2494f506-009a-4af8-8ca5-f6e6ba1824cb&quot;,
    		name: &quot;item 3&quot;		
    	  }
        ]);
      }
      getDetails(id: string) {
        return Observable.from([      
          {        
            id: id,
            name: &quot;detailed item 1&quot;         
          }
        ]);
      }
    }

Testing Angular component with unsubscribe Error during cleanup of component

I am importing and using `HttpClient` in a service as follows:

```typescript
import { Injectable } from &#39;@angular/core&#39;;
import { HttpClient } from &#39;@angular/common/http&#39;;

@Injectable({
    providedIn: &#39;root&#39;,
})
export class MyService {
    constructor(private http: HttpClient) { }

    getData() {
        return this.http.get(&quot;url...&quot;);
    }
}
```

However, when I run `ng test` for my **unit tests**, and when those tests use the service, I am getting the error: 

```
Error: StaticInjectorError(DynamicTestModule)[HttpClient]: 
  StaticInjectorError(Platform: core)[HttpClient]: 
    NullInjectorError: No provider for HttpClient!
```

The [Angular 6 documentation on HTTP][1] just says to do what I did above.


  [1]: https://v6.angular.io/tutorial/toh-pt6#heroes-and-http

Angular 6 - NullInjectorError: No provider for HttpClient in unit tests

I&#39;m trying to run Karma/Jasmine from Grunt on a project generated with 
http://newtriks.com/2013/12/31/automating-react-with-yeoman-and-grunt/

Karma launches PhantomJS (or Chrome) and, depending on singleRun, it either times out or just sits there and does nothing. I&#39;ve tried changing `captureTimeout` and `browserNoActivityTimeout` based on reading solutions from people with similar problems, but it doesn&#39;t seem to work.

My relevant pacakge versions etc.:

 - NodeJS: 0.10.25
 - Karma: 0.12.16
 - Webpack: 1.1.11
 - webpack-dev-server: 1.4.1
 - karma-jasmine: 0.1.5
 - Linux: Ubuntu 14.04

I&#39;ve found [someone with the same problem][1] on OS X: 

I&#39;ve tried updating all my dev dependencies to the latest versions but the problem still remains.

My console output is below. The webpack lines referring to _bundle is now VALID/INVALID_ are worrying, but I can&#39;t find any info on what they mean. Here&#39;s my console output:

    Running &quot;karma:unit&quot; (karma) task
    DEBUG [config]: autoWatch set to false, because of singleRun
    DEBUG [plugin]: Loading karma-* from /home/ed/workspace/wwb-app/node_modules
    DEBUG [plugin]: Loading plugin /home/ed/workspace/wwb-app/node_modules/karma-chrome-launcher.
    DEBUG [plugin]: Loading plugin /home/ed/workspace/wwb-app/node_modules/karma-coffee-preprocessor.
    DEBUG [plugin]: Loading plugin /home/ed/workspace/wwb-app/node_modules/karma-firefox-launcher.
    DEBUG [plugin]: Loading plugin /home/ed/workspace/wwb-app/node_modules/karma-html2js-preprocessor.
    DEBUG [plugin]: Loading plugin /home/ed/workspace/wwb-app/node_modules/karma-jasmine.
    DEBUG [plugin]: Loading plugin /home/ed/workspace/wwb-app/node_modules/karma-phantomjs-launcher.
    DEBUG [plugin]: Loading plugin /home/ed/workspace/wwb-app/node_modules/karma-requirejs.
    DEBUG [plugin]: Loading plugin /home/ed/workspace/wwb-app/node_modules/karma-script-launcher.
    DEBG [plugin]: Loading plugin /home/ed/workspace/wwb-app/node_modules/karma-webpack-plugin.
    INFO [karma]: Karma v0.12.16 server started at  http://localhost:8080/
    INFO [launcher]: Starting browser PhantomJS
    DEBUG [temp-dir]: Creating temp dir at /tmp/karma-98204612
    DEBUG [launcher]: /home/ed/workspace/wwb-app/node_modules/karma-phantomjs-launcher/node_modules/phantomjs/lib/phantom/bin/phantomjs /tmp/karma-98204612/capture.js
    Hash: 89285186567c1bc5bb7f
    Version: webpack 1.1.11
    Time: 2ms
    Asset  Size  Chunks       Chunk Names
    webpack: bundle is now VALID.
    webpack: bundle is now INVALID.
    DEBUG [web-server]: serving: /home/ed/workspace/wwb-app/node_modules/karma/static/client.html
    DEBUG [web-server]: serving: /home/ed/workspace/wwb-app/node_modules/karma/static/karma.js
    DEBUG [web-server]: upgrade /socket.io/1/websocket/CjC8pnQq5It2z_kWYB98
    DEBUG [karma]: A browser has connected on socket CjC8pnQq5It2z_kWYB98
    INFO [PhantomJS 1.9.7 (Linux)]: Connected on socket CjC8pnQq5It2z_kWYB98 with id 98204612
    DEBUG [launcher]: PhantomJS (id 98204612) captured in 1.704 secs
    WARN [PhantomJS 1.9.7 (Linux)]: Disconnected (1 times), because no message in 30000 ms.
    
    DEBUG [karma]: Run complete, exitting.
    DEBUG [launcher]: Disconnecting all browsers
    DEBUG [launcher]: Process PhantomJS exited with code 0
    DEBUG [temp-dir]: Cleaning temp dir /tmp/karma-98204612
    Warning: Task &quot;karma:unit&quot; failed. Use --force to continue.
    
    Aborted due to warnings.

Here&#39;s my `karma.conf.js` file:

    &#39;use strict&#39;;
    
    module.exports = function (config) {
    config.set({
        basePath: &#39;&#39;,
        frameworks: [&#39;jasmine&#39;],
        files: [
            &#39;test/helpers/**/*.js&#39;,
            &#39;test/spec/components/**/*.js&#39;
        ],
        preprocessors: {
            &#39;test/spec/components/**/*.js&#39;: [&#39;webpack&#39;]
        },
        webpack: {
            cache: true,
            module: {
                loaders: [{
                    test: /\.css$/,
                    loader: &#39;style!css&#39;
                }, {
                    test: /\.gif/,
                    loader: &#39;url-loader?limit=10000&amp;minetype=image/gif&#39;
                }, {
                    test: /\.jpg/,
                    loader: &#39;url-loader?limit=10000&amp;minetype=image/jpg&#39;
                }, {
                    test: /\.png/,
                    loader: &#39;url-loader?limit=10000&amp;minetype=image/png&#39;
                }, {
                    test: /\.js$/,
                    loader: &#39;jsx-loader&#39;
                }]
            }
        },
        webpackServer: {
            stats: {
                colors: true
            }
        },
        exclude: [],
        port: 8080,
        logLevel: config.LOG_DEBUG,
        colors: true,
        autoWatch: true,
        // Start these browsers, currently available:
        // - Chrome
        // - ChromeCanary
        // - Firefox
        // - Opera
        // - Safari (only Mac)
        // - PhantomJS
        // - IE (only Windows)
        browsers: [&#39;PhantomJS&#39;],
        reporters: [&#39;progress&#39;],
        captureTimeout: 60000,
        browserNoActivityTimeout: 60000,
        singleRun: true
    });
    };


  [1]: https://stackoverflow.com/questions/23667102/disconnected-1-times-because-no-message-in-10000-ms-using-karma-jasmine

Karma/Jasmine times out without running tests

I&#39;m getting following error when I try to test an angular component:

Error while running jest tests:

    Can&#39;t bind to &#39;matMenuTriggerFor&#39; since it isn&#39;t a known property of &#39;button&#39;.

Here is my html:

&lt;!-- language: lang-html --&gt;

    &lt;button mat-button [matMenuTriggerFor]=&quot;menu&quot;&gt;Menu&lt;/button&gt;
    &lt;mat-menu #menu=&quot;matMenu&quot;&gt;
      &lt;button mat-menu-item&gt;Item 1&lt;/button&gt;
      &lt;button mat-menu-item&gt;Item 2&lt;/button&gt;
    &lt;/mat-menu&gt;`

I&#39;m using `&quot;@angular/material&quot;: &quot;6.1.0&quot;,` in my package.json.
I&#39;ve also imported all the required material dependencies in the `beforeAll` block under `TestBed`
I also tried changing the property of the button from `matMenuTriggerFor` to `mat-menu-trigger-for`. It didn&#39;t work.

Please suggest how can I fix this test.

Can&#39;t bind to &#39;matMenuTriggerFor&#39; since it isn&#39;t a known property of &#39;button&#39;

I&#39;m running into an issue where when I run my tests on Jasmine, I get this error below.  The problem is, it seems to happen when I try to execute a certain amount of tests.  It doesn&#39;t seem to be tied to a particular test, as if I comment out some, the tests pass.  If I uncomment some tests, the error appears.  If I comment out ones that were uncommented before, they all pass again.  (ie if I have red, green, blue and orange test and it fails, I comment out orange and blue it passes, then I uncomment blue and orange it fails again, but if I comment out red and green it passes again).

&gt; Chrome 41.0.2272 (Mac OS X 10.10.1) ERROR   Some of your tests did a
&gt; full page reload! Chrome 41.0.2272 (Mac OS X 10.10.1): Executed 16 of
&gt; 29 (1 FAILED) ERROR (0.108 secs / 0.092 secs)

I&#39;m stumped as to what is going on.  The more tests I add, that&#39;s when this becomes an issue.  Has anyone encountered this before?  I have no idea what could be causing it, as nothing in any of my tests do any kind of redirection, and they all pass universally on another persons machine.

Some of your tests did a full page reload - error when running Jasmine tests

I have a problem with an unit test in angular 5 with Jasmine and Karma.

The error is: &quot;Can&#39;t bind to &#39;fruits&#39; since it isn&#39;t a known property of &#39;my-component2&#39;&quot;.

The unit test code is:

src/app/components/my-component1/my-component1.component.spec.ts:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;


    import { TestBed, inject, ComponentFixture, async} from &#39;@angular/core/testing&#39;;
    import {HttpClientTestingModule, HttpTestingController} from &#39;@angular/common/http/testing&#39;;

    import { Post } from &#39;../../models/post.model&#39;;

    import { MyComponent1Component } from &#39;./my-component1.component&#39;;
    import { MyService1Service } from &#39;../../services/my-service1.service&#39;;

    import { HttpClientModule, HttpClient,HttpHandler } from &#39;@angular/common/http&#39;;
    import {fruit} from &#39;../../Models/fruit&#39;;


    fdescribe(&#39;MyComponent1Component&#39;, () =&gt; {
      let component: MyComponent1Component;
      let fixture: ComponentFixture&lt;MyComponent1Component&gt;;

      beforeEach(async(() =&gt; {
        TestBed.configureTestingModule({
          declarations: [ MyComponent1Component ],
          imports: [],
          providers: [MyService1Service, HttpClient, HttpHandler, HttpTestingController]
        })

        .compileComponents();
      }));

      beforeEach(async(() =&gt; {
        fixture = TestBed.createComponent(MyComponent1Component);
        component = fixture.componentInstance;
        fixture.detectChanges();
      }));

      it(&#39;should create&#39;, () =&gt; {
        expect(component).toBeTruthy();
      });
    });


&lt;!-- end snippet --&gt;

And these are the code of my components:

src/app/components/my-component1/my-component1.component.ts:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    import { Component, OnInit } from &#39;@angular/core&#39;;
    import { MyService1Service} from &#39;../../services/my-service1.service&#39;;
    import {fruit} from &#39;../../Models/fruit&#39;;

    @Component({
      selector: &#39;my-component1&#39;,
      templateUrl: &#39;./my-component1.component.html&#39;,
      styleUrls: [&#39;./my-component1.component.css&#39;]
    })
    export class MyComponent1Component implements OnInit {

      constructor(private _MyService1Service: MyService1Service) { }

      public fruit= new fruit();

      public fruits: fruit[];
      ngOnInit() {
        this._MyService1Service.getPost().subscribe(
            result =&gt; {
                  console.log(result);
            },
            error =&gt; {
              console.log(&lt;any&gt;error);
            }
          );

        this.fruit.name = &#39;apple&#39;;
        this.fruits.push(this.fruit);
      }
    }




&lt;!-- end snippet --&gt;

src/app/components/my-component1/my-component1.component.html:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

     &lt;p&gt;
          my-component1 works!
        &lt;/p&gt;

        &lt;my-component2 [fruits]=fruits&gt;&lt;/my-component2&gt;

&lt;!-- end snippet --&gt;

src/app/components/my-component2/my-component2.component.ts:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    import { Component, OnInit, Input } from &#39;@angular/core&#39;;
    import {fruit} from &#39;../../Models/fruit&#39;;

    @Component({
      selector: &#39;my-component2&#39;,
      templateUrl: &#39;./my-component2.component.html&#39;,
      styleUrls: [&#39;./my-component2.component.css&#39;]
    })
    export class MyComponent2Component implements OnInit {

      @Input() fruits: fruit[];

      constructor() { }

      ngOnInit() {
      }

    }


&lt;!-- end snippet --&gt;

src/app/components/my-component2/my-component2.component.html:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;p&gt;
      my-component2 works!
    &lt;/p&gt;


&lt;!-- end snippet --&gt;

It is a dummy project, can anybody help me?

Thanks :)


Unit test Angular with Jasmine and Karma, Error:Can&#39;t bind to &#39;xxx&#39; since it isn&#39;t a known property of &#39;xxxxxx&#39;.

    expect(view.$el.html()).toContain(&#39;Admin&#39;);

The view does contain the word &#39;Admin&#39; so I was expecting it to return true. How can I achieve this?

    expect(view.$el.html()).toContain(&#39;Admin&#39;);
 
This returns `undefined`. How can I make it return `true`?
      
     


&lt;!-- language: lang-html --&gt;

    &lt;header class=&quot;main&quot;&gt;
      &lt;div id=&quot;heading&quot;&gt;
        &lt;ul class=&quot;header-view right&quot;&gt;
          &lt;li class=&quot;inline&quot;&gt;&lt;a href=&quot;#link&quot; class=&quot;button help-btn tab-btn&quot;&gt;&lt;span&gt;  &lt;/span&gt;Help&lt;/a&gt;&lt;/li&gt;
          &lt;li class=&quot;inline last&quot;&gt;&lt;a href=&quot;#og&quot; class=&quot;button admin-btn tab-btn expand-admin&quot;&gt;&lt;span&gt;&lt;/span&gt;Admin&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/header&gt;


This is what is returned from `view.$el.html` 

Please help.

Jasmine tests check if html contains text and return boolean

I just upgraded from Angular 2 rc4 to rc6 and having troubles doing so. 

I see the following error on my console: 

    Unhandled Promise rejection: Template parse errors:
    &#39;cl-header&#39; is not a known element:
    1. If &#39;cl-header&#39; is an Angular component, then verify that it is part of this module.
    2. If &#39;cl-header&#39; is a Web Component then add &quot;CUSTOM_ELEMENTS_SCHEMA&quot; to the &#39;@NgModule.schema&#39; of this component to suppress this message. (&quot;&lt;main&gt;
        [ERROR -&gt;]&lt;cl-header&gt;Loading Header...&lt;/cl-header&gt;
        &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;cl-feedbackcontai&quot;): AppComponent@1:4

Here is my Header Component:

    import { Component } from &#39;@angular/core&#39;;
    import { Router } from &#39;@angular/router&#39;;
    
    // own service
    import { AuthenticationService } from &#39;../../../services/authentication/authentication.service.ts&#39;;
    
    import &#39;../../../../../public/css/styles.css&#39;;
    
    @Component({
      selector: &#39;cl-header&#39;,
      templateUrl: &#39;./header.component.html&#39;,
      styleUrls: [&#39;./header.component.css&#39;]
    })
    export class HeaderComponent { // more code here... }

Here is my Header Module: 

    import { NgModule, CUSTOM_ELEMENTS_SCHEMA }      from &#39;@angular/core&#39;;
    import { RouterModule } from &#39;@angular/router&#39;;
    import { CommonModule }      from &#39;@angular/common&#39;;
    import { FormsModule }      from &#39;@angular/forms&#39;;
    
    import { HeaderComponent }  from &#39;./../../../components/util_components/header/header.component.ts&#39;;
    
    @NgModule({
        declarations: [ HeaderComponent ],
        bootstrap:    [ HeaderComponent ],
        imports: [ RouterModule, CommonModule, FormsModule ],
        schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    })
    export class HeaderModule { }

I created a wrapper module called util module which imports the HeaderModule:

    import { NgModule }      from &#39;@angular/core&#39;;
    
    import {HeaderModule} from &quot;./header/header.module&quot;;
    // ...
    
    @NgModule({
        declarations: [ ],
        bootstrap:    [ ],
        imports: [ HeaderModule]
    })
    export class UtilModule { }

Which is finally imported by the AppModule: 

    import { NgModule }      from &#39;@angular/core&#39;;
    
    import { BrowserModule } from &#39;@angular/platform-browser&#39;;
    
    import { AppComponent }  from &#39;./app.component&#39;;
    
    import {UtilModule} from &quot;./modules/util_modules/util.module&quot;;
    import {RoutingModule} from &quot;./modules/routing_modules/routing.module&quot;;
    
    @NgModule({
        bootstrap: [AppComponent],
        declarations: [AppComponent],
        imports: [BrowserModule, UtilModule, RoutingModule]
    })
    export class AppModule { }

To my understanding I am following the instructions of the error message using the SCHEMA to surpress the error. But it seems not to work. 
What am I doing wrong? 
(I hope its nothing obvious I just don&#39;t see at the moment. Been spending the past 6 hours upgrading to this version...)

CUSTOM_ELEMENTS_SCHEMA added to NgModule.schemas still showing Error

We have done one angular2 project set up and inside that created one module (my-module) and inside that module created one component (my-new-component) using following cmd commands: 

    ng new angular2test
    cd angular2test
    ng g module my-module
    ng generate component my-new-component

*After creating the set up and all components, we ran `ng test` command from cmd inside angular2test folder.*

**The below file is our  my-new-component.component.ts file**:

&lt;!-- language: typescript --&gt;

    import { Component, OnInit } from &#39;@angular/core&#39;;
    import { Router, Routes, RouterModule } from &#39;@angular/router&#39;;
    import { DummyService } from &#39;../services/dummy.service&#39;;
    
    @Component({
      selector: &#39;app-my-new-component&#39;,
      templateUrl: &#39;./my-new-component.component.html&#39;,
      styleUrls: [&#39;./my-new-component.component.css&#39;]
    })
    export class MyNewComponentComponent implements OnInit {
    
      constructor(private router : Router, private dummyService:DummyService) { }
    
      ngOnInit() {
      }
        redirect() : void{
            //this.router.navigate([&#39;/my-module/my-new-component-1&#39;])
        }
    }

**The below file is our  my-new-component.component.spec.ts file**:

&lt;!-- language: typescript --&gt;

    /* tslint:disable:no-unused-variable */
    import { async, ComponentFixture, TestBed } from &#39;@angular/core/testing&#39;;
    import { By } from &#39;@angular/platform-browser&#39;;
    import { DebugElement } from &#39;@angular/core&#39;;
    
    import { RouterTestingModule } from &#39;@angular/router/testing&#39;;
    import {NgbModule} from &#39;@ng-bootstrap/ng-bootstrap&#39;;
    import { DummyService } from &#39;../services/dummy.service&#39;;
    
    import { MyNewComponentComponent } from &#39;./my-new-component.component&#39;;
    
    describe(&#39;MyNewComponentComponent&#39;, () =&gt; {
      let component: MyNewComponentComponent;
      let fixture: ComponentFixture&lt;MyNewComponentComponent&gt;;
    
      beforeEach(async(() =&gt; {
        TestBed.configureTestingModule({
    		imports: [RouterTestingModule, NgbModule.forRoot(), DummyService],
          declarations: [ MyNewComponentComponent ]
        })
        .compileComponents();
      }));
    
      beforeEach(() =&gt; {
        fixture = TestBed.createComponent(MyNewComponentComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });
    
      it(&#39;should create&#39;, () =&gt; {
        expect(component).toBeTruthy();
      }); 
    });

We are getting the below cmd error while running the ng test command:

        Chrome 54.0.2840 (Windows 7 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.593 secs / 2.007 secs)
    Chrome 54.0.2840 (Windows 7 0.0.0) MyNewComponentComponent should create FAILED
            Failed: Unexpected value &#39;DummyService&#39; imported by the module &#39;DynamicTestModule&#39;
            Error: Unexpected value &#39;DummyService&#39; imported by the module &#39;DynamicTestModule&#39;

We have updated the component file and the spec file. Pleased find below the code snippet.

**The below file is our  my-new-component.component.ts file**:

&lt;!-- language: typescript --&gt;

    import { Component, OnInit } from &#39;@angular/core&#39;;
    import { Router, Routes, RouterModule } from &#39;@angular/router&#39;;
    import { DummyService } from &#39;../services/dummy.service&#39;;
    
    @Component({
      selector: &#39;app-my-new-component&#39;,
      templateUrl: &#39;./my-new-component.component.html&#39;,
      styleUrls: [&#39;./my-new-component.component.css&#39;]
    })
    export class MyNewComponentComponent implements OnInit {
    
      constructor(private router : Router, private dummyService:DummyService, public fb: FormBuilder) { 
      super(fb);
      }
    
      ngOnInit() {
      }
        redirect() : void{
            //this.router.navigate([&#39;/my-module/my-new-component-1&#39;])
        }
    }

**The below file is our  my-new-component.component.spec.ts file**:

&lt;!-- language: typescript --&gt;

    /* tslint:disable:no-unused-variable */
    import { async, ComponentFixture, TestBed } from &#39;@angular/core/testing&#39;;
    import { By } from &#39;@angular/platform-browser&#39;;
    import { DebugElement } from &#39;@angular/core&#39;;
    import { FormsModule, FormGroup, FormBuilder, Validators, ReactiveFormsModule} from &#39;@angular/forms&#39;;
    import { SplitPipe } from &#39;../../common/pipes/string-split.pipe&#39;;
    import { RouterTestingModule } from &#39;@angular/router/testing&#39;;
    import { DummyService } from &#39;../services/dummy.service&#39;;
    import { MyNewComponentComponent } from &#39;./my-new-component.component&#39;;
    
    describe(&#39;MyNewComponentComponent&#39;, () =&gt; {
      let component: MyNewComponentComponent;
      let fixture: ComponentFixture&lt;MyNewComponentComponent&gt;;
    
      beforeEach(async(() =&gt; {
        TestBed.configureTestingModule({
            imports: [RouterTestingModule, DummyService ,HttpModule, FormBuilder],
          declarations: [ MyNewComponentComponent, SplitPipe]
        })
        .compileComponents();
      }));
    
      beforeEach(() =&gt; {
        fixture = TestBed.createComponent(MyNewComponentComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });
    
      it(&#39;should create&#39;, () =&gt; {
        expect(component).toBeTruthy();
      }); 
    });

But while running the ng test command, we are getting the below error.

    09 12 2016 09:13:48.987:WARN [karma]: No captured browser, open http://localhost:9876/
    09 12 2016 09:13:49.008:INFO [karma]: Karma v1.2.0 server started at http://localhost:9876/
    09 12 2016 09:13:49.010:INFO [launcher]: Launching browser Chrome with unlimited concurrency
    09 12 2016 09:13:49.420:INFO [launcher]: Starting browser Chrome
    09 12 2016 09:13:58.642:INFO [Chrome 54.0.2840 (Windows 7 0.0.0)]: Connected on socket /#QZ9LSSUVeK6KwNDlAAAA with id 46830907
            Failed: Unexpected value &#39;FormBuilder&#39; imported by the module &#39;DynamicTestModule&#39;
            Error: Unexpected value &#39;FormBuilder&#39; imported by the module &#39;DynamicTestModule&#39;








&quot;Error: No provider for router&quot; while writing Karma-Jasmine unit test cases

I am trying to test my angular 4.1.0 component -

    export class CellComponent implements OnInit {
      lines: Observable&lt;Array&lt;ILine&gt;&gt;;
      @Input() dep: string;
      @Input() embedded: boolean;
      @Input() dashboard: boolean;
      constructor(
        public dataService: CellService,
        private route: ActivatedRoute,
        private router: Router, private store: Store&lt;AppStore&gt;) {
      }
    }
However, a simple &quot;should create&quot; test throws this cryptic error...


&gt; NetworkError: Failed to execute &#39;send&#39; on &#39;XMLHttpRequest&#39;: Failed to load &#39;ng:///DynamicTestModule/module.ngfactory.js&#39;.

so I found [this](https://stackoverflow.com/questions/44254758/angular-2-unit-testing-getting-error-failed-to-load-ng-dynamictestmodule-m) question, which suggests that the issue is the component has `@Input)_` params which aren&#39;t set, however, if I modify my test like so:

      it(&#39;should create&#39;, inject([CellComponent], (cmp: CellComponent) =&gt; {
        cmp.dep = &#39;&#39;;
        cmp.embedded = false;
        cmp.dashboard = false;
        expect(cmp).toBeTruthy();
      }));

then I still get the same issue, similarly, if I remove the `@Input()` annotations from the component, still no difference. How can I get these tests to pass?

Angular tests failing with Failed to execute &#39;send&#39; on &#39;XMLHttpRequest&#39;

In the AppComponent, I&#39;m using the nav component in the HTML code. The UI looks fine. No errors when doing ng serve. and no errors in console when I look at the app.

But when I ran Karma for my project, there is an error: 

    Failed: Template parse errors: 
    &#39;app-nav&#39; is not a known element:
    1. If &#39;app-nav&#39; is an Angular component, then verify that it is part of this module.
    2. If &#39;app-nav&#39; is a Web Component then add &#39;CUSTOM_ELEMENTS_SCHEMA&#39; to the &#39;@NgModule.schemas&#39; of this component to suppress this message.

In my **app.module.ts**:

there is:

    import { NavComponent } from &#39;./nav/nav.component&#39;;

It is also in the declarations part of NgModule

    @NgModule({
      declarations: [
        AppComponent,
        CafeComponent,
        ModalComponent,
        NavComponent,
        NewsFeedComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        ModalModule.forRoot(),
        ModalModule,
        NgbModule.forRoot(),
        BootstrapModalModule,
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })

I&#39;m using the `NavComponent` in my `AppComponent`

 **app.component.ts**


    import { Component, ViewContainerRef } from &#39;@angular/core&#39;;
    import { Overlay } from &#39;angular2-modal&#39;;
    import { Modal } from &#39;angular2-modal/plugins/bootstrap&#39;;
    import { NavComponent } from &#39;./nav/nav.component&#39;;
    
    @Component({
      selector: &#39;app-root&#39;,
      templateUrl: &#39;./app.component.html&#39;,
      styleUrls: [&#39;./app.component.css&#39;]
    })
    export class AppComponent {
      title = &#39;Angela&#39;;
    }


**app.component.html**

    &lt;app-nav&gt;&lt;/app-nav&gt;
    &lt;div class=&quot;container-fluid&quot;&gt;
    &lt;/div&gt;

I have seen a similar question, but the answer in that question says we should add NgModule in the nav component that has a export in that, but I&#39;m getting compile error when I do that. 

There is also: **app.component.spec.ts**

    import {NavComponent} from &#39;./nav/nav.component&#39;;
    import { TestBed, async } from &#39;@angular/core/testing&#39;;
    import { AppComponent } from &#39;./app.component&#39;;

Angular 2 Karma Test &#39;component-name&#39; is not a known element

With Jasmine is there a way to test if 2 arrays contain the same elements, but are not necessarily in the same order? ie

    array1 = [1,2,3];
    array2 = [3,2,1];
    
    expect(array1).toEqualIgnoreOrder(array2);//should be true

Expect Arrays to be equal ignoring order

I&#39;m developing a [github repository][1] (with angular 7 and angular-cli), and I have some tests with Karma and Jasmine working in the master branch.

Now I&#39;m trying to add lazy loading feature, the thing is, that the tests that before passed, now they do not. It&#39;s funny because only the tests from the lazy loading module are failing...

Here is the code and the error:

    import {async, TestBed} from &#39;@angular/core/testing&#39;;
    import {APP_BASE_HREF} from &#39;@angular/common&#39;;
    import {AppModule} from &#39;../../app.module&#39;;
    import {HeroDetailComponent} from &#39;./hero-detail.component&#39;;

    describe(&#39;HeroDetailComponent&#39;, () =&gt; {
      beforeEach(async(() =&gt; {
        TestBed.configureTestingModule({
          imports: [AppModule
          ],
          providers: [
            {provide: APP_BASE_HREF, useValue: &#39;/&#39;}
          ],
        }).compileComponents();
      }));

      it(&#39;should create hero detail component&#39;, (() =&gt; {
        const fixture = TestBed.createComponent(HeroDetailComponent);
        const component = fixture.debugElement.componentInstance;
        expect(component).toBeTruthy();
      }));
    });

The error is this:

    Chrome 58.0.3029 (Mac OS X 10.12.6) HeroDetailComponent should create hero detail component FAILED
        Error: Illegal state: Could not load the summary for directive HeroDetailComponent.
            at syntaxError Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:1690:22)
            at CompileMetadataResolver.getDirectiveSummary Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:15272:1)
            at JitCompiler.getComponentFactory Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler.es5.js:26733:26)
            at TestingCompilerImpl.getComponentFactory Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/compiler/@angular/compiler/testing.es5.js:484:1)
            at TestBed.createComponent Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/core/@angular/core/testing.es5.js:874:1)
            at Function.TestBed.createComponent Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/@angular/core/@angular/core/testing.es5.js:652:1)
            at UserContext.it Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/src/app/heroes/hero-detail/hero-detail.component.spec.ts:18:29)
            at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/zone.js:391:1)
            at ProxyZoneSpec.onInvoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/proxy.js:79:1)
            at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke Users/ismael.ramos.silvan/WebstormProjects/angular4-example-app/~/zone.js/dist/zone.js:390:1)

You can see the entire project, for more details if you need it.

**UPDATE: added declaration like this:**

    beforeEach(async(() =&gt; {
        TestBed.configureTestingModule({
          imports: [
            AppModule
          ],
          declarations: [HeroDetailComponent],
          providers: [
            {provide: APP_BASE_HREF, useValue: &#39;/&#39;}
          ],
        }).compileComponents();
      }));

Now, new errors appears:

    The pipe &#39;translate&#39; could not be found (&quot;&lt;h1 class=&quot;section-title&quot;&gt;{{[ERROR -&gt;]&#39;heroDetail&#39; | translate}}&lt;/h1&gt;
        &lt;md-progress-spinner *ngIf=&quot;!hero&quot;
                             class=&quot;progre&quot;): ng:///DynamicTestModule/HeroDetailComponent.html@0:28
        Can&#39;t bind to &#39;color&#39; since it isn&#39;t a known property of &#39;md-progress-spinner&#39;.

And more... it&#39;s like all directives and components from angular material, and the pipe translate from ngx-translate/core do not appear to be included...


  [1]: https://github.com/Ismaestro/angular4-example-app
  [2]: https://github.com/Ismaestro/angular4-example-app/tree/feature/lazy-loading

Angular Karma Jasmine Error: Illegal state: Could not load the summary for directive

I have several failing tests that only output `[object ErrorEvent] thrown`.  I don&#39;t see anything in the console that helps me pinpoint the offending code.  Is there something I need to do to track these down?

[EDIT]: I&#39;m running Karma v1.70, Jasmine v2.7.0

How do I debug a &quot;[object ErrorEvent] thrown&quot; error in my Karma/Jasmine tests?

Hi I am trying to unit test while developing a simple web with AngularJS + Firebase, but I have a problem defining the spec and trying the test runner

myProject/test/spec/main.js :

    describe(&#39;Controller: MainCtrl&#39;, function() {
	
	var MainCtrl, scope
	
	beforeEach(module(&#39;MainApp&#39;));

	beforeEach(inject(function ($controller, $rootScope) {
		scope = $rootScope.$new();
		MainCtrl = $controller(&#39;MainCtrl&#39;, {
			$scope: scope
		})
	}));

	it(&#39;should....&#39;,function(){
		expect(true).toBe(true)
	})
	it(&#39;should2....&#39;,function(){
		expect(false).toBe(false)
	})
    });

result:

    PhantomJS 2.1.1 (Mac OS X 0.0.0) Controller: MainCtrl should.... FAILED
    Error: [$injector:modulerr] Failed to instantiate module MainApp due 
    to: Firebase: Firebase App named &#39;[DEFAULT]&#39; already exists 
    (app/duplicateapp).

However, defining the spec once is not a problem. For example:

    it(&#39;should....&#39;,function(){
       expect(true).toBe(true)
    })

I do not know why this is the reason I give a hint to me

Here is the project I am developing.

https://github.com/parkwookyun/firebase-angular-board


Firebase App named &#39;[DEFAULT]&#39; already exists (app/duplicate-app)

When running Karma to test my Angular4 application, I get this error  `Found the synthetic property @enterAnimation. Please include either &quot;BrowserAnimationsModule&quot; or &quot;NoopAnimationsModule&quot; in your application.` though I already imported the module in **app.module.ts**

            // animation module
            import { BrowserAnimationsModule } from &#39;@angular/platform-browser/animations&#39;; 
        ...
    @NgModule({
        imports: [...
            BrowserAnimationsModule,
            ...
          ],

and in my **component**:

   

     import { Component, OnInit } from &#39;@angular/core&#39;;
        import {
          trigger,
          state,
          style,
          animate,
          transition
        } from &#39;@angular/animations&#39;;
        
        @Component({
          selector: &#39;app-about&#39;,
          animations: [
            trigger(
              &#39;enterAnimation&#39;, [
                transition(&#39;:enter&#39;, [
                  style({ transform: &#39;translateX(100%)&#39;, opacity: 0 }),
                  animate(&#39;500ms&#39;, style({ transform: &#39;translateX(0)&#39;, opacity: 1 }))
                ]),
                transition(&#39;:leave&#39;, [
                  style({ transform: &#39;translateX(0)&#39;, opacity: 1 }),
                  animate(&#39;500ms&#39;, style({ transform: &#39;translateX(100%)&#39;, opacity: 0 }))
                ])
              ]
            ),
            trigger(
              &#39;enterAnimationVetically&#39;, [
                transition(&#39;:enter&#39;, [
                  style({ transform: &#39;translateY(100%)&#39;, opacity: 0 }),
                  animate(&#39;500ms&#39;, style({ transform: &#39;translateY(0)&#39;, opacity: 1 }))
                ]),
                transition(&#39;:leave&#39;, [
                  style({ transform: &#39;translateY(0)&#39;, opacity: 1 }),
                  animate(&#39;500ms&#39;, style({ transform: &#39;translateY(100%)&#39;, opacity: 0 }))
                ])]
            )
          ],
    ...

The application runs perfectly with `ng serve` yet, I got this error with karma.


Found the synthetic property @enterAnimation. Please include either &quot;BrowserAnimationsModule&quot; or &quot;NoopAnimationsModule&quot; in your application. Angular4

So, I&#39;ve been looking all over for this, found &quot;similar&quot; answers here, but not exactly what I want.

Right now if I want to test a single file with karma, I need to do `fit()`, `fdescribe()` on the file in question...

However, what I do want is to be able to just call karma, with the config file, and direct it to a specific file, so I don&#39;t need to modify the file at all, ie:

`karma run --conf karma.conf.js --file /path/to/specific/test_file.js`

is it possible to do this? Or with any helper? (using grunt or gulp?)

Karma: Running a single test file from command line

When I run the command `grunt` I get the following warning: 

    Running &quot;karma:unit&quot; (karma) task
    Warning: No provider for &quot;framework:jasmine&quot;! (Resolving: framework:jasmine) Use --force to continue.

Does anybody know how to resolve this issue?




No provider for &quot;framework:jasmine&quot;! (Resolving: framework:jasmine)

I&#39;m trying to add some unit tests to one of my projects.

So far I&#39;ve installed and configured karma, and have installed jasmine. I&#39;ve one test file in my `test/` folder.

The karma server has started, the browser page is ready, but `karma run` fails as follows:

    $ karma run karma-conf.js 
    [2014-06-14 15:19:11.046] [DEBUG] config - Loading config /foo/test/karma-conf.js
    Waiting for previous execution...
    Chrome 35.0.1916 (Linux) ERROR
      You need to include some adapter that implements __karma__.start method!

This error message doesn&#39;t Google well.

Is this something obvious, or do I need to provide more information?

Error: You need to include some adapter that implements __karma__.start method

When do you use the async function in the **TestBed** when testing in Angular 2?

When do you use this?

     beforeEach(() =&gt; {
            TestBed.configureTestingModule({
                declarations: [MyModule],
                schemas: [NO_ERRORS_SCHEMA],
            });
        });

And when do you use this?

    beforeEach(async(() =&gt; {
        TestBed.configureTestingModule({
            declarations: [MyModule],
            schemas: [NO_ERRORS_SCHEMA],
        });
    }));

Can anyone enlighten me on this ?

Angular 2 Testing - Async function call - when to use

AngularJS v1.2.26

Jasmine v2.2.0

How can I change or remove the behavior of a `spyOn`? When I try to override it, I get the following error: `	Error: getUpdate has already been spied upon`

    var data1 = &#39;foo&#39;;
    var data2 = &#39;bar&#39;;
    
    describe(&quot;a spec with a spy&quot;, function(){
    
        beforeEach(module(&#39;app&#39;));
    
        var $q;
    
        beforeEach(inject(function(_updateService_, _$q_){
            updateService = _updateService_;
    
            //spy the results of the getUpdate()
            $q = _$q_;
            var deferred = $q.defer();
            deferred.resolve( data1 );
            spyOn(updateService, &#39;getUpdate&#39;).and.returnValue(deferred.promise);
    
        }));
    
        describe(&#39;and here the spy should be different&#39;, function() {
    
            it(&#39;returns a different value&#39;, function() {
    
              var deferred = $q.defer();
              deferred.resolve( data2 );
              spyOn(updateService, &#39;getUpdate&#39;); //ERROR HERE
              updateService.getUpdate.and.returnValue(deferred.promise);
    
              ...
    
            });
        });

    ...

When I remove the second spyOn the test doesn&#39;t work.

How do I do this?

Angular unit testing with Jasmine: how to remove or modify spyOn

I have used in my code like.

    return $provide.decorator(&#39;aservice&#39;, function($delegate) {
                $delegate.addFn = jasmine.createSpy().andReturn(true);
                return $delegate;
            });

In that what createSpy do? can i change the createSpy calls to createspyobj calls.

By using createSpy, we can create one function/method mocks. Createspyobj can do multiple functions mocks. Am i right?

What would be the difference.

What is the difference between createspy and createspyobj

I have a close function in my component that contains a `setTimeout()` in order to give time for the animation to complete.


    public close() {
        this.animate = &quot;inactive&quot;
        setTimeout(() =&gt; {
           this.show = false
        }, 250)
    }

`this.show` is bound to an `ngIf`.

`this.animate` is bound to an animation.

I have a test that needs to test this function

    it(&quot;tests the exit button click&quot;, () =&gt; {
      comp.close()
      fixture.detectChanges()
      //verifies the element is no longer in the DOM
      const popUpWindow = fixture.debugElement.query(By.css(&quot;#popup-window&quot;))
      expect(popUpWindow).toEqual(null)
    })

How do you properly test this function when there is a `setTimeout()`?

I was using `jasmine.clock().tick(251)` but the window would never disappear. any thoughts on this as well?



Test a function that contains a setTimeout()

I have run on my windows console:

    npm install -g yo grunt-cli bower
    
    npm install -g generator-angular
    
    yo angular

 

Then I started my project with webstorm and did right click on the karma.conf.js file in the project explorer where I have the menu item &#39;Run karma.conf.js&#39; and start the karma runner. Then I get his exception:

    ...\app\node_modules\karma\node_modules\di\lib\injector.js:9
          throw error(&#39;No provider for &quot;&#39; + name + &#39;&quot;!&#39;);
                ^
    Error: No provider for &quot;framework:jasmine&quot;! (Resolving: framework:jasmine)

Then in the console I read I can also use --force so I tried it: grunt --force

It took some time but there seemed to be no more errors. Heck why does --force install a provider ??? THIS was TESTED in the CMD.

grunt serve now worked and it started my browser with the starting app.

**So what was --force doing that the &#39;Error: No provider for &quot;framework:jasmine&quot;! (Resolving: framework:jasmine)&#39; is gone ?**

When I do grunt in the webstrom IDE I get again:

Warning: No provider for &quot;framework:jasmine&quot;! (Resolving: framework:jasmine) Use --force to continue.

So this problem is not solved.

Error: No provider for &quot;framework:jasmine&quot;! (Resolving: framework:jasmine)

I am using Angular CLI and VSCode but none of my breakpoints in my spec files seem to be getting hit when I run `ng test`?

Do I need to do some config?

All Karma Jasmine Solutions on Gang of Coders

Total of 26 Karma Jasmine Solutions

ReferenceError: module is not defined - Karma/Jasmine configuration with Angular/Laravel app

Testing Angular component with unsubscribe Error during cleanup of component

Angular 6 - NullInjectorError: No provider for HttpClient in unit tests

Karma/Jasmine times out without running tests

Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'

Some of your tests did a full page reload - error when running Jasmine tests

Unit test Angular with Jasmine and Karma, Error:Can't bind to 'xxx' since it isn't a known property of 'xxxxxx'.

Jasmine tests check if html contains text and return boolean

CUSTOM_ELEMENTS_SCHEMA added to NgModule.schemas still showing Error

"Error: No provider for router" while writing Karma-Jasmine unit test cases

Angular tests failing with Failed to execute 'send' on 'XMLHttpRequest'

Angular 2 Karma Test 'component-name' is not a known element

Expect Arrays to be equal ignoring order

Angular Karma Jasmine Error: Illegal state: Could not load the summary for directive

How do I debug a "[object ErrorEvent] thrown" error in my Karma/Jasmine tests?

Firebase App named '[DEFAULT]' already exists (app/duplicate-app)

Found the synthetic property @enterAnimation. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. Angular4

Karma: Running a single test file from command line

No provider for "framework:jasmine"! (Resolving: framework:jasmine)

Error: You need to include some adapter that implements karma.start method

Angular 2 Testing - Async function call - when to use

Angular unit testing with Jasmine: how to remove or modify spyOn

What is the difference between createspy and createspyobj

Test a function that contains a setTimeout()

Error: No provider for "framework:jasmine"! (Resolving: framework:jasmine)

Debug Tests in NG Test