Unknown provider CookieStore
Asked Answered
N

4

10

I am having service where I want to use the $cookieStore module. It works fine, but when unit testing it breaks, and gives the error: "$cookieStoreProvider <- $cookieStore <- filtersService".

The service looks like this:

serviceModule.factory('filtersService', ['$rootScope', '$location', '$cookieStore', function($rootScope, $location, $cookieStore){
    return {
        getFilters: function(){...}
}

And the unit test service looks like this:

describe('filtersService tests', function(){
var filtersService;
beforeEach(module('App.services'));

beforeEach(inject(function(filtersService, urlService, $location){

    filtersService = filtersService;
    urlService = urlService;
}));

it('test something', inject(function(filtersService, $location){
    filtersService.getFilters();
   expect(...something...)
}));
});

I have included angular-cookies in the karma test file.

Any idea why the code works when running, but unittests fails?

Update:

Karma Config File:
// Karma configuration
// Generated on Sun May 12 2013 16:57:21 GMT+0200 (CEST)


// base path, that will be used to resolve files and exclude
basePath = '../';


// list of files / patterns to load in the browser
files = [
  JASMINE,
  JASMINE_ADAPTER,
  'test/karma/jquery-1.9.1.min.js',
  'app/assets/javascripts/sugar-1.3.9.min.js',
  'app/assets/javascripts/angular.js',
  'app/assets/javascripts/angular-*.js',
  'app/assets/javascripts/ui-bootstrap-tpls-0.4.0.min.js',
  'app/assets/javascripts/services.js',
  'test/karma/lib/angular/angular-mocks.js',
  'test/karma/unit/*/*.js'
];


// list of files to exclude
exclude = [

];


// test results reporter to use
// possible values: 'dots', 'progress', 'junit'
reporters = ['progress'];


// web server port
port = 9876;


// cli runner port
runnerPort = 9100;


// enable / disable colors in the output (reporters and logs)
colors = true;


// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_INFO;


// enable / disable watching file and executing tests whenever any file changes
autoWatch = true;


// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers = ['Chrome'];


// If browser does not capture in given timeout [ms], kill it
captureTimeout = 60000;


// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;
Nebulize answered 22/9, 2013 at 14:2 Comment(8)
Can you show the karma configuration file ?Anagoge
@Anagoge Of course, it is added now.Nebulize
don't you have to include the cookies.js file in the files array? just like you do in index.html: <script src="http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js"></script>Eddra
@EduardGamonal By using 'app/assets/javascripts/angular-*.js', I also include angular-cookies.min.js.Nebulize
and where do you use the cookieStore? maybe it should also be injected in the beforeEach blockEddra
The cookieStore is used in the getFilters method of the filtersService. I have not yet mocked it in the test.Nebulize
Where have you declared the dependency on 'ngCookies'? Is it in the serviceModule or is it on a parent module? For unit testing you need to define 'ngCookies' on the serviceModule itself, or load it in the unit test explicitly.Mimi
@ClarkPan ngCookies is declared in the App file. How do I define ngCookies in the unit test, since it might be the issue?Nebulize
M
30

From the comments above, it seems the dependency on 'ngCookies' is declared in a seperate module.

To fix this try declaring it in your service module:

var serviceModule = angular.app('App.services', ['ngCookies']);

This is the recommended way of fixing this.

If, for some reason, you could not change the serviceModule definition, you could also declare it again in your unit tests:

beforeEach(module('ngCookies','App.services'));

However i would recommend you change it in your code base so your serviceModule does not depend on your main App module for it to function properly.

Mimi answered 24/9, 2013 at 0:34 Comment(1)
I would add that including angular-cookies.js is also required for this solution to work.Downtoearth
F
4

I had a similar problem when using angular-cookies and angular-file-upload. I solved it this way:

First, I´ve checked all the dependencies on my app with bower list:

-bash-4.1$ bower list
bower check-new     Checking for new versions of the project dependencies..
 APPNAME#0.0.0 /home/git/APPNAME/test.git
 ├── angular#1.2.28 (1.4.4-build.4150+sha.39ff333 available)
 ├─┬ angular-bootstrap#0.11.2 (latest is 0.13.2)
 │ └── angular#1.2.28 (1.4.4-build.4150+sha.39ff333 available)
 ├─┬ angular-cookies#1.4.3 (1.4.4-build.4150+sha.39ff333 available)
 │ └── angular#1.2.28 incompatible with 1.4.3 (1.4.3 available, latest is 1.4.4-build.4150+sha.39ff333)
 ├─┬ angular-file-upload#1.2.0
 │ └── angular#1.2.28 (1.2.29-build.592+sha.b041b66 available, latest is 1.4.4-build.4150+sha.39ff333)

As you will see, bower tells me about the incompatibility between angular 1.2.28 and 1.4.3, then, we have a library problem. The same for angular-cookies and angular-file-upload.

After that, I just decided to clean all my bower_components dir with rm -fr bower_components and run a new bower install to ensure all the libraries are "fresh-installed".

-bash-4.1$ rm -fr bower_components
-bash-4.1$ cd ..
-bash-4.1$ cd ..
-bash-4.1$ bower install
bower jquery#~1.11.0            cached git://github.com/jquery/jquery.git#1.11.3
bower jquery#~1.11.0          validate 1.11.3 against git://github.com/jquery/jquery.git#~1.11.0
bower es5-shim#~3.0.1           cached git://github.com/es-shims/es5-shim.git#3.0.2
bower es5-shim#~3.0.1         validate 3.0.2 against git://github.com/es-shims/es5-shim.git#~3.0.1
bower angular-resource#>=1.2.*  cached git://github.com/angular/bower-angular-resource.git#1.4.3
bower angular-resource#>=1.2.*         validate 1.4.3 against git://github.com/angular/bower-angular-resource.git#>=1.2.*
bower angular-cookies#>=1.2.*            cached git://github.com/angular/bower-angular-cookies.git#1.4.3
bower angular-cookies#>=1.2.*          validate 1.4.3 against git://github.com/angular/bower-angular-cookies.git#>=1.2.*
bower angular-sanitize#>=1.2.*           cached git://github.com/angular/bower-angular-sanitize.git#1.4.3
bower angular-sanitize#>=1.2.*         validate 1.4.3 against git://github.com/angular/bower-angular-sanitize.git#>=1.2.*
bower bootstrap#~3.1.1                   cached git://github.com/twbs/bootstrap.git#3.1.1
bower bootstrap#~3.1.1                 validate 3.1.1 against git://github.com/twbs/bootstrap.git#~3.1.1
bower bootstrap-sass-official#~3.1.1     cached git://github.com/twbs/bootstrap-sass.git#3.1.1+2
bower bootstrap-sass-official#~3.1.1   validate 3.1.1+2 against git://github.com/twbs/bootstrap-sass.git#~3.1.1
bower lodash#~3.9.3                      cached git://github.com/lodash/lodash.git#3.9.3
bower lodash#~3.9.3                    validate 3.9.3 against git://github.com/lodash/lodash.git#~3.9.3
bower angular-socket-io#~0.6.0           cached git://github.com/btford/angular-socket-io.git#0.6.1
bower angular-socket-io#~0.6.0         validate 0.6.1 against git://github.com/btford/angular-socket-io.git#~0.6.0
bower angular-ui-router#~0.2.10          cached git://github.com/angular-ui/ui-router.git#0.2.15
bower angular-ui-router#~0.2.10        validate 0.2.15 against git://github.com/angular-ui/ui-router.git#~0.2.10
bower angular-bootstrap#~0.11.0          cached git://github.com/angular-ui/bootstrap-bower.git#0.11.2
bower angular-bootstrap#~0.11.0        validate 0.11.2 against git://github.com/angular-ui/bootstrap-bower.git#~0.11.0
bower textAngular#~1.4.1                 cached git://github.com/fraywing/textAngular.git#1.4.3
bower textAngular#~1.4.1               validate 1.4.3 against git://github.com/fraywing/textAngular.git#~1.4.1
bower angular-file-upload#~1.2.0         cached git://github.com/nervgh/angular-file-upload.git#1.2.0
bower angular-file-upload#~1.2.0       validate 1.2.0 against git://github.com/nervgh/angular-file-upload.git#~1.2.0
bower angular-mocks#>=1.2.*              cached git://github.com/angular/bower-angular-mocks.git#1.4.3
bower angular-mocks#>=1.2.*            validate 1.4.3 against git://github.com/angular/bower-angular-mocks.git#>=1.2.*
bower angular-google-places-autocomplete#~0.2.7           cached git://github.com/kuhnza/angular-google-places-autocomplete.git#0.2.7
bower angular-google-places-autocomplete#~0.2.7         validate 0.2.7 against git://github.com/kuhnza/angular-google-places-autocomplete.git#~0.2.7
bower angular-scenario#>=1.2.*                            cached git://github.com/angular/bower-angular-scenario.git#1.4.3
bower angular-scenario#>=1.2.*                          validate 1.4.3 against git://github.com/angular/bower-angular-scenario.git#>=1.2.*
bower json3#~3.3.1                                        cached git://github.com/bestiejs/json3.git#3.3.2
bower json3#~3.3.1                                      validate 3.3.2 against git://github.com/bestiejs/json3.git#~3.3.1
bower font-awesome#>=4.1.0                                cached git://github.com/FortAwesome/Font-Awesome.git#4.4.0
bower font-awesome#>=4.1.0                              validate 4.4.0 against git://github.com/FortAwesome/Font-Awesome.git#>=4.1.0
bower angular-google-maps#~2.1.5                          cached git://github.com/angular-ui/angular-google-maps.git#2.1.5
bower angular-google-maps#~2.1.5                        validate 2.1.5 against git://github.com/angular-ui/angular-google-maps.git#~2.1.5
bower angular#1.4.3                                       cached git://github.com/angular/bower-angular.git#1.4.3
bower angular#1.4.3                                     validate 1.4.3 against git://github.com/angular/bower-angular.git#1.4.3
bower font-awesome#>=4.0.x                                cached git://github.com/FortAwesome/Font-Awesome.git#4.4.0
bower font-awesome#>=4.0.x                              validate 4.4.0 against git://github.com/FortAwesome/Font-Awesome.git#>=4.0.x
bower rangy#~1.3.0                                        cached git://github.com/timdown/rangy-release.git#1.3.0
bower rangy#~1.3.0                                      validate 1.3.0 against git://github.com/timdown/rangy-release.git#~1.3.0
bower angular#~1.2.11                                     cached git://github.com/angular/bower-angular.git#1.2.28
bower angular#~1.2.11                                   validate 1.2.28 against git://github.com/angular/bower-angular.git#~1.2.11
bower angular                                         resolution Unsuitable resolution declared for angular: 1.4.1

Unable to find a suitable version for angular, please choose one:
    1) angular#~1.2.11 which resolved to 1.2.28 and is required by angular-file-upload#1.2.0
    2) angular#>=1 which resolved to 1.2.28 and is required by angular-bootstrap#0.11.2
    3) angular#>= 1.0.8 which resolved to 1.2.28 and is required by angular-ui-router#0.2.15
    4) angular#^1.2.6 which resolved to 1.2.28 and is required by angular-socket-io#0.6.1
    5) angular#^1.2.x which resolved to 1.2.28 and is required by angular-google-places-autocomplete#0.2.7
    6) angular#1.2 - 1.4 which resolved to 1.2.28 and is required by angular-google-maps#2.1.5
    7) angular#1.4.3 which resolved to 1.4.3 and is required by angular-cookies#1.4.3, angular-mocks#1.4.3, angular-resource#1.4.3, angular-sanitize#1.4.3, angular-scenario#1.4.3
    8) angular#>=1.3.x which resolved to 1.4.3 and is required by textAngular#1.4.3

