tables.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import MarkdownDataProcessor from '/ckeditor5/markdown-gfm/gfmdataprocessor.js';
  6. import { stringify } from '/tests/engine/_utils/view.js';
  7. describe( 'GFMDataProcessor', () => {
  8. let dataProcessor;
  9. beforeEach( () => {
  10. dataProcessor = new MarkdownDataProcessor();
  11. } );
  12. describe( 'tables', () => {
  13. describe( 'toView', () => {
  14. it( 'should process tables', () => {
  15. const viewFragment = dataProcessor.toView(
  16. '| Heading 1 | Heading 2\n' +
  17. '| --------- | ---------\n' +
  18. '| Cell 1 | Cell 2\n' +
  19. '| Cell 3 | Cell 4\n'
  20. );
  21. expect( stringify( viewFragment ) ).to.equal(
  22. '<table>' +
  23. '<thead>' +
  24. '<tr>' +
  25. '<th>Heading 1</th>' +
  26. '<th>Heading 2</th>' +
  27. '</tr>' +
  28. '</thead>' +
  29. '<tbody>' +
  30. '<tr>' +
  31. '<td>Cell 1</td>' +
  32. '<td>Cell 2</td>' +
  33. '</tr>' +
  34. '<tr>' +
  35. '<td>Cell 3</td>' +
  36. '<td>Cell 4</td>' +
  37. '</tr>' +
  38. '</tbody>' +
  39. '</table>'
  40. );
  41. } );
  42. it( 'should process tables with aligned columns', () => {
  43. const viewFragment = dataProcessor.toView(
  44. '| Header 1 | Header 2 | Header 3 | Header 4 |\n' +
  45. '| :------: | -------: | :------- | -------- |\n' +
  46. '| Cell 1 | Cell 2 | Cell 3 | Cell 4 |\n' +
  47. '| Cell 5 | Cell 6 | Cell 7 | Cell 8 |'
  48. );
  49. expect( stringify( viewFragment ) ).to.equal(
  50. '<table>' +
  51. '<thead>' +
  52. '<tr>' +
  53. '<th align="center">Header 1</th>' +
  54. '<th align="right">Header 2</th>' +
  55. '<th align="left">Header 3</th>' +
  56. '<th>Header 4</th>' +
  57. '</tr>' +
  58. '</thead>' +
  59. '<tbody>' +
  60. '<tr>' +
  61. '<td align="center">Cell 1</td>' +
  62. '<td align="right">Cell 2</td>' +
  63. '<td align="left">Cell 3</td>' +
  64. '<td>Cell 4</td>' +
  65. '</tr>' +
  66. '<tr>' +
  67. '<td align="center">Cell 5</td>' +
  68. '<td align="right">Cell 6</td>' +
  69. '<td align="left">Cell 7</td>' +
  70. '<td>Cell 8</td>' +
  71. '</tr>' +
  72. '</tbody>' +
  73. '</table>'
  74. );
  75. } );
  76. it( 'should process not table without borders', () => {
  77. const viewFragment = dataProcessor.toView(
  78. 'Header 1 | Header 2\n' +
  79. '-------- | --------\n' +
  80. 'Cell 1 | Cell 2\n' +
  81. 'Cell 3 | Cell 4'
  82. );
  83. expect( stringify( viewFragment ) ).to.equal(
  84. '<table>' +
  85. '<thead>' +
  86. '<tr><th>Header 1</th><th>Header 2</th></tr>' +
  87. '</thead>' +
  88. '<tbody>' +
  89. '<tr><td>Cell 1</td><td>Cell 2</td></tr>' +
  90. '<tr><td>Cell 3</td><td>Cell 4</td></tr>' +
  91. '</tbody>' +
  92. '</table>'
  93. );
  94. } );
  95. it( 'should process formatting inside cells', () => {
  96. const viewFragment = dataProcessor.toView(
  97. 'Header 1|Header 2|Header 3|Header 4\n' +
  98. ':-------|:------:|-------:|--------\n' +
  99. '*Cell 1* |**Cell 2** |~~Cell 3~~ |Cell 4'
  100. );
  101. expect( stringify( viewFragment ) ).to.equal(
  102. '<table>' +
  103. '<thead>' +
  104. '<tr>' +
  105. '<th align="left">Header 1</th>' +
  106. '<th align="center">Header 2</th>' +
  107. '<th align="right">Header 3</th>' +
  108. '<th>Header 4</th>' +
  109. '</tr>' +
  110. '</thead>' +
  111. '<tbody>' +
  112. '<tr>' +
  113. '<td align="left"><em>Cell 1</em></td>' +
  114. '<td align="center"><strong>Cell 2</strong></td>' +
  115. '<td align="right"><del>Cell 3</del></td>' +
  116. '<td>Cell 4</td>' +
  117. '</tr>' +
  118. '</tbody>' +
  119. '</table>'
  120. );
  121. } );
  122. } );
  123. } );
  124. } );