wardbell / bardjs Goto Github PK
View Code? Open in Web Editor NEWSpec helpers for testing angular v.1.x apps with Mocha, Jasmine and QUnit
License: MIT License
Spec helpers for testing angular v.1.x apps with Mocha, Jasmine and QUnit
License: MIT License
If you try to use mockService without the config you will get an error:
TypeError: Cannot read property '_default' of undefined
at node_modules/bardjs/dist/bard.js:560:37
The problem area is here where if the config has a key you use that key, otherwise you use the config._default, but if there is no config there can be no config._default...
var value = configKeys.indexOf(key) > -1 ?
config[key] : config._default;
I have enjoyed using your library on personal projects and a project that I worked on before. In the past I have followed the gulp build from John Papa's hot towel generator to do the $templateCaching. However, in this project that I am working with I am trying to incorporate the preprocessor
_ng-html2js_. I am wondering if it is possible to combine this with the bardjs library?
I have not been able to configure the two together with any luck yet, but am not sure if it is with me or the code.
Here is my karma.config file
preprocessors: {
'../Templates/**/*.html' : ['ng-html2js']
},
ngHtml2JsPreprocessor: {
// setting this option will create only a single module that contains templates
// from all the files, so you can load them all with angular.mock.module('foo')
stripPrefix: "Templates/",
prependPrefix: "/",
moduleName: 'templatesCached'
},
bard.appModule('templatesCached');
bard.appModule('ha.module.core');
My error message is
Error: [$injector:modulerr] Failed to instantiate module function fakeRouteProvider($provide) due to:
TypeError: sinon.stub is not a function
at new <anonymous>
I no longer do AngularJS (aka Angular v.1.x) work and haven't for a while. That's why I haven't kept up on this library which isn't fair to all of you who have found it valuable.
BardJS needs a new caretaker. Please submit your bid to take over in a response.
There aren't many but ...
Thanks for your loyalty and understanding. I'm sure my successor will be great.
I am trying to get bard up and running with karma, but having issues right away with the appModule method (see below)
Is there a loading hierarchy for bard?
FAILED TESTS:
LookupTestController
โ "before each" hook for "should say hello"
PhantomJS 1.9.8 (Linux 0.0.0)
TypeError: 'undefined' is not a function (evaluating 'bard.appModule('lookup-test')')
at /var/www/query_tool/web/bundles/test/js/specs/lookup.controller.spec.js:17
Here is my karam.conf.js
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['mocha','chai-as-promised','chai','sinon', 'sinon-chai'],
files: [
// add test polyfills (Promise)
'web/bundles/test/js/Promise.js',
'web/bundles/test/js/function.bind.polyfill.js',
// module dependencies and angular mocks library
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'node_modules/angular-ui-select/select.js',
'node_modules/bardjs/dist/bard.min.js',
// add each js file which will be tested
'web/bundles/test/js/myController.js',
// testing lookup interface
'web/bundles/test/js/ng-lodash.js',
// loads all module dependencies (controller, filter, service, factory)
'web/bundles/test/js/lookup.*.js',
// reference spec directory (all specs will be run)
'web/bundles/test/js/specs/**/*.spec.js'
],
// 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: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'mocha-clean'],
// 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: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
I'm doing unit testing for the first time and I'm trying to work out how to mock a data call from a service so I can test if the data is coming back in the correct form:
My Service
angular.module('app.core')
.factory('PeopleService', PeopleService)
function PeopleService($http, $q, $filter) {
var endpoint;
var service = {
customers: {
value: null
},
getAllCustomers: getAllCustomers,
};
return service;
function getCustomers(endpoint_) {
endpoint = endpoint_;
service.customers.value = [];
return handleFetch($http.get(endpoint));
}
function handleFetch(promise) {
return promise.then(function (resp) {
service.customers.value = service.customers.value.concat(resp.data.data);
});
}
function getAllCustomers() {
return $q.all([
getCustomers('/api/customers'),
]).then(function(responses) {
return responses[0];
});
}
}
My Controller
angular.module('app.people')
.controller('peopleCtrl', peopleCtrl);
function peopleCtrl($scope, PeopleService) {
$scope.customers = PeopleService.customers;
getCustomers();
function getCustomers() {
return PeopleService.getAllCustomers().then(function () {
return PeopleService.customers.value;
});
}
}
My Test
describe('People Service', function () {
var controller;
var customers = mockData.getMockCustomers(); // my fake customers array
beforeEach(function() {
bard.appModule('app');
bard.inject('$controller', '$q', '$rootScope', 'PeopleService');
var ps = {
getAllCustomers: function() {
return $q.when(customers);
}
};
controller = $controller('peopleCtrl', {
$scope: $rootScope,
PeopleService: ps
});
});
it('should return an array of 5 customers', function() {
$rootScope.$apply();
expect($rootScope.customers).to.have.length(5);
});
});
I've got a controller set up that when loaded talks to the People Service
and gets my customers and saves the array of customers to PeopleService.customers.value
. Inside my controller, I have a variable $scope.customers
which is equal to PeopleService.customers
.
I'm trying to mock this with my test, without hitting the API, I'm using some mock data to do this (an array of 5 customers), but not sure if I understand correctly.
Is the idea to have my mock people service return exactly what the actual people service returns? I'm kind of confused at this point. I basically want that test to check if the mock data length is equal to five.
Any help with this is appreciated. Thanks in advance!
I am getting the following issue when using bard.inject().
beforeEach(function() {
bard.appModule('myModule');
bard.inject(this, '$controller', '$log', '$q', '$rootScope');
});
TypeError: 'undefined' is not a function (evaluating 'getCtxFromArgs.bind(this)') at bardInject (/bower_components/bardjs/dist/bard.js:273)
Any help would be really appreciated.
Thanks for maintaining this project and addressing the sinon issue. Can you please publish v0.1.10 to the npm repository?
So, the following section of code is failing when using PhantomJS (with Karma) works fine with Chrome
beforeEach(function() {
bard.appModule('app');
bard.inject(this, '$controller', '$httpBackend', '$log', '$q', '$rootScope', 'dataservice', 'peopleService');
});
I know all is loaded correctly (through karma.config.js) as the Chrome browser option is working just fine
The error in console is...
"before each" hook for "should pass"
PhantomJS 1.9.8 (Mac OS X 0.0.0)
Error: [$injector:modulerr] Failed to instantiate module ng due to:
TypeError: 'null' is not an object (evaluating 'this')
Like many others I am starting to work on and test angular 1.5. The component option is very nice, but right now the only way to test it is with angular mocks. Please add this option when you have a chance.
With setup:
bard.inject('$controller', '$q', '$rootScope', 'serviceName');
When calling
bard.mockService(serviceName, {
method: $q.when({})
});
in my tests I get an error:
'undefined' is not an object (evaluating 'service[key] = sinon.spy(function() {
return value;
})')
at /{myApp}/bower_components/bardjs/dist/bard.js:561
my bower file incldues:
"devDependencies": {
"angular-mocks": "~1.4.0",
"bardjs": "~0.1.3",
"sinon": "~1.14.1"
}
and all bower_components are included in my karma.conf.js file
So, I've also watched your unit testing course on Pluralsight and this is basically an identical question to this. I'm getting this error when running my tests:
[$injector:modulerr] Failed to instantiate module function fakeRouteProvider($provide) due to:
TypeError: sinon.stub is not a function
at new (/Users/realph/../../../node_modules/bardjs/dist/bard.js:389:31)
Sorry for sounding stupid, but maybe I've placed my bard.js files in the wrong place. I'm just running my tests in the console for now with:
karma start karma.conf.js
I've installed bardjs
via npm and am including it in my karma.conf.js
file like this:
frameworks: ['mocha', 'chai', 'sinon', 'chai-sinon'],
files: [
...
'../../node_modules/sinon/lib/sinon.js',
'../../node_modules/bardjs/dist/bard.js',
...
],
Am I doing something wrong that would be causing this error?
Any help is appreciated. Thanks in advance!
I have a similar issue to "cannot test my routes using bardjs #14'
PhantomJS 1.9.8 (Mac OS X 0.0.0) UploadController "before each" hook for "should be created successfully" FAILED
Error: [$injector:unpr] Unknown provider: routerHelperProvider <- routerHelper
http://errors.angularjs.org/1.4.7/$injector/unpr?p0=routerHelperProvider%20%3C-%20routerHelper
I note your comment about whether the dependencies have been included in the test harness.
I am using gulp and from what i can tell all the required files have been loaded into specs.html - routerHelperProvider and routerHelper.
There are other tests that rely on these being there.
The only thing i can think is that I am doing something differetly with the test for this specific module:-
Controller looks like:-
(function () {
'use strict';
angular
.module('app.upload',['angularFileUpload'])
.controller('UploadController', UploadController);
UploadController.$inject = ['logger','FileUploader','$scope'];
/* @ngInject */
function UploadController(logger, FileUploader, scope) {
var vm = this;
vm.title = 'Upload';
var uploader = scope.uploader = new FileUploader({
url: '/upload'
});
activate();
function activate() {
logger.info('Activated Upload View');
}
// FILTERS
uploader.filters.push({
name: 'customFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
return this.queue.length < 10;
}
});
// CALLBACKS
uploader.onWhenAddingFileFailed = function(item /*{File|FileLikeObject}*/, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function(fileItem) {
console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function(addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function(item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function(fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function(progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function(fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function(fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function(fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function(fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function() {
console.info('onCompleteAll');
};
console.info('uploader', uploader);
}
})();
Spec looks like:-
/* jshint -W117, -W030 */
describe('UploadController', function() {
var controller;
beforeEach(function() {
bard.appModule('app.upload');
bard.inject('$controller', '$log', '$rootScope');
});
beforeEach(function () {
controller = $controller('UploadController');
$rootScope.$apply();
});
bard.verifyNoOutstandingHttpRequests();
describe('Upload controller', function() {
it('should be created successfully', function () {
expect(controller).to.be.defined;
});
describe('after activate', function() {
it('should have title of Upload', function() {
expect(controller.title).to.equal('Upload');
});
it('should have logged "Activated"', function() {
expect($log.info.logs).to.match(/Activated/);
});
});
});
});
If i understand correctly i dont need to pass dependencies to the module being tested within the spec - as they are instantiated by the module. Only dependencies to be passed are ones used in the spec.
Appreciate any thoughts you may have.
I am trying to use mockService
in my sinon-chai tests. It looked really helpful when I read the README file. However, I ran into several problems trying to use it, and even now that I solved the problem, I don't fully understand the function's behaviour nor effect, yet. Using my example:
I have a service that injects UI-router's $state
service. Since I am not really interested in having to deal with the effects of $state
or any inconveniences, I thought in giving mockService
a go. This was my beforeEach
block on the first try:
beforeEach(function () {
bard.appModule('mmApp.core');
bard.inject(this, '$q',
'userProgressService',
'surveyDataService',
'userInputService',
'$state');
bard.mockService($state);
});
I left the mockService with just one argument because I thought it would make every function return void and everything would be alright. When I ran the tests, though, I got the following error:
TypeError: 'undefined' is not an object (evaluating 'config._default')
This was in the exact line of mockService
. In order to solve this I used an empty object as the second argument, like so
bard.mockServices($state, {});
based on the assumption that the function isn't prepared for not receiving the second argument. With this code, when I ran the tests, I got rid of the first error and got this one instead:
TypeError: 'undefined' is not a function (evaluating '$state.go('/phase/step', {phaseId:phaseNumber})')
I thought it was related to the $state.go
function not being defined, not even as a stub or spy... I tried again, now with
bard.mockService($state, {
go : sinon.stub()
});
in order to explicitly tell the function that I wanted an empty stub for $state.go
(which, BTW, is the only function of $state
I am currently using). This got rid of the errors!
Now, my question actually is... Why did those 2 errors happened in the first place?
Also, I recommend some more explanation for this function in the README, since it is one of the most useful of the provided. I checked the docs in the source and they are much more complete, you should try to make something more like it.
Anyway, great project, I don't even remember how to inject dependencies without this, anymore.
My workaround, though working, could lead to some errors. The other day I've noticed that what it was doing, actually, was telling that the stubbed function should return a sinon.stub()
. I guess I forgot how the function worked.
So, a more correct workaround is to declare an appropriate return value for the functions to be mocked, even an undefined
is enough. By doing exactly what I was doing, you could eventually get into trouble if ever using the return value of the mocked function.
Hi!
I was just trying out bardjs and it seams to work fine in Chrome and Firefox, but when i run it in PhantomJS i get this error:
PhantomJS 1.9.8 (Mac OS X) Template Controller "before each" hook FAILED
TypeError: 'undefined' is not a function (evaluating 'getCtxFromArgs.bind(this)')
at bardInject (/Users/lodnert/projects/myapp/app/bower_components/bardjs/dist/bard.js:277)
at /Users/lodnert/projects/myapp/test/spec/app/registry/template.controller.js:8
PhantomJS 1.9.8 (Mac OS X): Executed 1 of 1 (1 FAILED) ERROR (0.002 secs / 0 secs)
Here is the spec-file.
describe('Controller: Auth', function () {
var controller;
beforeEach(function() {
bard.appModule('myapp.auth');
bard.inject('$controller', '$rootScope');
});
it('should be created successfully', function () {
expect('hello').toBeDefined();
});
});
Any ideas?
I wonder about following piece of code in fakeStateProvider
https://github.com/wardbell/bardjs/blob/master/dist/bard.js#L404-L407
// current: {}, // fake before each test as needed
// state: {} // fake before each test as needed
// more? You'll know when it fails :-)
_faked: 'this is the faked $state service'
How would I go about it, if I wanted e.g. fake state, current or sth. else. In my case I have get
method that I'd like to fake (sinon.stub).
Thanks.
I have been using bardjs in my Typescript app and have been wanting a type definition file. When Typescript doesn't have a type definition file, it will complain that the bard functions don't exist. I created an issue on the DefinitelyTyped repository (the location of all Typescript definitions) to add this.
this is the error: Error: [$injector:unpr] Unknown provider: routerHelperProvider <- routerHelper
Hi
Thanks for creating this, really helps..
I'm facing issue when tried to write unit-tests for a service,
I need to mock the dependencies services that I need for this service with the help of bard.mockService,
The angular way without bardjs usages listed here:
https://docs.angularjs.org/guide/services
For controller testing this wasn't a problem as we can instanciate a controller sending the service map it needs using $controller service.
Is there anyway to do this?
If mockService is called with a replacement function in a scenario like below:
var isFirstCall = true;
function myReplacementFunc(){
if(isFirstCall){
isFirstCall = false;
return {test:"value"};
}else{
return undefined;
}
}
mockService(MyService, {
get: myReplacementFunc
}
the get
function on the mocked service is not spied on properly, and so something like this (using jasmine-sinon):
expect(MyService.get).toHaveBeenCalledOnce();
fails with an error like:
Expected spy "function myReplacementFunc() {
if (isFirstCall ) {
isFirstCall = false;
return { test: "value" };
} else {
return undefined;
}
}" to have been called twice. "function myReplacementFunc() {
if (isFirstCall ) {
isFirstCall = false;
return { test: "value" };
} else {
return undefined;
}
}" was called 0 times.
I would have expected this to work the same as if I had just manually wired up the sinon spies like:
sinon.stub(MyService, 'get', myReplacementFunc);
It appears that if line 564 of the current distribution were changed from:
service[key] = value;
to
sinon.stub(service, key, value);
this would work as expected.
Hiya folks, I'm trying to create a unit test that checks if a GET request returns the correct amount of items, but I'm using mock data to do this.
My test looks like this:
test.js
describe('Customer Controller', function () {
var controller;
var customers = mockData.getMockCustomers(); // fake customers (5 customers)
beforeEach(function() {
bard.appModule('app');
bard.inject('$controller', '$q', '$rootScope');
var cs = {
getCustomers: function() {
return $q.when(customers);
}
};
controller = $controller('scoreListCtrl', {
CustomerService: cs
});
});
it('should return 5 customers', function() {
$rootScope.$apply();
expect(controller.customers).to.have.length(5);
});
});
I keep getting this error when I run the test:
TypeError: Cannot read property 'length' of undefined
It looks like controller.customers
is coming back as undefined
for some reason. Am I mocking the data correctly?
My controller looks like this:
function customersCtrl(dataservice) {
var vm = this;
vm.customers = [];
fetchCustomers();
function fetchCustomers() {
return dataservice.getCustomers()
.then(function(data) {
vm.customers = data.data;
return vm.customers ;
});
}
}
I've put a console.log
in the test, and my customers
variable is returning 5 objects which appear to be empty. Perhaps this is the issue?
I'm very new to this and can't work out what I'm doing wrong. I don't even know how to debug such an issue.
Any help is appreciated. Thanks in advance!
Hi Ward,
I need help with bardjs and I would highly appreciate if you could help me.
I am using John Papa's gulp pattern (https://github.com/johnpapa/gulp-patterns) where he uses bardjs. I want to fake $window because I have some stuff stored in the sessionstorage which is used within the application.
What would be the best way of adding additional fake providers?
I know that I can go ahead and add a file like this (https://github.com/johnpapa/ng-demos/blob/master/cc-bmean/src/client/test/lib/specHelper.js) and there define the fakeWindow within that file like this:
function fakeWindow($provide) {
$provide.provider('$window', function () {
/* jshint validthis:true */
this.$window = sinon.stub();
this.$get = function () {
return {
sessionStorage: sinon.stub({
token: 'someToken'
})
};
};
});
}
and then for example in this file (https://github.com/johnpapa/gulp-patterns/blob/master/src/client/app/customers/customers.route.spec.js), instead of having :
beforeEach(function() {
module('app.customers', bard.fakeToastr);
bard.inject(this, '$location', '$rootScope', '$state', '$templateCache');
});
do something like this:
beforeEach(function () {
module('app.customers', function ($provide) {
bard.fakeToastr($provide);
specHelper.fakeWindow($provide);
});
bard.inject(this, '$location', '$rootScope', '$state', '$templateCache', '$window');
});
obviously this approach will do exactly what I need, but it is getting drifted away from bardjs.
So my question is how would you do it ?
Many thanks in advance.
Farzan
Is there any way to integrate bardjs to ESLint?
I'll warn you first that I'm a little new to typescript, so I might just have something wrong.
I'm using Definitely Typed typings with Bardjs, and I'm using Jasmine as my unit test framework.
When I tried to compile my typescript, I was getting errors because Bardjs.d.ts references Mocha and Chai typings.
So, I tried just pulling the mocha and chai typings into the project, but once I did that, the definitions of it, expect, etc all clashed with jasmine so I got multiple errors about expect being defined twice.
Is this something I've done wrong (seems weird that all of those types are globally scoped), or is this a bug?
$ bower install bardjs
$ ...
$ cd bower_components/bardjs/dist
$ ls
directory is empty
Hi Ward Bell,
I like your effort on this, i'm trying to use bardJS to optimize our unit test(Jasmine+RequireJS+Angular), but get stuck by some issues.
When i try to use bard.inject(this, '$q') in beforeEach-block, it throw errors.
By debugging, i found the error happened in bard.js, is from here:
angular.forEach(args, function(name, ix) {
var value = $injector.get(name); //args=[this,'$q'] in my case.
So, the args is supposed to remove the first argument this, right? Why it's not?
Do you have any insight about this?
Thanks,
Carson Song
After upgrading to Angular 1.4, I am getting the following dependency issues with bardjs:
Unable to find a suitable version for angular, please choose one:
1) angular#~1.3.8 which resolved to 1.3.16 and is required by bardjs#0.1.3
2) angular#1.3.16 which resolved to 1.3.16 and is required by angular-mocks#1.3.16
3) angular#>=1.3.0 which resolved to 1.4.0 and is required by angular-bootstrap#0.13.0, angular-toastr#1.4.1
4) angular#~1.4.0 which resolved to 1.4.0 and is required by manage-my-money-client
5) angular#>= 1.0.8 which resolved to 1.4.0 and is required by angular-ui-router#0.2.15
6) angular#1.4.0 which resolved to 1.4.0 and is required by angular-animate#1.4.0
Could you please update bower.json to make the dependencies a little less stringent, e.g. >=1.3.8?
Also should the sinon dependency be updated to the latest release?
This fails (apologies for the whitespace issues)
class MyService {
doAThing(){
return 'bad';
}
}
////
bard.appModule('app');
bard.inject(this, 'MyService');
bard.mockService(MyService, {
_default: false
});
it('returns the proper values', ()=> {
expect(MyService.doAThing()).toBe(false);
})
Meanwhile, this succeeds:
function MyService() {
var returnBad = function () {
return 'bad';
};
this.doAThing = returnBad;
}
////
bard.appModule('app');
bard.inject(this, 'MyService');
bard.mockService(MyService, {
_default: false
});
it('returns the proper values', ()=> {
expect(MyService.doAThing()).toBe(false);
})
Just starting to use bardjs and I donnot know how to set up the test for this test controller, how to inject $scope.
Controller example
(function () {
'use strict';
angular
.module('test', [])
.controller("TestCtrl", testController);
testController.$inject = ["$scope"];
function testController($scope) {
console.log("TestCtrl Constructor");
var vm = this;
vm.activate = activate;
vm.activate();
function activate() {
console.log("TestCtrl activate");
angular.extend($scope, {
mapBounds: [0, 0]
});
}
}
})();
I tried to set up a test in the following way, but I get the following error:
Test example
describe("TestController Test 2", function () {
var controller;
var scope;
beforeEach(function () {
bard.appModule('test');
bard.inject('$controller', '$log', '$q', '$rootScope', function ($rootScope) {
scope = $rootScope.$new();
return { $scope: scope };
});
});
beforeEach(function () {
controller = $controller('TestCtrl');
});
describe('Test 2', function () {
it('should be created successfully', function () {
expect(false).to.be.true;
expect(controller).to.be.defined;
});
});
});
Error
Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?
p0=$scopeProvider <- $scope <- TestCtrl
at Error (native)
How can I setup bardjs correctly to test this type of controllers with $scope?
First of all, thanks Ward for writing such a nice test helper lib.
UPDATE 19.05.2016
I have solved it now. The issue in general is, that I have two services, whereas the PostService has a dependency to Api. Order seems to be the problem here.
The solution is to first include the Api Service with all the other Dependencies other than PostService, mock the Api Service and then finally include the Post Service via another bard.inject().
beforeEach(function() {
bard.appModule('testingApp');
bard.inject('Api', '$rootScope', '$q', '$httpBackend'); //first include Api
testData = [
"post1", "post2", "post3"
];
//second mock the Api
bard.mockService(Api, {
getPosts: $q.when(testData)
});
//third inject the PostService which has Api as a dependency
bard.inject('PostService');
$httpBackend.whenGET(/\.*./).respond({anything: 123});
});
Updated Plnkr: http://plnkr.co/edit/cGEWQMKgaRhoATF4Q2zf?p=preview
I am currently trying to mock a resolving promise and test some code that is inside the .then function of a service. Without bard.js it is working, but when trying to do the same thing with bard.js it is not working, and I am not able to find the bug (maybe it is a bug on my side?!).
I have set up a plnkr which is including both test cases (w/ and w/o bard.js) http://plnkr.co/edit/f8tH7XAiLoxlGbQFxfIH?p=preview
First of all, I have two services: PostService and Api.
function PostService(Api) {
var svc = this;
svc.posts = null;
////////////////////////// Init
init();
function init() {
Api.getPosts()
.then(function(result) {
svc.posts = result;
})
}
}
function Api($http) {
var svc = this;
var root = 'http://jsonplaceholder.typicode.com';
// Functions
svc.getPosts = getPosts;
////////////////////////// Implementation
function getPosts() {
return $http({
method: 'GET',
url: root + '/posts'
})
}
}
My test case is very simple: first, check if the PostService.posts is null. Second, after a $rootScope.$apply() the promise should be resolved and the PostService.posts should be equal to my mocked resolved promise's result.
it('should initially set the posts to null', function() {
expect(PostService.posts).toBeNull();
});
it('should resolve a promise correctly', function() {
$rootScope.$apply();
expect(PostService.posts).toEqual(testData);
});
The none bard.js test setup looks like this (Test No. 1 inside the plnkr):
var mockApi, $rootScope, PostService, testData, $httpBackend;
beforeEach(function() {
mockApi = {};
testData = {
"data": [1, 2, 3]
};
module('testingApp', function($provide) {
$provide.value('Api', mockApi);
});
inject(function($q) {
mockApi.getPosts = function() {
return $q.when(testData);
}
});
});
beforeEach(inject(function(_$rootScope_, _PostService_, _$httpBackend_) {
$rootScope = _$rootScope_;
PostService = _PostService_;
$httpBackend = _$httpBackend_;
$httpBackend.whenGET(/http\.*/).respond({anything: 123});
}));
Whereas the bard.js setup looks like this, but is failing with the error (Test No. 2 inside the plnkr)
Error: Expected null to equal [ 'post1', 'post2', 'post3' ].
var testData;
beforeEach(function() {
bard.appModule('testingApp');
bard.inject('PostService', 'Api', '$rootScope', '$q', '$httpBackend');
testData = [
"post1", "post2", "post3"
];
bard.mockService(Api, {
getPosts: $q.when(testData) // also tried with function() { $q.when(testData) }) - no success
});
$httpBackend.whenGET(/\.*./).respond({anything: 123});
});
Am I missing something or doing it wrong? Or can't his case be handled with the bard.js lib?
I also tried combining both test setups, debugged it, but didn't have success to get it working. I would like to use bard.js for promise testing as well.
It would be nice if we could get this fixed together, either on my side or inside the lib (I don't want to use the angular mock inject() underscore stuff ๐ ) Thanks.
Hi, I'm utilizing badjs through webpack, so I install through npm. After installing bardjs it tries to call "bower install" but I don't have bower installed, so it throws an error.
In my case, I'm using lodash. I have an Angular service which wraps the global _ in a service called '_' so that it's obvious what it's supposed to be when you call things on it (e.g. _.extend). However, since bard injects my _ service as a global, it clobbers the library itself, then after the first test, it removes _ from the global scope. The end result is that only the first test of anything which uses the _ service passes. The rest error at dependency injection time because the _ factory no longer returns anything.
I have fixed this issue locally in my test helper file by copying over the library to a different variable stored locally, then running a global afterEach which restores it, but such a thing would probably be good to have as a core functionality of bard.
Edited to add that _.extend is a silly example because that functionality is available via angular.extend, but the idea carries for pretty much any global library which you might wrap in an angular service for mocking purposes.
Trying to use bardjs on my ionic project, when I run the tests I get:
ReferenceError: Can't find variable: getinjectargs
at /Users/mcarniatto/Dev/xmobile/www/lib/bardjs/dist/bard.js:291
Hello
I can't install bardjs. I get the following error:
Not compatible with your operating system or architecture: [email protected]
My system:
node v5.12.0
npm v3.8.6
OSX El Capitan 10.11.6
I realise this is - almost certainly - an issue with inotify, but as it's clearly a dependency of bardjs, this is clearly an issue. Can anyone please advise a fix?
Many thanks in advance.
Hi Ward,
I stumbled upon your project some weeks ago and by only skimming the repo (or the description to be precise) I thought bard only offers help when testing with the mocha/chai combination. I returned today after watching parts of your (well made!) Pluralsight course on testing Angular in which bard is mentioned/used with Jasmine.
Maybe you could update the description from Mocha/chai spec helpers for testing angular v.1.x apps
to something along the lines of Framework agnostic spec helpers for testing angular v.1.x apps.
or Spec helpers for testing angular v.1.x apps with mocha or jasmine or QUnit.
PS: Thumbs up for this library, just by using the inject
method I cleaned up my tests a lot.
Sounds similar to some other closed issues, but no solution jumped out at me. Using 0.1.3 of bardjs I am getting the following error:
Error: [$injector:modulerr] Failed to instantiate module function fakeRouteProvider($provide) due to:
TypeError: 'undefined' is not a function (evaluating 'sinon.stub()')
at /Users/bbohling/Projects/itdz/itdz-ui/app/bower_components/bardjs/dist/bard.js:377
My spec is a complete rip off of something John Papa did in one of his Pluralsight trainings:
describe('itdz', function() {
var controller;
var page = mockPage.getPage();
beforeEach(function() {
bard.appModule('itdz');
bard.inject('$controller', '$q', '$rootScope', 'pageService');
});
beforeEach(function() {
sinon.stub(pageService, 'slug').returns($q.when(page));
controller = $controller('Content');
$rootScope.$apply();
});
bard.verifyNoOutstandingHttpRequests();
describe('Content controller', function() {
it('should be created successfully', function () {
expect(controller).to.be.defined;
});
describe('after activate', function() {
it('should have called pageService.slug 1 time', function () {
expect(pageService.slug).to.have.been.calledOnce;
});
});
});
});
And I verified that sinon is indeed included in the karma files array. Any ideas what I am doing wrong? I am assuming it's my fault. :)
I installed bard via npm.
This is my karma.conf.js files
files: [
'node_modules/bardjs/dist/bard.js',
...
]
running tests get Uncaught ReferenceError: bard is not defined
What am I doing wrong?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.