Components -> UI

7 files changed, 403 insertions, 0 deletions

diff --git a/vnext/src/ui/__tests__/Avatar.test.js b/vnext/src/ui/__tests__/Avatar.test.js
new file mode 100644
index 00000000..e7221871
--- /dev/null
+++ b/vnext/src/ui/__tests__/Avatar.test.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+
+import Avatar from '../Avatar';
+import renderer from 'react-test-renderer';
+
+test('Avatar renders correctly', () => {
+    const component = renderer.create(
+        <MemoryRouter>
+            <Avatar user={{ uid: 1, uname: 'ugnich', avatar: 'https://juick.com/i/a/1-deadbeef.png' }} />
+        </MemoryRouter>
+    );
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+});
diff --git a/vnext/src/ui/__tests__/LoginButton.test.js b/vnext/src/ui/__tests__/LoginButton.test.js
new file mode 100644
index 00000000..da80abb0
--- /dev/null
+++ b/vnext/src/ui/__tests__/LoginButton.test.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import LoginButton from '../LoginButton';
+import { create, act } from 'react-test-renderer';
+
+test('Login button and form are renders correctly', () => {
+    var button = null;
+    act(() => {
+        button = create(
+            <LoginButton title="Log in" onAuth={() => { }} />
+        );
+    });
+    let link = button.toJSON();
+    expect(link).toMatchSnapshot();
+
+    act(() => {
+        button.root.findByType('a').props.onClick();
+    });
+    let modal = button.toJSON();
+    expect(modal).toMatchSnapshot();
+});
diff --git a/vnext/src/ui/__tests__/MessageInput-test.js b/vnext/src/ui/__tests__/MessageInput-test.js
new file mode 100644
index 00000000..7ac69ed0
--- /dev/null
+++ b/vnext/src/ui/__tests__/MessageInput-test.js
@@ -0,0 +1,95 @@
+import React from 'react';
+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 () { }
+    };
+};
+
+it('Gives immediate focus on to textarea on load', () => {
+    let focused = false;
+    act(() => {
+        create(<MessageInput data={testMessage} onSend={() => { }} />, {
+            createNodeMock: (element) => {
+                if (element.type === 'textarea') {
+                    // mock a focus function
+                    return {
+                        focus: () => {
+                            focused = true;
+                        },
+                        style: {}
+                    };
+                }
+                return null;
+            }
+        });
+    });
+    expect(focused).toEqual(true, 'textarea was not focused');
+});
+
+
+it('Submits on ctrl-enter', () => {
+    const onSend = jest.fn();
+    var messageInput = null;
+    act(() => {
+        messageInput = create(<MessageInput data={testMessage} onSend={onSend} />, {
+            createNodeMock: (element) => {
+                if (element.type === 'textarea') {
+                    return {
+                        focus: () => { },
+                        style: {}
+                    };
+                }
+                return null;
+            }
+        });
+    });
+    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');
+});
diff --git a/vnext/src/ui/__tests__/UserLink.test.js b/vnext/src/ui/__tests__/UserLink.test.js
new file mode 100644
index 00000000..a75344b0
--- /dev/null
+++ b/vnext/src/ui/__tests__/UserLink.test.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { MemoryRouter, Switch, Route } from 'react-router-dom';
+
+import { UserLink } from '../UserInfo';
+import renderer from 'react-test-renderer';
+
+test('UserLink renders correctly', async () => {
+    const component = renderer.create(
+        <MemoryRouter>
+            <>
+            <UserLink user={{ uid: 1, uname: 'ugnich', avatar: 'https://juick.com/i/a/1-deadbeef.png' }} />
+            <UserLink user={{ uid: 1, uname: 'ugnich', avatar: 'https://juick.com/i/a/1-deadbeef.png', uri: '' }} />
+            <UserLink user={{ uid: 0, uname: '', uri: 'https://example.com/u/test' }} />
+            </>
+        </MemoryRouter>
+    );
+    await Promise.resolve();
+    let tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+});
diff --git a/vnext/src/ui/__tests__/__snapshots__/Avatar.test.js.snap b/vnext/src/ui/__tests__/__snapshots__/Avatar.test.js.snap
new file mode 100644
index 00000000..47614f5a
--- /dev/null
+++ b/vnext/src/ui/__tests__/__snapshots__/Avatar.test.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar renders correctly 1`] = `
+<div
+  className="Avatar"
+>
+  <div
+    className="msg-avatar"
+  >
+    <a
+      href="/ugnich/"
+      onClick={[Function]}
+    >
+      <img
+        alt="ugnich"
+        src="https://juick.com/i/a/1-deadbeef.png"
+      />
+    </a>
+  </div>
+  <div
+    style={
+      Object {
+        "display": "flex",
+        "flexDirection": "column",
+        "justifyContent": "center",
+      }
+    }
+  >
+    <span>
+      <a
+        href="/ugnich/"
+        onClick={[Function]}
+      >
+        <span>
+          ugnich
+        </span>
+      </a>
+    </span>
+  </div>
+</div>
+`;
diff --git a/vnext/src/ui/__tests__/__snapshots__/LoginButton.test.js.snap b/vnext/src/ui/__tests__/__snapshots__/LoginButton.test.js.snap
new file mode 100644
index 00000000..cd08b1b4
--- /dev/null
+++ b/vnext/src/ui/__tests__/__snapshots__/LoginButton.test.js.snap
@@ -0,0 +1,178 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Login button and form are renders correctly 1`] = `
+<a
+  onClick={[Function]}
+>
+  <div
+    className="icon icon--ei-user icon--s"
+  >
+    <svg
+      className="icon__cnt"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<use xlink:href=#ei-user-icon />",
+        }
+      }
+    />
+  </div>
+  <span
+    className="desktop"
+  >
+    Log in
+  </span>
+</a>
+`;
+
+exports[`Login button and form are renders correctly 2`] = `
+Array [
+  <a
+    onClick={[Function]}
+  >
+    <div
+      className="icon icon--ei-user icon--s"
+    >
+      <svg
+        className="icon__cnt"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "<use xlink:href=#ei-user-icon />",
+          }
+        }
+      />
+    </div>
+    <span
+      className="desktop"
+    >
+      Log in
+    </span>
+  </a>,
+  <div
+    id="dialogt"
+  >
+    <div
+      id="dialogw"
+    >
+      <div
+        id="dialog_header"
+      >
+        <div
+          id="dialogc"
+          onClick={[Function]}
+        >
+          <div
+            className="icon icon--ei-close icon--s"
+          >
+            <svg
+              className="icon__cnt"
+              dangerouslySetInnerHTML={
+                Object {
+                  "__html": "<use xlink:href=#ei-close-icon />",
+                }
+              }
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        className="dialoglogin"
+      >
+        <p>
+          Please, introduce yourself:
+        </p>
+        <div
+          style={
+            Object {
+              "display": "flex",
+              "justifyContent": "space-evenly",
+              "padding": "4px",
+            }
+          }
+        >
+          <a
+            href="https://juick.com/api/_fblogin?state=http://localhost/"
+            style={
+              Object {
+                "background": "#3b5998",
+                "color": "#fff",
+                "padding": "2px 14px",
+              }
+            }
+          >
+            <div
+              className="icon icon--s"
+            >
+              <svg
+                className="icon__cnt"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "<use xlink:href=#ei-sc-facebook-icon />",
+                  }
+                }
+              />
+            </div>
+            Log in
+          </a>
+          <a
+            href="https://juick.com/api/_vklogin?state=http://localhost/"
+            style={
+              Object {
+                "background": "#4c75a3",
+                "color": "#fff",
+                "padding": "2px 14px",
+              }
+            }
+          >
+            <div
+              className="icon icon--s"
+            >
+              <svg
+                className="icon__cnt"
+                dangerouslySetInnerHTML={
+                  Object {
+                    "__html": "<use xlink:href=#ei-sc-vk-icon />",
+                  }
+                }
+              />
+            </div>
+            Log in
+          </a>
+        </div>
+        <p>
+          Already registered?
+        </p>
+        <form
+          onSubmit={[Function]}
+        >
+          <input
+            className="input"
+            name="username"
+            onBlur={[Function]}
+            onChange={[Function]}
+            placeholder="Username..."
+            type="text"
+            value=""
+          />
+          <br />
+          <input
+            className="input"
+            name="password"
+            onBlur={[Function]}
+            onChange={[Function]}
+            placeholder="Password..."
+            type="password"
+            value=""
+          />
+          <br />
+          <button
+            className="Button"
+            onClick={[Function]}
+          >
+            OK
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>,
+]
+`;
diff --git a/vnext/src/ui/__tests__/__snapshots__/UserLink.test.js.snap b/vnext/src/ui/__tests__/__snapshots__/UserLink.test.js.snap
new file mode 100644
index 00000000..15e25367
--- /dev/null
+++ b/vnext/src/ui/__tests__/__snapshots__/UserLink.test.js.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserLink renders correctly 1`] = `
+Array [
+  <a
+    className="info-avatar"
+    href="/ugnich/"
+    onClick={[Function]}
+  >
+    <img
+      src="https://juick.com/i/a/1-deadbeef.png"
+    />
+    ugnich
+  </a>,
+  <a
+    className="info-avatar"
+    href="/ugnich/"
+    onClick={[Function]}
+  >
+    <img
+      src="https://juick.com/i/a/1-deadbeef.png"
+    />
+    ugnich
+  </a>,
+  <a
+    className="info-avatar"
+    href="https://example.com/u/test"
+  >
+    <img />
+    
+  </a>,
+]
+`;