Add basic tests for frontend

frontend/src/__tests__/BankAccountList.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import BankAccountList from '../ui/BankAccountList'
+
+configure({ adapter: new Adapter() })
+
+describe('<BankAccountList />', () => {
+  it('renders correctly for 0 bank accounts', () => {
+    const wrapper = mount(<BankAccountList bankAccounts={[]} />)
+
+    expect(wrapper.find('div.bank-account-list')).toHaveLength(1)
+    expect(wrapper.find('div.bank-account-list div.bank-account-item')).toHaveLength(0)
+  })
+
+  it('renders correctly for 1+ bank accounts', () => {
+    const wrapper = mount(<BankAccountList bankAccounts={['bank_account_1', 'bank_account_2']} />)
+
+    expect(wrapper.find('div.bank-account-list')).toHaveLength(1)
+    expect(wrapper.find('div.bank-account-list div.bank-account-item')).toHaveLength(2)
+    expect(wrapper.find('div.bank-account-list button')).toHaveLength(2)
+  })
+})

frontend/src/__tests__/Footer.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import Footer from '../ui/Footer'
+
+configure({ adapter: new Adapter() })
+
+describe('<Footer />', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(<Footer />)
+
+    expect(wrapper.find('div.footer')).toHaveLength(1)
+    expect(wrapper.find('div div.logo-container')).toHaveLength(1)
+    expect(wrapper.find('div div.logo-container p')).toHaveLength(1)
+    expect(wrapper.find('div div.logo-container a.poa-logo')).toHaveLength(1)
+    expect(wrapper.find('div div.logo-container div.social-container')).toHaveLength(1)
+    expect(wrapper.find('div div.logo-container div.social-container a.social-item')).toHaveLength(
+      3
+    )
+  })
+})

frontend/src/__tests__/Header.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import Header from '../ui/Header'
+
+configure({ adapter: new Adapter() })
+
+describe('<Header />', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(<Header />)
+
+    expect(wrapper.find('header')).toHaveLength(1)
+    expect(wrapper.find('header div.logo-container')).toHaveLength(1)
+    expect(wrapper.find('header div.logo-container a.poa-logo')).toHaveLength(1)
+  })
+})

frontend/src/__tests__/Loading.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import Loading from '../ui/Loading'
+
+configure({ adapter: new Adapter() })
+
+describe('<Loading />', () => {
+  it('renders correctly when show is false', () => {
+    const wrapper = mount(<Loading />)
+
+    expect(wrapper.find('div.loading-container')).toHaveLength(0)
+  })
+  it('renders correctly when show is true', () => {
+    const wrapper = mount(<Loading show={true} />)
+
+    expect(wrapper.find('div.loading-container')).toHaveLength(1)
+    expect(wrapper.find('div.loading-container div.loading-inner')).toHaveLength(1)
+    expect(wrapper.find('div.loading-container div.loading-inner div.loading-dot')).toHaveLength(6)
+  })
+})

frontend/src/__tests__/Logo.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import Logo from '../ui/Logo'
+
+configure({ adapter: new Adapter() })
+
+describe('<Logo />', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(<Logo />)
+
+    expect(wrapper.find('a.poa-logo')).toHaveLength(1)
+  })
+})

frontend/src/__tests__/LogoContainer.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import LogoContainer from '../ui/LogoContainer'
+
+configure({ adapter: new Adapter() })
+
+describe('<LogoContainer />', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(<LogoContainer />)
+
+    expect(wrapper.find('div.logo-container')).toHaveLength(1)
+  })
+})

frontend/src/__tests__/Main.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import Main from '../ui/Main'
+
+configure({ adapter: new Adapter() })
+
+describe('<Main />', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(<Main />)
+
+    expect(wrapper.find('div')).toHaveLength(1)
+  })
+})

frontend/src/__tests__/RegisteredAccountsList.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import RegisteredAccountsList from '../ui/RegisteredAccountsList'
+
+configure({ adapter: new Adapter() })
+
+describe('<RegisteredAccountsList />', () => {
+  it('renders correctly for 0 accounts', () => {
+    const wrapper = mount(<RegisteredAccountsList accounts={[]} />)
+
+    expect(wrapper.find('div.registered-accounts-list')).toHaveLength(0)
+  })
+
+  it('renders correctly for 1+ accounts', () => {
+    const wrapper = mount(<RegisteredAccountsList accounts={['account_1', 'account_2']} />)
+
+    expect(wrapper.find('div.registered-accounts-list')).toHaveLength(1)
+    expect(wrapper.find('div.registered-accounts-list ul')).toHaveLength(1)
+    expect(wrapper.find('div.registered-accounts-list ul li')).toHaveLength(2)
+  })
+})

