WIP Delete an item

panosalbanis · Mar 16, 2019 · a143a57 · a143a57
1 parent 04e2c03
commit a143a57
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 1 deletion.
diff --git a/grocery-list-fe/src/apiCalls.js b/grocery-list-fe/src/apiCalls.js
@@ -21,4 +21,8 @@ const getGroceryList = async id => {
   return response.data || [];
 };
 
+const deleteItem = async () => {
+  return Promise.resolve('OK');
+};
+
 export { addGroceryList, addItem, getGroceryLists, getGroceryList };
diff --git a/grocery-list-fe/src/components/Item/Item.css b/grocery-list-fe/src/components/Item/Item.css
@@ -9,3 +9,18 @@ li {
 .quantity {
   width: auto;
 }
+
+.deleteButton {
+  background: transparent;
+  border: 1px solid black;
+  border-radius: 2em;
+  color: black;
+  display: inline-block;
+  font-size: 12px;
+  height: 3em;
+  line-height: 1.5em;
+  margin: 0 0 8px;
+  padding: 0;
+  text-align: center;
+  width: 3em;
+}
diff --git a/grocery-list-fe/src/components/Item/Item.js b/grocery-list-fe/src/components/Item/Item.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import './Item.css';
 
 function Item(props) {
-  const { name, quantity } = props;
+  const { name, quantity, onDeleteHandler } = props;
   return (
     <div className="container">
       <li className="row justify-content-between">
@@ -13,6 +13,9 @@ function Item(props) {
         <div className="quantity col-lg-2">
           <h2>{quantity}</h2>
         </div>
+        <button className="deleteButton" onClick={onDeleteHandler}>
+          <h2>x</h2>
+        </button>
       </li>
     </div>
   );

diff --git a/grocery-list-fe/src/components/Item/Item.test.js b/grocery-list-fe/src/components/Item/Item.test.js
@@ -8,4 +8,18 @@ describe('Item', () => {
     expect(wrapper.find('.name').text()).toEqual('Milk');
     expect(wrapper.find('.quantity').text()).toEqual('1');
   });
+
+  it('renders a delete button', () => {
+    const wrapper = shallow(<Item name={'Milk'} quantity={1} />);
+    expect(wrapper.find('.deleteButton').length).toEqual(1);
+  });
+
+  it('calls the handler function when the `delete` button is pressed', () => {
+    const deleteHandlerSpy = jest.fn();
+    const wrapper = shallow(
+      <Item name={'Milk'} quantity={1} onDeleteHandler={deleteHandlerSpy} />
+    );
+    wrapper.find('.deleteButton').simulate('click');
+    expect(deleteHandlerSpy).toHaveBeenCalledTimes(1);
+  });
 });