Prefix the choice with ! to persist it to bower.json

? Answer: 7!

bower asked me to choose between the versions for angular and I´ve chosen the 7th option, as it´s angular 1.4.3, the latest of the versions required in most of the components of my app. After that, bower did the installation, and linked angular 1.4.3 to all the bower_components that require it:

bower angular                                         resolution Saved angular#1.4.3 as resolution
bower es5-shim#~3.0.1                                    install es5-shim#3.0.2
bower angular-sanitize#>=1.2.*                           install angular-sanitize#1.4.3
bower bootstrap-sass-official#~3.1.1                     install bootstrap-sass-official#3.1.1+2
bower jquery#~1.11.0                                     install jquery#1.11.3
bower angular-resource#>=1.2.*                           install angular-resource#1.4.3
bower angular-cookies#>=1.2.*                            install angular-cookies#1.4.3
bower angular-bootstrap#~0.11.0                          install angular-bootstrap#0.11.2
bower angular-ui-router#~0.2.10                          install angular-ui-router#0.2.15
bower lodash#~3.9.3                                      install lodash#3.9.3
bower angular-socket-io#~0.6.0                           install angular-socket-io#0.6.1
bower bootstrap#~3.1.1                                   install bootstrap#3.1.1
bower angular-google-places-autocomplete#~0.2.7          install angular-google-places-autocomplete#0.2.7
bower textAngular#~1.4.1                                 install textAngular#1.4.3
bower angular-file-upload#~1.2.0                         install angular-file-upload#1.2.0
bower json3#~3.3.1                                       install json3#3.3.2
bower angular-mocks#>=1.2.*                              install angular-mocks#1.4.3
bower rangy#~1.3.0                                       install rangy#1.3.0
bower angular-google-maps#~2.1.5                         install angular-google-maps#2.1.5
bower font-awesome#>=4.0.x                               install font-awesome#4.4.0
bower angular#1.4.3                                      install angular#1.4.3
bower angular-scenario#>=1.2.*                           install angular-scenario#1.4.3

