learn-co-curriculum / react-dynamic-components-lab Goto Github PK

all tests pass, but not reflecting in learn.co

[10:18:16] (master) react-dynamic-components-lab-online-web-sp-000
// ♥ Traceback (most recent call last):
11: from /usr/local/rvm/gems/ruby-2.6.1/bin/ruby_executable_hooks:24:in <main>' 10: from /usr/local/rvm/gems/ruby-2.6.1/bin/ruby_executable_hooks:24:in eval'
9: from /usr/local/rvm/gems/ruby-2.6.1/bin/learn-test:23:in <main>' 8: from /usr/local/rvm/gems/ruby-2.6.1/bin/learn-test:23:in load'
7: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/bin/learn-test:68:in <top (required)>' 6: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:20:in run'
5: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:20:in fork' 4: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:21:in block in run'
3: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/runner.rb:44:in report_and_clean' 2: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/reporter.rb:13:in report'
1: from /usr/local/rvm/gems/ruby-2.6.1/gems/learn-test-2.6.1/lib/learn_test/reporter.rb:47:in report' /usr/local/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)

`// ♥ npm test

[email protected] test
mocha --timeout 5000 -w test/helpers.js test/*.js

Warning: Could not find any test files matching pattern: test/helpers.js

This browser doesn't support requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills
This browser doesn't support cancelAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills
ReferenceError: React is not defined
at Object. (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/src/Comment.js:1:23)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at loader (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions. [as .js] (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/babel-register/lib/node.js:154:7)
at Module.load (node:internal/modules/cjs/loader:948:32)
at Function.Module._load (node:internal/modules/cjs/loader:789:14)
at Module.require (node:internal/modules/cjs/loader:972:19)
at require (node:internal/modules/cjs/helpers:88:18)
at Object. (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/test/index-test.js:10:1)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at loader (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions. [as .js] (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/babel-register/lib/node.js:154:7)
at Module.load (node:internal/modules/cjs/loader:948:32)
at Function.Module._load (node:internal/modules/cjs/loader:789:14)
at Module.require (node:internal/modules/cjs/loader:972:19)
at require (node:internal/modules/cjs/helpers:88:18)
at /home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/mocha/lib/mocha.js:250:27
at Array.forEach ()
at Mocha.loadFiles (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/mocha/lib/mocha.js:247:14)
at Mocha.run (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/mocha/lib/mocha.js:576:10)
at loadAndRun (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/mocha/bin/_mocha:594:22)
at Object. (/home/igor/dev/flatiron/labs/react-dynamic-components-lab/node_modules/mocha/bin/_mocha:611:3)
at Module._compile (node:internal/modules/cjs/loader:1083:30)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)
at Module.load (node:internal/modules/cjs/loader:948:32)
at Function.Module._load (node:internal/modules/cjs/loader:789:14)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:72:12)
at node:internal/main/run_main_module:17:47
(node:1741) DeprecationWarning: "--compilers" will be removed in a future version of Mocha; see https://git.io/vdcSr for more info
(Use node --trace-deprecation ... to show where the warning was created)`

For future students - if you meet an error upon running npm start along the lines of "would you like to set a default browser...", take a look at the top of this Readme.

Adding the below to package.json will enable you to bypass this message, start up a server, and actually proceed with the lab.
"browserslist": [ "defaults", "not IE 11", "not IE_Mob 11", "maintained node versions" ]

ColorBox instructions say:
if the opacity value is greater than or equal to 0.1:

but tests won't pass unless value used is >= 0.2, this value is also used in the solution

There is a typo I believe at the end of the third paragraph of the Introduction section.

All of the css has been provided, as well as a good amount of starter code. The general structure has already been provided - you are to pick up where the code leaves off and make both the Comment and the ColorBox components behave dynamically**.f**

This is minor, but just a bit misleading. In the provided code, the comment in the ColorBox component that says where to put your conditional statement is inside the return statement. It's also inside the div, which is again misleading because in the provided code the opacity value is explicitly stated, when it should really be a prop. To successfully have any conditional statement, it should be outside of the return, and offer a return option for each outcome.

Current starting code:
render() { return ( <div className="color-box" style={{opacity: 2}}> {/* your conditional code here! */} </div> ) }

Less misleading starting code:
render() { if ( {/* your conditional statement here! */} ) { return ( <div className="color-box" style={{ /* reference to opacity */ }}> {/* code to run if conditional is met */} </div> ) } else { return ( {/* code to run if it is not met */} ) } }

Or idk, maybe it doesn't need to be so explicit as to lay out the if statement entirely. It is (almost) a regular JS if statement with conditional returns, which was covered in the last unit. But since there are some differences between JSX and vanilla JS, putting a comment to specifically add the conditional inside both the return and the div is confusing because it could appear to be one of those differences to someone that is new to React.

Canvas Link

https://learning.flatironschool.com/courses/1883/assignments/125692?module_item_id=259605

Concern

All tests are marked as passed but terminal stalls thereby no posting a completed lab.

Additional Context

No response

Suggested Changes

No response

Tests are broken

If you run a test on a solution, you'll notice the difference.

Under Comment component, it has to be "Create a Comment component instead of Component component. Simple mistyping :)

Using the model code, I could not get the ColorBox to render.

Given code:

    render() {
        const newValue = this.props.value * 2;
 
        if (this.props.value < 100) {
            return (
                <div>
                    <Example value={newValue} />
                </div>
            );
        } else {
            return null;
        }
    }
}```

My ColorBox code:
```import React, { Component } from 'react';

export default class ColorBox extends Component {
  
  render() {    
    const newValue = this.props.opacity - 0.1;

    if (this.props.opacity >= 0.2) {
      return (
        <div>
          <ColorBox opacity={newValue} />
        </div>
      );
    } else {
      return null;
    }
  }
}```

Additionally, the solution code uses a different approach.

Students were having some issues with learn test. TCs were able to resolve the issue and get tests running without issue by doing the following tasks:
add "whatwg-url": "8.0.0" to the dependencies in package.json
delete package-lock.json file & node-modules folder
run npm install again

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

Link to Canvas

Issue Subtype

• Master branch code
• Solution branch code
• Code tests
• Layout/rendering issue
• Instructions unclear
• Other (explain below)

Describe the Issue

Source

Concern

(Optional) Proposed Solution

What OS Are You Using?

• OS X
• Windows
• WSL
• Linux
• IllumiDesk

Any Additional Context?