Skip to content

Commit 8baf9b4

Browse files
YomesIncYomesInc
authored
Add tests for sources property support in Video component (#311)
1 parent 77ac4bf commit 8baf9b4

File tree

1 file changed

+196
-0
lines changed

1 file changed

+196
-0
lines changed

‎projects/angular-cld/src/lib/cloudinary-video.component.spec.ts

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { CloudinaryTransformationDirective } from './cloudinary-transformation.d
88

99
describe('CloudinaryVideo', () => {
1010

11+
const VIDEO_UPLOAD_PATH = 'http://res.cloudinary.com/demo/video/upload/';
12+
1113
let localCloudinary: Cloudinary = new Cloudinary(require('cloudinary-core'),
1214
{ cloud_name: '@@fake_angular2_sdk@@' } as CloudinaryConfiguration);
1315

@@ -164,6 +166,200 @@ describe('CloudinaryVideo', () => {
164166
});
165167
});
166168

169+
describe('video with custom sources', () => {
170+
@Component({
171+
template: `
172+
<cl-video cloud-name="demo" public-id="dog" sources='[{"type": "mp4", "codecs":"hev1", "transformations": {"video-codec":"h265"}},
173+
{"type": "webm", "codecs":"vp9", "transformations": {"video-codec":"vp9"}},
174+
{"type": "mp4", "transformations": {"video-codec":"auto"}},
175+
{"type": "webm", "transformations": {"video-codec":"auto"}}]'>
176+
</cl-video>`
177+
})
178+
179+
class TestComponent {
180+
}
181+
182+
let fixture: ComponentFixture<TestComponent>;
183+
let des: DebugElement; // the elements w/ the directive
184+
185+
beforeEach(() => {
186+
fixture = TestBed.configureTestingModule({
187+
declarations: [CloudinaryTransformationDirective, CloudinaryVideo, TestComponent],
188+
providers: [{ provide: Cloudinary, useValue: localCloudinary }]
189+
}).createComponent(TestComponent);
190+
191+
fixture.detectChanges(); // initial binding
192+
193+
// Our element under test, which is attached to CloudinaryVideo
194+
des = fixture.debugElement.query(By.directive(CloudinaryVideo));
195+
});
196+
197+
it('should generate video tag using custom sources', () => {
198+
const video = des.children[0].nativeElement as HTMLVideoElement;
199+
// Created <video> element should have 4 child <source> elements
200+
expect(video.childElementCount).toBe(4);
201+
expect(video.children[0].attributes.getNamedItem('type').value).toEqual('video/mp4; codecs=hev1');
202+
expect(video.children[0].attributes.getNamedItem('src').value).toEqual(`${VIDEO_UPLOAD_PATH}vc_h265/dog.mp4`);
203+
expect(video.children[1].attributes.getNamedItem('type').value).toEqual('video/webm; codecs=vp9');
204+
expect(video.children[1].attributes.getNamedItem('src').value).toEqual(`${VIDEO_UPLOAD_PATH}vc_vp9/dog.webm`);
205+
expect(video.children[2].attributes.getNamedItem('type').value).toEqual('video/mp4');
206+
expect(video.children[2].attributes.getNamedItem('src').value).toEqual(`${VIDEO_UPLOAD_PATH}vc_auto/dog.mp4`);
207+
expect(video.children[3].attributes.getNamedItem('type').value).toEqual('video/webm');
208+
expect(video.children[3].attributes.getNamedItem('src').value).toEqual(`${VIDEO_UPLOAD_PATH}vc_auto/dog.webm`);
209+
});
210+
});
211+
212+
describe('video with codecs array', () => {
213+
@Component({
214+
template: `
215+
<cl-video cloud-name="demo" public-id="dog" sources='[{"type": "mp4", "codecs": ["vp8", "vorbis"], "transformations": {"video-codec":"auto"}},
216+
{"type": "webm", "codecs": ["avc1.4D401E", "mp4a.40.2"], "transformations": {"video-codec":"auto"}}]'>
217+
</cl-video>`
218+
})
219+
220+
class TestComponent {
221+
}
222+
223+
let fixture: ComponentFixture<TestComponent>;
224+
let des: DebugElement; // the elements w/ the directive
225+
226+
beforeEach(() => {
227+
fixture = TestBed.configureTestingModule({
228+
declarations: [CloudinaryTransformationDirective, CloudinaryVideo, TestComponent],
229+
providers: [{ provide: Cloudinary, useValue: localCloudinary }]
230+
}).createComponent(TestComponent);
231+
232+
fixture.detectChanges(); // initial binding
233+
234+
// Our element under test, which is attached to CloudinaryVideo
235+
des = fixture.debugElement.query(By.directive(CloudinaryVideo));
236+
});
237+
238+
it('should generate video tag with codecs array', () => {
239+
const video = des.children[0].nativeElement as HTMLVideoElement;
240+
// Created <video> element should have 2 child <source> elements
241+
expect(video.childElementCount).toBe(2);
242+
expect(video.children[0].attributes.getNamedItem('type').value).toEqual('video/mp4; codecs=vp8, vorbis');
243+
expect(video.children[0].attributes.getNamedItem('src').value).toEqual(`${VIDEO_UPLOAD_PATH}vc_auto/dog.mp4`);
244+
expect(video.children[1].attributes.getNamedItem('type').value).toEqual('video/webm; codecs=avc1.4D401E, mp4a.40.2');
245+
expect(video.children[1].attributes.getNamedItem('src').value).toEqual(`${VIDEO_UPLOAD_PATH}vc_auto/dog.webm`);
246+
});
247+
});
248+
249+
describe('video with overriding sourceTypes', () => {
250+
@Component({
251+
template: `
252+
<cl-video cloud-name="demo" public-id="dog" sources='[{"type": "mp4"}]' source-types='["ogv", "mp4", "webm"]'>
253+
</cl-video>`
254+
})
255+
256+
class TestComponent {
257+
}
258+
259+
let fixture: ComponentFixture<TestComponent>;
260+
let des: DebugElement; // the elements w/ the directive
261+
262+
beforeEach(() => {
263+
fixture = TestBed.configureTestingModule({
264+
declarations: [CloudinaryTransformationDirective, CloudinaryVideo, TestComponent],
265+
providers: [{ provide: Cloudinary, useValue: localCloudinary }]
266+
}).createComponent(TestComponent);
267+
268+
fixture.detectChanges(); // initial binding
269+
270+
// Our element under test, which is attached to CloudinaryVideo
271+
des = fixture.debugElement.query(By.directive(CloudinaryVideo));
272+
});
273+
274+
it('should generate video tag overriding sourceTypes with sources if both are given', () => {
275+
const video = des.children[0].nativeElement as HTMLVideoElement;
276+
// Created <video> element should have 1 child <source> element
277+
expect(video.childElementCount).toBe(1);
278+
expect(video.children[0].attributes.getNamedItem('type').value).toEqual('video/mp4');
279+
expect(video.children[0].attributes.getNamedItem('src').value).toEqual(`${VIDEO_UPLOAD_PATH}dog.mp4`);
280+
});
281+
});
282+
283+
describe('handle ogg/ogv in sources', () => {
284+
@Component({
285+
template: `
286+
<cl-video cloud-name="demo" public-id="dog" sources='[{"type": "ogv"}]'>
287+
</cl-video>`
288+
})
289+
290+
class TestComponent {
291+
}
292+
293+
let fixture: ComponentFixture<TestComponent>;
294+
let des: DebugElement; // the elements w/ the directive
295+
296+
beforeEach(() => {
297+
fixture = TestBed.configureTestingModule({
298+
declarations: [CloudinaryTransformationDirective, CloudinaryVideo, TestComponent],
299+
providers: [{ provide: Cloudinary, useValue: localCloudinary }]
300+
}).createComponent(TestComponent);
301+
302+
fixture.detectChanges(); // initial binding
303+
304+
// Our element under test, which is attached to CloudinaryVideo
305+
des = fixture.debugElement.query(By.directive(CloudinaryVideo));
306+
});
307+
308+
it('should correctly handle ogg/ogv', () => {
309+
const video = des.children[0].nativeElement as HTMLVideoElement;
310+
// Created <video> element should have 1 child <source> element
311+
expect(video.childElementCount).toBe(1);
312+
expect(video.children[0].attributes.getNamedItem('type').value).toEqual('video/ogg');
313+
expect(video.children[0].attributes.getNamedItem('src').value).toEqual(`${VIDEO_UPLOAD_PATH}dog.ogv`);
314+
});
315+
});
316+
317+
describe('video with sources and transformations', () => {
318+
@Component({
319+
template: `
320+
<cl-video cloud-name="demo" public-id="dog" sources='[{"type": "mp4", "codecs":"hev1", "transformations": {"video-codec":"h265"}},
321+
{"type": "webm", "codecs":"vp9", "transformations": {"video-codec":"vp9"}},
322+
{"type": "mp4", "transformations": {"video-codec":"auto"}},
323+
{"type": "webm", "transformations": {"video-codec":"auto"}}]' audio-codec="aac" video-codec='{"codec":"h264"}' start-offset="3" html-width="200" html-height="100">
324+
</cl-video>`
325+
})
326+
327+
class TestComponent {
328+
}
329+
330+
let fixture: ComponentFixture<TestComponent>;
331+
let des: DebugElement; // the elements w/ the directive
332+
333+
beforeEach(() => {
334+
fixture = TestBed.configureTestingModule({
335+
declarations: [CloudinaryTransformationDirective, CloudinaryVideo, TestComponent],
336+
providers: [{ provide: Cloudinary, useValue: localCloudinary }]
337+
}).createComponent(TestComponent);
338+
339+
fixture.detectChanges(); // initial binding
340+
341+
// Our element under test, which is attached to CloudinaryVideo
342+
des = fixture.debugElement.query(By.directive(CloudinaryVideo));
343+
});
344+
345+
it('should generate video tag with sources and transformations', () => {
346+
const video = des.children[0].nativeElement as HTMLVideoElement;
347+
expect(video.attributes.getNamedItem('width').value).toEqual('200');
348+
expect(video.attributes.getNamedItem('height').value).toEqual('100');
349+
expect(video.attributes.getNamedItem('poster').value).toEqual(`${VIDEO_UPLOAD_PATH}ac_aac,so_3,vc_h264/dog.jpg`);
350+
// Created <video> element should have 4 child <source> elements
351+
expect(video.childElementCount).toBe(4);
352+
expect(video.children[0].attributes.getNamedItem('type').value).toEqual('video/mp4; codecs=hev1');
353+
expect(video.children[0].attributes.getNamedItem('src').value).toEqual(`${VIDEO_UPLOAD_PATH}ac_aac,so_3,vc_h265/dog.mp4`);
354+
expect(video.children[1].attributes.getNamedItem('type').value).toEqual('video/webm; codecs=vp9');
355+
expect(video.children[1].attributes.getNamedItem('src').value).toEqual(`${VIDEO_UPLOAD_PATH}ac_aac,so_3,vc_vp9/dog.webm`)
356+
expect(video.children[2].attributes.getNamedItem('type').value).toEqual('video/mp4');
357+
expect(video.children[2].attributes.getNamedItem('src').value).toEqual(`${VIDEO_UPLOAD_PATH}ac_aac,so_3,vc_auto/dog.mp4`);
358+
expect(video.children[3].attributes.getNamedItem('type').value).toEqual('video/webm');
359+
expect(video.children[3].attributes.getNamedItem('src').value).toEqual(`${VIDEO_UPLOAD_PATH}ac_aac,so_3,vc_auto/dog.webm`);
360+
});
361+
});
362+
167363
describe('Video with poster using kebab-case', () => {
168364
@Component({
169365
template: `

0 commit comments

Comments
 (0)