es5-shim#3.0.2 client/bower_components/es5-shim

angular-sanitize#1.4.3 client/bower_components/angular-sanitize
└── angular#1.4.3

bootstrap-sass-official#3.1.1+2 client/bower_components/bootstrap-sass-official

jquery#1.11.3 client/bower_components/jquery

angular-resource#1.4.3 client/bower_components/angular-resource
└── angular#1.4.3

angular-cookies#1.4.3 client/bower_components/angular-cookies
└── angular#1.4.3

angular-bootstrap#0.11.2 client/bower_components/angular-bootstrap
└── angular#1.4.3

angular-ui-router#0.2.15 client/bower_components/angular-ui-router
└── angular#1.4.3

lodash#3.9.3 client/bower_components/lodash

angular-socket-io#0.6.1 client/bower_components/angular-socket-io
└── angular#1.4.3

bootstrap#3.1.1 client/bower_components/bootstrap
└── jquery#1.11.3

angular-google-places-autocomplete#0.2.7 client/bower_components/angular-google-places-autocomplete
└── angular#1.4.3

textAngular#1.4.3 client/bower_components/textAngular
├── angular#1.4.3
├── font-awesome#4.4.0
└── rangy#1.3.0

angular-file-upload#1.2.0 client/bower_components/angular-file-upload
└── angular#1.4.3

