More UI testing

.vscode/extensions.json

@@ -6,6 +6,7 @@
     "TomiTurtiainen.js-complexity-analysis",
     "kisstkondoros.vscode-codemetrics",
     "dbaeumer.vscode-eslint",
-    "CoenraadS.bracket-pair-colorizer"
+    "CoenraadS.bracket-pair-colorizer",
+    "PKief.material-icon-theme"
   ]
 }

routes/api/conversation/con-routes.js

@@ -244,7 +244,10 @@ app.post('/get-online-users', async (req, res) => {
 
   for (let u of _onlineUsers) {
     let mutualUsers = await User.mutualUsers(id, u.user)
-    onlineUsers.push({ ...u, mutualUsersCount: mutualUsers.length })
+    onlineUsers.push({
+      ...u,
+      mutualUsersCount: mutualUsers.length
+    })
   }
 
   res.json(onlineUsers)

routes/api/others/settings-routes.js

@@ -62,7 +62,10 @@ app.post('/get-blocked-users', async (req, res) => {
 
   for (let b of _blockedUsers) {
     let mutualFollowers = await User.mutualUsers(id, b.user)
-    blockedUsers.push({ ...b, mutualFollowersCount: mutualFollowers.length })
+    blockedUsers.push({
+      ...b,
+      mutualFollowersCount: mutualFollowers.length
+    })
   }
 
   res.json(blockedUsers)

src/actions/message.js

@@ -1,75 +1,80 @@
-import { post } from 'axios'
-import { dispatchHelper } from '../utils/utils'
-
-export const getConversations = () =>
-  dispatchHelper('GET_CONVERSATIONS', 'get-conversations')
-
-export const conversationAdded = conversation => {
-  return {
-    type: 'CONVERSATION_ADDED',
-    payload: conversation
-  }
-}
-
-export const getConversationMessages = (con_id, when) =>
-  dispatchHelper('GET_CONVERSATION_MESSAGES', 'get-conversation-messages', { con_id, when })
-
-export const messaged = message => {
-  return {
-    type: 'MESSAGE',
-    payload: message
-  }
-}
-
-export const changeLastMssg = lastMssg => {
-  return {
-    type: 'CHANGE_LAST_MSSG',
-    payload: lastMssg
-  }
-}
-
-export const deleteMssg = message_id => {
-  return {
-    type: 'DELETE_MESSAGE',
-    payload: message_id
-  }
-}
-
-export const unsendAllMessages = mssg_by => {
-  return {
-    type: 'UNSEND_ALL_MSSGS',
-    payload: mssg_by
-  }
-}
-
-export const deleteCon = con_id => {
-  return {
-    type: 'DELETE_CONVERSATION',
-    payload: con_id
-  }
-}
-
-export const getConAbout = (con_id, user) =>
-  dispatchHelper('GET_CONVERSATION_ABOUT', 'get-conversation-about', { con_id, user })
-
-export const getUnreadMessages = () =>
-  dispatchHelper('GET_UNREAD_MESSAGES', 'get-unread-messages')
-
-export const readConversation = (con_id, unreadMssgs) => {
-  return dispatch => {
-    post('/api/read-conversation', { con_id })
-      .then(() => {
-        dispatch({ type: 'READ_CONVERSATION', payload: con_id })
-        unreadMssgs != 0 ?
-          dispatch({ type: 'UPDATE_UNREAD_CONVERSATIONS', payload: unreadMssgs })
-          : null
-      })
-      .catch(e => console.log(e) )
-  }
-}
-
-export const getOnlineUsers = () =>
-  dispatchHelper('GET_ONLINE_USERS', 'get-online-users')
-
-export const getConDetails = con_id =>
-  dispatchHelper('GET_CON_DETAILS', 'get-conversation-details', { con_id })
+import { post } from 'axios'
+import { dispatchHelper } from '../utils/utils'
+
+export const getConversations = () =>
+  dispatchHelper('GET_CONVERSATIONS', 'get-conversations')
+
+export const conversationAdded = conversation => {
+  return {
+    type: 'CONVERSATION_ADDED',
+    payload: conversation
+  }
+}
+
+export const getConversationMessages = (con_id, when) =>
+  dispatchHelper('GET_CONVERSATION_MESSAGES', 'get-conversation-messages', { con_id, when })
+
+export const messaged = message => {
+  return {
+    type: 'MESSAGE',
+    payload: message
+  }
+}
+
+export const changeLastMssg = lastMssg => {
+  return {
+    type: 'CHANGE_LAST_MSSG',
+    payload: lastMssg
+  }
+}
+
+export const deleteMssg = message_id => {
+  return {
+    type: 'DELETE_MESSAGE',
+    payload: message_id
+  }
+}
+
+export const unsendAllMessages = mssg_by => {
+  return {
+    type: 'UNSEND_ALL_MSSGS',
+    payload: mssg_by
+  }
+}
+
+export const deleteCon = con_id => {
+  return {
+    type: 'DELETE_CONVERSATION',
+    payload: con_id
+  }
+}
+
+export const getConAbout = (con_id, user) =>
+  dispatchHelper('GET_CONVERSATION_ABOUT', 'get-conversation-about', { con_id, user })
+
+export const getUnreadMessages = () =>
+  dispatchHelper('GET_UNREAD_MESSAGES', 'get-unread-messages')
+
+export const readConversation = (con_id, unreadMssgs) => {
+  return dispatch => {
+    post('/api/read-conversation', { con_id })
+      .then(() => {
+        dispatch({ type: 'READ_CONVERSATION', payload: con_id })
+
+        unreadMssgs != 0 ?
+          dispatch({
+            type: 'UPDATE_UNREAD_CONVERSATIONS',
+            payload: unreadMssgs
+          })
+          : null
+
+      })
+      .catch(e => console.log(e) )
+  }
+}
+
+export const getOnlineUsers = () =>
+  dispatchHelper('GET_ONLINE_USERS', 'get-online-users')
+
+export const getConDetails = con_id =>
+  dispatchHelper('GET_CON_DETAILS', 'get-conversation-details', { con_id })

src/components/admin/__test__/__snapshots__/admin-login.test.js.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Admin-Login Component should match snapshot 1`] = `
+<div>
+  <div
+    style={
+      Object {
+        "animation": "bcCCNc 300ms ease 0s 1 normal none running",
+        "backfaceVisibility": "visible",
+      }
+    }
+  >
+    <div
+      className="cua are-you-admin"
+    >
+      <div
+        className="display_text"
+      >
+        <span>
+          Are you the admin?
+        </span>
+      </div>
+      <form
+        className="form_login"
+        onSubmit={[Function]}
+      >
+        <input
+          autoComplete="false"
+          autoFocus={true}
+          disabled={false}
+          id="al_password"
+          maxLength="255"
+          onChange={[Function]}
+          placeholder="Admin password"
+          required={true}
+          spellCheck="false"
+          type="password"
+          value=""
+        />
+        <span
+          className="show_psswrd s_p_l"
+          onClick={[Function]}
+        >
+          <i
+            className="fas fa-lock"
+          />
+        </span>
+        <input
+          className="al_submit"
+          type="submit"
+          value="Continue as admin"
+        />
+      </form>
+    </div>
+  </div>
+</div>
+`;

src/components/admin/__test__/__snapshots__/is-admin.test.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IsAdmin Component should match snapshot 1`] = `
+<div>
+  <div
+    style={
+      Object {
+        "animation": "bcCCNc 300ms ease 0s 1 normal none running",
+        "backfaceVisibility": "visible",
+      }
+    }
+  >
+    <div
+      className="registered email_verification"
+    >
+      <span>
+        You can now remove and edit any post, comment, user, group, message, etc. as an admin
+      </span>
+    </div>
+  </div>
+</div>
+`;

src/components/admin/__test__/admin-login.test.js

@@ -0,0 +1,55 @@
+import React from 'react'
+import { create } from 'react-test-renderer'
+import AdminLogin from '../admin-login'
+import { Provider } from 'react-redux'
+import mockStore from '../../../store/mockStore/mockStore'
+import { mount } from 'enzyme'
+import { BrowserRouter as Router } from 'react-router-dom'
+import MockDataElement from '../../../utils/__test__/mock-dataElement'
+
+describe('Admin-Login Component', () => {
+  let dataElement
+
+  beforeAll(() =>
+    dataElement = MockDataElement()
+  )
+
+  afterAll(() =>
+    dataElement.remove()
+  )
+
+  const comp = (
+    <Provider store={mockStore} >
+      <Router>
+        <AdminLogin
+          location={{ search: '/' }}
+        />
+      </Router>
+    </Provider>
+  )
+
+  it('should match snapshot', () => {
+    const tree = create(comp).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('should mock admin-login submit action', () => {
+    const wrapper = mount(comp)
+    wrapper.find('form').simulate(
+      'submit',
+      { preventDefault() {} }
+    )
+  })
+
+  it('should redirect to /is-admin route when user is admin', () => {
+    dataElement.setAttribute('data-isadmin', 'true')
+
+    // To ignore warning:
+    // 'You tried to redirect to the same route you're currently on: "/is-admin"'
+    console.error = jest.fn()
+
+    mount(comp)
+    expect(location.pathname).toEqual('/is-admin')
+  })
+
+})

src/components/admin/__test__/is-admin.test.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import { create } from 'react-test-renderer'
+import { Provider } from 'react-redux'
+import IsAdmin from '../is-admin'
+import mockStore from '../../../store/mockStore/mockStore'
+import { BrowserRouter as Router } from 'react-router-dom'
+import { mount } from 'enzyme'
+import MockDataElement from '../../../utils/__test__/mock-dataElement'
+
+describe('IsAdmin Component', () => {
+  let dataElement
+
+  beforeAll(() => {
+    dataElement = MockDataElement()
+    dataElement.setAttribute('data-isadmin', 'true')
+  })
+
+  afterAll(() =>
+    dataElement.remove()
+  )
+
+  const comp = (
+    <Provider store={mockStore} >
+      <Router>
+        <IsAdmin/>
+      </Router>
+    </Provider>
+  )
+
+  it('should match snapshot', () => {
+    const tree = create(comp).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('should redirect to /admin-login route when user is not an admin', () => {
+    dataElement.setAttribute('data-isadmin', 'false')
+
+    // To ignore warning:
+    // 'You tried to redirect to the same route you're currently on: "/is-admin"'
+    console.error = jest.fn()
+
+    mount(comp)
+    expect(location.pathname).toEqual('/admin-login')
+  })
+
+})

src/components/admin/admin-login.js

@@ -24,7 +24,7 @@ export default class AdminLogin extends Component {
     })
   }
 
-  submit = async e => {
+  submit =  e => {
     e.preventDefault()
     let { password } = this.state
     let { search } = this.props.location

src/components/admin/is-admin.js

@@ -18,6 +18,7 @@ const IsAdmin = () => (
         <span>You can now remove and edit any post, comment, user, group, message, etc. as an admin</span>
       </div>
     </FadeIn>
+
   </div>
 )