Skip to content

Commit 1bb64e1

Browse files
kanhirunkanhirun
committed
Adds unit testing for angular providers + services
* Re-generates build artifact * Moves angular components into separate files. This improves the testability of angular services such that the configuration, and run phase can be tested independently
1 parent 2b163ac commit 1bb64e1

13 files changed

+182
-92
lines changed

‎dist/angular-zendesk-widget.js

Lines changed: 59 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,6 @@
11
(function(angular) {
22

3-
angular.module('zendeskWidget', [])
4-
.run([
5-
'$window',
6-
'zendeskWidgetSettings',
7-
function($window, zendeskWidgetSettings) {
8-
if (!zendeskWidgetSettings.accountUrl) {
9-
throw new Error('Missing accountUrl. Please set in app config via ZendeskWidgetProvider');
10-
}
11-
12-
var window = $window;
13-
14-
// Following is essentially a copy paste of JS portion of the Zendesk embed code
15-
// with our settings subbed in. For more info, see:
16-
// https://support.zendesk.com/hc/en-us/articles/203908456-Using-Web-Widget-to-embed-customer-service-in-your-website
17-
18-
/*eslint-disable */
19-
20-
window.zEmbed || function(e, t) {
21-
var n, o, d, i, s, a = [],
22-
r = document.createElement("iframe");
23-
window.zEmbed = function() {
24-
a.push(arguments)
25-
}, window.zE = window.zE || window.zEmbed, r.src = "javascript:false", r.title = "", r.role = "presentation", (r.frameElement || r).style.cssText = "display: none", d = document.getElementsByTagName("script"), d = d[d.length - 1], d.parentNode.insertBefore(r, d), i = r.contentWindow, s = i.document;
26-
try {
27-
o = s
28-
} catch (c) {
29-
n = document.domain, r.src = 'javascript:var d=document.open();d.domain="' + n + '";void(0);', o = s
30-
}
31-
o.open()._l = function() {
32-
var o = this.createElement("script");
33-
n && (this.domain = n), o.id = "js-iframe-async", o.src = e, this.t = +new Date, this.zendeskHost = t, this.zEQueue = a, this.body.appendChild(o)
34-
}, o.write('<body onload="document._l();">'), o.close()
35-
}("https://assets.zendesk.com/embeddable_framework/main.js", zendeskWidgetSettings.accountUrl);
36-
37-
/*eslint-enable */
38-
39-
$window.zE(function() {
40-
zendeskWidgetSettings.beforePageLoad($window.zE);
41-
});
42-
}
43-
]);
3+
angular.module('zendeskWidget', []);
444

455
})(angular);
466

@@ -59,7 +19,6 @@
5919
];
6020

6121
angular.module('zendeskWidget')
62-
.value('zendeskWidgetSettings', settings)
6322
.provider('ZendeskWidget', [function() {
6423
/**
6524
* Configure the widget
@@ -98,3 +57,61 @@
9857
}]);
9958

10059
})(angular);
60+
61+
(function(angular) {
62+
63+
var settings = {
64+
accountUrl: '',
65+
beforePageLoad: angular.noop
66+
};
67+
68+
angular.module('zendeskWidget')
69+
.value('zendeskWidgetSettings', settings);
70+
71+
})(angular);
72+
73+
(function(angular) {
74+
75+
angular.module('zendeskWidget')
76+
.run([
77+
'$window',
78+
'zendeskWidgetSettings',
79+
function($window, zendeskWidgetSettings) {
80+
if (!zendeskWidgetSettings.accountUrl) {
81+
throw new Error('Missing accountUrl. Please set in app config via ZendeskWidgetProvider');
82+
}
83+
84+
var window = $window;
85+
86+
// Following is essentially a copy paste of JS portion of the Zendesk embed code
87+
// with our settings subbed in. For more info, see:
88+
// https://support.zendesk.com/hc/en-us/articles/203908456-Using-Web-Widget-to-embed-customer-service-in-your-website
89+
90+
/*eslint-disable */
91+
92+
window.zEmbed || function(e, t) {
93+
var n, o, d, i, s, a = [],
94+
r = document.createElement("iframe");
95+
window.zEmbed = function() {
96+
a.push(arguments)
97+
}, window.zE = window.zE || window.zEmbed, r.src = "javascript:false", r.title = "", r.role = "presentation", (r.frameElement || r).style.cssText = "display: none", d = document.getElementsByTagName("script"), d = d[d.length - 1], d.parentNode.insertBefore(r, d), i = r.contentWindow, s = i.document;
98+
try {
99+
o = s
100+
} catch (c) {
101+
n = document.domain, r.src = 'javascript:var d=document.open();d.domain="' + n + '";void(0);', o = s
102+
}
103+
o.open()._l = function() {
104+
var o = this.createElement("script");
105+
n && (this.domain = n), o.id = "js-iframe-async", o.src = e, this.t = +new Date, this.zendeskHost = t, this.zEQueue = a, this.body.appendChild(o)
106+
}, o.write('<body onload="document._l();">'), o.close()
107+
}("https://assets.zendesk.com/embeddable_framework/main.js", zendeskWidgetSettings.accountUrl);
108+
109+
/*eslint-enable */
110+
111+
$window.zE(function() {
112+
zendeskWidgetSettings.beforePageLoad($window.zE);
113+
});
114+
}
115+
]);
116+
117+
})(angular);