json3#3.3.2 client/bower_components/json3

angular-mocks#1.4.3 client/bower_components/angular-mocks
└── angular#1.4.3

rangy#1.3.0 client/bower_components/rangy

angular-google-maps#2.1.5 client/bower_components/angular-google-maps
├── angular#1.4.3
└── lodash#3.9.3

font-awesome#4.4.0 client/bower_components/font-awesome

angular#1.4.3 client/bower_components/angular

angular-scenario#1.4.3 client/bower_components/angular-scenario
└── angular#1.4.3

And now, I run a bower list again, to check how the dependencies were now:

-bash-4.1$ bower list
bower check-new     Checking for new versions of the project dependencies..
appName#0.0.0 /home/git/appName/test.git
├─┬ angular-bootstrap#0.11.2 (latest is 0.13.2)
│ └── angular#1.4.3 (1.4.4-build.4150+sha.39ff333 available)
├─┬ angular-cookies#1.4.3 (1.4.4-build.4150+sha.39ff333 available)
│ └── angular#1.4.3 (latest is 1.4.4-build.4150+sha.39ff333)
├─┬ angular-file-upload#1.2.0
│ └── angular#1.4.3 incompatible with ~1.2.11 (1.2.29-build.592+sha.b041b66 available, latest is 1.4.4-build.4150+sha.39ff333)
├─┬ angular-google-maps#2.1.5
│ ├── angular#1.4.3 (1.4.4-build.4150+sha.39ff333 available)
│ └── lodash#3.9.3 (3.10.1 available)
├─┬ angular-google-places-autocomplete#0.2.7
│ └── angular#1.4.3 (1.4.4-build.4150+sha.39ff333 available)
├─┬ angular-mocks#1.4.3 (1.4.4-build.4150+sha.39ff333 available)
│ └── angular#1.4.3
├─┬ angular-resource#1.4.3 (1.4.4-build.4150+sha.39ff333 available)
│ └── angular#1.4.3
├─┬ angular-sanitize#1.4.3 (1.4.4-build.4150+sha.39ff333 available)
│ └── angular#1.4.3
├─┬ angular-scenario#1.4.3 (1.4.4-build.4150+sha.39ff333 available)
│ └── angular#1.4.3
├─┬ angular-socket-io#0.6.1 (latest is 0.7.0)
│ └── angular#1.4.3 (1.4.4-build.4150+sha.39ff333 available)
├─┬ angular-ui-router#0.2.15
│ └── angular#1.4.3 (1.4.4-build.4150+sha.39ff333 available)
├─┬ bootstrap#3.1.1 (latest is 3.3.5)
│ └── jquery#1.11.3 (3.0.0-alpha1+compat available)
├── bootstrap-sass-official#3.1.1+2 (latest is 3.3.5)
├── es5-shim#3.0.2 (latest is 4.1.10)
├── font-awesome#4.4.0
├── jquery#1.11.3 (latest is 3.0.0-alpha1+compat)
├── json3#3.3.2
├── lodash#3.9.3 (latest is 3.10.1)
└─┬ textAngular#1.4.3
  ├── angular#1.4.3 (1.4.4-build.4150+sha.39ff333 available)
  ├── font-awesome#4.4.0
  └── rangy#1.3.0

