119 |
121 |
122 |
123 |
127 | {children &&
129 |
123 |
124 | {heading}
125 |
126 |
127 | {children && {children}
}
128 | -
25 | {React.Children.map(children, card => (
26 |
- {card} 27 | ))} 28 |
Your menu is fully stocked!
58 | ) 59 | )} 60 |
84 | {menu.length > 0 && !isLoading ? (
85 | <>
86 |
87 | {menu.map(
88 | ({ id, iceCream, price, description, inStock, quantity }) => (
89 |
96 |
106 | )
107 | )}
108 |
109 |
110 | ) : (
111 |
114 | )}
115 |
97 |
105 | {`$${price.toFixed(2)}`}
98 |99 | {inStock 100 | ? `${quantity} in stock` 101 | : 'Currently out of stock!'} 102 |
103 |{description}
104 |Your menu is empty! The sadness!!
112 | )} 113 |
5 | {iceCream.name}
6 |
12 | );
13 |
--------------------------------------------------------------------------------
/src/ice-cream/__mocks__/IceCreamImage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const IceCreamImage = ({ iceCreamId }) => (
4 | 
5 | );
6 |
7 | export default IceCreamImage;
8 |
--------------------------------------------------------------------------------
/src/ice-cream/__tests__/AddIceCream.spec.js:
--------------------------------------------------------------------------------
1 | jest.mock('../../structure/Main');
2 | jest.mock('../../structure/LoaderMessage');
3 | jest.mock('../IceCreamImage');
4 | jest.mock('../../data/iceCreamData');
5 |
6 | import React from 'react';
7 | import {
8 | render,
9 | waitForElement,
10 | wait,
11 | fireEvent,
12 | cleanup,
13 | } from '@testing-library/react';
14 | import AddIceCream from '../AddIceCream';
15 | import { getIceCream, postMenuItem } from '../../data/iceCreamData';
16 |
17 | describe('AddIceCream', () => {
18 | afterEach(cleanup);
19 |
20 | it('should render and load data', async () => {
21 | getIceCream.mockResolvedValueOnce({
22 | id: 3,
23 | name: 'Inverted Stoplight',
24 | });
25 |
26 | const mockLocation = { search: '?iceCreamId=5' };
27 | const mockHistory = { push: jest.fn(), replace: jest.fn() };
28 | const { container, getByTestId, getByAltText } = render(
29 | I am some text content
38 |Content
58 |
8 | `;
9 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | ReactDOM.render(
86 | 
87 | Ultimate Ice Cream
88 |
89 |
97 |
51 | {showLoadingMessage &&
54 | );
55 | };
56 |
57 | LoaderMessage.propTypes = {
58 | loadingMsg: PropTypes.string.isRequired,
59 | doneMsg: PropTypes.string.isRequired,
60 | isLoading: PropTypes.bool,
61 | };
62 |
63 | export default LoaderMessage;
64 |
--------------------------------------------------------------------------------
/src/structure/Main.js:
--------------------------------------------------------------------------------
1 | import React, { useRef, useLayoutEffect } from 'react';
2 | import { css } from 'emotion/macro';
3 | import Helmet from 'react-helmet';
4 | import { withRouter } from 'react-router-dom';
5 | import PropTypes from 'prop-types';
6 |
7 | const mainStyle = css`
8 | max-width: 63.75em;
9 | margin-left: auto;
10 | margin-right: auto;
11 | min-height: 40em;
12 | padding-top: 2em;
13 | padding-bottom: 2em;
14 | outline: 0;
15 |
16 | .main-heading {
17 | font-family: 'cornerstone', sans-serif;
18 | padding: 1rem 0 2rem;
19 | color: #313030;
20 | font-size: 1.8em;
21 | outline: 0;
22 | text-align: center;
23 | }
24 | `;
25 |
26 | const Main = ({ headingText, headingLevel = 2, children, location }) => {
27 | const heading = useRef(null);
28 | const H = `h${headingLevel}`;
29 |
30 | useLayoutEffect(() => {
31 | if (location.state && location.state.focus) {
32 | heading.current.focus();
33 | }
34 | window.scrollTo(0, 0);
35 | }, [location.state]);
36 |
37 | return (
38 | {loadingMsg}
} 52 | {showDoneMessage &&{doneMsg}
} 53 |Page content
23 |Page content
38 |Page content
50 |Page content
62 |32 | Demo heading 33 |
34 |35 | Page content 36 |
37 |