Branden.Jones
/
opinion-ateTDD_personal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

redux and thunk, no API yet

This commit is contained in:
Branden Wayne Jones 2024-04-24 15:21:01 -04:00
parent e2c9faa01e
commit 5db0d0afc1
11 changed files with 176 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
cypress/e2e/listing-restaurants.cy.js
View File

@ -1,7 +1,5 @@
describe('Listing Restaurants', () =>
{
it('shows restaurants from the server', () =>
{
describe('Listing Restaurants', () => {
it('shows restaurants from the server', () => {
const sushiPlace = "Sushi Place";
const pizzaPlace = "Pizza Place";

108
package-lock.json generated
View File

@ -18,7 +18,10 @@
"devDependencies": {
"@testing-library/user-event": "^14.4.3",
"cypress": "^10.9.0",
"jest": "^27.5.1"
"jest": "^27.5.1",
"react-redux": "^8.0.4",
"redux": "^4.2.0",
"redux-thunk": "^2.4.1"
}
},
"node_modules/@aashutoshrathi/word-wrap": {
@ -4474,6 +4477,16 @@
"@types/node": "*"
}
},
"node_modules/@types/hoist-non-react-statics": {
"version": "3.3.5",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
"integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
"dev": true,
"dependencies": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
}
},
"node_modules/@types/html-minifier-terser": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@ -4712,6 +4725,12 @@
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
"integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
},
"node_modules/@types/use-sync-external-store": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==",
"dev": true
},
"node_modules/@types/ws": {
"version": "8.5.10",
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.10.tgz",
@ -10125,6 +10144,21 @@
"he": "bin/he"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"dev": true,
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/hoist-non-react-statics/node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true
},
"node_modules/hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -16776,6 +16810,51 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"node_modules/react-redux": {
"version": "8.0.4",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.4.tgz",
"integrity": "sha512-yMfQ7mX6bWuicz2fids6cR1YT59VTuT8MKyyE310wJQlINKENCeT1UcPdEiX6znI5tF8zXyJ/VYvDgeGuaaNwQ==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.12.1",
"@types/hoist-non-react-statics": "^3.3.1",
"@types/use-sync-external-store": "^0.0.3",
"hoist-non-react-statics": "^3.3.2",
"react-is": "^18.0.0",
"use-sync-external-store": "^1.0.0"
},
"peerDependencies": {
"@types/react": "^16.8 || ^17.0 || ^18.0",
"@types/react-dom": "^16.8 || ^17.0 || ^18.0",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0",
"react-native": ">=0.59",
"redux": "^4"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
},
"react-dom": {
"optional": true
},
"react-native": {
"optional": true
},
"redux": {
"optional": true
}
}
},
"node_modules/react-redux/node_modules/react-is": {
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==",
"dev": true
},
"node_modules/react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@ -16911,6 +16990,24 @@
"node": ">=8"
}
},
"node_modules/redux": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
"integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
"dev": true,
"dependencies": {
"@babel/runtime": "^7.9.2"
}
},
"node_modules/redux-thunk": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
"integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
"dev": true,
"peerDependencies": {
"redux": "^4"
}
},
"node_modules/reflect.getprototypeof": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@ -19175,6 +19272,15 @@
"requires-port": "^1.0.0"
}
},
"node_modules/use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
"dev": true,
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

7
package.json
View File

@ -38,6 +38,9 @@
"devDependencies": {
"@testing-library/user-event": "^14.4.3",
"cypress": "^10.9.0",
"jest": "^27.5.1"
"jest": "^27.5.1",
"react-redux": "^8.0.4",
"redux": "^4.2.0",
"redux-thunk": "^2.4.1"
}
}
}

14
src/App.js
View File

@ -1,10 +1,12 @@
import { Provider } from 'react-redux';
import store from './store';
import RestaurantScreen from './components/RestaurantScreen';
export default function App()
{
return
(
<div>
export default function App(){
return (
<Provider store={store}>
<RestaurantScreen />
</div>
</Provider>
)
}

14
src/components/RestaurantList.js
View File

@ -1,7 +1,8 @@
import { useEffect } from "react";
import { connect } from "react-redux";
import { loadRestaurants } from '../store/restaurants/actions';
export default function RestaurantList({ loadRestaurants, restaurants })
{
export function RestaurantList({ loadRestaurants, restaurants }) {
useEffect(() =>
{
loadRestaurants();
@ -14,4 +15,11 @@ export default function RestaurantList({ loadRestaurants, restaurants })
))}
</ul>
);
};
};
const mapStateToProps = state => ({
restaurants: state.restaurants.records,
});
const mapDispatchToProps = {loadRestaurants};
export default connect(mapStateToProps, mapDispatchToProps)(RestaurantList);

36
src/components/RestaurantList.spec.js
View File

@ -1,24 +1,28 @@
import { render, screen } from '@testing-library/react';
import RestaurantList from './RestaurantList';
import { RestaurantList } from './RestaurantList';
describe('RestaurantList', () =>
{
it('loads restaurants on first render', () =>
{
const loadRestaurants = jest.fn().mockName('loadRestaurnats');
const restaurants = [];
render(<RestaurantList loadRestaurants={loadRestaurants} restaurants={restaurants} />);
expect(loadRestaurants).toHaveBeenCalled();
});
it('displays the restaurants', () =>
{
const noop = () => {}; //"no operation"
const restaurants =
[
describe('RestaurantList', () => {
let loadRestaurants;
const restaurants = [
{id: 1, name: 'Sushi Place'},
{id: 2, name: 'Pizza Place'}
];
render(<RestaurantList loadRestaurants={noop} restaurants={restaurants} />);
function renderComponent(){
loadRestaurants = jest.fn().mockName('loadRestaurnats');
render(
<RestaurantList
loadRestaurants={loadRestaurants}
restaurants={restaurants}
/>
)
}
it('loads restaurants on first render', () => {
renderComponent();
expect(loadRestaurants).toHaveBeenCalled();
});
it('displays the restaurants', () => {
renderComponent();
expect(screen.getByText('Sushi Place')).toBeInTheDocument();
expect(screen.getByText('Pizza Place')).toBeInTheDocument();
})

6
src/components/RestaurantScreen.js
View File

@ -1,9 +1,7 @@
import RestaurantList from "./RestaurantList";
export default function RestaurantScreen()
{
return
(
export default function RestaurantScreen() {
return (
<div>
<h1>Restaurants</h1>
<RestaurantList />

7
src/store/index.js Normal file
View File

@ -0,0 +1,7 @@
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;

4
src/store/reducers.js Normal file
View File

@ -0,0 +1,4 @@
import { combineReducers } from 'redux';
import restaurants from './restaurants/reducers';
export default combineReducers({restaurants});

1
src/store/restaurants/actions.js Normal file
View File

@ -0,0 +1 @@
export const loadRestaurants = () => () => {};

9
src/store/restaurants/reducers.js Normal file
View File

@ -0,0 +1,9 @@
import { combineReducers } from 'redux';
function records() {
return[];
}
export default combineReducers({
records,
})