As you will see, I still see an incompatible dependency in angular-file-upload component. Then, I run into the component dir, and installed LOCALLY FOR THIS COMPONENT a new version of angular (the required one for the component itself):

-bash-4.1$ cd client/
-bash-4.1$ cd bower_components/
-bash-4.1$ cd angular-file-upload/
-bash-4.1$ bower install angular --save
bower angular#*                 cached git://github.com/angular/bower-angular.git#1.4.3
bower angular#*               validate 1.4.3 against git://github.com/angular/bower-angular.git#*

Unable to find a suitable version for angular, please choose one:
    1) angular#~1.2.11 which resolved to 1.2.28 and is required by angular-file-upload
    2) angular#~1.4.3 which resolved to 1.4.3

Prefix the choice with ! to persist it to bower.json

? Answer: 1!
bower angular               resolution Saved angular#~1.2.11 as resolution

After that, everything went ok and there was not more injection or dependency problems. Hope it may help you.

Full answered 7/8, 2015 at 10:32 Comment(0)
M
0

The OP created the interceptor using factory.. However, I was fixing some code and have seen the interceptor created as provider....

.provider('myHttpInterceptor', function 
    HttpInterceptorProvider($injector, _, apiConfig) {
                var self = this;
...

In case you have a situation like this and stumbled onto this SO question, this here is how I solved my issue.

I tried plugging in the $cookieStore in the function and even tried using the $inject but I kept getting Unknown provider CookieStore (hence how I found this post)

The way I solved my issue was to find the $get method and throw in cookie store there.

this.$get = function($q, $cookieStore, myCache) {
                return {
                    'request': function(config) {
...

in retrospect, this is quite consistent with the provider recipe documentation.

Mcgaw answered 6/7, 2015 at 17:53 Comment(0)
P
0

Key point is angular.js version and angular-cookies version has to be same. enter image description here

after i matched them it has worked for me.

Passus answered 12/8, 2015 at 12:5 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.