learn-co-curriculum / react-props-and-state-lab Goto Github PK

The test fails because running npm install does not install 'fetch-mock'. See the error message below.

npm install --save fetch-mock will allow the test to run.

[email protected] test /Users/jason/learn-love-code/current-week/react-props-and-state-lab-web-1116
mocha -R mocha-multi --require test/root.js --reporter-options nyan=-,json=.results.json

module.js:440
throw err;
^

Error: Cannot find module 'fetch-mock'
at Function.Module._resolveFilename (module.js:438:15)
at Function.Module._load (module.js:386:25)
at Module.require (module.js:466:17)
at require (internal/module.js:20:19)
at Object. (/Users/jason/learn-love-code/current-week/react-props-and-state-lab-web-1116/fetch-setup.js:2:19)
at Module._compile (module.js:541:32)
at loader (/Users/jason/learn-love-code/current-week/react-props-and-state-lab-web-1116/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/jason/learn-love-code/current-week/react-props-and-state-lab-web-1116/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:456:32)
at tryModuleLoad (module.js:415:12)
at Function.Module._load (module.js:407:3)
at Module.require (module.js:466:17)
at require (internal/module.js:20:19)
at Object. (/Users/jason/learn-love-code/current-week/react-props-and-state-lab-web-1116/test/App-test.js:5:19)
npm ERR! Test failed. See above for more details.

The ReadMe says:
"Once a pet is adopted, they cannot un-adopt it."

The test description says "should toggle a pet's adopted status," which implies changing isAdopted to false if true, and to true if false.

Suggest rewriting line 78 in the test verbiage to reflect "should change isAdopted to true"

Thank you.

Not sure exactly when but somewhere into the lab I started getting an error while 'npm start' was running

`Failed to compile.

./node_modules/fsevents/node_modules/node-pre-gyp/lib/info.js
Module not found: Can't resolve 'aws-sdk' in '/home/igor/dev/flatiron/labs/react-props-and-state-lab/node_modules/fsevents/node_modules/node-pre-gyp/lib'
`

Recommending that we build out the project using BDD, and not worry about passing the tests then actually worry about passing the tests when your deliverables weren't precise enough for our code to match the tests is resulting in a working website failing all but 2 of the tests. This is transforming this lab from something focused on learning to focused on debugging why the specific hooks that you have defined into our code are not working. While that is beneficial to an extent, it is beyond frustrating to be told not to worry about the tests, develop our code out and then fail almost all of the tests right out of the box.

Either give better deliverables that point out the properties and method names that we need to define or loosen up on the tests so that we can focus on learning instead.

The syntax used in the soln to pet and pet browser components does not use the class components. We haven't learned the techniques to solve it with the solution you've provided. It's confusing and unhelpful. THis was a very challenging lab so I think the solution should be refactored to be more appropriate to what has been taught up to this point.

package.json missing

"fetch-mock": "5.9.4",
"sinon": "1.17.7"

Could not run npm run bundle or npm test until these were added to package.json

While this might just be a personal preference it might be something worth changing. Since:

Props are given to the component by its parent. You can think of props as an external influence that the component has no control over

I think it's easier to logically define the props first, then move on to the component that will utilize those props. I found working back towards the source of the props in App.js hard to follow. As I was coding the App.js it all came together and I could follow the flow of data much better. It might help us as we learn to structure this lab to "follow the data" as it flows from component to component.

I think a lot of us felt that if more description, maybe even a little video like in jquery ttt was put into the Readme, and LESS starter code in the lab (maybe none at all) it would be more helpful and probably easier to grasp the goal of the lab.

Mainly the order of the Readme and tests could be improved, as @itzsaga says in the other issue. It feels like this is a good opportunity to do some ground-up work, so I also feel less starter code combined with more Readme descriptiveness and direction could make this lab go from confusing to a great mid-term review type of thing.

This lab is very unclear doesn't provide guidance.

1. The solution provided shows functional components as opposed to class components and there is no explanation in the teaching for this.
2. Pets gets passed a prop isAdopted and someone we're supposed to assume and know that this prop is to be a part of the pet array.
3. Neat lab with great concepts but no consideration to guide or help students.

This lab can only be completed by running npm test and trying to decipher error messages that don't always give a lot of info.

Would be very helpful to provide a dev server students can run in order to debug as they build out the application.

@AnnJohn

The readme states to pass an isAdopted prop to the Pet component and, "Using this prop, render the correct button in the pet's card; if the pet is adopted, show the disabled button. Otherwise, show the primary button to adopt the pet."

However, the test for this passes the prop like so: <Pet pet={{ ...FEMALE_CAT, isAdopted: true }} />

If you render the button based on the isAdopted prop, the test will not work, since it expects you to use the pet prop.

fetch-mock and sinon were not in package.json dependencies. had to manually install and --save-dev in order to bundle.

Tests give ReferenceError: regeneratorRuntime is not defined if async/await is used, but pass if promises are used in onFindPetsClick tests

...

When trying to run learn on master, getting errors that sinon and fetch-mock

fetch-mock is missing from package.json.