BotFramework-WebChat/__tests__/html2/withEmoji/withEmoji.2.html at 78ddee6c7b3a211dd119e7db95bc8de11e6d302a · microsoft/BotFramework-WebChat · GitHub

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
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <div>
      <main></main>
    </div>
    <script>
      run(async function () {
        const InputWithEmoji = WebChat.withEmoji(
          React.forwardRef((props, ref) => React.createElement('input', { ...props, ref }))
        );

        const App = () => {
          const [value, setValue] = React.useState('');

          return React.createElement(
            'label',
            {},
            'Input: ',
            React.createElement(InputWithEmoji, { autoFocus: true, emojiMap: new Map([]), onChange: setValue, value }),
            React.createElement('br'),
            React.createElement('div', { 'data-test-id': 'get-value' }, value)
          );
        };

        await new Promise(resolve =>
          ReactDOM.render(React.createElement(App), document.getElementsByTagName('main')[0], resolve)
        );

        const [inputElement] = document.getElementsByTagName('input');
        const getValueElement = document.querySelector('[data-test-id]');

        const getTextWithCaret = () => {
          expect(inputElement.value).toBe(getValueElement.textContent);

          const tokens = inputElement.value.split('');

          if (inputElement.selectionStart === inputElement.selectionEnd) {
            tokens.splice(inputElement.selectionStart, 0, '|');
          } else {
            tokens.splice(inputElement.selectionEnd, 0, ']');
            tokens.splice(inputElement.selectionStart, 0, '[');
          }

          return tokens.join('');
        };

        await host.sendKeys('ABC');
        expect(getTextWithCaret()).toBe('ABC|');

        await host.sendKeys('HOME');
        expect(getTextWithCaret()).toBe('|ABC');

        await host.sendKeys('123');
        expect(getTextWithCaret()).toBe('123|ABC');

        await host.sendKeys('HOME');
        expect(getTextWithCaret()).toBe('|123ABC');

        await host.sendKeys('XYZ');
        expect(getTextWithCaret()).toBe('XYZ|123ABC');

        await host.sendKeys('+CONTROL', 'Z', '-CONTROL');
        expect(getTextWithCaret()).toBe('|123ABC');

        await host.sendKeys('+CONTROL', 'Z', '-CONTROL');
        expect(getTextWithCaret()).toBe('|ABC');

        await host.sendKeys('+CONTROL', 'Z', '-CONTROL');
        expect(getTextWithCaret()).toBe('|');
      });
    </script>
  </body>
</html>