‎dist/angular-zendesk-widget.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulpfile.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,14 @@ var rootDirectory = path.resolve('./');
1919
var sourceDirectory = path.join(rootDirectory, './src');
2020

2121
var sourceFiles = [
22-
23-
// Make sure module files are handled first
22+
// Load angular module files first
2423
path.join(sourceDirectory, '/**/*.module.js'),
2524

26-
// Then add all JavaScript files
27-
path.join(sourceDirectory, '/**/*.js')
25+
// Next, add all angular services (order independent)
26+
path.join(sourceDirectory, '/**/*.service.js'),
27+
28+
// Then the angular run files last
29+
path.join(sourceDirectory, '/**/*.run.js')
2830
];
2931

3032
var lintFiles = [

‎karma-dist-concatenated.conf.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ module.exports = function(config) {
2424
'bower/angular/angular.js',
2525
'bower/angular-mocks/angular-mocks.js',
2626
'dist/angular-zendesk-widget.js',
27-
'test/unit/**/*.js'
27+
'test/integration/**/*Spec.js'
2828
],
2929

3030

‎karma-dist-minified.conf.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ module.exports = function(config) {
2424
'bower/angular/angular.js',
2525
'bower/angular-mocks/angular-mocks.js',
2626
'dist/angular-zendesk-widget.min.js',
27-
'test/unit/**/*.js'
27+
'test/integration/**/*Spec.js'
2828
],
2929

3030

‎karma-src.conf.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,13 @@ module.exports = function(config) {
2525
'bower/angular-mocks/angular-mocks.js',
2626
'src/**/*.module.js',
2727
'src/**/*.js',
28-
'test/unit/**/*.js'
28+
'test/unit/**/*Spec.js'
2929
],
3030

3131

3232
// list of files to exclude
3333
exclude: [
34+
'src/**/*.run.js'
3435
],
3536

3637

‎src/angular-zendesk-widget/services/zendeskWidgetProvider.js renamed to ‎src/angular-zendesk-widget/services/zendeskWidgetProvider.service.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
];
1414

1515
angular.module('zendeskWidget')
16-
.value('zendeskWidgetSettings', settings)
1716
.provider('ZendeskWidget', [function() {
1817
/**
1918
* Configure the widget

‎src/angular-zendesk-widget/services/zendeskWidgetSettings.service.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
(function(angular) {
2+
3+
var settings = {
4+
accountUrl: '',
5+
beforePageLoad: angular.noop
6+
};
7+
8+
angular.module('zendeskWidget')
9+
.value('zendeskWidgetSettings', settings);
10+
11+
})(angular);

‎src/angular-zendesk-widget/zendeskWidget.module.js

Lines changed: 1 addition & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,5 @@
11
(function(angular) {
22

3-
angular.module('zendeskWidget', [])
4-
.run([
5-
'$window',
6-
'zendeskWidgetSettings',
7-
function($window, zendeskWidgetSettings) {
8-
if (!zendeskWidgetSettings.accountUrl) {
9-
throw new Error('Missing accountUrl. Please set in app config via ZendeskWidgetProvider');
10-
}
11-
12-
var window = $window;
13-
14-
// Following is essentially a copy paste of JS portion of the Zendesk embed code
15-
// with our settings subbed in. For more info, see:
16-
// https://support.zendesk.com/hc/en-us/articles/203908456-Using-Web-Widget-to-embed-customer-service-in-your-website
17-
18-
/*eslint-disable */
19-
20-
window.zEmbed || function(e, t) {
21-
var n, o, d, i, s, a = [],
22-
r = document.createElement("iframe");
23-
window.zEmbed = function() {
24-
a.push(arguments)
25-
}, window.zE = window.zE || window.zEmbed, r.src = "javascript:false", r.title = "", r.role = "presentation", (r.frameElement || r).style.cssText = "display: none", d = document.getElementsByTagName("script"), d = d[d.length - 1], d.parentNode.insertBefore(r, d), i = r.contentWindow, s = i.document;
26-
try {
27-
o = s
28-
} catch (c) {
29-
n = document.domain, r.src = 'javascript:var d=document.open();d.domain="' + n + '";void(0);', o = s
30-
}
31-
o.open()._l = function() {
32-
var o = this.createElement("script");
33-
n && (this.domain = n), o.id = "js-iframe-async", o.src = e, this.t = +new Date, this.zendeskHost = t, this.zEQueue = a, this.body.appendChild(o)
34-
}, o.write('<body onload="document._l();">'), o.close()
35-
}("https://assets.zendesk.com/embeddable_framework/main.js", zendeskWidgetSettings.accountUrl);
36-
37-
/*eslint-enable */
38-
39-
$window.zE(function() {
40-
zendeskWidgetSettings.beforePageLoad($window.zE);
41-
});
42-
}
43-
]);
3+
angular.module('zendeskWidget', []);
444

