Skip to content

Commit a09daa1

Browse files
author
Amir Tocker
committed
Add tests for responsive behaviour
1 parent 13085bd commit a09daa1

File tree

4 files changed

+147
-20
lines changed

4 files changed

+147
-20
lines changed

‎js/angular.cloudinary.js‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -105,11 +105,11 @@
105105
controller: Controller,
106106
// The linking function will add behavior to the template
107107
link : function(scope, element, attrs) {
108-
var attributes = toCloudinaryAttributes(attrs);
108+
var options = toCloudinaryAttributes(attrs);
109109
var publicId = null;
110110

111111
if (scope.transformations) {
112-
attributes.transformation = scope.transformations;
112+
options.transformation = scope.transformations;
113113
}
114114

115115
// store public id and load image
@@ -122,7 +122,7 @@
122122
// observe and update version attribute
123123
attrs.$observe('version', function(value){
124124
if (!value) return;
125-
attributes['version'] = value;
125+
options['version'] = value;
126126
loadImage();
127127
});
128128

@@ -138,9 +138,18 @@
138138
}
139139

140140
var loadImage = function() {
141-
var url = cloudinary.url(publicId, attributes);
142-
element.attr('src', url);
143-
}
141+
if (options.responsive === "" || options.responsive === "true" || options.responsive === true) {
142+
options.responsive = true;
143+
}
144+
var url = cloudinary.url(publicId, options);
145+
if (options.responsive) {
146+
cloudinary.Util.setData(element[0], "src", url);
147+
cloudinary.cloudinary_update(element[0], options);
148+
cloudinary.responsive(options, false);
149+
} else {
150+
element.attr('src', url);
151+
}
152+
};
144153

145154
}
146155
};
@@ -155,14 +164,17 @@
155164
this.get = function(name){
156165
return configuration.get(name);
157166
};
158-
this.$get = [function cloudinaryFactory(){
159-
if(cloudinary.CloudinaryJQuery && jQuery) {
167+
this.$get = [function cloudinaryFactory() {
168+
var instance;
169+
if (cloudinary.CloudinaryJQuery && jQuery) {
160170
// cloudinary is attached to the global `jQuery` object
161171
jQuery.cloudinary.config(configuration.config());
162-
return jQuery.cloudinary;
172+
instance = jQuery.cloudinary;
163173
} else {
164-
return new cloudinary.Cloudinary(configuration.config());
174+
instance = new cloudinary.Cloudinary(configuration.config());
165175
}
166-
}]
176+
cloudinary.Util.assign(instance, cloudinary); // copy namespace to the service instance
177+
return instance;
178+
}];
167179
});
168180
});

‎karma.conf.js‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,40 @@ module.exports = function (config) {
33
basePath: '',
44
frameworks: ['jasmine'],
55
files: [
6+
'node_modules/phantomjs-polyfill/bind-polyfill.js',
67
'bower_components/lodash/lodash.js',
78
'bower_components/angular/angular.js',
89
'bower_components/angular-mocks/angular-mocks.js',
910
'bower_components/cloudinary-core/cloudinary-core.js',
1011
'js/angular.cloudinary.js',
11-
'spec/cloudinary_spec.js'],
12-
preprocessors: {
13-
},
12+
'spec/cloudinary_spec.js',
13+
{
14+
pattern: "spec/*",
15+
served: true,
16+
included: false,
17+
cached: false
18+
},
19+
{
20+
pattern: "spec/*.js",
21+
served: true,
22+
included: false
23+
24+
},
25+
{
26+
pattern: "bower_components/**/*.css",
27+
served: true,
28+
included: false
29+
30+
},
31+
{
32+
pattern: "bower_components/**/*.js",
33+
served: true,
34+
included: false,
35+
cached: false
36+
}
37+
38+
],
39+
preprocessors: {},
1440
reporters: ['story'],
1541
port: 9876,
1642
colors: true,

‎spec/cloudinary_spec.js‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
const CLOUD_NAME = "demo";
1+
const CLOUD_NAME = "sdk-test";
22

