style.spec.js 3.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. /**
  2. * Style.spec.js
  3. * (c) 2015~ Summernote Team
  4. * summernote may be freely distributed under the MIT license./
  5. */
  6. import chai from 'chai';
  7. import $ from 'jquery';
  8. import range from '../../../../src/js/base/core/range';
  9. import Style from '../../../../src/js/base/editing/Style';
  10. var expect = chai.expect;
  11. describe('base:editing.Style', () => {
  12. var style = new Style();
  13. describe('styleNodes', () => {
  14. it('should wrap selected text with span', () => {
  15. var $cont = $('<div class="note-editable"><p>text</p></div>');
  16. var $p = $cont.find('p');
  17. var rng = range.create($p[0].firstChild, 0, $p[0].firstChild, 4);
  18. style.styleNodes(rng);
  19. expect($cont.html()).to.deep.equal('<p><span>text</span></p>');
  20. });
  21. it('should split text and wrap selected text with span', () => {
  22. var $cont = $('<div class="note-editable"><p>text</p></div>');
  23. var $p = $cont.find('p');
  24. var rng = range.create($p[0].firstChild, 1, $p[0].firstChild, 3);
  25. style.styleNodes(rng);
  26. expect($cont.html()).to.deep.equal('<p>t<span>ex</span>t</p>');
  27. });
  28. it('should split text and insert span', () => {
  29. var $cont = $('<div class="note-editable"><p>text</p></div>');
  30. var $p = $cont.find('p');
  31. var rng = range.create($p[0].firstChild, 2, $p[0].firstChild, 2);
  32. style.styleNodes(rng);
  33. expect($cont.html()).to.deep.equal('<p>te<span></span>xt</p>');
  34. });
  35. it('should just return a parent span', () => {
  36. var $cont = $('<div class="note-editable"><p><span>text</span></p></div>');
  37. var $span = $cont.find('span');
  38. var rng = range.create($span[0].firstChild, 0, $span[0].firstChild, 4);
  39. style.styleNodes(rng);
  40. expect($cont.html()).to.deep.equal('<p><span>text</span></p>');
  41. });
  42. it('should wrap each texts with span', () => {
  43. var $cont = $('<div class="note-editable"><p><b>bold</b><span>span</span></p></div>');
  44. var $b = $cont.find('b');
  45. var $span = $cont.find('span');
  46. var rng = range.create($b[0].firstChild, 2, $span[0].firstChild, 2);
  47. style.styleNodes(rng);
  48. expect($cont.html()).to.deep.equal('<p><b>bo<span>ld</span></b><span><span>sp</span>an</span></p>');
  49. });
  50. it('should wrap each texts with span except not a single blood line', () => {
  51. var $cont = $('<div class="note-editable"><p><b>bold</b><span>span</span></p></div>');
  52. var $b = $cont.find('b');
  53. var $span = $cont.find('span');
  54. var rng = range.create($b[0].firstChild, 2, $span[0].firstChild, 4);
  55. style.styleNodes(rng);
  56. expect($cont.html()).to.deep.equal('<p><b>bo<span>ld</span></b><span>span</span></p>');
  57. });
  58. it('should expand b tag when providing the expandClosestSibling option', () => {
  59. var $cont = $('<div class="note-editable"><p>text<b>bold</b></p></div>');
  60. var $p = $cont.find('p');
  61. var rng = range.create($p[0].firstChild, 0, $p[0].firstChild, 4);
  62. style.styleNodes(rng, { nodeName: 'B', expandClosestSibling: true });
  63. expect($cont.html()).to.deep.equal('<p><b>textbold</b></p>');
  64. });
  65. it('should not expand b tag when providing the onlyPartialContains option', () => {
  66. var $cont = $('<div class="note-editable"><p>text<b>bold</b></p></div>');
  67. var $p = $cont.find('p');
  68. var rng = range.create($p[0].firstChild, 0, $p[0].firstChild, 4);
  69. style.styleNodes(rng, { nodeName: 'B', expandClosestSibling: true, onlyPartialContains: true });
  70. expect($cont.html()).to.deep.equal('<p><b>text</b><b>bold</b></p>');
  71. });
  72. });
  73. });