455
})(angular);

‎src/angular-zendesk-widget/zendeskWidget.run.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
(function(angular) {
2+
3+
angular.module('zendeskWidget')
4+
.run([
5+
'$window',
6+
'zendeskWidgetSettings',
7+
function($window, zendeskWidgetSettings) {
8+
if (!zendeskWidgetSettings.accountUrl) {
9+
throw new Error('Missing accountUrl. Please set in app config via ZendeskWidgetProvider');
10+
}
11+
12+
var window = $window;
13+
14+
// Following is essentially a copy paste of JS portion of the Zendesk embed code
15+
// with our settings subbed in. For more info, see:
16+
// https://support.zendesk.com/hc/en-us/articles/203908456-Using-Web-Widget-to-embed-customer-service-in-your-website
17+
18+
/*eslint-disable */
19+
20+
window.zEmbed || function(e, t) {
21+
var n, o, d, i, s, a = [],
22+
r = document.createElement("iframe");
23+
window.zEmbed = function() {
24+
a.push(arguments)
25+
}, window.zE = window.zE || window.zEmbed, r.src = "javascript:false", r.title = "", r.role = "presentation", (r.frameElement || r).style.cssText = "display: none", d = document.getElementsByTagName("script"), d = d[d.length - 1], d.parentNode.insertBefore(r, d), i = r.contentWindow, s = i.document;
26+
try {
27+
o = s
28+
} catch (c) {
29+
n = document.domain, r.src = 'javascript:var d=document.open();d.domain="' + n + '";void(0);', o = s
30+
}
31+
o.open()._l = function() {
32+
var o = this.createElement("script");
33+
n && (this.domain = n), o.id = "js-iframe-async", o.src = e, this.t = +new Date, this.zendeskHost = t, this.zEQueue = a, this.body.appendChild(o)
34+
}, o.write('<body onload="document._l();">'), o.close()
35+
}("https://assets.zendesk.com/embeddable_framework/main.js", zendeskWidgetSettings.accountUrl);
36+
37+
/*eslint-enable */
38+
39+
$window.zE(function() {
40+
zendeskWidgetSettings.beforePageLoad($window.zE);
41+
});
42+
}
43+
]);
44+
45+
})(angular);

‎test/unit/angular-zendesk-widget/zendeskWidgetSpec.js renamed to ‎test/integration/zendeskWidgetSpec.js

File renamed without changes.

‎test/unit/services/zendeskWidgetProviderSpec.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
describe('ZendeskWidgetProvider', function() {
2+
'use strict';
3+
4+
var subject, mockService, $window;
5+
6+
beforeEach(module('zendeskWidget'));
7+
beforeEach(inject(function(_$window_, _ZendeskWidget_) {
8+
subject = _ZendeskWidget_;
9+
$window = _$window_;
10+
}));
11+
12+
describe('a set of API methods', function() {
13+
beforeEach(function() {
14+
var apiMethods = ['setLocale', 'identify', 'hide', 'show', 'activate'];
15+
mockService = jasmine.createSpyObj('MockZendeskWebWidgetAPI', apiMethods);
16+
$window.zE = mockService;
17+
});
18+
19+
it("delegates to Zendesk's Web Widget API", function() {
20+
var anyArgs = ['foo', 'bar', 'baz'];
21+
22+
subject.identify(anyArgs);
23+
subject.hide(anyArgs);
24+
subject.show(anyArgs);
25+
subject.activate(anyArgs);
26+
subject.setLocale(anyArgs);
27+
28+
expect(mockService.identify).toHaveBeenCalledWith(anyArgs);
29+
expect(mockService.hide).toHaveBeenCalledWith(anyArgs);
30+
expect(mockService.show).toHaveBeenCalledWith(anyArgs);
31+
expect(mockService.activate).toHaveBeenCalledWith(anyArgs);
32+
expect(mockService.setLocale).toHaveBeenCalledWith(anyArgs);
33+
});
34+
});
35+
})

‎test/unit/services/zendeskWidgetSettingsSpec.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
describe('zendeskWidgetSettings', function() {
2+
'use strict';
3+
4+
var subject;
5+
6+
beforeEach(module('zendeskWidget'));
7+
beforeEach(inject(function(_zendeskWidgetSettings_) {
8+
subject = _zendeskWidgetSettings_;
9+
}));
10+
11+
describe('by default', function() {
12+
it('has a blank `accountUrl`', function() {
13+
expect(subject['accountUrl']).toEqual('');
14+
});
15+
16+
it('does a no-op on `beforePageLoad`', function() {
17+
expect(subject['beforePageLoad']).toEqual(angular.noop);
18+
});
19+
});
20+
})

0 commit comments

Comments
 (0)