learn-co-curriculum / react-event-system-lab

React Event System Lab

Overview

In this lab you'll respond to events in React and write event handlers.

Note: The components are not defined yet, but the files are present. Before the tests will run, you must export components from EyesOnMe.js and Keypad.js. To get started, write very basic components that you know will not pass all the tests, but at least be valid React.

Keypad

Mr. Burns has requested us to build a new keypad component for the nuclear plant, since the last one was way too complicated for his employees to use. We'll keep things super simple instead, and use an <input type="password" /> field to capture input. Here's how to complete the exercise:

1. In the components/Keypad.js file, create a Keypad React component.
2. In that component, render an input with the right type.
3. On that input, add an event handler that listens for the keyUp event.
4. When that event fires, use console.log to print out the text 'Entering password...'.

Eyes on the ball

Let's say you're in the club with your buddy. The music's blaring, lights are flashing... It's so hard to get his attention! Your job is to create a component that registers whenever he focuses on you, and when his eyes are drifting off.

1. In the components/EyesOnMe.js file, create an EyesOnMe React component.
2. In that component, render a button.
3. On that button, add event handlers that listens for the focus and blur events.
4. When the focus event fires, use console.log to print out the text 'Good!'.
5. When the blur event fires, use console.log to print out the text 'Hey! Eyes on me!'.

Resources

• React Events

react-event-system-lab's Issues

"run local tests" not showing as completed

all tests passing & lesson submitted, but "run local tests" not showing as completed. not giving option for "next lesson" (have to navigate via course dropdown menu) and not showing completed in course dropdown menu. lesson doesn't show as started in dropdown menu.

Possible issue with test files?

Hi, my code works in the browser and pasts all the test when npm test is run. However, running learn produces errors all related to test files and does not trigger the "Run Local Tests" icon in the learn lab page to register that the tests have run or passed. Running learn submit seems to work correctly. I've pasted in the errors from running learn below.
`// ♥ learn
/Users/marieburns/Development/code/react-event-system-lab-v-000/node_modules/mocha/lib/reporters/base.js:250
runner.stats = stats;
^

TypeError: Cannot set property stats of # which has only a getter
at Spec.Base (/Users/marieburns/Development/code/react-event-system-lab-v-000/node_modules/mocha/lib/reporters/base.js:250:16)
at new Spec (/Users/marieburns/Development/code/react-event-system-lab-v-000/node_modules/mocha/lib/reporters/spec.js:24:8)
at withReplacedStdout (/Users/marieburns/Development/code/react-event-system-lab-v-000/node_modules/mocha-multi/mocha-multi.js:220:21)
at withReplacedStdout (/Users/marieburns/Development/code/react-event-system-lab-v-000/node_modules/mocha-multi/mocha-multi.js:146:12)
at setup.map (/Users/marieburns/Development/code/react-event-system-lab-v-000/node_modules/mocha-multi/mocha-multi.js:216:14)
at Array.map ()
at initReportersAndStreams (/Users/marieburns/Development/code/react-event-system-lab-v-000/node_modules/mocha-multi/mocha-multi.js:208:6)
at mochaMulti (/Users/marieburns/Development/code/react-event-system-lab-v-000/node_modules/mocha-multi/mocha-multi.js:267:31)
at new MochaMulti (/Users/marieburns/Development/code/react-event-system-lab-v-000/node_modules/mocha-multi/mocha-multi.js:293:25)
at Mocha.run (/Users/marieburns/Development/code/react-event-system-lab-v-000/node_modules/mocha/lib/mocha.js:520:18)
at Object. (/Users/marieburns/Development/code/react-event-system-lab-v-000/node_modules/mocha/bin/_mocha:480:18)
at Module._compile (internal/modules/cjs/loader.js:738:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
at Module.load (internal/modules/cjs/loader.js:630:32)
at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
at Function.Module._load (internal/modules/cjs/loader.js:562:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:801:12)
at internal/main/run_main_module.js:21:11
[09:21:00] (master) react-event-system-lab-v-000
// ♥ Traceback (most recent call last):
11: from /Users/marieburns/.rvm/gems/ruby-2.6.1/bin/ruby_executable_hooks:24:in <main>' 10: from /Users/marieburns/.rvm/gems/ruby-2.6.1/bin/ruby_executable_hooks:24:in eval'
9: from /Users/marieburns/.rvm/gems/ruby-2.6.1/bin/learn-test:23:in <main>' 8: from /Users/marieburns/.rvm/gems/ruby-2.6.1/bin/learn-test:23:in load'
7: from /Users/marieburns/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/bin/learn-test:68:in <top (required)>' 6: from /Users/marieburns/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:20:in run'
5: from /Users/marieburns/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:20:in fork' 4: from /Users/marieburns/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:21:in block in run'
3: from /Users/marieburns/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:44:in report_and_clean' 2: from /Users/marieburns/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/reporter.rb:13:in report'
1: from /Users/marieburns/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/reporter.rb:47:in report' /Users/marieburns/.rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/strategies/mocha.rb:42:in results': undefined method []' for nil:NilClass (NoMethodError)

Unable to run npm install

`While resolving: [email protected]
Found: [email protected]
node_modules/webpack
dev webpack@"^3.6.0" from the root project