frontend/src/__tests__/Title.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { configure, mount } from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+import Title from '../ui/Title'
+
+configure({ adapter: new Adapter() })
+
+describe('<Title />', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(<Title />)
+
+    expect(wrapper.find('h1')).toHaveLength(1)
+  })
+})

frontend/src/ui/BankAccountList.js

@@ -3,7 +3,7 @@ import glamorous, { Div } from 'glamorous'
 import buttonStyles from './styles/button'
 import colors from './styles/colors'
 
-const BankAccountList = glamorous.div({
+const BankAccountList = glamorous.div('bank-account-list', {
   textAlign: 'center'
 })
 
@@ -22,7 +22,7 @@ const Button = glamorous.button(buttonStyles, {
 export default ({ bankAccounts, onClick }) => (
   <BankAccountList>
     {bankAccounts.map((bankAccount, index) => (
-      <Div textAlign="center">
+      <Div className="bank-account-item" textAlign="center">
         Bank account number: <strong>{bankAccount.account} </strong>
         <Button key={index} onClick={() => onClick(bankAccount)}>
           Verify

frontend/src/ui/Footer.js

@@ -6,7 +6,7 @@ import Socials from './Socials'
 import { footerHeight, headerBackgroundImage } from './styles/constants'
 import { fullWidth } from './styles/mixins'
 
-const BaseFooter = glamorous.div(fullWidth, {
+const BaseFooter = glamorous.div([fullWidth, 'footer'], {
   bottom: '0',
   height: footerHeight,
   backgroundImage: headerBackgroundImage

frontend/src/ui/Loading.js

@@ -16,7 +16,7 @@ const fadeOut = css.keyframes({
   }
 })
 
-const LoadingContainer = glamorous.div({
+const LoadingContainer = glamorous.div('loading-container', {
   position: 'fixed',
   zIndex: 1000000,
   left: 0,
@@ -26,7 +26,7 @@ const LoadingContainer = glamorous.div({
   backgroundColor: 'rgba(35, 29, 115, 0.8)'
 })
 
-const LoadingInner = glamorous.div({
+const LoadingInner = glamorous.div('loading-inner', {
   display: 'flex',
   justifyContent: 'space-between',
   position: 'absolute',
@@ -49,6 +49,7 @@ const LoadingInner = glamorous.div({
 })
 
 const LoadingDot = glamorous.div(
+  'loading-dot',
   {
     animationName: `${fadeOut}`,
     animationDuration: '2s',

frontend/src/ui/Logo.js

@@ -2,6 +2,7 @@ import glamorous from 'glamorous'
 import { logoImage } from './styles/constants'
 
 const Logo = glamorous.a(
+  'poa-logo',
   {
     display: 'block',
     float: 'left',

frontend/src/ui/LogoContainer.js

@@ -1,6 +1,6 @@
 import glamorous from 'glamorous'
 
-const LogoContainer = glamorous.div({
+const LogoContainer = glamorous.div('logo-container', {
   position: 'relative',
   overflow: 'hidden',
   width: '960px',

frontend/src/ui/RegisteredAccountsList.js

@@ -3,7 +3,7 @@ import { Div } from 'glamorous'
 
 const RegisteredAccountsList = ({ accounts }) =>
   accounts.length ? (
-    <Div textAlign="left" marginTop="1em">
+    <Div className="registered-accounts-list" textAlign="left" marginTop="1em">
       You have {accounts.length} registered account{accounts.length > 1 ? 's' : ''}:
       <ul>{accounts.map((account, index) => <li key={index}>{account}</li>)}</ul>
     </Div>

frontend/src/ui/Socials.js

@@ -16,7 +16,7 @@ const socialStyles = {
 }
 
 const Social = ({ company, url }) => (
-  <A href={url} css={socialStyles}>
+  <A className="social-item" href={url} css={socialStyles}>
     <span className="fa-stack fa-lg">
       <i className="fa fa-circle fa-stack-2x" />
       <i className={`fa fa-${company} fa-inverse fa-stack-1x`} />
@@ -25,7 +25,14 @@ const Social = ({ company, url }) => (
 )
 
 const Socials = () => (
-  <Div position="absolute" right="0" top="50%" transform="translateY(-50%)" color="white">
+  <Div
+    className="social-container"
+    position="absolute"
+    right="0"
+    top="50%"
+    transform="translateY(-50%)"
+    color="white"
+  >
     <Social company="twitter" url="https://twitter.com/poanetwork" />
     <Social company="telegram" url="https://t.me/oraclesnetwork" />
     <Social company="github" url="https://github.com/poanetwork" />