LoginButton refactoring and snapshots

4 files changed, 217 insertions, 9 deletions

diff --git a/vnext/src/api/index.js b/vnext/src/api/index.js
index b190bc48..591f874a 100644
--- a/vnext/src/api/index.js
+++ b/vnext/src/api/index.js
@@ -1,7 +1,9 @@
 import axios from 'axios';
 
+const apiBaseUrl = 'https://api.juick.com';
+
 const client = axios.create({
-    baseURL: 'https://api.juick.com/'
+    baseURL: apiBaseUrl
 });
 client.interceptors.request.use(config => {
     if (localStorage.visitor) {
@@ -61,4 +63,16 @@ export function comment(mid, rid, body, attach) {
     form.append('body', body);
     form.append('attach', attach);
     return client.post('/comment', form)
+}
+
+function socialLink(network) {
+    return `${apiBaseUrl}/_${network}login?state=${window.location.protocol}//${window.location.host}${window.location.pathname}`;
+}
+
+export function facebookLink() {
+    return socialLink('fb');
+}
+
+export function vkLink() {
+    return socialLink('vk');
 }
\ No newline at end of file
diff --git a/vnext/src/components/LoginButton.js b/vnext/src/components/LoginButton.js
index e59dabdf..05f5df97 100644
--- a/vnext/src/components/LoginButton.js
+++ b/vnext/src/components/LoginButton.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Icon from './Icon';
 import Modal from './Modal';
 
-import { me } from '../api';
+import { me, facebookLink, vkLink } from '../api';
 
 export default class LoginButton extends React.Component {
   constructor(props) {
@@ -51,13 +51,13 @@ export default class LoginButton extends React.Component {
           <div className="dialoglogin">
             <p>Please, introduce yourself:</p>
             <div style={socialButtonsStyle}>
-            <a href={`https://api.juick.com/_fblogin?state=${window.location.protocol}//${window.location.host}${window.location.pathname}`} style={facebookButtonStyle}>
-            <Icon name="ei-sc-facebook" size="s" noFill={true} />Log in
-            </a>
-            <a href={`https://api.juick.com/_vklogin?state=${window.location.protocol}//${window.location.host}${window.location.pathname}`} style={vkButtonStyle}>
-            <Icon name="ei-sc-vk" size="s" noFill={true} />
-            Log in
-            </a>
+              <a href={facebookLink()} style={facebookButtonStyle}>
+                <Icon name="ei-sc-facebook" size="s" noFill={true} />Log in
+              </a>
+              <a href={vkLink()} style={vkButtonStyle}>
+                <Icon name="ei-sc-vk" size="s" noFill={true} />
+                Log in
+             </a>
             </div>
             <p>Already registered?</p>
             <form onSubmit={this.login}>
diff --git a/vnext/src/components/__tests__/LoginButton.test.js b/vnext/src/components/__tests__/LoginButton.test.js
new file mode 100644
index 00000000..0b672365
--- /dev/null
+++ b/vnext/src/components/__tests__/LoginButton.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import LoginButton from '../LoginButton';
+import renderer from 'react-test-renderer';
+
+test('Login button and form are renders correctly', () => {
+    const button = renderer.create(
+        <LoginButton title="Log in" onAuth={() => {}} />
+    );
+    let link = button.toJSON();
+    expect(link).toMatchSnapshot();
+
+    button.root.instance.toggleModal();
+    let modal = button.toJSON();
+    expect(modal).toMatchSnapshot();
+});
\ No newline at end of file
diff --git a/vnext/src/components/__tests__/__snapshots__/LoginButton.test.js.snap b/vnext/src/components/__tests__/__snapshots__/LoginButton.test.js.snap
new file mode 100644
index 00000000..cc01126f
--- /dev/null
+++ b/vnext/src/components/__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>
+  Log in
+</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>
+    Log in
+  </a>,
+  <div
+    id="dialogt"
+    style={
+      Object {
+        "backgroundColor": "rgba(0,0,0,0.3)",
+        "bottom": 0,
+        "left": 0,
+        "padding": 50,
+        "position": "fixed",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  >
+    <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://api.juick.com/_fblogin?state=about://blank"
+            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://api.juick.com/_vklogin?state=about://blank"
+            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="signinput"
+            name="username"
+            onChange={[Function]}
+            placeholder="Username..."
+            type="text"
+            value=""
+          />
+          <br />
+          <input
+            className="signinput"
+            name="password"
+            onChange={[Function]}
+            placeholder="Password..."
+            type="password"
+            value=""
+          />
+          <br />
+          <input
+            className="signsubmit"
+            type="submit"
+            value="OK"
+          />
+        </form>
+      </div>
+    </div>
+  </div>,
+]
+`;