diff --git a/.travis.yml b/.travis.yml index 6ccf976..134107e 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,8 +1,7 @@ dist: trusty sudo: required language: node_js -node_js: - - "node" +node_js: "14" os: - linux script: diff --git a/README.md b/README.md index 4054de4..ebf2269 100644 --- a/README.md +++ b/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 | - -Signup for free ## 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. diff --git a/projects/angular-cld/package.json b/projects/angular-cld/package.json index 53d3b52..9bf8ec3 100644 --- a/projects/angular-cld/package.json +++ b/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", diff --git a/projects/angular-cld/src/lib/cloudinary-sdk-analytics.spec.ts b/projects/angular-cld/src/lib/cloudinary-sdk-analytics.spec.ts index 84a296b..b753695 100644 --- a/projects/angular-cld/src/lib/cloudinary-sdk-analytics.spec.ts +++ b/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: `` @@ -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: `` }) @@ -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: `` }) @@ -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: `` }) @@ -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); diff --git a/projects/angular-cld/src/lib/cloudinary.service.spec.ts b/projects/angular-cld/src/lib/cloudinary.service.spec.ts index 86d98a1..7daba91 100644 --- a/projects/angular-cld/src/lib/cloudinary.service.spec.ts +++ b/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', () => {