Skip to content
This repository has been archived by the owner on Jun 29, 2020. It is now read-only.

Add basic tests for frontend #48

Merged
merged 6 commits into from
Jul 4, 2018
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions frontend/src/__tests__/BankAccountList.js
Original file line number Diff line number Diff line change
@@ -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)
})
})
21 changes: 21 additions & 0 deletions frontend/src/__tests__/Footer.js
Original file line number Diff line number Diff line change
@@ -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
)
})
})
16 changes: 16 additions & 0 deletions frontend/src/__tests__/Header.js
Original file line number Diff line number Diff line change
@@ -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)
})
})
21 changes: 21 additions & 0 deletions frontend/src/__tests__/Loading.js
Original file line number Diff line number Diff line change
@@ -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)
})
})
14 changes: 14 additions & 0 deletions frontend/src/__tests__/Logo.js
Original file line number Diff line number Diff line change
@@ -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)
})
})
14 changes: 14 additions & 0 deletions frontend/src/__tests__/LogoContainer.js
Original file line number Diff line number Diff line change
@@ -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)
})
})
14 changes: 14 additions & 0 deletions frontend/src/__tests__/Main.js
Original file line number Diff line number Diff line change
@@ -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)
})
})
22 changes: 22 additions & 0 deletions frontend/src/__tests__/RegisteredAccountsList.js
Original file line number Diff line number Diff line change
@@ -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)
})
})
14 changes: 14 additions & 0 deletions frontend/src/__tests__/Title.js
Original file line number Diff line number Diff line change
@@ -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)
})
})
4 changes: 2 additions & 2 deletions frontend/src/ui/BankAccountList.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
})

Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/ui/Footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'], {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the array necessary here?

Copy link
Contributor Author

@garatortiz garatortiz Jul 3, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe not... I used it only for the first expect

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)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not asking why did you add the class. I'm saying that this is the only place where an array is used instead of just listing the arguments. We should use the API consistently even if glamorous accepts different ways of specifying the parameters.

But maybe there was a reason to use it this way here, that was the question.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, now I understand the question. Based on what I read about Glomorous, I understood that the way to indicate two or more classes is with an array, and when it is only one class it can be listed or use an array.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't find anything about that in the documentation. Can you give me a link?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't remember where I had read it, or if I just tried and it worked... but I only did it for that test... in any case we can remove it if you think so.

bottom: '0',
height: footerHeight,
backgroundImage: headerBackgroundImage
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/ui/Loading.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const fadeOut = css.keyframes({
}
})

const LoadingContainer = glamorous.div({
const LoadingContainer = glamorous.div('loading-container', {
position: 'fixed',
zIndex: 1000000,
left: 0,
Expand All @@ -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',
Expand All @@ -49,6 +49,7 @@ const LoadingInner = glamorous.div({
})

const LoadingDot = glamorous.div(
'loading-dot',
{
animationName: `${fadeOut}`,
animationDuration: '2s',
Expand Down
1 change: 1 addition & 0 deletions frontend/src/ui/Logo.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import glamorous from 'glamorous'
import { logoImage } from './styles/constants'

const Logo = glamorous.a(
'poa-logo',
{
display: 'block',
float: 'left',
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/ui/LogoContainer.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import glamorous from 'glamorous'

const LogoContainer = glamorous.div({
const LogoContainer = glamorous.div('logo-container', {
position: 'relative',
overflow: 'hidden',
width: '960px',
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/ui/RegisteredAccountsList.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
11 changes: 9 additions & 2 deletions frontend/src/ui/Socials.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`} />
Expand All @@ -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" />
Expand Down