Skip to content
This repository was archived by the owner on Sep 11, 2020. It is now read-only.

Commit 6bbb338

Browse files
linkeschlinkesch
committed
add tests for emebeds
1 parent 28647ff commit 6bbb338

File tree

1 file changed

+339
-0
lines changed

1 file changed

+339
-0
lines changed

‎spec/embeds.spec.js‎

Lines changed: 339 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,339 @@
1+
describe("Embeds addon", function () {
2+
beforeEach(function () {
3+
$('body').append('<div id="fixtures"><div class="editable"></div></div>');
4+
this.$el = $('.editable');
5+
this.editor = new MediumEditor(this.$el.get(0));
6+
this.$el.mediumInsert({
7+
editor: this.editor,
8+
embeds: {
9+
oembedProxy: false
10+
}
11+
});
12+
this.addon = this.$el.data('plugin_mediumInsertEmbeds');
13+
14+
jasmine.clock().install();
15+
});
16+
17+
afterEach(function () {
18+
$('#fixtures').remove();
19+
20+
jasmine.clock().uninstall();
21+
});
22+
23+
it('toggles placeholder', function () {
24+
var $p = this.$el.find('p').first();
25+
26+
this.$el.append('<div id="p2">&nbsp;</div>');
27+
28+
$p.click();
29+
this.$el.find('.medium-insert-buttons-show').click();
30+
this.$el.find('.medium-insert-action[data-addon="embeds"]').click();
31+
32+
expect(this.$el.find('.medium-insert-embeds-input').length).toEqual(1);
33+
expect(this.$el.find('.medium-insert-embeds-input').is('div')).toBe(true);
34+
35+
placeCaret(this.$el.find('#p2').get(0), 0);
36+
this.$el.click();
37+
38+
expect(this.$el.find('.medium-insert-embeds-input').length).toEqual(0);
39+
});
40+
41+
it('removes empty placeholder on backspace', function () {
42+
var $event = $.Event('keydown');
43+
44+
$event.which = 8;
45+
this.$el.prepend('<p class="medium-insert-embeds-input medium-insert-embeds-active"></p>');
46+
47+
this.$el.trigger($event);
48+
49+
expect(this.$el.find('.medium-insert-embeds-input').length).toEqual(0);
50+
});
51+
52+
it('supports selecting embed', function () {
53+
this.$el.prepend('<div class="medium-insert-embeds"><figure></figure><div class="medium-insert-embeds-overlay"></div></div>');
54+
55+
this.$el.find('.medium-insert-embeds-overlay').click();
56+
jasmine.clock().tick(50);
57+
58+
expect(this.$el.find('.medium-insert-embeds').hasClass('medium-insert-embeds-selected')).toBe(true);
59+
expect($('.medium-insert-embeds-toolbar').length).toEqual(1);
60+
expect($('.medium-insert-embeds-toolbar2').length).toEqual(1);
61+
expect(this.$el.find('figcaption').length).toEqual(1);
62+
});
63+
64+
it('supports disabling captions', function () {
65+
$('#fixtures').html('<div class="editable"><div class="medium-insert-embeds"><figure></figure><div class="medium-insert-embeds-overlay"></div></div></div>');
66+
this.$el = $('.editable');
67+
this.$el.mediumInsert({
68+
addons: {
69+
embeds: {
70+
captions: false
71+
}
72+
}
73+
});
74+
75+
this.$el.find('img').click();
76+
jasmine.clock().tick(50);
77+
78+
expect(this.$el.find('figcaption').length).toEqual(0);
79+
});
80+
81+
it('removes placeholder after clicking on caption', function () {
82+
this.$el.prepend('<div class="medium-insert-embeds">' +
83+
'<figure><figcaption class="medium-insert-caption-placeholder"></figcaption></figure>' +
84+
'<div class="medium-insert-embeds-overlay"></div>' +
85+
'</div>');
86+
87+
this.$el.find('.medium-insert-caption-placeholder').click();
88+
jasmine.clock().tick(50);
89+
90+
expect(this.$el.find('figcaption').hasClass('medium-insert-caption-placeholder')).toBe(false);
91+
});
92+
93+
it('supports unselecting embed', function () {
94+
this.$el.prepend('<div class="medium-insert-embeds medium-insert-embeds-selected"><figure><figcaption></figcaption></figure></div><div class="medium-insert-embeds-toolbar"></div>');
95+
this.$el.click();
96+
97+
expect(this.$el.find('.medium-insert-embeds').hasClass('medium-insert-embeds-selected')).toBe(false);
98+
expect($('.medium-insert-embeds-toolbar').length).toEqual(0);
99+
expect($('.medium-insert-embeds-toolbar2').length).toEqual(0);
100+
expect(this.$el.find('figcaption').length).toEqual(0);
101+
});
102+
103+
it('removes embed on backspace', function () {
104+
var $event = $.Event('keydown');
105+
106+
$event.which = 8;
107+
108+
this.$el.prepend('<div class="medium-insert-embeds medium-insert-embeds-selected"></div><div class="medium-insert-embeds-toolbar"></div>');
109+
this.$el.trigger($event);
110+
111+
expect(this.$el.find('.medium-insert-embeds').length).toEqual(0);
112+
expect($('.medium-insert-embeds-toolbar').length).toEqual(0);
113+
});
114+
115+
it('triggers input event after removing embed ', function (done) {
116+
var $event = $.Event('keydown');
117+
118+
this.$el.one('input', function () {
119+
expect(true).toBe(true);
120+
done();
121+
});
122+
123+
$event.which = 8;
124+
125+
this.$el.prepend('<div class="medium-insert-embeds medium-insert-embeds-selected"></div><div class="medium-insert-embeds-toolbar"></div>');
126+
127+
this.$el.trigger($event);
128+
});
129+
130+
it('supports chaning embed style', function () {
131+
var $embed;
132+
133+
this.$el.prepend('<div class="medium-insert-embeds medium-insert-embeds-left"><div class="medium-insert-embeds-overlay"></div></div>');
134+
$embed = this.$el.find('.medium-insert-embeds');
135+
136+
$embed.find('.medium-insert-embeds-overlay').click();
137+
jasmine.clock().tick(50);
138+
139+
$('.medium-insert-embeds-toolbar .medium-editor-action').first().click();
140+
141+
expect($embed.hasClass('medium-insert-embeds-wide')).toBe(true);
142+
expect($embed.hasClass('medium-insert-embeds-left')).toBe(false);
143+
});
144+
145+
it('triggers input event after changing embed style ', function (done) {
146+
this.$el.prepend('<div class="medium-insert-embeds medium-insert-embeds-left"><div class="medium-insert-embeds-overlay"></div></div>');
147+
148+
this.$el.one('input', function () {
149+
expect(true).toBe(true);
150+
done();
151+
});
152+
153+
this.$el.find('.medium-insert-embeds-overlay').click();
154+
jasmine.clock().tick(50);
155+
156+
$('.medium-insert-embeds-toolbar .medium-editor-action').first().click();
157+
});
158+
159+
it('choosing embed style calls callback function', function (done) {
160+
this.addon.options.styles.wide.added = function () {
161+
expect(true).toBe(true);
162+
done();
163+
};
164+
165+
this.$el.prepend('<div class="medium-insert-embeds medium-insert-embeds-left"><div class="medium-insert-embeds-overlay"></div></div>');
166+
167+
// Place caret into first paragraph
168+
placeCaret(this.$el.find('p').get(0), 0);
169+
170+
this.$el.find('.medium-insert-embeds-overlay').click();
171+
jasmine.clock().tick(50);
172+
173+
$('.medium-insert-embeds-toolbar .medium-editor-action').first().click();
174+
});
175+
176+
it('calls callback function after clicking on embed action ', function (done) {
177+
this.addon.options.actions.remove.clicked = function () {
178+
expect(true).toBe(true);
179+
done();
180+
};
181+
182+
this.$el.prepend('<div class="medium-insert-embeds medium-insert-embeds-left"><div class="medium-insert-embeds-overlay"></div></div>');
183+
184+
// Place caret into first paragraph
185+
placeCaret(this.$el.find('p').get(0), 0);
186+
187+
this.$el.find('.medium-insert-embeds-overlay').click();
188+
jasmine.clock().tick(50);
189+
190+
$('.medium-insert-embeds-toolbar2 .medium-editor-action').first().click();
191+
});
192+
193+
it('maintains backwards compatibility', function () {
194+
$('#fixtures').html('<div class="editable"><div class="medium-insert-embeds"><iframe></iframe></div></div>');
195+
this.$el = $('.editable');
196+
197+
this.$el.mediumInsert();
198+
199+
expect(this.$el.find('.medium-insert-embeds .medium-insert-embed iframe').length).toEqual(1);
200+
});
201+
202+
it('supports embedding youtube', function () {
203+
var $event = $.Event('keydown');
204+
205+
$event.which = 13;
206+
$('#fixtures').html('<div class="editable"><p class="medium-insert-embeds-input medium-insert-embeds-active">https://www.youtube.com/watch?v=BROWqjuTM0g</p></div>');
207+
this.$el = $('.editable');
208+
this.$el.mediumInsert({
209+
addons: {
210+
embeds: {
211+
oembedProxy: false
212+
}
213+
}
214+
});
215+
this.$el.trigger($event);
216+
217+
expect(this.$el.find('.medium-insert-embeds').length).toEqual(1);
218+
expect(this.$el.find('.medium-insert-embeds iframe').length).toEqual(1);
219+
expect(this.$el.find('.medium-insert-embeds-input').length).toEqual(0);
220+
});
221+
222+
it('supports embedding vimeo', function () {
223+
var $event = $.Event('keydown');
224+
225+
$event.which = 13;
226+
$('#fixtures').html('<div class="editable"><p class="medium-insert-embeds-input medium-insert-embeds-active">http://vimeo.com/2619976</p></div>');
227+
this.$el = $('.editable');
228+
this.$el.mediumInsert({
229+
addons: {
230+
embeds: {
231+
oembedProxy: false
232+
}
233+
}
234+
});
235+
this.$el.trigger($event);
236+
237+
expect(this.$el.find('.medium-insert-embeds').length).toEqual(1);
238+
expect(this.$el.find('.medium-insert-embeds iframe').length).toEqual(1);
239+
expect(this.$el.find('.medium-insert-embeds-input').length).toEqual(0);
240+
});
241+
242+
it('support embedding instagram', function () {
243+
var $event = $.Event('keydown');
244+
245+
$event.which = 13;
246+
$('#fixtures').html('<div class="editable"><p class="medium-insert-embeds-input medium-insert-embeds-active">http://instagram.com/p/u7PiWCsGxj</p></div>');
247+
this.$el = $('.editable');
248+
this.$el.mediumInsert({
249+
addons: {
250+
embeds: {
251+
oembedProxy: false
252+
}
253+
}
254+
});
255+
this.$el.trigger($event);
256+
257+
expect(this.$el.find('.medium-insert-embeds').length).toEqual(1);
258+
expect(this.$el.find('.medium-insert-embeds iframe').length).toEqual(1);
259+
expect(this.$el.find('.medium-insert-embeds-input').length).toEqual(0);
260+
});
261+
262+
it('converts bad embed into text', function () {
263+
var $event = $.Event('keydown');
264+
265+
$event.which = 13;
266+
$('#fixtures').html('<div class="editable"><p class="medium-insert-embeds-input medium-insert-embeds-active">test</p></div>');
267+
this.$el = $('.editable');
268+
this.$el.mediumInsert({
269+
addons: {
270+
embeds: {
271+
oembedProxy: false
272+
}
273+
}
274+
});
275+
this.$el.trigger($event);
276+
277+
expect(this.$el.find('.medium-insert-embeds-input').length).toEqual(0);
278+
expect(this.$el.find('p:first').html()).toBe('test');
279+
});
280+
281+
it('support disabling style toolbar', function () {
282+
this.addon.options.styles = false;
283+
284+
this.$el.prepend('<div class="medium-insert-embeds"><figure></figure><div class="medium-insert-embeds-overlay"></div></div>');
285+
286+
this.$el.find('.medium-insert-embeds-overlay').click();
287+
jasmine.clock().tick(50);
288+
289+
expect($('.medium-insert-embeds-toolbar').length).toEqual(0);
290+
expect($('.medium-insert-embeds-toolbar2').length).toEqual(1);
291+
});
292+
293+
it('support disabling action toolbar', function () {
294+
this.addon.options.actions = false;
295+
296+
this.$el.prepend('<div class="medium-insert-embeds"><figure></figure><div class="medium-insert-embeds-overlay"></div></div>');
297+
298+
this.$el.find('.medium-insert-embeds-overlay').click();
299+
jasmine.clock().tick(50);
300+
301+
expect($('.medium-insert-embeds-toolbar').length).toEqual(1);
302+
expect($('.medium-insert-embeds-toolbar2').length).toEqual(0);
303+
});
304+
305+
it('adds contentediable attr and overlay on initialization', function () {
306+
$('#fixtures').html('<div class="editable"><div class="medium-insert-embeds"><figure class="medium-insert-embed"></figure></div></div>');
307+
this.$el = $('.editable');
308+
309+
this.$el.mediumInsert({
310+
addons: {
311+
embeds: {}
312+
}
313+
});
314+
315+
expect(this.$el.find('.medium-insert-embeds').attr('contenteditable')).toBe('false');
316+
expect(this.$el.find('.medium-insert-embeds .medium-insert-embeds-overlay').length).toEqual(1);
317+
});
318+
319+
it('removes also contenteditable attr and ovelay on editor\'s serialize', function () {
320+
var html = '<div class="medium-insert-embeds"><figure class="medium-insert-embed"></figure></div>',
321+
editor, $serialized;
322+
323+
$('#fixtures').html('<div class="editable">' + html + '</div>');
324+
this.$el = $('.editable');
325+
326+
editor = new MediumEditor(this.$el.get(0));
327+
328+
this.$el.mediumInsert({
329+
editor: editor,
330+
addons: {
331+
embeds: {}
332+
}
333+
});
334+
335+
$serialized = $(editor.serialize()['element-0'].value);
336+
expect($serialized.find('.medium-insert-embeds').attr('contenteditable')).toBeUndefined();
337+
expect($serialized.find('.medium-insert-embeds-overlay').length).toEqual(0);
338+
});
339+
});

0 commit comments

Comments
 (0)