Skip to content

Commit

Permalink
add test for async action and add mock data for tests
Browse files Browse the repository at this point in the history
  • Loading branch information
Michal Bartosik committed May 21, 2021
1 parent 3403369 commit 1e13ddc
Show file tree
Hide file tree
Showing 16 changed files with 14,382 additions and 3,199 deletions.
6 changes: 2 additions & 4 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,9 @@
"react-app",
"react-app/jest",
"plugin:prettier/recommended",
"prettier",
"testing-library",
"jest-dom"
"prettier"
],
"plugins": ["prettier"],
"plugins": ["prettier", "testing-library", "jest-dom"],
"env": {
"browser": true,
"node": true,
Expand Down
11 changes: 0 additions & 11 deletions .storybook/main.js

This file was deleted.

10 changes: 0 additions & 10 deletions .storybook/preview.js

This file was deleted.

20 changes: 1 addition & 19 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,7 @@
"build": "react-scripts build",
"test": "tsc --noEmit && react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint --fix --ext .jsx,.js,.ts,.tsx .",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
"lint": "eslint --fix --ext .jsx,.js,.ts,.tsx ."
},
"resolutions": {
"babel-loader": "8.1.0"
Expand All @@ -43,16 +41,6 @@
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"lint-staged": {
Expand All @@ -78,12 +66,6 @@
]
},
"devDependencies": {
"@storybook/addon-actions": "^6.2.9",
"@storybook/addon-essentials": "^6.2.9",
"@storybook/addon-links": "^6.2.9",
"@storybook/node-logger": "^6.2.9",
"@storybook/preset-create-react-app": "^3.1.7",
"@storybook/react": "^6.2.9",
"eslint": "^7.26.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jest-dom": "^3.9.0",
Expand Down
20 changes: 20 additions & 0 deletions src/App.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { render, screen } from '@testing-library/react';
import App from './App';
import * as api from './helpers/api';
import data from 'mocks/data';

jest.mock('./helpers/api.ts');
describe('App component', () => {
it('renders countries list if request succeeds', async () => {
const mockGetCountries = jest.spyOn(api, 'default');
mockGetCountries.mockImplementationOnce((): Promise<any> => {
return Promise.resolve(data);
});

render(<App />);

const countries = await screen.findAllByTestId('country');
expect(mockGetCountries).toBeCalledTimes(1);
expect(countries).toHaveLength(20);
});
});
2 changes: 1 addition & 1 deletion src/components/CountryCard/CountryCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const CountryCard: React.FC<Country> = ({
alpha3Code,
}) => {
return (
<Container as="li">
<Container as="li" data-testid="country">
<Link to={`/${alpha3Code}`} style={{ textDecoration: 'none' }}>
<FlagWrapper>
<img src={flag} alt="" aria-hidden="true" />
Expand Down
4 changes: 2 additions & 2 deletions src/components/Search/Search.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ describe('Search component', () => {

it('displays search phrase correctly', () => {
userEvent.type(screen.getByRole('textbox'), searchPhrase);
expect(screen.getByRole('textbox')).toHaveValue('Poland');
expect(mockSearchQueryHandler).toHaveBeenCalledTimes(6);
expect(screen.getByRole('textbox')).toHaveValue(searchPhrase);
expect(mockSearchQueryHandler).toHaveBeenCalledTimes(searchPhrase.length);
});
});
7 changes: 1 addition & 6 deletions src/components/Search/Search.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Dispatch, SetStateAction } from 'react';

import { AiOutlineSearch } from 'react-icons/ai';
import { InputWrapper } from './Search.styles';

Expand All @@ -10,18 +9,14 @@ type InputProps = {
};

const Search = ({ placeholder, setSearchQuery, searchQuery }: InputProps) => {
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchQuery(e.target.value);
};

return (
<InputWrapper>
<AiOutlineSearch />
<input
value={searchQuery}
type="text"
placeholder={placeholder}
onChange={handleChange}
onChange={e => setSearchQuery(e.target.value)}
aria-label={placeholder}
/>
</InputWrapper>
Expand Down
3 changes: 2 additions & 1 deletion src/helpers/api.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import axios from 'axios';
import Country from 'models/Country';

const baseUrl = 'https://restcountries.eu/rest/v2/all';

const getCountries = async () => {
const getCountries = async (): Promise<Country[]> => {
const { data } = await axios.get(baseUrl);
return data;
};
Expand Down
Loading

1 comment on commit 1e13ddc

@vercel
Copy link

@vercel vercel bot commented on 1e13ddc May 21, 2021

Choose a reason for hiding this comment

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

Please sign in to comment.