src/CompositionHelper.test.ts

   1 import { assert } from 'chai';
   2 import { CompositionHelper } from './CompositionHelper';
   3
   4 describe('CompositionHelper', () => {
   5   let terminal;
   6   let compositionHelper;
   7   let compositionView;
   8   let textarea;
   9   let handledText;
  10
  11   beforeEach(() => {
  12     compositionView = {
  13       classList: {
  14         add: () => {},
  15         remove: () => {},
  16       },
  17       getBoundingClientRect: () => {
  18         return { width: 0 };
  19       },
  20       style: {
  21         left: 0,
  22         top: 0
  23       },
  24       textContent: ''
  25     };
  26     textarea = {
  27       value: '',
  28       style: {
  29         left: 0,
  30         top: 0
  31       }
  32     };
  33     terminal = {
  34       element: {
  35         querySelector: () => {
  36           return { offsetLeft: 0, offsetTop: 0 };
  37         }
  38       },
  39       handler: function (text) {
  40         handledText += text;
  41       }
  42     };
  43     handledText = '';
  44     compositionHelper = new CompositionHelper(textarea, compositionView, terminal);
  45   });
  46
  47   describe('Input', () => {
  48     it('Should insert simple characters', function (done) {
  49       // First character 'ㅇ'
  50       compositionHelper.compositionstart();
  51       compositionHelper.compositionupdate({ data: 'ㅇ' });
  52       textarea.value = 'ㅇ';
  53       setTimeout(() => { // wait for any textarea updates
  54         compositionHelper.compositionend();
  55         setTimeout(() => { // wait for any textarea updates
  56           assert.equal(handledText, 'ㅇ');
  57           // Second character 'ㅇ'
  58           compositionHelper.compositionstart();
  59           compositionHelper.compositionupdate({ data: 'ㅇ' });
  60           textarea.value = 'ㅇㅇ';
  61           setTimeout(() => { // wait for any textarea updates
  62             compositionHelper.compositionend();
  63             setTimeout(() => { // wait for any textarea updates
  64               assert.equal(handledText, 'ㅇㅇ');
  65               done();
  66             }, 0);
  67           }, 0);
  68         }, 0);
  69       }, 0);
  70     });
  71
  72     it('Should insert complex characters', function (done) {
  73       // First character '앙'
  74       compositionHelper.compositionstart();
  75       compositionHelper.compositionupdate({ data: 'ㅇ' });
  76       textarea.value = 'ㅇ';
  77       setTimeout(() => { // wait for any textarea updates
  78         compositionHelper.compositionupdate({ data: '아' });
  79         textarea.value = '아';
  80         setTimeout(() => { // wait for any textarea updates
  81           compositionHelper.compositionupdate({ data: '앙' });
  82           textarea.value = '앙';
  83           setTimeout(() => { // wait for any textarea updates
  84             compositionHelper.compositionend();
  85             setTimeout(() => { // wait for any textarea updates
  86               assert.equal(handledText, '앙');
  87               // Second character '앙'
  88               compositionHelper.compositionstart();
  89               compositionHelper.compositionupdate({ data: 'ㅇ' });
  90               textarea.value = '앙ㅇ';
  91               setTimeout(() => { // wait for any textarea updates
  92                 compositionHelper.compositionupdate({ data: '아' });
  93                 textarea.value = '앙아';
  94                 setTimeout(() => { // wait for any textarea updates
  95                   compositionHelper.compositionupdate({ data: '앙' });
  96                   textarea.value = '앙앙';
  97                   setTimeout(() => { // wait for any textarea updates
  98                     compositionHelper.compositionend();
  99                     setTimeout(() => { // wait for any textarea updates
 100                       assert.equal(handledText, '앙앙');
 101                       done();
 102                     }, 0);
 103                   }, 0);
 104                 }, 0);
 105               }, 0);
 106             }, 0);
 107           }, 0);
 108         }, 0);
 109       }, 0);
 110     });
 111
 112     it('Should insert complex characters that change with following character', function (done) {
 113       // First character '아'
 114       compositionHelper.compositionstart();
 115       compositionHelper.compositionupdate({ data: 'ㅇ' });
 116       textarea.value = 'ㅇ';
 117       setTimeout(() => { // wait for any textarea updates
 118         compositionHelper.compositionupdate({ data: '아' });
 119         textarea.value = '아';
 120         setTimeout(() => { // wait for any textarea updates
 121           // Start second character '아' in first character
 122           compositionHelper.compositionupdate({ data: '앙' });
 123           textarea.value = '앙';
 124           setTimeout(() => { // wait for any textarea updates
 125             compositionHelper.compositionend();
 126             compositionHelper.compositionstart();
 127             compositionHelper.compositionupdate({ data: '아' });
 128             textarea.value = '아아';
 129             setTimeout(() => { // wait for any textarea updates
 130               compositionHelper.compositionend();
 131               setTimeout(() => { // wait for any textarea updates
 132                 assert.equal(handledText, '아아');
 133                 done();
 134               }, 0);
 135             }, 0);
 136           }, 0);
 137         }, 0);
 138       }, 0);
 139     });
 140
 141     it('Should insert multi-characters compositions', function (done) {
 142       // First character 'だ'
 143       compositionHelper.compositionstart();
 144       compositionHelper.compositionupdate({ data: 'd' });
 145       textarea.value = 'd';
 146       setTimeout(() => { // wait for any textarea updates
 147         compositionHelper.compositionupdate({ data: 'だ' });
 148         textarea.value = 'だ';
 149         setTimeout(() => { // wait for any textarea updates
 150           // Second character 'あ'
 151           compositionHelper.compositionupdate({ data: 'だあ' });
 152           textarea.value = 'だあ';
 153           setTimeout(() => { // wait for any textarea updates
 154             compositionHelper.compositionend();
 155             setTimeout(() => { // wait for any textarea updates
 156               assert.equal(handledText, 'だあ');
 157               done();
 158             }, 0);
 159           }, 0);
 160         }, 0);
 161       }, 0);
 162     });
 163
 164     it('Should insert multi-character compositions that are converted to other characters with the same length', function (done) {
 165       // First character 'だ'
 166       compositionHelper.compositionstart();
 167       compositionHelper.compositionupdate({ data: 'd' });
 168       textarea.value = 'd';
 169       setTimeout(() => { // wait for any textarea updates
 170         compositionHelper.compositionupdate({ data: 'だ' });
 171         textarea.value = 'だ';
 172         setTimeout(() => { // wait for any textarea updates
 173           // Second character 'ー'
 174           compositionHelper.compositionupdate({ data: 'だー' });
 175           textarea.value = 'だー';
 176           setTimeout(() => { // wait for any textarea updates
 177             // Convert to katakana 'ダー'
 178             compositionHelper.compositionupdate({ data: 'ダー' });
 179             textarea.value = 'ダー';
 180             setTimeout(() => { // wait for any textarea updates
 181               compositionHelper.compositionend();
 182               setTimeout(() => { // wait for any textarea updates
 183                 assert.equal(handledText, 'ダー');
 184                 done();
 185               }, 0);
 186             }, 0);
 187           }, 0);
 188         }, 0);
 189       }, 0);
 190     });
 191
 192     it('Should insert multi-character compositions that are converted to other characters with different lengths', function (done) {
 193       // First character 'い'
 194       compositionHelper.compositionstart();
 195       compositionHelper.compositionupdate({ data: 'い' });
 196       textarea.value = 'い';
 197       setTimeout(() => { // wait for any textarea updates
 198         // Second character 'ま'
 199         compositionHelper.compositionupdate({ data: 'いm' });
 200         textarea.value = 'いm';
 201         setTimeout(() => { // wait for any textarea updates
 202           compositionHelper.compositionupdate({ data: 'いま' });
 203           textarea.value = 'いま';
 204           setTimeout(() => { // wait for any textarea updates
 205             // Convert to kanji '今'
 206             compositionHelper.compositionupdate({ data: '今' });
 207             textarea.value = '今';
 208             setTimeout(() => { // wait for any textarea updates
 209               compositionHelper.compositionend();
 210               setTimeout(() => { // wait for any textarea updates
 211                 assert.equal(handledText, '今');
 212                 done();
 213               }, 0);
 214             }, 0);
 215           }, 0);
 216         }, 0);
 217       }, 0);
 218     });
 219
 220     it('Should insert non-composition characters input immediately after composition characters', function (done) {
 221       // First character 'ㅇ'
 222       compositionHelper.compositionstart();
 223       compositionHelper.compositionupdate({ data: 'ㅇ' });
 224       textarea.value = 'ㅇ';
 225       setTimeout(() => { // wait for any textarea updates
 226         compositionHelper.compositionend();
 227         // Second character '1' (a non-composition character)
 228         textarea.value = 'ㅇ1';
 229         setTimeout(() => { // wait for any textarea updates
 230           assert.equal(handledText, 'ㅇ1');
 231           done();
 232         }, 0);
 233       }, 0);
 234     });
 235   });
 236 });