Add tests for responsive behaviour

cloudinary · Mar 15, 2016 · a09daa1 · a09daa1
1 parent 13085bd
commit a09daa1
Show file tree

Hide file tree

Showing 4 changed files with 147 additions and 20 deletions.
diff --git a/js/angular.cloudinary.js b/js/angular.cloudinary.js
@@ -105,11 +105,11 @@
       controller: Controller,
       // The linking function will add behavior to the template
       link : function(scope, element, attrs) {
-        var attributes = toCloudinaryAttributes(attrs);
+        var options = toCloudinaryAttributes(attrs);
         var publicId = null;
 
         if (scope.transformations) {
-          attributes.transformation = scope.transformations;
+          options.transformation = scope.transformations;
         }
 
         // store public id and load image
@@ -122,7 +122,7 @@
         // observe and update version attribute
         attrs.$observe('version', function(value){
           if (!value) return;
-          attributes['version'] = value;
+          options['version'] = value;
           loadImage();
         });
 
@@ -138,9 +138,18 @@
         }
 
         var loadImage = function() {
-          var url = cloudinary.url(publicId, attributes);
-          element.attr('src', url);
-        }
+          if (options.responsive === "" || options.responsive === "true" || options.responsive === true) {
+            options.responsive = true;
+          }
+          var url = cloudinary.url(publicId, options);
+          if (options.responsive) {
+            cloudinary.Util.setData(element[0], "src", url);
+            cloudinary.cloudinary_update(element[0], options);
+            cloudinary.responsive(options, false);
+          } else {
+            element.attr('src', url);
+          }
+        };
 
       }
     };
@@ -155,14 +164,17 @@
     this.get = function(name){
       return configuration.get(name);
     };
-    this.$get = [function cloudinaryFactory(){
-      if(cloudinary.CloudinaryJQuery && jQuery) {
+    this.$get = [function cloudinaryFactory() {
+      var instance;
+      if (cloudinary.CloudinaryJQuery && jQuery) {
         // cloudinary is attached to the global `jQuery` object
         jQuery.cloudinary.config(configuration.config());
-        return jQuery.cloudinary;
+        instance = jQuery.cloudinary;
       } else {
-        return new cloudinary.Cloudinary(configuration.config());
+        instance = new cloudinary.Cloudinary(configuration.config());
       }
-    }]
+      cloudinary.Util.assign(instance, cloudinary); // copy namespace to the service instance
+      return instance;
+    }];
   });
 });
diff --git a/karma.conf.js b/karma.conf.js
@@ -3,14 +3,40 @@ module.exports = function (config) {
     basePath: '',
     frameworks: ['jasmine'],
     files: [
+      'node_modules/phantomjs-polyfill/bind-polyfill.js',
       'bower_components/lodash/lodash.js',
       'bower_components/angular/angular.js',
       'bower_components/angular-mocks/angular-mocks.js',
       'bower_components/cloudinary-core/cloudinary-core.js',
       'js/angular.cloudinary.js',
-      'spec/cloudinary_spec.js'],
-    preprocessors: {
-    },
+      'spec/cloudinary_spec.js',
+      {
+        pattern: "spec/*",
+        served: true,
+        included: false,
+        cached: false
+      },
+      {
+        pattern: "spec/*.js",
+        served: true,
+        included: false
+
+      },
+      {
+        pattern: "bower_components/**/*.css",
+        served: true,
+        included: false
+
+      },
+      {
+        pattern: "bower_components/**/*.js",
+        served: true,
+        included: false,
+        cached: false
+      }
+
+    ],
+    preprocessors: {},
     reporters: ['story'],
     port: 9876,
     colors: true,

