166840881-ft(social login):

- create social login buttons
- implement social login authentication
- write test for social login implementation

[Delivers #166840881]

jest.config.js

@@ -4,7 +4,7 @@ module.exports = {
   transformIgnorePatterns: ['<rootDir>/node_modules/'],
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css)$':
-      '<rootDir>/__mocks__/fileMock.js',
+      'jest-transform-stub',
     '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
     '^@config(.*)$': '<rootDir>/src/config$1',
     '^@components(.*)$': '<rootDir>/src/components$1',

package.json

@@ -66,8 +66,10 @@
     "eslint-plugin-react": "^7.14.3",
     "file-loader": "^4.1.0",
     "husky": "^3.0.2",
+    "image-webpack-loader": "^5.0.0",
     "jest": "^24.8.0",
     "jest-localstorage-mock": "^2.4.0",
+    "jest-transform-stub": "^2.0.0",
     "jsonwebtoken": "^8.5.1",
     "lint-staged": "^9.2.1",
     "nock": "^10.0.6",

src/components/SocialMedia/__snapshots__/social.spec.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SocialMediaButtons Test should render successfully 1`] = `
+exports[`SocialMediaButtons should render social login buttons successfully 1`] = `
 <SocialMedia>
   <div
     className="social flex flex-col items-center"
@@ -10,23 +10,35 @@ exports[`SocialMediaButtons Test should render successfully 1`] = `
     >
       <img
         alt="Login with github"
-        src={Object {}}
+        src={
+          Object {
+            "process": [Function],
+          }
+        }
       />
     </a>
     <a
       href="undefined/auth/facebook"
     >
       <img
         alt="Login with facebook"
-        src={Object {}}
+        src={
+          Object {
+            "process": [Function],
+          }
+        }
       />
     </a>
     <a
       href="undefined/auth/google"
     >
       <img
         alt="Login with google"
-        src={Object {}}
+        src={
+          Object {
+            "process": [Function],
+          }
+        }
       />
     </a>
   </div>

src/components/auth/index.js

@@ -13,13 +13,12 @@ const cards = () => {
               LOGIN
             </a>
 
-            <a 
+            <a
               href="/signup"
               className="bg-white-500 mt-6  text-center border border-red-500  w-32 text-xs py-3 px-1 uppercase text-red-600"
             >
               get started
             </a>
-
           </div>
         </div>
       </div>

src/index.js

@@ -1,7 +1,27 @@
 import React from 'react';
 import { render } from 'react-dom';
+import * as Toastr from 'toastr';
 import App from './components/App';
 import './index.css';
+import '../node_modules/toastr/build/toastr.css';
+
+Toastr.options = {
+  closeButton: false,
+  debug: false,
+  newestOnTop: false,
+  progressBar: false,
+  positionClass: 'toast-top-center',
+  preventDuplicates: false,
+  onclick: null,
+  showDuration: '300',
+  hideDuration: '1000',
+  timeOut: '5000',
+  extendedTimeOut: '1000',
+  showEasing: 'swing',
+  hideEasing: 'linear',
+  showMethod: 'fadeIn',
+  hideMethod: 'fadeOut'
+};
 
 const app = document.querySelector('#app');
 

tests/App.spec.js

@@ -48,7 +48,7 @@ describe('Application test', () => {
     expect(wrapper.find('li').length).toBeGreaterThan(1);
   });
   it('should render without crashing', () => {
-    const wrapper = shallow(<Footer />);
+    const wrapper = mount(<Footer />);
 
     expect(toJson(wrapper)).toMatchSnapshot();
   });