-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ch(feedback): refactor cart test case to test connected component
- Loading branch information
Showing
5 changed files
with
163 additions
and
145 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,5 +5,4 @@ cache: | |
| directories: | ||
| - node_modules | ||
| script: | ||
| - npm test | ||
| - npm run coveralls | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,61 +1,70 @@ | ||
| import React from 'react'; | ||
| import { mount } from 'enzyme'; | ||
| import MockAdapter from 'axios-mock-adapter'; | ||
|
|
||
| import { Cart } from '../../components/Cart'; | ||
| import Cart from '../../components/Cart'; | ||
| import { reduxWrap } from '../helpers'; | ||
| import axios from '../../services/axios'; | ||
|
|
||
| const axiosMock = new MockAdapter(axios); | ||
|
|
||
| describe('<Cart />', () => { | ||
| const props = { | ||
| const initialState = { | ||
| user: { isLoggedIn: true }, | ||
| fetching: { fetching: false, errorMessage: '' }, | ||
| menu: [ | ||
| { | ||
| id: 1, | ||
| food_name: 'Tasty Prawns', | ||
| food_image: 'https://i.imgur.com/mTHYwlc.jpg', | ||
| price: 1250, | ||
| }, | ||
| { | ||
| id: 2, | ||
| food_name: 'Turkey Wings', | ||
| food_image: 'https://i.imgur.com/Bfn1CxC.jpg', | ||
| price: 950, | ||
| }, | ||
| ], | ||
| cart: { | ||
| 1: { | ||
| foodName: 'Sweet food', | ||
| foodPrice: 829, | ||
| foodName: 'Tasty Prawns', | ||
| foodPrice: 1250, | ||
| }, | ||
| 2: { | ||
| foodName: 'Ugly plantain', | ||
| foodPrice: 129, | ||
| foodName: 'Turkey Wings', | ||
| foodPrice: 950, | ||
| }, | ||
| }, | ||
| removeFromCart: jest.fn(), | ||
| checkout: jest.fn(), | ||
| history: { push: jest.fn() }, | ||
| fetching: { fetching: false, errorMessage: '' }, | ||
| }; | ||
|
|
||
| afterEach(axiosMock.restore); | ||
| afterAll(axiosMock.reset); | ||
|
|
||
| const connectedComponent = reduxWrap(<Cart />, { initialState }); | ||
|
|
||
| it('should render correctly', () => { | ||
| const wrapper = mount(<Cart {...props} />); | ||
| const wrapper = mount(connectedComponent); | ||
| expect(wrapper).toMatchSnapshot(); | ||
| wrapper.unmount(); | ||
| }); | ||
|
|
||
| it('should remove item from cart successfully', () => { | ||
| const wrapper = mount(<Cart {...props} />); | ||
| const wrapper = mount(connectedComponent); | ||
| const firstRemoveButton = wrapper.find('.food-card-checkout > button').first(); | ||
| firstRemoveButton.simulate('click'); | ||
| expect(props.removeFromCart).toHaveBeenCalledWith(1); | ||
| expect(wrapper.find('.food-card-checkout').length).toEqual(1); | ||
| wrapper.unmount(); | ||
| }); | ||
|
|
||
| it('should place order for food successfully', async () => { | ||
| const wrapper = mount(<Cart {...props} />); | ||
| const checkoutButton = wrapper.find('#checkout'); | ||
| await checkoutButton.simulate('click'); | ||
| expect(props.checkout).toHaveBeenCalledWith([1, 2]); | ||
| expect(props.history.push).toHaveBeenCalledWith('/order-history'); | ||
| wrapper.unmount(); | ||
| }); | ||
|
|
||
| it('should not redirect user if error occurs', async () => { | ||
| const wrapper = mount( | ||
| <Cart | ||
| {...{ | ||
| ...props, | ||
| fetching: { ...props.fetching, errorMessage: 'something went bonkers' }, | ||
| }} | ||
| />, | ||
| ); | ||
| axiosMock.onPost().replyOnce(201, { | ||
| status: 'success', | ||
| message: 'new order placed successfully', | ||
| }); | ||
| const wrapper = mount(connectedComponent); | ||
| const checkoutButton = wrapper.find('#checkout'); | ||
| await checkoutButton.simulate('click'); | ||
| expect(props.history.push).toHaveBeenCalledTimes(1); | ||
| wrapper.unmount(); | ||
| }); | ||
| }); |
227 changes: 118 additions & 109 deletions
227
src/tests/components/__snapshots__/Cart.test.jsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,126 +1,135 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`<Cart /> should render correctly 1`] = ` | ||
| <Cart | ||
| cart={ | ||
| <Provider | ||
| store={ | ||
| Object { | ||
| "1": Object { | ||
| "foodName": "Sweet food", | ||
| "foodPrice": 829, | ||
| }, | ||
| "2": Object { | ||
| "foodName": "Ugly plantain", | ||
| "foodPrice": 129, | ||
| }, | ||
| "dispatch": [Function], | ||
| "getState": [Function], | ||
| "replaceReducer": [Function], | ||
| "subscribe": [Function], | ||
| Symbol(observable): [Function], | ||
| } | ||
| } | ||
| checkout={[MockFunction]} | ||
| fetching={ | ||
| Object { | ||
| "errorMessage": "", | ||
| "fetching": false, | ||
| } | ||
| } | ||
| history={ | ||
| Object { | ||
| "push": [MockFunction], | ||
| } | ||
| } | ||
| removeFromCart={[MockFunction]} | ||
| > | ||
| <div | ||
| className="wrapper" | ||
| > | ||
| <h2> | ||
| Items To Be Purchased | ||
| </h2> | ||
| <section | ||
| className="container checkout" | ||
| <Connect(Cart)> | ||
| <Cart | ||
| cart={ | ||
| Object { | ||
| "1": Object { | ||
| "foodName": "Tasty Prawns", | ||
| "foodPrice": 1250, | ||
| }, | ||
| "2": Object { | ||
| "foodName": "Turkey Wings", | ||
| "foodPrice": 950, | ||
| }, | ||
| } | ||
| } | ||
| checkout={[Function]} | ||
| fetching={ | ||
| Object { | ||
| "errorMessage": "", | ||
| "fetching": false, | ||
| } | ||
| } | ||
| removeFromCart={[Function]} | ||
| > | ||
| <CheckOutCard | ||
| buttonCallback={[Function]} | ||
| foodName="Sweet food" | ||
| foodPrice={829} | ||
| id={1} | ||
| key="1" | ||
| <div | ||
| className="wrapper" | ||
| > | ||
| <div | ||
| className="food-card-checkout" | ||
| data-foodid={1} | ||
| <h2> | ||
| Items To Be Purchased | ||
| </h2> | ||
| <section | ||
| className="container checkout" | ||
| > | ||
| <div | ||
| className="food-card-checkout__details" | ||
| <CheckOutCard | ||
| buttonCallback={[Function]} | ||
| foodName="Tasty Prawns" | ||
| foodPrice={1250} | ||
| id={1} | ||
| key="1" | ||
| > | ||
| <h4> | ||
| Sweet food | ||
| </h4> | ||
| <p> | ||
| ₦ | ||
| 829 | ||
| </p> | ||
| </div> | ||
| <button | ||
| onClick={[Function]} | ||
| type="button" | ||
| <div | ||
| className="food-card-checkout" | ||
| data-foodid={1} | ||
| > | ||
| <div | ||
| className="food-card-checkout__details" | ||
| > | ||
| <h4> | ||
| Tasty Prawns | ||
| </h4> | ||
| <p> | ||
| ₦ | ||
| 1250 | ||
| </p> | ||
| </div> | ||
| <button | ||
| onClick={[Function]} | ||
| type="button" | ||
| > | ||
| Remove | ||
| </button> | ||
| </div> | ||
| </CheckOutCard> | ||
| <CheckOutCard | ||
| buttonCallback={[Function]} | ||
| foodName="Turkey Wings" | ||
| foodPrice={950} | ||
| id={2} | ||
| key="2" | ||
| > | ||
| Remove | ||
| </button> | ||
| </div> | ||
| </CheckOutCard> | ||
| <CheckOutCard | ||
| buttonCallback={[Function]} | ||
| foodName="Ugly plantain" | ||
| foodPrice={129} | ||
| id={2} | ||
| key="2" | ||
| > | ||
| <div | ||
| className="food-card-checkout" | ||
| data-foodid={2} | ||
| > | ||
| <div | ||
| className="food-card-checkout__details" | ||
| > | ||
| <h4> | ||
| Turkey Wings | ||
| </h4> | ||
| <p> | ||
| ₦ | ||
| 950 | ||
| </p> | ||
| </div> | ||
| <button | ||
| onClick={[Function]} | ||
| type="button" | ||
| > | ||
| Remove | ||
| </button> | ||
| </div> | ||
| </CheckOutCard> | ||
| </section> | ||
| <div | ||
| className="food-card-checkout" | ||
| data-foodid={2} | ||
| className="order-price" | ||
| > | ||
| <div | ||
| className="food-card-checkout__details" | ||
| > | ||
| <h4> | ||
| Ugly plantain | ||
| </h4> | ||
| <p> | ||
| ₦ | ||
| 129 | ||
| </p> | ||
| </div> | ||
| <button | ||
| onClick={[Function]} | ||
| type="button" | ||
| > | ||
| Remove | ||
| </button> | ||
| <p> | ||
| <strong> | ||
| total price | ||
| </strong> | ||
| : ₦ | ||
| <span | ||
| id="order-price" | ||
| > | ||
| 2,200 | ||
| </span> | ||
| </p> | ||
| </div> | ||
| </CheckOutCard> | ||
| </section> | ||
| <div | ||
| className="order-price" | ||
| > | ||
| <p> | ||
| <strong> | ||
| total price | ||
| </strong> | ||
| : ₦ | ||
| <span | ||
| id="order-price" | ||
| <button | ||
| className="btn-primary" | ||
| id="checkout" | ||
| onClick={[Function]} | ||
| type="button" | ||
| > | ||
| 958 | ||
| </span> | ||
| </p> | ||
| </div> | ||
| <button | ||
| className="btn-primary" | ||
| id="checkout" | ||
| onClick={[Function]} | ||
| type="button" | ||
| > | ||
| Checkout | ||
| </button> | ||
| </div> | ||
| </Cart> | ||
| Checkout | ||
| </button> | ||
| </div> | ||
| </Cart> | ||
| </Connect(Cart)> | ||
| </Provider> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters