Skip to content

Commit

Permalink
Merge pull request #453 from AgileVentures/451_link_performances_to_b…
Browse files Browse the repository at this point in the history
…ackend

Linking performances to DB [WIP]
  • Loading branch information
aonomike committed Nov 30, 2019
2 parents 572cd32 + 42b1bb5 commit 495013e
Show file tree
Hide file tree
Showing 5 changed files with 163 additions and 58 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const PerformanceCard = props => {
<div className="performance-text">
<h4>{props.performanceTitle}</h4>
<p className="performance-description">
{props.performanceDescription}
{props.description}
</p>
</div>
<div className="performance-stats">
Expand All @@ -48,8 +48,8 @@ const PerformanceCard = props => {
}

PerformanceCard.propTypes = {
performanceTitle: PropTypes.string.isRequired,
performanceDescription: PropTypes.string,
performanceTitle: PropTypes.string,
description: PropTypes.string,
causeTitle: PropTypes.string,
artistName: PropTypes.string,
donatedAmount: PropTypes.number,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,28 @@ import { mount } from 'enzyme'
import { MockedProvider } from '@apollo/react-testing'
import { act } from 'react-dom/test-utils'
import { MemoryRouter as Router } from 'react-router-dom'
import CampaignsEndingSoon, { GET_CAUSES_ENDING_SOON_QUERY } from './CampaignsEndingSoon'
import CampaignsEndingSoon, {
GET_CAUSES_ENDING_SOON_QUERY
} from './CampaignsEndingSoon'

async function mountMockedProvider(result) {
const mocks = [
{
request: {
query: GET_CAUSES_ENDING_SOON_QUERY,
variables: { 'scope': 'ending_soon' }
variables: { scope: 'ending_soon' }
},
result
}
]
jest.useFakeTimers()
const component = mount(
<MockedProvider
mocks={mocks}
addTypename={false}
>
<MockedProvider mocks={mocks} addTypename={false}>
<Router>
<CampaignsEndingSoon />
</Router>
</MockedProvider>)
</MockedProvider>
)
act(() => {
jest.runAllTimers()
})
Expand All @@ -34,10 +34,10 @@ async function mountMockedProvider(result) {

describe('<CampaignsEndingSoon />', () => {
let campaignsEndingSoonWrapper, data
beforeEach(async() => {
beforeEach(async () => {
data = {
'data': {
'causes': [
data: {
causes: [
{
amountRaised: 5000,
endDate: new Date('2019-12-12'),
Expand Down Expand Up @@ -79,11 +79,23 @@ describe('<CampaignsEndingSoon />', () => {
})

it('first cause card has correct cause name', () => {
expect(campaignsEndingSoonWrapper.find('CauseCard').at(0).find('.cause-card-name').text()).toEqual('Awesome Cause 1')
expect(
campaignsEndingSoonWrapper
.find('CauseCard')
.at(0)
.find('.cause-card-name')
.text()
).toEqual('Awesome Cause 1')
})

it('second cause card has correct cause name', () => {
expect(campaignsEndingSoonWrapper.find('CauseCard').at(1).find('.cause-card-name').text()).toEqual('Awesome Cause 2')
expect(
campaignsEndingSoonWrapper
.find('CauseCard')
.at(1)
.find('.cause-card-name')
.text()
).toEqual('Awesome Cause 2')
})
})
})
Expand Down
6 changes: 3 additions & 3 deletions src/containers/Performances/Performances.test.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React from 'react'
import Performances from './Performances'
import { mount } from 'enzyme'
import { shallow } from 'enzyme'

describe('<Performances />', () => {
let performancesWrapper

beforeEach(() => {
performancesWrapper = mount(<Performances />)
performancesWrapper = shallow(<Performances />)
})

it('contains a Trending Performances wrapper', () => {
const performancesWrapper = mount(<Performances />)
const performancesWrapper = shallow(<Performances />)
expect(performancesWrapper.find('TrendingPerformances').length).toEqual(1)
})

Expand Down
Original file line number Diff line number Diff line change
@@ -1,37 +1,51 @@
import React, { Component } from 'react'
import { Query } from 'react-apollo'
import gql from 'graphql-tag'
import PerformanceCard from '../../../components/Performances/PerformanceCard/PerformanceCard'

export const GET_TRENDING_PERFORMANCES_QUERY = gql`
query getTrendingPerformances {
performances {
id
detail
amountRaised
}
}
`

class TrendingPerformances extends Component {
render() {
return (
<React.Fragment>
<h1 className="trending-performances-title">Trending Performances</h1>
<Query query={GET_TRENDING_PERFORMANCES_QUERY}>
{({ data, error, loading }) => {
if (loading) {
return <div className="white">loading</div>
}
if (error) {
return <div>Error</div>
}
return (
<React.Fragment>
<h1 className="trending-performances-title">
Trending Performances
</h1>

<div className="performance-card-wrapper">
<PerformanceCard
isFeatured
performanceTitle="Awesome Performance"
performanceDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
causeTitle="Cause A"
artistName="Awesome Artist B"
donatedAmount={478}
/>
<PerformanceCard
performanceTitle="Awesome Performance"
performanceDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
causeTitle="Cause A"
artistName="Awesome Artist B"
donatedAmount={478}
/>
<PerformanceCard
performanceTitle="Awesome Performance"
performanceDescription="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
causeTitle="Cause A"
artistName="Awesome Artist B"
donatedAmount={478}
/>
</div>
</React.Fragment>
<div className="performance-card-wrapper">
{data.performances.map((performance, index) => {
return (
<PerformanceCard
key={performance.id}
description={performance.detail}
donatedAmount={performance.amountRaised}
isFeatured={index === 0}
/>
)
})}
</div>
</React.Fragment>
)
}}
</Query>
)
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,22 +1,101 @@
import React from 'react'
import TrendingPerformances from './TrendingPerformances'
import { shallow } from 'enzyme'
import { mount } from 'enzyme'
import { MockedProvider } from '@apollo/react-testing'
import { act } from 'react-dom/test-utils'
import { MemoryRouter as Router } from 'react-router-dom'
import TrendingPerformances, {
GET_TRENDING_PERFORMANCES_QUERY
} from './TrendingPerformances'

async function mountMockedProvider(result) {
const mocks = [
{
request: {
query: GET_TRENDING_PERFORMANCES_QUERY
},
result
}
]
jest.useFakeTimers()
const component = mount(
<MockedProvider mocks={mocks} addTypename={false}>
<Router>
<TrendingPerformances />
</Router>
</MockedProvider>
)
act(() => {
jest.runAllTimers()
})
component.update()
return component
}

describe('<TrendingPerformances />', () => {
let TrendingPerformancesWrapper
beforeEach(() => {
TrendingPerformancesWrapper = shallow(<TrendingPerformances />)
let trendingPerformancesWrapper, data

beforeEach(async () => {
data = {
data: {
performances: [
{
id: 1,
amountRaised: 5000,
detail: 'Awesome Performance 1',
isFeatured: true
},
{
id: 2,
amountRaised: 5000,
detail: 'Awesome Performance 2',
isFeatured: false
},
{
id: 3,
amountRaised: 2333,
detail: 'Awesome Performance 3',
isFeatured: false
}
]
}
}
trendingPerformancesWrapper = await mountMockedProvider(data)
})
describe('success', () => {
it("has 'Trending Performances' title", () => {
expect(trendingPerformancesWrapper.find('h1').text()).toEqual(
'Trending Performances'
)
})

describe('PerformanceCard', () => {
it('has 3 performance cards', () => {
expect(trendingPerformancesWrapper.find('PerformanceCard').length).toEqual(
3
)
})

it('first performance card has correct description', () => {
expect(trendingPerformancesWrapper.find('PerformanceCard').at(0).find('.performance-text p').text()).toEqual('Awesome Performance 1')
})

it("has 'Trending Performances' title", () => {
expect(TrendingPerformancesWrapper.find('h1').text()).toEqual(
'Trending Performances'
)
it('second cause card has correct cause name', () => {
expect(trendingPerformancesWrapper.find('PerformanceCard').at(1).find('.performance-text p').text()).toEqual('Awesome Performance 2')
})
it('third cause card has correct cause name', () => {
expect(trendingPerformancesWrapper.find('PerformanceCard').at(2).find('.performance-text p').text()).toEqual('Awesome Performance 3')
})
})
})

it('has 3 performances featured in the top section', () => {
expect(TrendingPerformancesWrapper.find('PerformanceCard').length).toEqual(
3
)
describe('error', () => {
let result
beforeEach(async () => {
result = { error: new Error('aw shucks') }
trendingPerformancesWrapper = await mountMockedProvider(result)
})
it('displays error div', () => {
expect(trendingPerformancesWrapper.find('div').text()).toEqual('Error')
})
})
})

0 comments on commit 495013e

Please sign in to comment.