Merge Jest configuration from Next version

2 files changed, 46 insertions, 101 deletions

diff --git a/vnext/src/ui/__tests__/MessageInput-test.js b/vnext/src/ui/__tests__/MessageInput-test.js
deleted file mode 100644
index 12b85bca..00000000
--- a/vnext/src/ui/__tests__/MessageInput-test.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import { create, act } from 'react-test-renderer';
-
-import MessageInput from '../MessageInput';
-
-const testMessage = {
-    mid: 1,
-    rid: 0,
-    body: 'test message',
-    timestamp: new Date().toISOString(),
-    attach: '',
-    to: {}
-};
-
-window.matchMedia = window.matchMedia || function() {
-    return {
-        matches: true,
-        addListener: function() { },
-        removeListener: function() { }
-    };
-};
-
-function createMessageInput(data, onFocus, onSend, draft) {
-    return create(<MessageInput data={data} onSend={onSend} text={draft} />, {
-        createNodeMock: (element) => {
-            if (element.type === 'textarea') {
-                // mock a focus function
-                return {
-                    focus: onFocus,
-                    style: {}
-                };
-            }
-            return null;
-        }
-    });
-}
-
-it('Gives immediate focus on to textarea on load', () => {
-    let focused = false;
-    act(() => {
-        createMessageInput(testMessage, () => {
-            focused = true;
-        }, () => { });
-    });
-    expect(focused).toEqual(true, 'textarea was not focused');
-});
-
-
-it('Submits on ctrl-enter', () => {
-    const onSend = jest.fn();
-    var messageInput = null;
-    act(() => {
-        messageInput = createMessageInput(testMessage, () => {}, onSend);
-    });
-    let textarea = messageInput.root.findByType('textarea');
-    act(() => {
-
-        textarea.props.onKeyPress({
-            charCode: 13,
-            which: 13,
-            keyCode: 13,
-            ctrlKey: false
-        });
-    });
-    expect(onSend).toHaveBeenCalledTimes(0);
-    act(() => {
-        textarea.props.onKeyPress({
-            charCode: 13,
-            which: 13,
-            keyCode: 13,
-            ctrlKey: true
-        });
-    });
-    expect(onSend).toHaveBeenCalledTimes(1);
-    expect(textarea.props.value).toEqual('');
-    act(() => {
-        textarea.props.onChange({
-            target: {
-                value: ' ',
-                validity: {}
-            }
-        });
-    });
-    expect(textarea.props.value).toEqual(' ');
-    act(() => {
-        messageInput.root.findByType('form').props.onSubmit({ event: {} });
-    });
-    expect(textarea.props.value).toEqual('', 'Value should be cleared after submit');
-});
-
-it('Show draft text', () => {
-    var messageInput;
-    act(() => {
-        messageInput = createMessageInput(testMessage, () => {}, () => {}, 'yo');
-    });
-    let textarea = messageInput.root.findByType('textarea');
-    expect(textarea.props.value).toEqual('yo', 'Value should match draft');
-});
diff --git a/vnext/src/ui/__tests__/MessageInput.test.js b/vnext/src/ui/__tests__/MessageInput.test.js
new file mode 100644
index 00000000..1b5b0442
--- /dev/null
+++ b/vnext/src/ui/__tests__/MessageInput.test.js
@@ -0,0 +1,46 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+
+import MessageInput from '../MessageInput';
+
+test('Gives immediate focus on to textarea on load', async () => {
+    let draft = 'draft';
+    render(<MessageInput text={draft} onSend={async () => { return true; }} />);
+    expect(screen.getByText(draft)).toHaveFocus();
+});
+
+
+test('Submits on ctrl-enter and pass validation', async () => {
+    let result = false;
+    const onSend = jest.fn(async ({ body }) => { result = body === 'YO'; return result; });
+    let draft = 'draft';
+    render(<MessageInput onSend={onSend} text={draft} />);
+    let textarea = screen.getByText(draft);
+    fireEvent.change(textarea, { target: { value: 'HI' } });
+    // this event should not submit
+    fireEvent.keyPress(textarea, {
+        charCode: 13,
+        which: 13,
+        keyCode: 13
+    });
+    // this event should submit
+    fireEvent.keyPress(textarea, {
+        charCode: 13,
+        which: 13,
+        keyCode: 13,
+        ctrlKey: true
+    });
+    expect(onSend).toHaveBeenCalledTimes(1);
+    expect(result).toBe(false);
+    fireEvent.change(textarea, { target: { value: 'YO' } });
+    fireEvent.keyPress(textarea, {
+        charCode: 13,
+        which: 13,
+        keyCode: 13,
+        ctrlKey: true
+    });
+    expect(onSend).toHaveBeenCalledTimes(2);
+    expect(result).toBe(true);
+    await waitFor(() => expect(textarea.textContent).toEqual(''));
+    textarea.focus();
+    expect(textarea).toHaveFocus();
+});