33
describe("cloudinary", function () {
44

55
var $compile,
66
$rootScope,
7-
$provider;
7+
$window;
88
beforeEach(function () {
99
module('cloudinary');
1010
angular.module('cloudinary').config(['cloudinaryProvider', function (cloudinaryProvider) {
@@ -18,6 +18,8 @@ describe("cloudinary", function () {
1818
// The injector unwraps the underscores (_) from around the parameter names when matching
1919
$compile = _$compile_;
2020
$rootScope = _$rootScope_;
21+
$window = window;
22+
$rootScope.testPublicId = "sample";
2123
}));
2224
describe("clImage", function () {
2325
it('Adds an inner <img> tag', function () {
@@ -56,7 +58,9 @@ describe("cloudinary", function () {
5658
describe("html-width", function(){
5759
var element;
5860
beforeEach(function(){
61+
$rootScope.testPublicId = "sample";
5962
element = $compile("<div><cl-image public_id='{{testPublicId}}'/></div>")($rootScope);
63+
$rootScope.$digest();
6064
});
6165
it('adds a width attribute to the tag if it has a value', function () {
6266
var element = $compile("<div><cl-image public_id='foobar'/></div>")($rootScope);
@@ -67,19 +71,52 @@ describe("cloudinary", function () {
6771
expect(element.html()).toMatch("src=\"https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/foobar\"");
6872
});
6973
it('modify the src attribute when the public ID attribute changes', function () {
70-
// Compile a piece of HTML containing the directive
7174
$rootScope.testPublicId = 'foobar';
72-
var element = $compile("<div><cl-image public_id='{{testPublicId}}'/></div>")($rootScope);
73-
// fire all the watches, so the scope expression {{1 + 1}} will be evaluated
7475
$rootScope.$digest();
75-
// Check that the compiled element contains the templated content
7676
expect(element.html()).toMatch("src=\"https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/foobar\"");
7777
$rootScope.testPublicId = 'barfoo';
7878
$rootScope.$digest();
7979
expect(element.html()).toMatch("src=\"https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/barfoo\"");
8080

8181
});
8282

83+
});
84+
describe("responsive", function () {
85+
var testWindow, tabImage2, image1;
86+
beforeAll(function (done) {
87+
testWindow = window.open("/base/spec/responsive-core-test.html", "Cloudinary test #{(new Date()).toLocaleString()}", "width=200, height=500");
88+
89+
testWindow.addEventListener('load', function () {
90+
image1 = testWindow.document.getElementById("image1");
91+
tabImage2 = testWindow.document.getElementById("tabImage2");
92+
expect(tabImage2).toBeDefined();
93+
done();
94+
});
95+
96+
});
97+
afterAll(function () {
98+
testWindow && testWindow.close();
99+
});
100+
it('should enable responsive functionality', function () {
101+
expect(tabImage2.getAttribute("src")).toMatch("https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/c_scale,w_200/sample.jpg");
102+
});
103+
it("should react to a change in the parent's width", function (done) {
104+
105+
var listener = function () {
106+
expect(tabImage2.outerHTML).toMatch("src=\"https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/c_scale,w_400/sample.jpg\"");
107+
done();
108+
};
109+
// testWindow.addEventListener('resize', listener);
110+
setTimeout(listener, 2000);
111+
testWindow.resizeTo(350, 800);
112+
});
113+
it('should apply responsive if "width" is not defined', function () {
114+
element = $compile("<div><cl-image public_id='{{testPublicId}}' responsive/></div>")($rootScope);
115+
$rootScope.$digest();
116+
expect(cloudinary.Util.getData(element[0], "width")).toBeDefined();
117+
expect(cloudinary.Util.hasClass(element[0], "cld-responsive")).toBeDefined();
118+
119+
})
83120
})
84121
});
85122
describe("clSrc", function () {

‎spec/responsive-core-test.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
4+
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
5+
6+
<!-- Custom CSS -->
7+
<!--<link href="css/logo-nav.css" rel="stylesheet">-->
8+
<script src="../bower_components/lodash/lodash.js" type="text/javascript"></script>
9+
<script src="../bower_components/angular/angular.js" type="text/javascript"></script>
10+
<script src="../bower_components/cloudinary-core/cloudinary-core.js" type="text/javascript"></script>
11+
<script src="../js/angular.cloudinary.js" type="text/javascript"></script>
12+
<script src="config.js" type="text/javascript"></script>
13+
14+
</head>
15+
16+
<body ng-app="spec">
17+
18+
<div class="container" ng-controller="specController">
19+
<h1>Bootstrap &amp; Cloudinary Responsive Images</h1>
20+
<hr>
21+
<div class="row">
22+
<div class="col-xs-12 col-md-10 col-md-offset-1 ">
23+
24+
<!-- Nav tabs -->
25+
<ul class="nav nav-tabs" role="tablist">
26+
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
27+
data-toggle="tab">Home</a></li>
28+
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" style="display: block">
29+
<cl-image responsive id="image1" width="auto" crop="scale" effect="blackwhite" public_id="sample.jpg" /></a></li>
30+
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab" style="display: block">
31+
<cl-image id="image2" width="auto" crop="scale" public_id="sample.png" responsive></cl-image>
32+
</a></li>
33+
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>
34+
</li>
35+
</ul>
36+
37+
<!-- Tab panes -->
38+
<div class="tab-content row">
39+
<div role="tabpanel" class="tab-pane active" id="home">
40+
<a href="#"><cl-image id="tabImage2" width="auto" crop="{{ cropValue || 'scale'}}" public_id="sample.jpg" responsive class="col-xs-12"/>
41+
</a>
42+
<cl-image id="tabImage3" public_id="sample.jpg" width="auto" crop="scale" effect="sepia" responsive class="col-xs-12"/>
43+
</div>
44+
<div role="tabpanel" class="tab-pane" id="profile">...</div>
45+
<div role="tabpanel" class="tab-pane" id="messages">...</div>
46+
<div role="tabpanel" class="tab-pane" id="settings">...</div>
47+
</div>
48+
49+
</div>
50+
</div>
51+
</div>
52+
</body>

0 commit comments

Comments
 (0)