Commit 42dfaf41 authored by Martin Fahl's avatar Martin Fahl

adds test for item component

parent fbdee7c8
......@@ -14,24 +14,24 @@ const decrement = (quantity) => quantity > 1 ? quantity - 1 : 0
const Item = ({ id, name, quantity, updateItem, deleteItem }) => (
<ListItem>
<ListItemText>
<Typography variant="subheading">
<Typography id="nameText" variant="subheading">
{name}
</Typography>
</ListItemText>
<IconButton onClick={() => updateItem(id, name, decrement(quantity))} aria-label="Decrement">
<IconButton id="decrement" onClick={() => updateItem(id, name, decrement(quantity))} aria-label="Decrement">
<Icon color="secondary">arrow_downward</Icon>
</IconButton>
<Avatar >
<Typography variant="subheading">
<Avatar>
<Typography id="quantityText" variant="subheading">
{quantity}
</Typography>
</Avatar>
<IconButton onClick={() => updateItem(id, name, increment(quantity))} aria-label="Increment">
<IconButton id="increment" onClick={() => updateItem(id, name, increment(quantity))} aria-label="Increment">
<Icon color="secondary">arrow_upward</Icon>
</IconButton>
<IconButton onClick={() => deleteItem(id)} aria-label="Delete">
<IconButton id="delete" onClick={() => deleteItem(id)} aria-label="Delete">
<DeleteIcon />
</IconButton>
</ListItem>
......
import React from 'react'
import { shallow } from 'enzyme';
import Item from './Item'
import { ListItem, ListItemText, Typography, IconButton, Avatar } from '@material-ui/core';
import renderer from "react-test-renderer";
describe('components', () => {
describe('Item', () => {
let mockUpdateFunction
let mockDeleteFunction
let props
let wrapper
beforeEach(() => {
mockUpdateFunction = jest.fn()
mockDeleteFunction = jest.fn()
props = {
id: "a23",
name: "Axe",
quantity: 25,
updateItem: mockUpdateFunction,
deleteItem: mockDeleteFunction
}
wrapper = shallow(<Item {...props}/>)
})
it('should render itself', () => {
expect(wrapper.find(ListItem).length).toEqual(1)
expect(wrapper.find(ListItemText).length).toEqual(1)
expect(wrapper.find(Typography).length).toEqual(2)
expect(wrapper.find(IconButton).length).toEqual(3)
expect(wrapper.find(Avatar).length).toEqual(1)
})
it('should match snapshot', () => {
const itemComponent = renderer
.create(<Item {...props} />)
.toJSON()
expect(itemComponent).toMatchSnapshot();
})
it('should call updateItem to increment', () => {
wrapper.find('#increment').simulate('click')
expect(mockUpdateFunction.mock.calls.length).toBe(1)
})
it('should call updateItem to decrement', () => {
wrapper.find('#decrement').simulate('click')
expect(mockUpdateFunction.mock.calls.length).toBe(1)
})
it('should call deleteItem', () => {
wrapper.find('#delete').simulate('click')
expect(mockDeleteFunction.mock.calls.length).toBe(1)
})
it('should render the supplied name', () => {
expect(wrapper.find('#nameText').html()).toContain(props.name)
})
it('should render the supplied quantity', () => {
expect(wrapper.find('#quantityText').html()).toContain(props.quantity)
})
})
})
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components Item should match snapshot 1`] = `
<li
className="MuiListItem-root-1 MuiListItem-default-4 MuiListItem-gutters-8"
disabled={false}
>
<div
className="MuiListItemText-root-11"
>
<h3
className="MuiTypography-root-17 MuiTypography-subheading-24"
id="nameText"
>
Axe
</h3>
</div>
<button
aria-label="Decrement"
className="MuiButtonBase-root-48 MuiIconButton-root-42"
disabled={false}
id="decrement"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex="0"
type="button"
>
<span
className="MuiIconButton-label-47"
>
<span
aria-hidden="true"
className="material-icons MuiIcon-root-51 MuiIcon-colorSecondary-53"
>
arrow_downward
</span>
</span>
<span
className="MuiTouchRipple-root-58"
/>
</button>
<div
className="MuiAvatar-root-65 MuiAvatar-colorDefault-66"
>
<h3
className="MuiTypography-root-17 MuiTypography-subheading-24"
id="quantityText"
>
25
</h3>
</div>
<button
aria-label="Increment"
className="MuiButtonBase-root-48 MuiIconButton-root-42"
disabled={false}
id="increment"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex="0"
type="button"
>
<span
className="MuiIconButton-label-47"
>
<span
aria-hidden="true"
className="material-icons MuiIcon-root-51 MuiIcon-colorSecondary-53"
>
arrow_upward
</span>
</span>
<span
className="MuiTouchRipple-root-58"
/>
</button>
<button
aria-label="Delete"
className="MuiButtonBase-root-48 MuiIconButton-root-42"
disabled={false}
id="delete"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseDown={[Function]}
onMouseLeave={[Function]}
onMouseUp={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
tabIndex="0"
type="button"
>
<span
className="MuiIconButton-label-47"
>
<svg
aria-hidden="true"
className="MuiSvgIcon-root-68"
color={undefined}
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
/>
<path
d="M0 0h24v24H0z"
fill="none"
/>
</svg>
</span>
<span
className="MuiTouchRipple-root-58"
/>
</button>
</li>
`;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment