# all files / test/base/editing/ style.spec.js

100% Statements 58/58
100% Branches 0/0
100% Functions 10/10
100% Lines 58/58

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93

    1×
    1×
    1×
    1×

    1×

    1×
    1×

    1×
    1×
    1×
    1×
    1×
    1×

    1×

    1×
    1×
    1×
    1×
    1×

    1×

    1×
    1×
    1×
    1×
    1×

    1×

    1×
    1×
    1×
    1×
    1×

    1×

    1×
    1×
    1×
    1×
    1×
    1×

    1×

    1×
    1×
    1×
    1×
    1×
    1×

    1×

    1×
    1×
    1×
    1×
    1×

    1×

    1×
    1×
    1×
    1×
    1×

    1×

     /**
     * Style.spec.js
     * (c) 2015~ Summernote Team
     * summernote may be freely distributed under the MIT license./
     */

    import chai from 'chai';
    import $ from 'jquery';
    import range from '../../../src/js/base/core/range';
    import Style from '../../../src/js/base/editing/Style';

    var expect = chai.expect;

    describe('base:editing.Style', () => {
      var style = new Style();

      describe('styleNodes', () => {
        it('should wrap selected text with span', () => {
          var $cont = $('<div class="note-editable"><p>text</p></div>');
          var $p = $cont.find('p');
          var rng = range.create($p[0].firstChild, 0, $p[0].firstChild, 4);
          style.styleNodes(rng);

          expect($cont.html()).to.deep.equal('<p><span>text</span></p>');
        });

        it('should split text and wrap selected text with span', () => {
          var $cont = $('<div class="note-editable"><p>text</p></div>');
          var $p = $cont.find('p');
          var rng = range.create($p[0].firstChild, 1, $p[0].firstChild, 3);
          style.styleNodes(rng);

          expect($cont.html()).to.deep.equal('<p>t<span>ex</span>t</p>');
        });

        it('should split text and insert span', () => {
          var $cont = $('<div class="note-editable"><p>text</p></div>');
          var $p = $cont.find('p');
          var rng = range.create($p[0].firstChild, 2, $p[0].firstChild, 2);
          style.styleNodes(rng);

          expect($cont.html()).to.deep.equal('<p>te<span></span>xt</p>');
        });

        it('should just return a parent span', () => {
          var $cont = $('<div class="note-editable"><p><span>text</span></p></div>');
          var $span = $cont.find('span');
          var rng = range.create($span[0].firstChild, 0, $span[0].firstChild, 4);
          style.styleNodes(rng);

          expect($cont.html()).to.deep.equal('<p><span>text</span></p>');
        });

        it('should wrap each texts with span', () => {
          var $cont = $('<div class="note-editable"><p><b>bold</b><span>span</span></p></div>');
          var $b = $cont.find('b');
          var $span = $cont.find('span');
          var rng = range.create($b[0].firstChild, 2, $span[0].firstChild, 2);
          style.styleNodes(rng);

          expect($cont.html()).to.deep.equal('<p><b>bo<span>ld</span></b><span><span>sp</span>an</span></p>');
        });

        it('should wrap each texts with span except not a single blood line', () => {
          var $cont = $('<div class="note-editable"><p><b>bold</b><span>span</span></p></div>');
          var $b = $cont.find('b');
          var $span = $cont.find('span');
          var rng = range.create($b[0].firstChild, 2, $span[0].firstChild, 4);
          style.styleNodes(rng);

          expect($cont.html()).to.deep.equal('<p><b>bo<span>ld</span></b><span>span</span></p>');
        });

        it('should expand b tag when providing the expandClosestSibling option', () => {
          var $cont = $('<div class="note-editable"><p>text<b>bold</b></p></div>');
          var $p = $cont.find('p');
          var rng = range.create($p[0].firstChild, 0, $p[0].firstChild, 4);
          style.styleNodes(rng, { nodeName: 'B', expandClosestSibling: true });

          expect($cont.html()).to.deep.equal('<p><b>textbold</b></p>');
        });

        it('should not expand b tag when providing the onlyPartialContains option', () => {
          var $cont = $('<div class="note-editable"><p>text<b>bold</b></p></div>');
          var $p = $cont.find('p');
          var rng = range.create($p[0].firstChild, 0, $p[0].firstChild, 4);
          style.styleNodes(rng, { nodeName: 'B', expandClosestSibling: true, onlyPartialContains: true });

          expect($cont.html()).to.deep.equal('<p><b>text</b><b>bold</b></p>');
        });
      });
    });