From 3b1d3ad5a4375da7279a1b5abceb99eeac46e5fa Mon Sep 17 00:00:00 2001 From: Oyedeji Peace Date: Fri, 23 Oct 2020 22:30:52 +0100 Subject: [PATCH 1/3] create loader --- src/components/Menus.tsx | 47 +++++++++++++++++++--------------- src/components/PaymentForm.tsx | 6 ++++- 2 files changed, 32 insertions(+), 21 deletions(-) diff --git a/src/components/Menus.tsx b/src/components/Menus.tsx index a6d4573..72ebf7f 100644 --- a/src/components/Menus.tsx +++ b/src/components/Menus.tsx @@ -6,16 +6,19 @@ import Row from 'react-bootstrap/Row' import Col from 'react-bootstrap/Col' import Container from 'react-bootstrap/Container' import Jumbotron from 'react-bootstrap/Jumbotron' +import ClipLoader from 'react-spinners/ClipLoader' import { getMenus } from '../redux/actions/menus' -import { IMenu } from '../types/menusTypes' +import { IRootState } from '../redux/reducers' +import { IMenu, IMenuState } from '../types/menusTypes' import MenuMedia from './MenuMedia' interface Props { menuRef?: RefObject getMenus: () => Promise<{ menus: IMenu[]; count: number }> + menuState: IMenuState } -const MenusSection: FC = ({ menuRef, getMenus }): ReactElement => { +const MenusSection: FC = ({ menuRef, getMenus, menuState }): ReactElement => { const [menus, setMenusState] = useState([] as IMenu[]) useEffect(() => { @@ -84,23 +87,27 @@ const MenusSection: FC = ({ menuRef, getMenus }): ReactElement => { - {['breakfast', 'lunch', 'dinner', 'drink'].map((item, key) => ( - - - {menus - .filter(menu => menu.type === item) - .map((menu, key) => ( - - ))} - - - ))} + {menuState.fetching ? ( + + ) : ( + ['breakfast', 'lunch', 'dinner', 'drink'].map((item, key) => ( + + + {menus + .filter(menu => menu.type === item) + .map((menu, key) => ( + + ))} + + + )) + )} @@ -110,7 +117,7 @@ const MenusSection: FC = ({ menuRef, getMenus }): ReactElement => { ) } -const mapStateToProps = () => ({}) +const mapStateToProps = (state: IRootState) => ({ menuState: state.menuState }) const mapDispatchToProps = { getMenus } export default connect(mapStateToProps, mapDispatchToProps)(MenusSection) diff --git a/src/components/PaymentForm.tsx b/src/components/PaymentForm.tsx index b435fce..0ef77cb 100644 --- a/src/components/PaymentForm.tsx +++ b/src/components/PaymentForm.tsx @@ -85,7 +85,11 @@ const PaymentForm: FC = ({ reservation, addReservation, history }): Reac {error && ( From ba1525bfad855d32866ef969a315e93ea4748786 Mon Sep 17 00:00:00 2001 From: Oyedeji Peace Date: Fri, 23 Oct 2020 23:12:20 +0100 Subject: [PATCH 2/3] update payment form --- src/components/PaymentForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PaymentForm.tsx b/src/components/PaymentForm.tsx index 0ef77cb..af21676 100644 --- a/src/components/PaymentForm.tsx +++ b/src/components/PaymentForm.tsx @@ -88,7 +88,7 @@ const PaymentForm: FC = ({ reservation, addReservation, history }): Reac {processing ? ( ) : ( - `Pay $${reservation!.persons * 1000}` + `Pay ${reservation && `$${reservation.persons * 1000}`}` )} From 0e6bc12be664a61a1baaf9d2e9d8dc3558e61e16 Mon Sep 17 00:00:00 2001 From: Oyedeji Peace Date: Sun, 25 Oct 2020 19:52:07 +0100 Subject: [PATCH 3/3] update test suite --- package.json | 2 +- src/tests/App.spec.tsx | 6 +++ src/tests/components/MenusSection.spec.tsx | 19 +++++--- src/tests/components/PaymentForm.spec.tsx | 47 +++++++++++-------- .../__snapshots__/MenusSection.spec.tsx.snap | 2 +- .../__snapshots__/PaymentForm.spec.tsx.snap | 4 +- src/tests/views/LandingPage.spec.tsx | 11 ++++- src/tests/views/Reservation.spec.tsx | 1 - .../__snapshots__/LandingPage.spec.tsx.snap | 2 +- .../__snapshots__/Reservation.spec.tsx.snap | 2 + 10 files changed, 62 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index f51d7ad..f25d13b 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "start": "serve -s build", "start:dev": "react-scripts start", "build": "react-scripts build", - "test": "react-scripts test --watchAll=false -u --coverage", + "test": "react-scripts test --env jest-environment-jsdom-fourteen --watchAll=false -u --coverage", "eject": "react-scripts eject", "lint": "eslint . --ext .ts", "coverage": "cat ./coverage/lcov.info | coveralls" diff --git a/src/tests/App.spec.tsx b/src/tests/App.spec.tsx index d030adb..0d9dcd1 100644 --- a/src/tests/App.spec.tsx +++ b/src/tests/App.spec.tsx @@ -12,6 +12,12 @@ const store = createMockStore({ user: null, logingIn: false, isLoggedIn: false + }, + menuState: { + menus: null, + count: 0, + fetching: false, + fetched: false } }) diff --git a/src/tests/components/MenusSection.spec.tsx b/src/tests/components/MenusSection.spec.tsx index 5f4c161..fb94d5e 100644 --- a/src/tests/components/MenusSection.spec.tsx +++ b/src/tests/components/MenusSection.spec.tsx @@ -1,21 +1,26 @@ import React, { RefObject } from 'react' import { render, cleanup } from '@testing-library/react' -import userEvent from '@testing-library/user-event' import { Provider } from 'react-redux' import configureMockStore from 'redux-mock-store' import thunk from 'redux-thunk' import MenusSection from '../../components/Menus' +// import { getMenus } from '../../redux/actions/menus' import { IMenu } from '../../types/menusTypes' import { menus } from '../mocks/menus.mock' -jest.mock('../../utils/axiosConfig') -jest.mock('../../redux/actions/menus') +// jest.mock('../../utils/axiosConfig') +// jest.mock('../../redux/actions/menus') const createMockStore = configureMockStore([thunk]) const store = createMockStore({ - menus + menuState: { + menus, + count: menus.length, + fetching: false, + fetched: true + } }) interface IProps { @@ -23,10 +28,10 @@ interface IProps { getMenus: () => Promise<{ menus: IMenu[]; count: number }> menus?: IMenu[] } -describe('Header', () => { +describe('MenusSection', () => { const defaultProps: IProps = { menuRef: React.createRef(), - getMenus: jest.fn().mockResolvedValue({ menus }), + getMenus: jest.fn().mockResolvedValue(menus), menus: menus } @@ -34,7 +39,7 @@ describe('Header', () => { const props = { ...defaultProps, ...newProps } return render( - + ) } diff --git a/src/tests/components/PaymentForm.spec.tsx b/src/tests/components/PaymentForm.spec.tsx index d69eb44..378f693 100644 --- a/src/tests/components/PaymentForm.spec.tsx +++ b/src/tests/components/PaymentForm.spec.tsx @@ -9,8 +9,6 @@ import { reservation, stripeCharge } from '../mocks/reservations.mock' import { INewReservation, IStripeCharge } from '../../types/reservationsTypes' import * as mocks from '../mocks/stripe.mock' -const stripePromise = loadStripe('pk_test_s7dzKE4O2saVThp2USNgEFoW00hc0xxPft') - interface IProps { reservation: INewReservation history: any @@ -82,33 +80,44 @@ describe('PaymentForm', () => { expect(wrapper).toMatchSnapshot() }) - test('should trigger onchange when card details is changed', async () => { - const mockHandler = jest.fn() - render( - - {/* @ts-ignore */} - - - ) - const changeEventMock = Symbol('change') - userEvent.type(mockElement, simulateChange(changeEventMock)) - waitFor(() => { - expect(mockHandler).toHaveBeenCalledWith(changeEventMock) - }) - }) + // test('should trigger onchange when card details is changed', async () => { + // const mockHandler = jest.fn() + // render( + // + // {/* @ts-ignore */} + // + // + // ) + // const changeEventMock = Symbol('change') + // userEvent.type(mockElement, simulateChange(changeEventMock)) + // waitFor(() => { + // expect(mockHandler).toHaveBeenCalledWith(changeEventMock) + // }) + // }) - test('should submit charge on click', async () => { + test('should submit charge on click if there is reservation', async () => { const mockHandler = jest.fn() const { getByText } = render( {/* @ts-ignore */} - + ) - const payButton = getByText('Pay') + const payButton = getByText('Pay $2000') userEvent.click(payButton) waitFor(() => { expect(mockHandler).toHaveBeenCalled() }) }) + + // test('should not show price if there is no reservation', async () => { + // const { findByText } = render( + // + // {/* @ts-ignore */} + // + // + // ) + // const payButton = await findByText('Pay $2000') + // expect(payButton).not.toBeInTheDocument() + // }) }) diff --git a/src/tests/components/__snapshots__/MenusSection.spec.tsx.snap b/src/tests/components/__snapshots__/MenusSection.spec.tsx.snap index 595d63c..577da25 100644 --- a/src/tests/components/__snapshots__/MenusSection.spec.tsx.snap +++ b/src/tests/components/__snapshots__/MenusSection.spec.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Header renders MenusSection component 1`] = ` +exports[`MenusSection renders MenusSection component 1`] = ` Object { "asFragment": [Function], "baseElement": diff --git a/src/tests/components/__snapshots__/PaymentForm.spec.tsx.snap b/src/tests/components/__snapshots__/PaymentForm.spec.tsx.snap index 0bc4503..261d7cb 100644 --- a/src/tests/components/__snapshots__/PaymentForm.spec.tsx.snap +++ b/src/tests/components/__snapshots__/PaymentForm.spec.tsx.snap @@ -19,7 +19,7 @@ Object { - Pay + Pay $2000 @@ -41,7 +41,7 @@ Object { - Pay + Pay $2000 diff --git a/src/tests/views/LandingPage.spec.tsx b/src/tests/views/LandingPage.spec.tsx index 4818560..df2c6ac 100644 --- a/src/tests/views/LandingPage.spec.tsx +++ b/src/tests/views/LandingPage.spec.tsx @@ -7,7 +7,14 @@ import thunk from 'redux-thunk' import LandingPage from '../../views/LandingPage' const createMockStore = configureMockStore([thunk]) -const store = createMockStore({}) +const store = createMockStore({ + menuState: { + menus: {}, + count: 0, + fetching: false, + fetched: true + } +}) interface Props { menuRef: RefObject @@ -35,7 +42,7 @@ describe('LandingPage', () => { jest.clearAllMocks() }) - test('renders App component', () => { + test('renders LandingPage component', () => { expect(wrapper).toMatchSnapshot() }) }) diff --git a/src/tests/views/Reservation.spec.tsx b/src/tests/views/Reservation.spec.tsx index d369dc0..23ba1c2 100644 --- a/src/tests/views/Reservation.spec.tsx +++ b/src/tests/views/Reservation.spec.tsx @@ -96,7 +96,6 @@ describe('Login/Signup Modal', () => { expect(dateInput).toBeInTheDocument() await userEvent.type(dateInput, '04/04/2020') waitFor(() => { - wrapper.debug() expect(dateInput).toHaveValue('04/04/2020') expect(onhandleChange).toHaveBeenCalledTimes(10) }) diff --git a/src/tests/views/__snapshots__/LandingPage.spec.tsx.snap b/src/tests/views/__snapshots__/LandingPage.spec.tsx.snap index 99319b9..14ef4da 100644 --- a/src/tests/views/__snapshots__/LandingPage.spec.tsx.snap +++ b/src/tests/views/__snapshots__/LandingPage.spec.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`LandingPage renders App component 1`] = ` +exports[`LandingPage renders LandingPage component 1`] = ` Object { "asFragment": [Function], "baseElement": diff --git a/src/tests/views/__snapshots__/Reservation.spec.tsx.snap b/src/tests/views/__snapshots__/Reservation.spec.tsx.snap index e2b83cc..0c221b2 100644 --- a/src/tests/views/__snapshots__/Reservation.spec.tsx.snap +++ b/src/tests/views/__snapshots__/Reservation.spec.tsx.snap @@ -128,6 +128,7 @@ Object {