Commit 4fa1456a authored by Martin Fahl's avatar Martin Fahl

creates walking skeleton

parent 4f884ba8
import * as actions from "../itemsActions"
import * as types from "../../constants/ActionTypes"
describe("itemsActions", () => {
})
\ No newline at end of file
import * as types from "../constants/ActionTypes"
// import * as types from "../constants/ActionTypes"
export const updateFilter = filterTerm => ({
type: types.UPDATE_FILTER,
filterTerm: filterTerm
/* TODO set type to types.UPDATE_FILTER and
filterTerm to argument */
})
\ No newline at end of file
export * from "./addDialogActions"
export * from "./filterTermActions"
export * from "./itemsActions"
\ No newline at end of file
import * as types from "../constants/ActionTypes"
/* TODO add updateItem action */
\ No newline at end of file
......@@ -2,11 +2,10 @@ import React from "react"
import PropTypes from "prop-types"
import { TextField, Icon, InputAdornment } from "@material-ui/core/"
const Filter = ({ filterTerm, updateFilter }) => (
const Filter = (/* TODO pass fitler term and update filter action creator */ ) => (
<TextField
id="input-with-icon-textfield"
value={filterTerm}
onChange={updateFilter}
/* TODO set value to filter term and onchange to update filter action creator*/
fullWidth
margin="normal"
InputProps={{
......
......@@ -3,16 +3,14 @@ import PropTypes from "prop-types"
import { ListItem, ListItemText, Typography, Icon, IconButton, Avatar } from "@material-ui/core/"
import DeleteIcon from "@material-ui/icons/Delete"
/* TODO add function to increment/decrement */
const Item = ({ id, name, quantity /* TODO pass updateItem function */ }) => (
const Item = ({ id, name, quantity }) => (
<ListItem>
<ListItemText>
<Typography id="nameText" variant="subheading">
{name}
</Typography>
</ListItemText>
<IconButton id="decrement" /* TODO add onclick */ aria-label="Decrement">
<IconButton id="decrement" aria-label="Decrement">
<Icon color="secondary">arrow_downward</Icon>
</IconButton>
......@@ -22,7 +20,7 @@ const Item = ({ id, name, quantity /* TODO pass updateItem function */ }) => (
</Typography>
</Avatar>
<IconButton id="increment" /* TODO add onclick */ aria-label="Increment">
<IconButton id="increment" aria-label="Increment">
<Icon color="secondary">arrow_upward</Icon>
</IconButton>
<IconButton id="delete" aria-label="Delete">
......
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 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>
`;
import React, { Component } from 'react'
import { connect } from 'react-redux'
import InventoryList from '../../components/InventoryList/InventoryList'
import { updateFilter, openAddDialog } from '../../actions'
import { openAddDialog } from '../../actions'
import { createSelector } from 'reselect'
class InventoryListContainer extends Component {
......@@ -31,7 +31,7 @@ const mapStateToProps = state => ({
})
const mapDispatchToProps = dispatch => ({
updateFilter: event => dispatch(updateFilter(event.target.value)),
/* TODO map update Filter */
openAddDialog: () => dispatch(openAddDialog())
})
......
......@@ -3,7 +3,7 @@ import { UPDATE_FILTER } from "../constants/ActionTypes"
const filterTerm = (state = "", action) => {
switch (action.type) {
case UPDATE_FILTER:
return action.filterTerm
/* TODO return filter term */
default:
return state
}
......
......@@ -5,9 +5,7 @@ const INITIAL_STATE = [ {id: "1156", name: "Peanuts", quantity: 4},
{id: "3358", name: "Wine", quantity: 40} ]
const items = (state = INITIAL_STATE, action) => {
switch (action.type) {
case ITEM_UPDATED:
/* TODO carry out item update */
switch (action.type) {
default:
return state
}
......
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