Mock chrome.storage.local functions using Jasmine - javascript

I have the following code in a file named options.js. I need to mock it using Jasmine. I need to test whether chrome.storage.local.set is called when save function is called.
In the spec file I have the following code. But it does not call the chrome function in options.js file. Can someone point out the mistake?
beforeEach(function() {
ctrl = new OptionCtrl(scope);
chrome: {
storage: {
local: {
set: function() {
}
}
}
}
});
it('should call storage on save', function() {
spyOn(chrome.storage.local, 'set').and.callThrough();
ctrl.save({data: 'check'}, 'check');
expect(chrome.storage.local.set).toHaveBeenCalled();
});
Update 1: save function implementation
save(data, successMessage) {
chrome.storage.local.set(data, (error) => {
if (error) {
this.status('Error Occurred. Please refresh.', 1000, 100, 'danger');
} else {
this.status(successMessage, 1000, 100, 'success');
}
});
}
Link to the options.js file - Line: 122

Stubbing in Jasmine is easy as:
var chrome = {
storage: {
local: {
set: function() {}
}
}
}
function OptionCtrl() {
this.save = function(data, callbackStr) {
chrome.storage.local.set(data)
}
}
describe('OptionCtrl', function() {
var ctrl;
beforeEach(function() {
ctrl = new OptionCtrl({});
});
it('calls storage on save', function() {
spyOn(chrome.storage.local, 'set').and.callThrough();
var dataStub = {
data: 'check'
}
ctrl.save(dataStub, 'check');
expect(chrome.storage.local.set).toHaveBeenCalledWith(dataStub);
});
})
<link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />
<script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>

Related

How to mock chrome.cookies.getAll using Jasmine?

I have the following code in background.js
var allCookies = [];
function getAllCookies() {
chrome.cookies.getAll({}, function(cookies) {
for (var i in cookies) {
allCookies.push(cookies[i])
}
}
});
}
Now in specs.js, I have written the following code to test the getAllCookies method -
describe('getAllCookies', function() {
beforeEach(function() {
chrome = {
cookies: {
getAll : function() {
return [
'cookie1',
'cookie2'
]
}
}
};
spyOn(chrome.cookies,'getAll');
});
it('should updated global variable allCookies', function() {
getAllCookies();
expect(allCookies).toEqual(['cookie1','cookie2'])
})
})
But the test is failing as allCookies = [] but it should be equal to ['cookie1','cookie2']
Can someone please help me to mock such chrome APIs (say chrome.cookies.getAll) which takes callback function as argument?

Detect changes in JSON on a javascript side

I am receiving data in JSON from PHP and I want to detect if JSON have changed on Javascript side, not template side. Does anybody have solution? I am attaching a code.
export default {
name: 'dashboard_invoices',
data() {
return {
invoices: [],
newInvoices: [],
}
},
methods: {
loadDataInterval: function() {
this.$http.get('http://127.0.0.1/pdaserwis-crm/api/vue/vue?action=order_table').then(function (response) {
this.newInvoices = response.data;
if(this.newInvoices != this.invoices) {
// alert('Dodano nowa fakture');
this.invoices = this.newInvoices;
}
})
},
loadData: function() {
this.$http.get('http://website.pl').then(function (response) {
this.invoices = response.data;
})
}
},
created: function () {
this.loadData();
setInterval(function () {
this.loadDataInterval();
}.bind(this), 3000);
}
}
I want to catch if invoices have changed and view appropriate alert for that.
The problem solved. It took to compare both arrays with deep-equal by watch handler.
watch: {
invoices: {
handler(val, oldVal)
{
if(!(deepEqual(val, oldVal))) {
console.log('elo');
}
}
}
}

Jasmine: after using callFake, how can you revert to the original function?

Say that you have spyOn(obj, 'method').and.callFake(fn);. How can you subsequently revert obj.method back to it's original function?
Use case: if you are doing a callFake in a big beforeEach and want to use the original method for one of your test cases, but the fake in the rest.
test.js
var obj = {
method: function () {
return 'original';
},
}
module.exports = obj;
testSpec.js
var obj = require('../test.js');
describe('obj.method', function () {
it('should return "original" by default', function () {
expect(obj.method()).toBe('original');
});
it('should return "fake" when faked', function () {
spyOn(obj, 'method').and.callFake(function () {
return 'fake';
});
expect(obj.method()).toBe('fake');
});
it('should return "original" when reverted after being faked', function () {
spyOn(obj, 'method').and.callFake(function () {
return 'fake';
});
// what code can be written here to get the test to pass?
expect(obj.method()).toBe('original');
});
});
I'm using Jasmine v2.5.2.
Edit: Well, I suppose you could just write:
obj.method = function () {
return 'original';
};
but that feels way too not-DRY. Is there something jasmine-based like obj.method.revertToOriginal()?
You can call callThrough() on spied method to revert it to basic function.
var obj = {
method: function() {
return 'original'
}
}
describe('obj.method', function() {
it('should return "original" by default', function() {
expect(obj.method()).toBe('original');
});
it('should return "fake" when faked', function() {
spyOn(obj, 'method').and.callFake(function() {
return 'fake';
});
expect(obj.method()).toBe('fake');
});
it('should return "original" when reverted after being faked', function() {
spyOn(obj, 'method').and.callFake(function() {
return 'fake';
});
obj.method.and.callThrough() // method for revert spy
expect(obj.method()).toBe('original');
});
});
<link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />
<script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>

unit test angular service not able to reach function inside service + jasmine

I have written some service in angular. Check this PLUNKER.
Injecting CommonService, $rootRouter, ModalService in RouteService.
I am stuck with unit testing these services. You can see sample spec file at PLUNKER.
EDIT: Whatever test I have at plunker are not working as expected. Am not sure what I am doing wrong.
How to test goTo and getActivePage methods in RouteService?
How to test getProperty and setProperty methods in CommonService?
Here is code.
First service is RouteService
'use strict';
angular.module('mysampleapp')
.service('RouteService',
function(CommonService, $rootRouter, ModalService) {
console.log('RRRRRRRRRRRRRRRRRRRRRRRRRRRoute');
return {
goTo: goTo,
getActivePage: getActivePage
};
function goTo(page) {
var valid = CommonService.getProperty('isValidationSuccess');
switch (page) {
case 'AboutUs':
if (valid) {
CommonService.setProperty('activeMenu', page);
$rootRouter.navigate([page]);
} else {
ModalService.openModal('Analysis Error', 'Complete Application Group configuration prior to running analysis.', 'Error');
}
break;
default:
CommonService.setProperty('activeMenu', page);
$rootRouter.navigate([page]);
break;
}
}
function getActivePage() {
return CommonService.getProperty('activeMenu');
}
});
Another is CommonService
'use strict';
angular.module('mysampleapp')
.service('CommonService',
function() {
var obj = {
/* All page validation check before perform analysis */
isValidationSuccess: false,
/* Highlight the menu */
activeMenu: 'HomeMenu'
};
function setProperty(key, value) {
obj[key] = value;
}
function getProperty(key) {
return obj[key];
}
function getAllProperties() {
return obj;
}
return {
setProperty: setProperty,
getProperty: getProperty,
getAllProperties: getAllProperties
};
}
);
In your plunker you forgot to create the mysampleapp module before adding services to it:
angular.module('mysampleapp', []);
The test for setters and getters of CommonService should be pretty simple:
describe('CommonService', function () {
var commonService;
beforeEach(module('mysampleapp'));
beforeEach(inject(function (_CommonService_) {
commonService = _CommonService_;
}));
it('should set and get property', function () {
commonService.setProperty('isValidationSuccess', 'Perform');
expect(commonService.getProperty('isValidationSuccess')).toBe('Perform');
});
});
Unit tests for services in most cases should be islolated from other services. If you going to testing CommonService you must mock other services, such as CommonService and etc. Main reason that you do not have to worry how to run for another service, because in this test you expecting that other services will work correctly.
describe('RouteService', function () {
'use strict';
var RouteService,
ModalService,
CommonService,
mockedValue,
$rootRouter;
beforeEach(module('mysampleapp'));
beforeEach(inject(function (_RouteService_, _ModalService_, _CommonService_, _$rootRouter_) {
RouteService = _RouteService_;
ModalService = _ModalService_;
CommonService = _CommonService_;
$rootRouter = _$rootRouter_;
$rootRouter.navigate = jasmine.createSpy();
ModalService.openModal = jasmine.createSpy(); //sometimes open modal return promise, and you should check it to
CommonService.getProperty = jasmine.createSpy().and.callFake(function () {
return mockedValue;
});
CommonService.setProperty = jasmine.createSpy().and.callFake(function () {
return mockedValue;
});
}));
it('should exist', function () {
expect(RouteService).toBeDefined();
});
it('should get active page', function () {
RouteService.getActivePage();
expect(CommonService.getProperty).toHaveBeenCalled(); //this test make sens only for make you coverage 100%, in you case i mean
});
describe('goTo method', function () {
it('should check if it is valid page', function () {
RouteService.goTo();
expect(CommonService.getProperty).toHaveBeenCalled();
});
it('should set property if page is "about as" and if it is valid page, and should navigate to this page', function () {
mockedValue = true;
var page = 'AboutUs';
RouteService.goTo(page);
expect(CommonService.setProperty).toHaveBeenCalledWith('activeMenu', page);
expect($rootRouter.navigate).toHaveBeenCalledWith([page]);
expect(ModalService.openModal).not.toHaveBeenCalled();
});
it('should open modal with error if "about as" is not valid page', function () {
var isValid = mockedValue = false;
var page = 'AboutUs';
RouteService.goTo(page);
expect(ModalService.openModal).toHaveBeenCalled();
expect(CommonService.setProperty).not.toHaveBeenCalled();
expect($rootRouter.navigate).not.toHaveBeenCalled();
});
it('should set property and navigate to page', function () {
var page = 'Test Page';
RouteService.goTo(page);
expect(CommonService.setProperty).toHaveBeenCalledWith('activeMenu', page);
expect($rootRouter.navigate).toHaveBeenCalledWith([page]);
expect(ModalService.openModal).not.toHaveBeenCalled();
});
});
});

javascript calling parent method from child

I have the following object:
var party =
{
food:
{
serve: function () {
// I want to call turnOff method from here
}
cleanUp: function () {
}
}
music:
{
turnOff: function () {
}
}
}
So as the comment points out, I want to call the turnOff method from the music object, how can I do this? this refers to the food object but I need to access the music object...
var party =
{
food:
{
serve: function () {
party.music.turnOff();
},
cleanUp: function () {
}
},
music:
{
turnOff: function () {
}
}
}
Use a constructor instead of a literal with a variable referencing the parent object
var party = new (function()
{
var self = this;
this.food =
{
serve: function () {
self.music.turnoff();
},
cleanUp: function () {
}
}
this.music =
{
turnOff: function () {
}
}
})();
Call it as party.music.turnOff().
FYI, your above code block isn't valid. You're missing some commas - after the serve and food closing braces.

Categories