updated readme with angular 11 (#304)

Author: strausr

.travis.yml

@@ -1,8 +1,7 @@
 dist: trusty
 sudo: required
 language: node_js
-node_js:
-  - "node"
+node_js: "14"
 os:
   - linux
 script:

README.md

@@ -2,7 +2,7 @@ Cloudinary
 ==========
 The official [Cloudinary](https://cloudinary.com) SDK for Angular.
 
-Cloudinary's AngularJS (AKA Angular1) SDK can be found [here](https://github.com/cloudinary/cloudinary_angular/tree/angular-1.x)
+We maintain difference branches for different versions. Cloudinary's latest Angular SDK can be found [here](https://github.com/cloudinary/cloudinary_angular/tree/angular-5.x)
 
 [Cloudinary](https://cloudinary.com) is a cloud service that offers a solution to a web application's entire image management pipeline. 
 
@@ -14,15 +14,8 @@ Cloudinary offers comprehensive APIs and administration capabilities and is easy
 Cloudinary provides URL and HTTP based APIs that can be easily integrated with any Web development framework. 
 
 For Angular, Cloudinary provides an SDK for simplifying the integration even further. 
-The SDK serves as a layer on top of one of Cloudinary's Javascript libraries:
+The SDK serves as a layer on top of one of [Cloudinary's Javascript library](https://github.com/cloudinary/cloudinary_js).
 
-| Github Repository	| Package name | Description |
-|-------------------|--------------|-------------|
-| [pkg-cloudinary-core](https://github.com/cloudinary/pkg-cloudinary-core) | cloudinary-core | Core Cloudinary Library. Use this if you do not intend to use jQuery |
-| [pkg-cloudinary-jquery](https://github.com/cloudinary/pkg-cloudinary-jquery) | cloudinary-jquery | Core Library + jQuery plugin |
-| [pkg-cloudinary-jquery-file-upload](https://github.com/cloudinary/pkg-cloudinary-jquery-file-upload) | cloudinary-jquery-file-upload | Core Library + jQuery plugin + Blueimp File Upload adapter |
-
-<a href="https://cloudinary.com/signup" style="background-color:#ff7829; border:1px solid; color: white; border-color: black; padding: 8px; text-decoration: none; box-shadow: 1px 1px 3px #224488; width: 500px">Signup for free</a>
 
 ## Live examples ##################################################################
 Start experimenting right away with one of these live examples:
@@ -36,19 +29,14 @@ Install the SDK version that supports the Angular version you are using:
 
 * For Angular 2, use `2.x`
 * For Angular 4, use `4.x`
-* For Angular 5-10, use `5.x`
+* For Angular 5-11, use `5.x`
 
 For example: 
 
 ```shell
-npm install @cloudinary/angular-5.x --save
+npm install @cloudinary/angular-5.x cloudinary-core --save
 ```
 
-## Setup ######################################################################
-
-Follow the setup procedure described in the [Cloudinary jQuery plugin](https://github.com/cloudinary/cloudinary_js#setup) setup procedure. 
-Refer to the sample projects in this repository for usage examples.
-
 ## Usage ######################################################################
 
 The module provides three types of directives:
@@ -64,7 +52,7 @@ Further video manipulation and delivery capabilities see listed in [this referen
 Note that the attribute names in the docs are using snake_case, however this SDK supports both snake_case and kebab-case for attribute names,
 e.g. both `fetch_format: 'auto'` and `'fetch-format': 'auto'` are eventually translated to `f_auto`. 
 
-### Cloudinary module configuration ##################################
+### Cloudinary module configuration and setup ##################################
 This SDK is based on the Cloudinary JS module, however the two are decoupled, i.e. this module's `Cloudinary` is a configurable service
 to which you provide your choice of our JS module.
 

projects/angular-cld/package.json

@@ -2,8 +2,8 @@
   "name": "@cloudinary/angular-5.x",
   "version": "1.3.4",
   "peerDependencies": {
-    "@angular/common": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0",
-    "@angular/core": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0"
+    "@angular/common": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0",
+    "@angular/core": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0"
   },
   "devDependencies": {
     "cloudinary-core": "^2.10.2",

projects/angular-cld/src/lib/cloudinary-sdk-analytics.spec.ts

@@ -7,6 +7,9 @@ import { CloudinaryImage } from './cloudinary-image.component';
 import { CloudinaryTransformationDirective } from './cloudinary-transformation.directive';
 import {LazyLoadDirective } from './cloudinary-lazy-load.directive';
 import { CloudinaryPlaceHolder } from'./cloudinary-placeholder.component';
+import { SDKAnalyticsConstants } from './SDKAnalyticsConstants';
+import { APP_VERSION } from './version';
+
 
 describe('Tests for sdk versionID on image tag', () => {
   describe('Config with urlAnalytics not set', () => {
@@ -17,6 +20,7 @@ describe('Tests for sdk versionID on image tag', () => {
       spyOn(localCloudinary, 'toCloudinaryAttributes').and.callThrough();
       spyOn(localCloudinary, 'url').and.callThrough();
       spyOn(localCloudinary, 'responsive').and.callThrough();
+
     });
     @Component({
       template: `<cl-image responsive public-id="sample"></cl-image>`
@@ -50,9 +54,15 @@ describe('Tests for sdk versionID on image tag', () => {
       { cloud_name: '@@fake_angular_sdk@@', urlAnalytics: true} as CloudinaryConfiguration);
 
     beforeEach(() => {
+      SDKAnalyticsConstants.sdkSemver = '1.3.3';
       spyOn(localCloudinary, 'toCloudinaryAttributes').and.callThrough();
       spyOn(localCloudinary, 'url').and.callThrough();
     });
+
+    afterEach(() => {
+      SDKAnalyticsConstants.sdkSemver = APP_VERSION;
+    });
+
     @Component({
       template: `<cl-image public-id="sample"></cl-image>`
     })
@@ -62,6 +72,7 @@ describe('Tests for sdk versionID on image tag', () => {
     let des: DebugElement;  // the elements w/ the directive
 
     beforeEach(() => {
+      SDKAnalyticsConstants.sdkSemver = '1.3.3';
       fixture = TestBed.configureTestingModule({
         declarations: [CloudinaryImage, TestComponent],
         providers: [{ provide: Cloudinary, useValue: localCloudinary }]
@@ -73,6 +84,10 @@ describe('Tests for sdk versionID on image tag', () => {
       des = fixture.debugElement.query(By.directive(CloudinaryImage));
     });
 
+    afterEach(() => {
+      SDKAnalyticsConstants.sdkSemver = APP_VERSION;
+    });
+
     it('creates an img without a feature- resulting in 0', () => {
       const img = des.children[0].nativeElement as HTMLImageElement;
       expect(img.attributes.getNamedItem('src').value).toEqual('http://res.cloudinary.com/@@fake_angular_sdk@@/image/upload/sample?_a=AKHZdAH0');
@@ -84,9 +99,16 @@ describe('Tests for sdk versionID on image tag', () => {
       { cloud_name: '@@fake_angular_sdk@@', urlAnalytics: true} as CloudinaryConfiguration);
 
     beforeEach(() => {
+      SDKAnalyticsConstants.sdkSemver = '1.3.3';
       spyOn(localCloudinary, 'toCloudinaryAttributes').and.callThrough();
       spyOn(localCloudinary, 'url').and.callThrough();
+      spyOn(SDKAnalyticsConstants, 'sdkSemver').and.returnValue('1.3.3');
     });
+
+    afterEach(() => {
+      SDKAnalyticsConstants.sdkSemver = APP_VERSION;
+    });
+
     @Component({
       template: `<cl-image accessibility="darkmode" public-id="sample"></cl-image>`
     })
@@ -96,6 +118,7 @@ describe('Tests for sdk versionID on image tag', () => {
     let des: DebugElement;  // the elements w/ the directive
 
     beforeEach(() => {
+      SDKAnalyticsConstants.sdkSemver = '1.3.3';
       fixture = TestBed.configureTestingModule({
         declarations: [CloudinaryImage, TestComponent],
         providers: [{ provide: Cloudinary, useValue: localCloudinary }]
@@ -107,6 +130,10 @@ describe('Tests for sdk versionID on image tag', () => {
       des = fixture.debugElement.query(By.directive(CloudinaryImage));
     });
 
+    afterEach(() => {
+      SDKAnalyticsConstants.sdkSemver = APP_VERSION;
+    });
+
     it('creates an img with feature accessibility D', () => {
       const img = des.children[0].nativeElement as HTMLImageElement;
       expect(img.attributes.getNamedItem('src').value).toEqual('http://res.cloudinary.com/@@fake_angular_sdk@@/image/upload/e_tint:75:black/sample?_a=AKHZdAHD');
@@ -118,10 +145,16 @@ describe('Tests for sdk versionID on image tag', () => {
       { cloud_name: '@@fake_angular_sdk@@', urlAnalytics: true } as CloudinaryConfiguration);
 
     beforeEach(() => {
+      SDKAnalyticsConstants.sdkSemver = '1.3.3';
       spyOn(localCloudinary, 'toCloudinaryAttributes').and.callThrough();
       spyOn(localCloudinary, 'url').and.callThrough();
       spyOn(localCloudinary, 'responsive').and.callThrough();
     });
+
+    afterEach(() => {
+      SDKAnalyticsConstants.sdkSemver = APP_VERSION;
+    });
+
     @Component({
       template: `<cl-image responsive public-id="sample"></cl-image>`
     })
@@ -131,6 +164,7 @@ describe('Tests for sdk versionID on image tag', () => {
     let des: DebugElement;  // the elements w/ the directive
 
     beforeEach(() => {
+      SDKAnalyticsConstants.sdkSemver = '1.3.3';
       fixture = TestBed.configureTestingModule({
         declarations: [CloudinaryImage, TestComponent],
         providers: [{ provide: Cloudinary, useValue: localCloudinary }]
@@ -143,6 +177,10 @@ describe('Tests for sdk versionID on image tag', () => {
       des = fixture.debugElement.query(By.directive(CloudinaryImage));
     });
 
+    afterEach(() => {
+      SDKAnalyticsConstants.sdkSemver = APP_VERSION;
+    });
+
     it('creates an img with feature responsive A', () => {
       const img = des.children[0].nativeElement as HTMLImageElement;
       expect(img.attributes.getNamedItem('src').value).toEqual('http://res.cloudinary.com/@@fake_angular_sdk@@/image/upload/sample?_a=AKHZdAHA');
@@ -162,6 +200,7 @@ describe('Tests for sdk versionID on image tag', () => {
     let testLocalCloudinary: Cloudinary = new Cloudinary(require('cloudinary-core'),
       { cloud_name: '@@fake_angular_sdk@@', urlAnalytics: true } as CloudinaryConfiguration);
     beforeEach(fakeAsync(() => {
+      SDKAnalyticsConstants.sdkSemver = '1.3.3';
       fixture = TestBed.configureTestingModule({
         declarations: [CloudinaryTransformationDirective, CloudinaryImage, TestComponent, LazyLoadDirective, CloudinaryPlaceHolder],
         providers: [{ provide: Cloudinary, useValue: testLocalCloudinary }]
@@ -174,6 +213,9 @@ describe('Tests for sdk versionID on image tag', () => {
       tick();
       fixture.detectChanges();
     }));
+    afterEach(() => {
+      SDKAnalyticsConstants.sdkSemver = APP_VERSION;
+    });
     it('placeholder img should encode with B', async () => {
       const placeholderimg = placeholder[0].children[0].nativeElement as HTMLImageElement;
       expect(placeholderimg.attributes.getNamedItem('src').value).toEqual('http://res.cloudinary.com/@@fake_angular_sdk@@/image/upload/e_blur:2000,f_auto,q_1/sample?_a=AKHZdAHB');
@@ -195,6 +237,7 @@ describe('Tests for sdk versionID on image tag', () => {
     let testLocalCloudinary: Cloudinary = new Cloudinary(require('cloudinary-core'),
       { cloud_name: '@@fake_angular_sdk@@', urlAnalytics: true } as CloudinaryConfiguration);
     beforeEach(fakeAsync(() => {
+      SDKAnalyticsConstants.sdkSemver = '1.3.3';
       fixture = TestBed.configureTestingModule({
         declarations: [CloudinaryTransformationDirective, CloudinaryImage, TestComponent, LazyLoadDirective, CloudinaryPlaceHolder],
         providers: [{ provide: Cloudinary, useValue: testLocalCloudinary }]
@@ -207,6 +250,9 @@ describe('Tests for sdk versionID on image tag', () => {
       tick();
       fixture.detectChanges();
     }));
+    afterEach(() => {
+      SDKAnalyticsConstants.sdkSemver = APP_VERSION;
+    });
     it('creates an img with feature lazy load C', async () => {
       const wait = (ms) => new Promise(res => setTimeout(res, ms));
       await wait(300);

projects/angular-cld/src/lib/cloudinary.service.spec.ts

@@ -23,7 +23,7 @@ describe('Cloudinary service', () => {
     });
 
     it('updates the configuration', () => {
-        
+
         const newConfig: CloudinaryConfiguration = {
             cloud_name: 'new-service-test'
         };
@@ -48,14 +48,15 @@ describe('Cloudinary service', () => {
     });
 
     it('creates an image url', () => {
-        const publicId = 'image_public_id.jpg';
-        const options = {
+      const publicId = 'image_public_id.jpg';
+
+      const options = {
             width: '100',
             crop: 'fill',
             responsive: true
         };
         expect(service.url(publicId, options)).toEqual(
-            'http://res.cloudinary.com/service-test/image/upload/c_fill,w_100/image_public_id.jpg');
+            'http://res.cloudinary.com/new-service-test/image/upload/c_fill,w_100/image_public_id.jpg');
     });
 
     describe('isJsonLikeString', () => {