diff --git a/spec/cloudinary_spec.js b/spec/cloudinary_spec.js
@@ -1,10 +1,10 @@
-const CLOUD_NAME = "demo";
+const CLOUD_NAME = "sdk-test";
 
 describe("cloudinary", function () {
 
   var $compile,
       $rootScope,
-      $provider;
+      $window;
   beforeEach(function () {
     module('cloudinary');
     angular.module('cloudinary').config(['cloudinaryProvider', function (cloudinaryProvider) {
@@ -18,6 +18,8 @@ describe("cloudinary", function () {
     // The injector unwraps the underscores (_) from around the parameter names when matching
     $compile = _$compile_;
     $rootScope = _$rootScope_;
+    $window = window;
+    $rootScope.testPublicId = "sample";
   }));
   describe("clImage", function () {
     it('Adds an inner <img> tag', function () {
@@ -56,7 +58,9 @@ describe("cloudinary", function () {
     describe("html-width", function(){
       var element;
       beforeEach(function(){
+        $rootScope.testPublicId = "sample";
         element = $compile("<div><cl-image public_id='{{testPublicId}}'/></div>")($rootScope);
+        $rootScope.$digest();
       });
       it('adds a width attribute to the tag if it has a value', function () {
         var element = $compile("<div><cl-image public_id='foobar'/></div>")($rootScope);
@@ -67,19 +71,52 @@ describe("cloudinary", function () {
         expect(element.html()).toMatch("src=\"https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/foobar\"");
       });
       it('modify the src attribute when the public ID attribute changes', function () {
-        // Compile a piece of HTML containing the directive
         $rootScope.testPublicId = 'foobar';
-        var element = $compile("<div><cl-image public_id='{{testPublicId}}'/></div>")($rootScope);
-        // fire all the watches, so the scope expression {{1 + 1}} will be evaluated
         $rootScope.$digest();
-        // Check that the compiled element contains the templated content
         expect(element.html()).toMatch("src=\"https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/foobar\"");
         $rootScope.testPublicId = 'barfoo';
         $rootScope.$digest();
         expect(element.html()).toMatch("src=\"https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/barfoo\"");
 
       });
 
+    });
+    describe("responsive", function () {
+      var testWindow, tabImage2, image1;
+      beforeAll(function (done) {
+        testWindow = window.open("/base/spec/responsive-core-test.html", "Cloudinary test #{(new Date()).toLocaleString()}", "width=200, height=500");
+
+        testWindow.addEventListener('load', function () {
+          image1 = testWindow.document.getElementById("image1");
+          tabImage2 = testWindow.document.getElementById("tabImage2");
+          expect(tabImage2).toBeDefined();
+          done();
+        });
+
+      });
+      afterAll(function () {
+        testWindow && testWindow.close();
+      });
+      it('should enable responsive functionality', function () {
+        expect(tabImage2.getAttribute("src")).toMatch("https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/c_scale,w_200/sample.jpg");
+      });
+      it("should react to a change in the parent's width", function (done) {
+
+        var listener = function () {
+          expect(tabImage2.outerHTML).toMatch("src=\"https?://res\.cloudinary\.com/" + CLOUD_NAME + "/image/upload/c_scale,w_400/sample.jpg\"");
+          done();
+        };
+        // testWindow.addEventListener('resize', listener);
+        setTimeout(listener, 2000);
+        testWindow.resizeTo(350, 800);
+      });
+      it('should apply responsive if "width" is not defined', function () {
+        element = $compile("<div><cl-image public_id='{{testPublicId}}' responsive/></div>")($rootScope);
+        $rootScope.$digest();
+        expect(cloudinary.Util.getData(element[0], "width")).toBeDefined();
+        expect(cloudinary.Util.hasClass(element[0], "cld-responsive")).toBeDefined();
+
+      })
     })
   });
   describe("clSrc", function () {

diff --git a/spec/responsive-core-test.html b/spec/responsive-core-test.html
@@ -0,0 +1,52 @@
+<html>
+<head>
+    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
+
+    <!-- Custom CSS -->
+    <!--<link href="css/logo-nav.css" rel="stylesheet">-->
+    <script src="../bower_components/lodash/lodash.js" type="text/javascript"></script>
+    <script src="../bower_components/angular/angular.js" type="text/javascript"></script>
+    <script src="../bower_components/cloudinary-core/cloudinary-core.js" type="text/javascript"></script>
+    <script src="../js/angular.cloudinary.js" type="text/javascript"></script>
+    <script src="config.js" type="text/javascript"></script>
+
+</head>
+
+<body ng-app="spec">
+
+<div class="container" ng-controller="specController">
+    <h1>Bootstrap &amp; Cloudinary Responsive Images</h1>
+    <hr>
+    <div class="row">
+        <div class="col-xs-12 col-md-10 col-md-offset-1 ">
+
+            <!-- Nav tabs -->
+            <ul class="nav nav-tabs" role="tablist">
+                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab"
+                                                          data-toggle="tab">Home</a></li>
+                <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" style="display: block">
+                    <cl-image responsive id="image1" width="auto" crop="scale" effect="blackwhite" public_id="sample.jpg" /></a></li>
+                <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab" style="display: block">
+                    <cl-image id="image2" width="auto" crop="scale" public_id="sample.png" responsive></cl-image>
+                </a></li>
+                <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>
+                </li>
+            </ul>
+
+            <!-- Tab panes -->
+            <div class="tab-content row">
+                <div role="tabpanel" class="tab-pane active" id="home">
+                    <a href="#"><cl-image id="tabImage2" width="auto" crop="{{ cropValue || 'scale'}}" public_id="sample.jpg" responsive class="col-xs-12"/>
+                    </a>
+                    <cl-image id="tabImage3" public_id="sample.jpg" width="auto" crop="scale" effect="sepia" responsive class="col-xs-12"/>
+                </div>
+                <div role="tabpanel" class="tab-pane" id="profile">...</div>
+                <div role="tabpanel" class="tab-pane" id="messages">...</div>
+                <div role="tabpanel" class="tab-pane" id="settings">...</div>
+            </div>
+
+        </div>
+    </div>
+</div>
+</body>