Skip to content
Permalink
Browse files

test: add App integration tests

  • Loading branch information...
mkczarkowski committed Jul 10, 2018
1 parent e3ac321 commit f95f703ec1abbd64cccc1f4a1edade3c1ef6a5a9
@@ -1,4 +1,4 @@
import { mockedCryptos } from '../../containers/utils/mockedCryptos';
import { mockedCryptos } from '../../containers/tests/utils/mockedCryptos';

const getCoinList = (limit = 100) => {
return new Promise(resolve => {
@@ -9,8 +9,11 @@ import CoinListHead from './CoinListHead/CoinListHead';
const NoResults = styled.p`
margin-top: 3%;
font-size: 1.2em;
text-align: center;
`;

export const NO_RESULTS_MESSAGE = 'Brak wyników dla wprowadzonej frazy.';

const CenteredSpinner = styled(Spinner)`
margin: 3%;
text-align: center;
@@ -20,15 +23,17 @@ const CoinList = ({ cryptos, isLoading }) => {
const isListEmpty = cryptos.length === 0;
const renderCoin = crypto => <Coin {...crypto} key={crypto.acronym} />;
const coinList = isListEmpty ? (
<NoResults>Brak wyników dla wprowadzonej frazy.</NoResults>
<NoResults>{NO_RESULTS_MESSAGE}</NoResults>
) : (
cryptos.map(renderCoin)
);

return (
<div>
<CoinListHead />
{isLoading ? <CenteredSpinner name="three-bounce" /> : coinList}
<div className="coin-list__content">
{isLoading ? <CenteredSpinner name="three-bounce" /> : coinList}
</div>
</div>
);
};
@@ -31,7 +31,13 @@ const Input = styled.input`
const SearchBar = ({ handleChange, searchQuery }) => {
return (
<Wrapper>
<Input value={searchQuery} placeholder="Search" type="text" onChange={handleChange} />
<Input
value={searchQuery}
placeholder="Search"
type="text"
onChange={handleChange}
id="search-bar-input"
/>
</Wrapper>
);
};
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import debounce from 'lodash.debounce';
import getCoinList from '../api/coinMarketCap';
import getCoinList from '../api/coinMarketCap';

import Header from '../components/Header/Header';
import SearchBar from '../components/SearchBar/SearchBar';
@@ -0,0 +1,85 @@
import React from 'react';

import debounce from 'lodash.debounce';
import getCoinList from '../../api/coinMarketCap';

import App from '../App';
import { NO_RESULTS_MESSAGE } from '../../components/CoinList/CoinList';
import { mockedCryptos } from './utils/mockedCryptos';

jest.mock('lodash.debounce', () => jest.fn(fn => fn));
jest.mock('../../api/coinMarketCap');

describe('<App />', () => {
let appWrapper;
let searchBarInput;
const mockedCryptosCount = Object.keys(mockedCryptos.data.data).length;

const mountApp = (disableLifecycleMethods = false) =>
mount(<App />, { disableLifecycleMethods });

const getCoinListWrapper = () => {
if (!appWrapper) {
appWrapper = mountApp();
}

return appWrapper.find('CoinList');
};

beforeEach(() => {
appWrapper = mountApp();
searchBarInput = appWrapper.find('#search-bar-input').at(0);
});

afterEach(() => {
appWrapper = undefined;
searchBarInput = undefined;
});

it('only displays loading animation until cryptos will have fetched', () => {
appWrapper = mountApp(true);
expect(getCoinListWrapper().find('Spinner').length).toBe(1);
expect(getCoinListWrapper().find('Coin').length).toBe(0);
});

it('hides loading animation after cryptos had fetched', () => {
appWrapper.update();
expect(
getCoinListWrapper()
.find('Spinner')
.exists(),
).toBe(false);
});

it('displays all fetched cryptos', () => {
appWrapper.update();
expect(getCoinListWrapper().find('Coin').length).toBe(mockedCryptosCount);
});

it(`displays single match`, () => {
searchBarInput.simulate('change', { target: { value: 'BTC' } });
expect(getCoinListWrapper().find('Coin').length).toBe(1);
});

it('displays multiple matches', () => {
searchBarInput.simulate('change', { target: { value: 'B' } });
expect(getCoinListWrapper().find('Coin').length).toBe(2);
});

it('displays message if there is no match', () => {
searchBarInput.simulate('change', {
target: { value: 'NIE-TYM-RAZEM-COIN' },
});
expect(
getCoinListWrapper()
.find('.coin-list__content')
.text(),
).toBe(NO_RESULTS_MESSAGE);
});

it('displays all available cryptos after user deletes search query', () => {
searchBarInput.simulate('change', { target: { value: 'B' } });
searchBarInput.simulate('change', { target: { value: '' } });
expect(getCoinListWrapper().find('Coin').length).toBe(mockedCryptosCount);
});
});
@@ -1,15 +1,15 @@
import React from 'react';

import App from './App';
import Header from '../components/Header/Header';
import SearchBar from '../components/SearchBar/SearchBar';
import CoinList from '../components/CoinList/CoinList';
import App from '../App';
import Header from '../../components/Header/Header';
import SearchBar from '../../components/SearchBar/SearchBar';
import CoinList from '../../components/CoinList/CoinList';
import debounce from 'lodash.debounce';
import getCoinList from '../api/coinMarketCap';
import getCoinList from '../../api/coinMarketCap';
import { mappedMockedCryptos } from './utils/mockedCryptos';

jest.mock('lodash.debounce', () => jest.fn(fn => fn));
jest.mock('../api/coinMarketCap');
jest.mock('../../api/coinMarketCap');

describe('<App />', () => {
let appWrapper;
@@ -140,9 +140,9 @@ describe('<App />', () => {

describe('when searchQuery is matching with cryptos', () => {
it('sets matchedCryptos to array of matched elements', () => {
expect(appInstance.state.matchedCryptos).toEqual(
[appInstance.state.cryptos[0]],
);
expect(appInstance.state.matchedCryptos).toEqual([
appInstance.state.cryptos[0],
]);
});
});

@@ -1,4 +1,4 @@
import { mapFetchedCryptos } from '../../shared/utils/helpers';
import { mapFetchedCryptos } from '../../../shared/utils/helpers';

const mockedCryptos = {
data: {
@@ -45,11 +45,32 @@ const mockedCryptos = {
},
last_updated: 1525137260,
},
'1831': {
id: 1831,
name: 'Bitcoin Cash',
symbol: 'BCH',
website_slug: 'bitcoin-cash',
rank: 4,
circulating_supply: 17223738.0,
total_supply: 17223738.0,
max_supply: 21000000.0,
quotes: {
USD: {
price: 734.823,
volume_24h: 357992000.0,
market_cap: 12656398461.0,
percent_change_1h: 0.12,
percent_change_24h: 1.22,
percent_change_7d: -1.76,
},
},
last_updated: 1530942734,
},
},
},
};

const cryptos = mockedCryptos.data.data;
const mappedMockedCryptos = mapFetchedCryptos(cryptos);

export { mockedCryptos, mappedMockedCryptos };
export { mockedCryptos, mappedMockedCryptos };

0 comments on commit f95f703

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.