Could not resolve dependency:
peer webpack@"1 || 2 || ^2.1.0-beta || ^2.2.0-rc" from [email protected]
node_modules/babel-loader
babel-loader@"^6.2.10" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
"code": "ERESOLVE",
"current": {
"name": "webpack",
"version": "3.12.0",
"whileInstalling": {
"name": "react-event-system-lab",
"version": "0.1.0",
"path": "/home/igor/dev/flatiron/labs/react-event-system-lab"
},
"location": "node_modules/webpack",
"dependents": [
{
"type": "dev",
"name": "webpack",
"spec": "^3.6.0",
"from": {
"location": "/home/igor/dev/flatiron/labs/react-event-system-lab"
}
}
]
},
"edge": {
"type": "peer",
"name": "webpack",
"spec": "1 || 2 || ^2.1.0-beta || ^2.2.0-rc",
"error": "INVALID",
"from": {
"name": "babel-loader",
"version": "6.4.1",
"whileInstalling": {
"name": "react-event-system-lab",
"version": "0.1.0",
"path": "/home/igor/dev/flatiron/labs/react-event-system-lab"
},
"location": "node_modules/babel-loader",
"dependents": [
{
"type": "prod",
"name": "babel-loader",
"spec": "^6.2.10",
"from": {
"location": "/home/igor/dev/flatiron/labs/react-event-system-lab"
}
}
]
}
},
"peerConflict": null,
"strictPeerDeps": false,
"force": false
}`

Can't run npm install due to package.json

{
"name": "react-event-system-lab",
"version": "0.1.0",
"private": true,
"babel": {
"presets": [
"airbnb",
"env",
"stage-1",
"react"
]
},
"devDependencies": {
"jsdom": "^9.9.1",
"mocha": "^6.2.1",
"react-scripts": "^1.0.7",
"react-test-renderer": "^16.0.0",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
},
"dependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-preset-airbnb": "^2.1.1",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-1": "^6.24.1",
"chai": "^4.2.0",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.1",
"mocha-multi": "^1.1.3",
"react": "^16.0.0",
"react-addons-test-utils": "^15.4.2",
"react-dom": "^16.0.0",
"sinon": "^1.17.7"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "mocha --timeout 5000 -R mocha-multi --reporter-options spec=-,json=.results.json",
"dev:hot": "webpack-dev-server --hot --inline --progress --colors --watch --display-error-details --display-cached --content-base ./",
"test:watch": "npm run test -- --watch",
"eject": "react-scripts eject"
}
}

Animated GIFs on lab requirements

More of a comment, but those animated GIFs, constantly, quickly moving, without the ability to scroll past them, was very distracting while working on this lab. Fortunately, we know how to disable them in the console, but it would be nice to keep them at the top (so we can scroll on by), or not have them.

package.json missing sinon

index-test.js pulls in sinon const sinon = require('sinon'); but it's missing from package.json

Tests not exiting cleanly

Canvas Link

https://learning.flatironschool.com/courses/358/assignments/11435

Concern

Running npm test does not exit cleanly. Issue seems to be related to package dependencies, but it's unclear which package(s) specifically are causing the issue. Also reported in #14.

Additional Context

No response

Suggested Changes

Use an updated dependency configuration from a known working lab.