From f2df76c099e4b32096578801c3d7a88fb5535d50 Mon Sep 17 00:00:00 2001 From: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> Date: Wed, 24 Jul 2019 05:07:46 -0700 Subject: [PATCH] fix(curriculum): Remove unnecessary assert message argument from English Front End Libraries challenges - 02 (#36409) * fix: removed assert msg argument * fix: removed more assert msg args * fix: removed more assert msg args --- .../access-props-using-this.props.english.md | 10 +++++----- .../react/add-event-listeners.english.md | 8 ++++---- .../react/add-inline-styles-in-react.english.md | 12 ++++++------ .../react/bind-this-to-a-class-method.english.md | 6 +++--- ...itionally-based-on-component-state.english.md | 10 +++++----- .../react/compose-react-components.english.md | 8 ++++---- ...reate-a-component-with-composition.english.md | 6 +++--- .../react/create-a-controlled-form.english.md | 10 +++++----- .../react/create-a-controlled-input.english.md | 6 +++--- .../react/create-a-react-component.english.md | 6 +++--- .../react/create-a-simple-jsx-element.english.md | 4 ++-- .../react/create-a-stateful-component.english.md | 8 ++++---- ...e-a-stateless-functional-component.english.md | 6 +++--- .../react/define-an-html-class-in-jsx.english.md | 4 ++-- ...ng-elements-a-unique-key-attribute.english.md | 12 ++++++------ .../react/introducing-inline-styles.english.md | 6 +++--- .../learn-about-self-closing-jsx-tags.english.md | 6 +++--- ...age-updates-with-lifecycle-methods.english.md | 8 ++++---- ...renders-with-shouldcomponentupdate.english.md | 8 ++++---- .../react/override-default-props.english.md | 6 +++--- .../react/pass-a-callback-as-props.english.md | 10 +++++----- .../react/pass-an-array-as-props.english.md | 14 +++++++------- ...o-a-stateless-functional-component.english.md | 10 +++++----- ...state-as-props-to-child-components.english.md | 6 +++--- ...ender-a-class-component-to-the-dom.english.md | 8 ++++---- .../render-conditionally-from-props.english.md | 14 +++++++------- .../render-html-elements-to-the-dom.english.md | 8 ++++---- ...-on-the-server-with-rendertostring.english.md | 2 +- ...-in-the-user-interface-another-way.english.md | 8 ++++---- ...render-state-in-the-user-interface.english.md | 6 +++--- .../render-with-an-if-else-condition.english.md | 8 ++++---- .../set-state-with-this.setstate.english.md | 8 ++++---- ...se--for-a-more-concise-conditional.english.md | 8 ++++---- ...pression-for-conditional-rendering.english.md | 14 +++++++------- ...-javascript-in-react-render-method.english.md | 12 ++++++------ ...ter-to-dynamically-filter-an-array.english.md | 8 ++++---- ...map-to-dynamically-render-elements.english.md | 12 ++++++------ .../react/use-default-props.english.md | 4 ++-- ...pes-to-define-the-props-you-expect.english.md | 6 +++--- ...-react-to-render-nested-components.english.md | 8 ++++---- .../use-state-to-toggle-an-element.english.md | 6 +++--- ...lifecycle-method-componentdidmount.english.md | 6 +++--- ...ifecycle-method-componentwillmount.english.md | 4 ++-- ...ite-a-react-component-from-scratch.english.md | 6 +++--- .../react/write-a-simple-counter.english.md | 10 +++++----- .../redux/combine-multiple-reducers.english.md | 8 ++++---- .../copy-an-object-with-object.assign.english.md | 8 ++++---- .../redux/create-a-redux-store.english.md | 4 ++-- .../redux/define-a-redux-action.english.md | 4 ++-- .../redux/define-an-action-creator.english.md | 6 +++--- .../redux/dispatch-an-action-event.english.md | 6 +++--- .../get-state-from-the-redux-store.english.md | 4 ++-- .../handle-an-action-in-the-store.english.md | 8 ++++---- .../redux/never-mutate-state.english.md | 6 +++--- .../redux/register-a-store-listener.english.md | 6 +++--- .../remove-an-item-from-an-array.english.md | 6 +++--- .../send-action-data-to-the-store.english.md | 4 ++-- ...atement-to-handle-multiple-actions.english.md | 12 ++++++------ .../redux/use-const-for-action-types.english.md | 16 ++++++++-------- ...are-to-handle-asynchronous-actions.english.md | 10 +++++----- .../use-the-spread-operator-on-arrays.english.md | 8 ++++---- .../redux/write-a-counter-with-redux.english.md | 12 ++++++------ 62 files changed, 242 insertions(+), 242 deletions(-) diff --git a/curriculum/challenges/english/03-front-end-libraries/react/access-props-using-this.props.english.md b/curriculum/challenges/english/03-front-end-libraries/react/access-props-using-this.props.english.md index ee4af05843..91a3cd8dfa 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/access-props-using-this.props.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/access-props-using-this.props.english.md @@ -22,15 +22,15 @@ Render an instance of the ReturnTempPassword component in the paren ```yml tests: - text: The ResetPassword component should return a single div element. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().type() === 'div'; })(), 'The ResetPassword component should return a single div element.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().type() === 'div'; })()); - text: The fourth child of ResetPassword should be the ReturnTempPassword component. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().childAt(3).name() === 'ReturnTempPassword'; })(), 'The fourth child of ResetPassword should be the ReturnTempPassword component.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().childAt(3).name() === 'ReturnTempPassword'; })()); - text: The ReturnTempPassword component should have a prop called tempPassword. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find('ReturnTempPassword').props().tempPassword; })(), 'The ReturnTempPassword component should have a prop called tempPassword.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find('ReturnTempPassword').props().tempPassword; })()); - text: The tempPassword prop of ReturnTempPassword should be equal to a string of at least 8 characters. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); const temp = mockedComponent.find('ReturnTempPassword').props().tempPassword; return typeof temp === 'string' && temp.length >= 8; })(), 'The tempPassword prop of ReturnTempPassword should be equal to a string of at least 8 characters.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); const temp = mockedComponent.find('ReturnTempPassword').props().tempPassword; return typeof temp === 'string' && temp.length >= 8; })()); - text: The ReturnTempPassword component should display the password you create as the tempPassword prop within strong tags. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find('strong').text() === mockedComponent.find('ReturnTempPassword').props().tempPassword; })(), 'The ReturnTempPassword component should display the password you create as the tempPassword prop within strong tags.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find('strong').text() === mockedComponent.find('ReturnTempPassword').props().tempPassword; })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.english.md b/curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.english.md index 1d6b860536..f1075d6e60 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.english.md @@ -23,13 +23,13 @@ Then, in componentWillUnmount(), remove this same event listener. Y ```yml tests: - text: MyComponent should render a div element which wraps an h1 tag. - testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').children().find('h1').length === 1; })(), 'MyComponent should render a div element which wraps an h1 tag.'); + testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').children().find('h1').length === 1; })()); - text: A keydown listener should be attached to the document in componentDidMount. - testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const didMountString = mockedComponent.instance().componentDidMount.toString(); return new RegExp('document\.addEventListener(.|\n|\r)+keydown(.|\n|\r)+this\.handleKeyPress').test(didMountString); })(), 'A keydown listener should be attached to the document in componentDidMount.'); + testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const didMountString = mockedComponent.instance().componentDidMount.toString(); return new RegExp('document\.addEventListener(.|\n|\r)+keydown(.|\n|\r)+this\.handleKeyPress').test(didMountString); })()); - text: The keydown listener should be removed from the document in componentWillUnmount. - testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const willUnmountString = mockedComponent.instance().componentWillUnmount.toString(); return new RegExp('document\.removeEventListener(.|\n|\r)+keydown(.|\n|\r)+this\.handleKeyPress').test(willUnmountString); })(), 'The keydown listener should be removed from the document in componentWillUnmount.'); + testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const willUnmountString = mockedComponent.instance().componentWillUnmount.toString(); return new RegExp('document\.removeEventListener(.|\n|\r)+keydown(.|\n|\r)+this\.handleKeyPress').test(willUnmountString); })()); - text: Once the component has mounted, pressing enter should update its state and the rendered h1 tag. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const beforeState = mockedComponent.state(''message''); const beforeText = mockedComponent.find(''h1'').text(); const pressEnterKey = () => { mockedComponent.instance().handleKeyPress({ keyCode: 13 }); return waitForIt(() => { mockedComponent.update(); return { state: mockedComponent.state(''message''), text: mockedComponent.find(''h1'').text()}; });}; const afterKeyPress = await pressEnterKey(); assert(beforeState !== afterKeyPress.state && beforeText !== afterKeyPress.text, ''Once the component has mounted, pressing enter should update its state and the rendered h1 tag.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const beforeState = mockedComponent.state(''message''); const beforeText = mockedComponent.find(''h1'').text(); const pressEnterKey = () => { mockedComponent.instance().handleKeyPress({ keyCode: 13 }); return waitForIt(() => { mockedComponent.update(); return { state: mockedComponent.state(''message''), text: mockedComponent.find(''h1'').text()}; });}; const afterKeyPress = await pressEnterKey(); assert(beforeState !== afterKeyPress.state && beforeText !== afterKeyPress.text); }; ' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/add-inline-styles-in-react.english.md b/curriculum/challenges/english/03-front-end-libraries/react/add-inline-styles-in-react.english.md index 56e46dddf1..baea9f898a 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/add-inline-styles-in-react.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/add-inline-styles-in-react.english.md @@ -22,17 +22,17 @@ If you have a large set of styles, you can assign a style object to ```yml tests: - text: The styles variable should be an object with three properties. - testString: assert(Object.keys(styles).length === 3, 'The styles variable should be an object with three properties.'); + testString: assert(Object.keys(styles).length === 3); - text: The styles variable should have a color property set to a value of purple. - testString: assert(styles.color === 'purple', 'The styles variable should have a color property set to a value of purple.'); + testString: assert(styles.color === 'purple'); - text: The styles variable should have a fontSize property set to a value of 40. - testString: assert(styles.fontSize === 40, 'The styles variable should have a fontSize property set to a value of 40.'); + testString: assert(styles.fontSize === 40); - text: The styles variable should have a border property set to a value of 2px solid purple. - testString: assert(styles.border === "2px solid purple", 'The styles variable should have a border property set to a value of 2px solid purple.'); + testString: assert(styles.border === "2px solid purple"); - text: The component should render a div element. - testString: assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === 'div'; })(), 'The component should render a div element.'); + testString: assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === 'div'; })()); - text: The div element should have its styles defined by the styles object. - testString: assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return (mockedComponent.props().style.color === "purple" && mockedComponent.props().style.fontSize === 40 && mockedComponent.props().style.border === "2px solid purple"); })(), 'The div element should have its styles defined by the styles object.'); + testString: assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return (mockedComponent.props().style.color === "purple" && mockedComponent.props().style.fontSize === 40 && mockedComponent.props().style.border === "2px solid purple"); })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/bind-this-to-a-class-method.english.md b/curriculum/challenges/english/03-front-end-libraries/react/bind-this-to-a-class-method.english.md index a063b6c154..def66e3765 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/bind-this-to-a-class-method.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/bind-this-to-a-class-method.english.md @@ -25,11 +25,11 @@ Once you complete the above steps you should be able to click the button and see ```yml tests: - text: MyComponent should return a div element which wraps two elements, a button and an h1 element, in that order. - testString: assert(Enzyme.mount(React.createElement(MyComponent)).find('div').length === 1 && Enzyme.mount(React.createElement(MyComponent)).find('div').childAt(0).type() === 'button' && Enzyme.mount(React.createElement(MyComponent)).find('div').childAt(1).type() === 'h1', 'MyComponent should return a div element which wraps two elements, a button and an h1 element, in that order.'); + testString: assert(Enzyme.mount(React.createElement(MyComponent)).find('div').length === 1 && Enzyme.mount(React.createElement(MyComponent)).find('div').childAt(0).type() === 'button' && Enzyme.mount(React.createElement(MyComponent)).find('div').childAt(1).type() === 'h1'); - text: 'The state of MyComponent should initialize with the key value pair { itemCount: 0 }.' - testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state(''itemCount'') === 0, ''The state of MyComponent should initialize with the key value pair { itemCount: 0 }.'');' + testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state(''itemCount'') === 0);' - text: Clicking the button element should run the addItem method and increment the state itemCount by 1. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ itemCount: 0 }); return waitForIt(() => mockedComponent.state(''itemCount'')); }; const second = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent.state(''itemCount'')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1, ''Clicking the button element should run the addItem method and increment the state itemCount by 1.''); };' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ itemCount: 0 }); return waitForIt(() => mockedComponent.state(''itemCount'')); }; const second = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent.state(''itemCount'')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1); };' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.english.md b/curriculum/challenges/english/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.english.md index d9f844b5dd..fc8b217054 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/change-inline-css-conditionally-based-on-component-state.english.md @@ -22,15 +22,15 @@ The code editor has a simple controlled input component with a styled border. Yo ```yml tests: - text: The GateKeeper component should render a div element. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('div').length === 1; })(), 'The GateKeeper component should render a div element.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('div').length === 1; })()); - text: The GateKeeper component should be initialized with a state key input set to an empty string. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.state().input === ''; })(), 'The GateKeeper component should be initialized with a state key input set to an empty string.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.state().input === ''; })()); - text: The GateKeeper component should render an h3 tag and an input tag. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('h3').length === 1 && mockedComponent.find('input').length === 1; })(), 'The GateKeeper component should render an h3 tag and an input tag.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('h3').length === 1 && mockedComponent.find('input').length === 1; })()); - text: The input tag should initially have a style of 1px solid black for the border property. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('input').props().style.border === '1px solid black'; })(), 'The input tag should initially have a style of 1px solid black for the border property.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('input').props().style.border === '1px solid black'; })()); - text: The input tag should be styled with a border of 3px solid red if the input value in state is longer than 15 characters. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); const simulateChange = (el, value) => el.simulate(''change'', {target: {value}}); let initialStyle = mockedComponent.find(''input'').props().style.border; const state_1 = () => { mockedComponent.setState({input: ''this is 15 char'' }); return waitForIt(() => mockedComponent.find(''input'').props().style.border )}; const state_2 = () => { mockedComponent.setState({input: ''A very long string longer than 15 characters.'' }); return waitForIt(() => mockedComponent.find(''input'').props().style.border )}; const style_1 = await state_1(); const style_2 = await state_2(); assert(initialStyle === ''1px solid black'' && style_1 === ''1px solid black'' && style_2 === ''3px solid red'', ''The input tag should be styled with a border of 3px solid red if the input value in state is longer than 15 characters.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); const simulateChange = (el, value) => el.simulate(''change'', {target: {value}}); let initialStyle = mockedComponent.find(''input'').props().style.border; const state_1 = () => { mockedComponent.setState({input: ''this is 15 char'' }); return waitForIt(() => mockedComponent.find(''input'').props().style.border )}; const state_2 = () => { mockedComponent.setState({input: ''A very long string longer than 15 characters.'' }); return waitForIt(() => mockedComponent.find(''input'').props().style.border )}; const style_1 = await state_1(); const style_2 = await state_2(); assert(initialStyle === ''1px solid black'' && style_1 === ''1px solid black'' && style_2 === ''3px solid red''); }; ' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/compose-react-components.english.md b/curriculum/challenges/english/03-front-end-libraries/react/compose-react-components.english.md index 72328a7914..0ec2595a6f 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/compose-react-components.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/compose-react-components.english.md @@ -22,13 +22,13 @@ Nest two components inside of Fruits — first NonCitrus< ```yml tests: - text: The TypesOfFood component should return a single div element. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === 'div'; })(), 'The TypesOfFood component should return a single div element.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === 'div'; })()); - text: The TypesOfFood component should return the Fruits component. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === 'Fruits'; })(), 'The TypesOfFood component should return the Fruits component.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === 'Fruits'; })()); - text: The Fruits component should return the NonCitrus component and the Citrus component. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return (mockedComponent.find('Fruits').children().find('NonCitrus').length === 1 && mockedComponent.find('Fruits').children().find('Citrus').length === 1); })(), 'The Fruits component should return the NonCitrus component and the Citrus component.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return (mockedComponent.find('Fruits').children().find('NonCitrus').length === 1 && mockedComponent.find('Fruits').children().find('Citrus').length === 1); })()); - text: The TypesOfFood component should return the Vegetables component below the Fruits component. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === 'Vegetables'; })(), 'The TypesOfFood component should return the Vegetables component below the Fruits component.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === 'Vegetables'; })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.english.md index 7872b8fa40..41bb129465 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-component-with-composition.english.md @@ -35,11 +35,11 @@ In the code editor, there is a simple functional component called ChildCom ```yml tests: - text: The React component should return a single div element. - testString: assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.type() === 'div'; })(), 'The React component should return a single div element.'); + testString: assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.type() === 'div'; })()); - text: The component should return two nested elements. - testString: assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.children().length === 2; })(), 'The component should return two nested elements.'); + testString: assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.children().length === 2; })()); - text: The component should return the ChildComponent as its second child. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ParentComponent)); return mockedComponent.find('ParentComponent').find('ChildComponent').length === 1; })(), 'The component should return the ChildComponent as its second child.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ParentComponent)); return mockedComponent.find('ParentComponent').find('ChildComponent').length === 1; })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.english.md index 579b1a1085..254b3d95e6 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.english.md @@ -24,15 +24,15 @@ Finally, create an h1 tag after the form which renders ```yml tests: - text: MyForm should return a div element which contains a form and an h1 tag. The form should include an input and a button. - testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyForm)); return (mockedComponent.find('div').children().find('form').length === 1 && mockedComponent.find('div').children().find('h1').length === 1 && mockedComponent.find('form').children().find('input').length === 1 && mockedComponent.find('form').children().find('button').length === 1) })(), 'MyForm should return a div element which contains a form and an h1 tag. The form should include an input and a button.'); + testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyForm)); return (mockedComponent.find('div').children().find('form').length === 1 && mockedComponent.find('div').children().find('h1').length === 1 && mockedComponent.find('form').children().find('input').length === 1 && mockedComponent.find('form').children().find('button').length === 1) })()); - text: The state of MyForm should initialize with input and submit properties, both set to empty strings. - testString: assert(Enzyme.mount(React.createElement(MyForm)).state('input') === '' && Enzyme.mount(React.createElement(MyForm)).state('submit') === '', 'The state of MyForm should initialize with input and submit properties, both set to empty strings.'); + testString: assert(Enzyme.mount(React.createElement(MyForm)).state('input') === '' && Enzyme.mount(React.createElement(MyForm)).state('submit') === ''); - text: Typing in the input element should update the input property of the component's state. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '''' }); return waitForIt(() => mockedComponent.state(''input''))}; const _2 = () => { mockedComponent.find(''input'').simulate(''change'', { target: { value: ''TestInput'' }}); return waitForIt(() => ({ state: mockedComponent.state(''input''), inputVal: mockedComponent.find(''input'').props().value }))}; const before = await _1(); const after = await _2(); assert(before === '''' && after.state === ''TestInput'' && after.inputVal === ''TestInput'', ''Typing in the input element should update the input property of the component's state.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '''' }); return waitForIt(() => mockedComponent.state(''input''))}; const _2 = () => { mockedComponent.find(''input'').simulate(''change'', { target: { value: ''TestInput'' }}); return waitForIt(() => ({ state: mockedComponent.state(''input''), inputVal: mockedComponent.find(''input'').props().value }))}; const before = await _1(); const after = await _2(); assert(before === '''' && after.state === ''TestInput'' && after.inputVal === ''TestInput''); }; ' - text: Submitting the form should run handleSubmit which should set the submit property in state equal to the current input. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '''' }); mockedComponent.setState({submit: ''''}); mockedComponent.find(''input'').simulate(''change'', {target: {value: ''SubmitInput''}}); return waitForIt(() => mockedComponent.state(''submit''))}; const _2 = () => { mockedComponent.find(''form'').simulate(''submit''); return waitForIt(() => mockedComponent.state(''submit''))}; const before = await _1(); const after = await _2(); assert(before === '''' && after === ''SubmitInput'', ''Submitting the form should run handleSubmit which should set the submit property in state equal to the current input.''); };' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '''' }); mockedComponent.setState({submit: ''''}); mockedComponent.find(''input'').simulate(''change'', {target: {value: ''SubmitInput''}}); return waitForIt(() => mockedComponent.state(''submit''))}; const _2 = () => { mockedComponent.find(''form'').simulate(''submit''); return waitForIt(() => mockedComponent.state(''submit''))}; const before = await _1(); const after = await _2(); assert(before === '''' && after === ''SubmitInput''); };' - text: The h1 header should render the value of the submit field from the component's state. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '''' }); mockedComponent.setState({submit: ''''}); mockedComponent.find(''input'').simulate(''change'', {target: {value: ''TestInput''}}); return waitForIt(() => mockedComponent.find(''h1'').text())}; const _2 = () => { mockedComponent.find(''form'').simulate(''submit''); return waitForIt(() => mockedComponent.find(''h1'').text())}; const before = await _1(); const after = await _2(); assert(before === '''' && after === ''TestInput'', ''The h1 header should render the value of the submit field from the component's state.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '''' }); mockedComponent.setState({submit: ''''}); mockedComponent.find(''input'').simulate(''change'', {target: {value: ''TestInput''}}); return waitForIt(() => mockedComponent.find(''h1'').text())}; const _2 = () => { mockedComponent.find(''form'').simulate(''submit''); return waitForIt(() => mockedComponent.find(''h1'').text())}; const before = await _1(); const after = await _2(); assert(before === '''' && after === ''TestInput''); }; ' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-input.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-input.english.md index 25ced0f9de..c62b88547e 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-input.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-input.english.md @@ -25,11 +25,11 @@ Last but not least, don't forget to add the necessary bindings in the constructo ```yml tests: - text: ControlledInput should return a div element which contains an input and a p tag. - testString: assert(Enzyme.mount(React.createElement(ControlledInput)).find('div').children().find('input').length === 1 && Enzyme.mount(React.createElement(ControlledInput)).find('div').children().find('p').length === 1, 'ControlledInput should return a div element which contains an input and a p tag.'); + testString: assert(Enzyme.mount(React.createElement(ControlledInput)).find('div').children().find('input').length === 1 && Enzyme.mount(React.createElement(ControlledInput)).find('div').children().find('p').length === 1); - text: The state of ControlledInput should initialize with an input property set to an empty string. - testString: assert.strictEqual(Enzyme.mount(React.createElement(ControlledInput)).state('input'), '', 'The state of ControlledInput should initialize with an input property set to an empty string.'); + testString: assert.strictEqual(Enzyme.mount(React.createElement(ControlledInput)).state('input'), ''); - text: Typing in the input element should update the state and the value of the input, and the p element should render this state as you type. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(ControlledInput)); const _1 = () => { mockedComponent.setState({ input: '''' }); return waitForIt(() => mockedComponent.state(''input''))}; const _2 = () => { mockedComponent.find(''input'').simulate(''change'', { target: { value: ''TestInput'' }}); return waitForIt(() => ({ state: mockedComponent.state(''input''), text: mockedComponent.find(''p'').text(), inputVal: mockedComponent.find(''input'').props().value }))}; const before = await _1(); const after = await _2(); assert(before === '''' && after.state === ''TestInput'' && after.text === ''TestInput'' && after.inputVal === ''TestInput'', ''Typing in the input element should update the state and the value of the input, and the p element should render this state as you type.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(ControlledInput)); const _1 = () => { mockedComponent.setState({ input: '''' }); return waitForIt(() => mockedComponent.state(''input''))}; const _2 = () => { mockedComponent.find(''input'').simulate(''change'', { target: { value: ''TestInput'' }}); return waitForIt(() => ({ state: mockedComponent.state(''input''), text: mockedComponent.find(''p'').text(), inputVal: mockedComponent.find(''input'').props().value }))}; const before = await _1(); const after = await _2(); assert(before === '''' && after.state === ''TestInput'' && after.text === ''TestInput'' && after.inputVal === ''TestInput''); }; ' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-react-component.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-react-component.english.md index c2c8180ec1..9ed23634aa 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-react-component.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-react-component.english.md @@ -38,11 +38,11 @@ Also notice the Kitten class has a constructor defined ```yml tests: - text: The React component should return a div element. - testString: assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div', 'The React component should return a div element.'); + testString: assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div'); - text: The returned div should render an h1 header within it. - testString: assert(/

.*<\/h1><\/div>/.test(Enzyme.shallow(React.createElement(MyComponent)).html()), 'The returned div should render an h1 header within it.'); + testString: assert(/

.*<\/h1><\/div>/.test(Enzyme.shallow(React.createElement(MyComponent)).html())); - text: The h1 header should contain the string Hello React!. - testString: assert(Enzyme.shallow(React.createElement(MyComponent)).html() === '

Hello React!

', 'The h1 header should contain the string Hello React!.'); + testString: assert(Enzyme.shallow(React.createElement(MyComponent)).html() === '

Hello React!

'); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-simple-jsx-element.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-simple-jsx-element.english.md index 7e2129ce71..ee4ce891b0 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-simple-jsx-element.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-simple-jsx-element.english.md @@ -25,9 +25,9 @@ It's worth noting that under the hood the challenges are calling ReactDOM. ```yml tests: - text: The constant JSX should return an h1 element. - testString: assert(JSX.type === 'h1', 'The constant JSX should return an h1 element.'); + testString: assert(JSX.type === 'h1'); - text: The h1 tag should include the text Hello JSX! - testString: assert(Enzyme.shallow(JSX).contains('Hello JSX!'), 'The h1 tag should include the text Hello JSX!'); + testString: assert(Enzyme.shallow(JSX).contains('Hello JSX!')); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.english.md index 8eb086a53e..1d239f1114 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateful-component.english.md @@ -30,13 +30,13 @@ There is a component in the code editor that is trying to render a nameStatefulComponent should exist and render. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('StatefulComponent').length === 1; })(), 'StatefulComponent should exist and render.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('StatefulComponent').length === 1; })()); - text: StatefulComponent should render a div and an h1 element. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('div').length === 1 && mockedComponent.find('h1').length === 1; })(), 'StatefulComponent should render a div and an h1 element.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('div').length === 1 && mockedComponent.find('h1').length === 1; })()); - text: The state of StatefulComponent should be initialized with a property name set to a string. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return ( typeof initialState === 'object' && typeof initialState.name === 'string'); })(), 'The state of StatefulComponent should be initialized with a property name set to a string.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return ( typeof initialState === 'object' && typeof initialState.name === 'string'); })()); - text: The property name in the state of StatefulComponent should render in the h1 element. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find('h1').text() === initialState.name; })(), 'The property name in the state of StatefulComponent should render in the h1 element.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find('h1').text() === initialState.name; })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.english.md b/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.english.md index 2879a0d2e2..1fa15bf0dc 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/create-a-stateless-functional-component.english.md @@ -35,11 +35,11 @@ The code editor has a function called MyComponent. Complete this fu ```yml tests: - text: MyComponent should return JSX. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.length === 1; })(), 'MyComponent should return JSX.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.length === 1; })()); - text: MyComponent should return a div element. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.children().type() === 'div' })(), 'MyComponent should return a div element.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.children().type() === 'div' })()); - text: The div element should contain a string of text. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').text() !== ''; })(), 'The div element should contain a string of text.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').text() !== ''; })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/define-an-html-class-in-jsx.english.md b/curriculum/challenges/english/03-front-end-libraries/react/define-an-html-class-in-jsx.english.md index 8fce5ee04c..30a7e4d1bb 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/define-an-html-class-in-jsx.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/define-an-html-class-in-jsx.english.md @@ -24,9 +24,9 @@ Apply a class of myDiv to the div provided in the JSX ```yml tests: - text: The constant JSX should return a div element. - testString: assert.strictEqual(JSX.type, 'div', 'The constant JSX should return a div element.'); + testString: assert.strictEqual(JSX.type, 'div'); - text: The div has a class of myDiv. - testString: assert.strictEqual(JSX.props.className, 'myDiv', 'The div has a class of myDiv.'); + testString: assert.strictEqual(JSX.props.className, 'myDiv'); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.english.md b/curriculum/challenges/english/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.english.md index 92014235f4..9c05babfe8 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/give-sibling-elements-a-unique-key-attribute.english.md @@ -22,17 +22,17 @@ Normally, you want to make the key something that uniquely identifies the elemen ```yml tests: - text: The Frameworks component should exist and render to the page. - testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('Frameworks').length === 1, 'The Frameworks component should exist and render to the page.'); + testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('Frameworks').length === 1); - text: Frameworks should render an h1 element. - testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('h1').length === 1, 'Frameworks should render an h1 element.'); + testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('h1').length === 1); - text: Frameworks should render a ul element. - testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').length === 1, 'Frameworks should render a ul element.'); + testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').length === 1); - text: The ul tag should render 6 child li elements. - testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').children().length === 6 && Enzyme.mount(React.createElement(Frameworks)).find('ul').childAt(0).name() === 'li' && Enzyme.mount(React.createElement(Frameworks)).find('li').length === 6, 'The ul tag should render 6 child li elements.'); + testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').children().length === 6 && Enzyme.mount(React.createElement(Frameworks)).find('ul').childAt(0).name() === 'li' && Enzyme.mount(React.createElement(Frameworks)).find('li').length === 6); - text: Each list item element should have a unique key attribute. - testString: assert((() => { const ul = Enzyme.mount(React.createElement(Frameworks)).find('ul'); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key(), ul.childAt(4).key(), ul.childAt(5).key(), ]); return keys.size === 6; })(), 'Each list item element should have a unique key attribute.'); + testString: assert((() => { const ul = Enzyme.mount(React.createElement(Frameworks)).find('ul'); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key(), ul.childAt(4).key(), ul.childAt(5).key(), ]); return keys.size === 6; })()); - text: Each list item element should contain text from frontEndFrameworks. - testString: assert((() => {const li = Enzyme.mount(React.createElement(Frameworks)).find('ul').children(); return [...Array(5)].every((_, i) => frontEndFrameworks.includes(li.at(i).text()))})(), 'Each list item element should contain text from frontEndFrameworks {const li = Enzyme.mount(React.createElement(Frameworks)).find('ul').children(); return [...Array(5)].every((_, i) => frontEndFrameworks.includes(li.at(i).text()))})()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/introducing-inline-styles.english.md b/curriculum/challenges/english/03-front-end-libraries/react/introducing-inline-styles.english.md index 16d5d8ab31..490a5a3f39 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/introducing-inline-styles.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/introducing-inline-styles.english.md @@ -28,11 +28,11 @@ Note that you can optionally set the font size to be a number, omitting the unit ```yml tests: - text: The component should render a div element. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().type() === 'div'; })(), 'The component should render a div element.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().type() === 'div'; })()); - text: The div element should have a color of red. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().props().style.color === 'red'; })(), 'The div element should have a color of red.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().props().style.color === 'red'; })()); - text: The div element should have a font size of 72px. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return (mockedComponent.children().props().style.fontSize === 72 || mockedComponent.children().props().style.fontSize === '72' || mockedComponent.children().props().style.fontSize === '72px'); })(), 'The div element should have a font size of 72px.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return (mockedComponent.children().props().style.fontSize === 72 || mockedComponent.children().props().style.fontSize === '72' || mockedComponent.children().props().style.fontSize === '72px'); })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.english.md b/curriculum/challenges/english/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.english.md index 667043cc3c..2df0e4f521 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/learn-about-self-closing-jsx-tags.english.md @@ -25,11 +25,11 @@ Fix the errors in the code editor so that it is valid JSX and successfully trans ```yml tests: - text: The constant JSX should return a div element. - testString: assert.strictEqual(JSX.type, 'div', 'The constant JSX should return a div element.'); + testString: assert.strictEqual(JSX.type, 'div'); - text: The div should contain a br tag. - testString: assert(Enzyme.shallow(JSX).find('br').length === 1, 'The div should contain a br tag.'); + testString: assert(Enzyme.shallow(JSX).find('br').length === 1); - text: The div should contain an hr tag. - testString: assert(Enzyme.shallow(JSX).find('hr').length === 1, 'The div should contain an hr tag.'); + testString: assert(Enzyme.shallow(JSX).find('hr').length === 1); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/manage-updates-with-lifecycle-methods.english.md b/curriculum/challenges/english/03-front-end-libraries/react/manage-updates-with-lifecycle-methods.english.md index e72466af6d..12584ef508 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/manage-updates-with-lifecycle-methods.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/manage-updates-with-lifecycle-methods.english.md @@ -24,13 +24,13 @@ Next, add componentDidUpdate() in the Dialog component ```yml tests: - text: The Controller component should render the Dialog component as a child. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find('Controller').length === 1 && mockedComponent.find('Dialog').length === 1; })(), 'The Controller component should render the Dialog component as a child.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find('Controller').length === 1 && mockedComponent.find('Dialog').length === 1; })()); - text: The componentWillReceiveProps method in the Dialog component should log this.props to the console. - testString: assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,''); return lifecycleChild.includes('console.log') && lifecycleChild.includes('this.props') })(), 'The componentWillReceiveProps method in the Dialog component should log this.props to the console.'); + testString: assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,''); return lifecycleChild.includes('console.log') && lifecycleChild.includes('this.props') })()); - text: The componentWillReceiveProps method in the Dialog component should log nextProps to the console. - testString: assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,''); const nextPropsAsParameterTest = /componentWillReceiveProps(| *?= *?)(\(|)nextProps(\)|)( *?=> *?{| *?{|{)/; const nextPropsInConsoleLogTest = /console\.log\(.*?nextProps\b.*?\)/; return ( lifecycleChild.includes('console.log') && nextPropsInConsoleLogTest.test(lifecycleChild) && nextPropsAsParameterTest.test(lifecycleChild) ); })(), 'The componentWillReceiveProps method in the Dialog component should log nextProps to the console.'); + testString: assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,''); const nextPropsAsParameterTest = /componentWillReceiveProps(| *?= *?)(\(|)nextProps(\)|)( *?=> *?{| *?{|{)/; const nextPropsInConsoleLogTest = /console\.log\(.*?nextProps\b.*?\)/; return ( lifecycleChild.includes('console.log') && nextPropsInConsoleLogTest.test(lifecycleChild) && nextPropsAsParameterTest.test(lifecycleChild) ); })()); - text: The Dialog component should call the componentDidUpdate method and log a message to the console. - testString: assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentDidUpdate.toString().replace(/ /g,''); return lifecycleChild.length !== 'undefined' && lifecycleChild.includes('console.log'); })(), 'The Dialog component should call the componentDidUpdate method and log a message to the console.'); + testString: assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentDidUpdate.toString().replace(/ /g,''); return lifecycleChild.length !== 'undefined' && lifecycleChild.includes('console.log'); })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.english.md b/curriculum/challenges/english/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.english.md index ba3974aa5a..97d3c86dd4 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.english.md @@ -22,13 +22,13 @@ The shouldComponentUpdate() method is added in a component called < ```yml tests: - text: The Controller component should render the OnlyEvens component as a child. - testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find('Controller').length === 1 && mockedComponent.find('OnlyEvens').length === 1; })(), 'The Controller component should render the OnlyEvens component as a child.'); + testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find('Controller').length === 1 && mockedComponent.find('OnlyEvens').length === 1; })()); - text: The shouldComponentUpdate method should be defined on the OnlyEvens component. - testString: assert((() => { const child = React.createElement(OnlyEvens).type.prototype.shouldComponentUpdate.toString().replace(/s/g,''); return child !== 'undefined'; })(), 'The shouldComponentUpdate method should be defined on the OnlyEvens component.'); + testString: assert((() => { const child = React.createElement(OnlyEvens).type.prototype.shouldComponentUpdate.toString().replace(/s/g,''); return child !== 'undefined'; })()); - text: The OnlyEvens component should return an h1 tag which renders the value of this.props.value. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 1000 }); return waitForIt(() => mockedComponent.find(''h1'').html()); }; const second = () => { mockedComponent.setState({ value: 10 }); return waitForIt(() => mockedComponent.find(''h1'').html()); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === ''

1000

'' && secondValue === ''

10

'', ''The OnlyEvens component should return an h1 tag which renders the value of this.props.value.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 1000 }); return waitForIt(() => mockedComponent.find(''h1'').html()); }; const second = () => { mockedComponent.setState({ value: 10 }); return waitForIt(() => mockedComponent.find(''h1'').html()); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === ''

1000

'' && secondValue === ''

10

''); }; ' - text: OnlyEvens should re-render only when nextProps.value is even. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 8 }); return waitForIt(() => mockedComponent.find(''h1'').text()); }; const second = () => { mockedComponent.setState({ value: 7 }); return waitForIt(() => mockedComponent.find(''h1'').text()); }; const third = () => { mockedComponent.setState({ value: 42 }); return waitForIt(() => mockedComponent.find(''h1'').text()); }; const firstValue = await first(); const secondValue = await second(); const thirdValue = await third(); assert(firstValue === ''8'' && secondValue === ''8'' && thirdValue === ''42'', ''OnlyEvens should re-render only when nextProps.value is even.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 8 }); return waitForIt(() => mockedComponent.find(''h1'').text()); }; const second = () => { mockedComponent.setState({ value: 7 }); return waitForIt(() => mockedComponent.find(''h1'').text()); }; const third = () => { mockedComponent.setState({ value: 42 }); return waitForIt(() => mockedComponent.find(''h1'').text()); }; const firstValue = await first(); const secondValue = await second(); const thirdValue = await third(); assert(firstValue === ''8'' && secondValue === ''8'' && thirdValue === ''42''); }; ' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/override-default-props.english.md b/curriculum/challenges/english/03-front-end-libraries/react/override-default-props.english.md index e19e51ee57..3e52e3d143 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/override-default-props.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/override-default-props.english.md @@ -22,11 +22,11 @@ The ShoppingCart component now renders a child component Item ```yml tests: - text: The component ShoppingCart should render. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })(), 'The component ShoppingCart should render.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })()); - text: The component Items should render. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').length === 1; })(), 'The component Items should render.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').length === 1; })()); - text: "The Items component should have a prop of { quantity: 10 } passed from the ShoppingCart component." - testString: "getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').props().quantity == 10 && getUserInput('index').replace(/ /g,'').includes(''); })(), 'The Items component should have a prop of { quantity: 10 } passed from the ShoppingCart component.');" + testString: "getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').props().quantity == 10 && getUserInput('index').replace(/ /g,'').includes(''); })());" ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/pass-a-callback-as-props.english.md b/curriculum/challenges/english/03-front-end-libraries/react/pass-a-callback-as-props.english.md index 43ae54a0e2..3ceb07012f 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/pass-a-callback-as-props.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/pass-a-callback-as-props.english.md @@ -22,15 +22,15 @@ Next, add RenderInput to the render method in MyApp, t ```yml tests: - text: The MyApp component should render. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('MyApp').length === 1; })(), 'The MyApp component should render.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('MyApp').length === 1; })()); - text: The GetInput component should render. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('GetInput').length === 1; })(), 'The GetInput component should render.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('GetInput').length === 1; })()); - text: The RenderInput component should render. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('RenderInput').length === 1; })(), 'The RenderInput component should render.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('RenderInput').length === 1; })()); - text: The GetInput component should receive the MyApp state property inputValue as props and contain an input element which modifies MyApp state. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: ''''}); return waitForIt(() => mockedComponent.state() )}; const state_2 = () => { mockedComponent.find(''input'').simulate(''change'', {target: {value: ''TestInput''}}); return waitForIt(() => mockedComponent.state() )}; const updated_1 = await state_1(); const updated_2 = await state_2(); assert(updated_1.inputValue === '''' && updated_2.inputValue === ''TestInput'', ''The GetInput component should receive the MyApp state property inputValue as props and contain an input element which modifies MyApp state.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: ''''}); return waitForIt(() => mockedComponent.state() )}; const state_2 = () => { mockedComponent.find(''input'').simulate(''change'', {target: {value: ''TestInput''}}); return waitForIt(() => mockedComponent.state() )}; const updated_1 = await state_1(); const updated_2 = await state_2(); assert(updated_1.inputValue === '''' && updated_2.inputValue === ''TestInput''); }; ' - text: The RenderInput component should receive the MyApp state property inputValue as props. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: ''TestName''}); return waitForIt(() => mockedComponent )}; const updated_1 = await state_1(); assert(updated_1.find(''p'').text().includes(''TestName''), ''The RenderInput component should receive the MyApp state property inputValue as props.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: ''TestName''}); return waitForIt(() => mockedComponent )}; const updated_1 = await state_1(); assert(updated_1.find(''p'').text().includes(''TestName'')); }; ' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/pass-an-array-as-props.english.md b/curriculum/challenges/english/03-front-end-libraries/react/pass-an-array-as-props.english.md index 5660db7dde..c8d0cf8d2e 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/pass-an-array-as-props.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/pass-an-array-as-props.english.md @@ -33,19 +33,19 @@ There are List and ToDo components in the code editor. ```yml tests: - text: The ToDo component should return a single outer div. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().type() === 'div'; })(), 'The ToDo component should return a single outer div.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().type() === 'div'; })()); - text: The third child of the ToDo component should be an instance of the List component. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(2).name() === 'List'; })(), 'The third child of the ToDo component should be an instance of the List component.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(2).name() === 'List'; })()); - text: The fifth child of the ToDo component should be an instance of the List component. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(4).name() === 'List'; })(), 'The fifth child of the ToDo component should be an instance of the List component.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(4).name() === 'List'; })()); - text: Both instances of the List component should have a property called tasks and tasks should be of type array. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return Array.isArray(mockedComponent.find('List').get(0).props.tasks) && Array.isArray(mockedComponent.find('List').get(1).props.tasks); })(), 'Both instances of the List component should have a property called tasks and tasks should be of type array.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return Array.isArray(mockedComponent.find('List').get(0).props.tasks) && Array.isArray(mockedComponent.find('List').get(1).props.tasks); })()); - text: The first List component representing the tasks for today should have 2 or more items. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('List').get(0).props.tasks.length >= 2; })(), 'The first List component representing the tasks for today should have 2 or more items.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('List').get(0).props.tasks.length >= 2; })()); - text: The second List component representing the tasks for tomorrow should have 3 or more items. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('List').get(1).props.tasks.length >= 3; })(), 'The second List component representing the tasks for tomorrow should have 3 or more items.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('List').get(1).props.tasks.length >= 3; })()); - text: The List component should render the value from the tasks prop in the p tag. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('p').get(0).props.children === mockedComponent.find('List').get(0).props.tasks.join(', ') && mockedComponent.find('p').get(1).props.children === mockedComponent.find('List').get(1).props.tasks.join(', '); })(), 'The List component should render the value from the tasks prop in the p tag.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('p').get(0).props.children === mockedComponent.find('List').get(0).props.tasks.join(', ') && mockedComponent.find('p').get(1).props.children === mockedComponent.find('List').get(1).props.tasks.join(', '); })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md b/curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md index 520ae4f33f..39e71a2140 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md @@ -35,15 +35,15 @@ There are Calendar and CurrentDate components in the c ```yml tests: - text: The Calendar component should return a single div element. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().type() === 'div'; })(), 'The Calendar component should return a single div element.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().type() === 'div'; })()); - text: The second child of the Calendar component should be the CurrentDate component. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).name() === 'CurrentDate'; })(), 'The second child of the Calendar component should be the CurrentDate component.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).name() === 'CurrentDate'; })()); - text: The CurrentDate component should have a prop called date. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).props().date })(), 'The CurrentDate component should have a prop called date.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).props().date })()); - text: The date prop of the CurrentDate should contain a string of text. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); const prop = mockedComponent.children().childAt(1).props().date; return( typeof prop === 'string' && prop.length > 0 ); })(), 'The date prop of the CurrentDate should contain a string of text.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); const prop = mockedComponent.children().childAt(1).props().date; return( typeof prop === 'string' && prop.length > 0 ); })()); - text: The CurrentDate component should render the value from the date prop in the p tag. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.find('p').html().includes(Date().substr(3)); })(), 'The CurrentDate component should render the value from the date prop in the p tag.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.find('p').html().includes(Date().substr(3)); })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/pass-state-as-props-to-child-components.english.md b/curriculum/challenges/english/03-front-end-libraries/react/pass-state-as-props-to-child-components.english.md index eda64fe1c3..3509cc4317 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/pass-state-as-props-to-child-components.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/pass-state-as-props-to-child-components.english.md @@ -23,11 +23,11 @@ The MyApp component is stateful and renders a Navbar c ```yml tests: - text: The MyApp component should render with a Navbar component inside. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('MyApp').length === 1 && mockedComponent.find('Navbar').length === 1; })(), 'The MyApp component should render with a Navbar component inside.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('MyApp').length === 1 && mockedComponent.find('Navbar').length === 1; })()); - text: The Navbar component should receive the MyApp state property name as props. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const setState = () => { mockedComponent.setState({name: ''TestName''}); return waitForIt(() => mockedComponent.find(''Navbar'').props() )}; const navProps = await setState(); assert(navProps.name === ''TestName'', ''The Navbar component should receive the MyApp state property name as props.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const setState = () => { mockedComponent.setState({name: ''TestName''}); return waitForIt(() => mockedComponent.find(''Navbar'').props() )}; const navProps = await setState(); assert(navProps.name === ''TestName''); }; ' - text: The h1 element in Navbar should render the name prop. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const navH1Before = mockedComponent.find(''Navbar'').find(''h1'').text(); const setState = () => { mockedComponent.setState({name: ''TestName''}); return waitForIt(() => mockedComponent.find(''Navbar'').find(''h1'').text() )}; const navH1After = await setState(); assert(new RegExp(''TestName'').test(navH1After) && navH1After !== navH1Before, ''The h1 element in Navbar should render the name prop.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const navH1Before = mockedComponent.find(''Navbar'').find(''h1'').text(); const setState = () => { mockedComponent.setState({name: ''TestName''}); return waitForIt(() => mockedComponent.find(''Navbar'').find(''h1'').text() )}; const navH1After = await setState(); assert(new RegExp(''TestName'').test(navH1After) && navH1After !== navH1Before); }; ' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/render-a-class-component-to-the-dom.english.md b/curriculum/challenges/english/03-front-end-libraries/react/render-a-class-component-to-the-dom.english.md index 71dca3b00a..8f70d05e03 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/render-a-class-component-to-the-dom.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/render-a-class-component-to-the-dom.english.md @@ -23,13 +23,13 @@ Both the Fruits and Vegetables components are defined ```yml tests: - text: The TypesOfFood component should return a single div element. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === 'div'; })(), 'The TypesOfFood component should return a single div element.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === 'div'; })()); - text: The TypesOfFood component should render the Fruits component after the h1 element. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === 'Fruits'; })(), 'The TypesOfFood component should render the Fruits component after the h1 element.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === 'Fruits'; })()); - text: The TypesOfFood component should render the Vegetables component after Fruits. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === 'Vegetables'; })(), 'The TypesOfFood component should render the Vegetables component after Fruits.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === 'Vegetables'; })()); - text: The TypesOfFood component should render to the DOM within the div with the id challenge-node. - testString: assert((function() { const html = document.getElementById('challenge-node').childNodes[0].innerHTML; return (html === '

Types of Food:

Fruits:

Non-Citrus:

  • Apples
  • Blueberries
  • Strawberries
  • Bananas

Citrus:

  • Lemon
  • Lime
  • Orange
  • Grapefruit

Vegetables:

  • Brussel Sprouts
  • Broccoli
  • Squash
'); })(), 'The TypesOfFood component should render to the DOM within the div with the id challenge-node.'); + testString: assert((function() { const html = document.getElementById('challenge-node').childNodes[0].innerHTML; return (html === '

Types of Food:

Fruits:

Non-Citrus:

  • Apples
  • Blueberries
  • Strawberries
  • Bananas

Citrus:

  • Lemon
  • Lime
  • Orange
  • Grapefruit

Vegetables:

  • Brussel Sprouts
  • Broccoli
  • Squash
'); })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.english.md b/curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.english.md index 82f223ecd5..efa6b36a67 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/render-conditionally-from-props.english.md @@ -24,19 +24,19 @@ Now you have an expression that you can use to make a randomized decision in the ```yml tests: - text: The GameOfChance component should exist and render to the page. - testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('GameOfChance').length, 1, 'The GameOfChance component should exist and render to the page.'); + testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('GameOfChance').length, 1); - text: GameOfChance should return a single button element. - testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('button').length, 1, 'GameOfChance should return a single button element.'); + testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('button').length, 1); - text: GameOfChance should return a single instance of the Results component, which has a prop called fiftyFifty. - testString: assert(Enzyme.mount(React.createElement(GameOfChance)).find('Results').length === 1 && Enzyme.mount(React.createElement(GameOfChance)).find('Results').props().hasOwnProperty('fiftyFifty') === true, 'GameOfChance should return a single instance of the Results component, which has a prop called fiftyFifty.'); + testString: assert(Enzyme.mount(React.createElement(GameOfChance)).find('Results').length === 1 && Enzyme.mount(React.createElement(GameOfChance)).find('Results').props().hasOwnProperty('fiftyFifty') === true); - text: GameOfChance state should be initialized with a property of counter set to a value of 1. - testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).state().counter, 1, 'GameOfChance state should be initialized with a property of counter set to a value of 1.'); + testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).state().counter, 1); - text: 'When the GameOfChance component is first rendered to the DOM, a p element should be returned with the inner text of Turn: 1.' - testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find(''p'').text(), ''Turn: 1'', ''When the GameOfChance component is first rendered to the DOM, a p element should be returned with the inner text of Turn: 1.'');' + testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find(''p'').text(), ''Turn: 1'');' - text: 'Each time the button is clicked, the counter state should be incremented by a value of 1, and a single p element should be rendered to the DOM that contains the text "Turn: N", where N is the value of the counter state.' - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find(''button'').simulate(''click''); };const result = () => ({ count: comp.state(''counter''), text: comp.find(''p'').text() });const _1 = () => { simulate(); return waitForIt(() => result())}; const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); assert(_1_val.count === 2 && _1_val.text === ''Turn: 2'' && _2_val.count === 3 && _2_val.text === ''Turn: 3'' && _3_val.count === 4 && _3_val.text === ''Turn: 4'' && _4_val.count === 5 && _4_val.text === ''Turn: 5'' && _5_val.count === 6 && _5_val.text === ''Turn: 6'', ''Each time the button is clicked, the counter state should be incremented by a value of 1, and a single p element should be rendered to the DOM that contains the text "Turn: N", where N is the value of the counter state.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find(''button'').simulate(''click''); };const result = () => ({ count: comp.state(''counter''), text: comp.find(''p'').text() });const _1 = () => { simulate(); return waitForIt(() => result())}; const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); assert(_1_val.count === 2 && _1_val.text === ''Turn: 2'' && _2_val.count === 3 && _2_val.text === ''Turn: 3'' && _3_val.count === 4 && _3_val.text === ''Turn: 4'' && _4_val.count === 5 && _4_val.text === ''Turn: 5'' && _5_val.count === 6 && _5_val.text === ''Turn: 6''); }; ' - text: When the GameOfChance component is first mounted to the DOM and each time the button is clicked thereafter, a single h1 element should be returned that randomly renders either You Win! or You Lose!. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find(''button'').simulate(''click''); };const result = () => ({ h1: comp.find(''h1'').length, text: comp.find(''h1'').text() });const _1 = result(); const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _6 = () => { simulate(); return waitForIt(() => result())}; const _7 = () => { simulate(); return waitForIt(() => result())}; const _8 = () => { simulate(); return waitForIt(() => result())}; const _9 = () => { simulate(); return waitForIt(() => result())}; const _10 = () => { simulate(); return waitForIt(() => result())}; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const __text = new Set([_1.text, _2_val.text, _3_val.text, _4_val.text, _5_val.text, _6_val.text, _7_val.text, _8_val.text, _9_val.text, _10_val.text]); const __h1 = new Set([_1.h1, _2_val.h1, _3_val.h1, _4_val.h1, _5_val.h1, _6_val.h1, _7_val.h1, _8_val.h1, _9_val.h1, _10_val.h1]); assert(__text.size === 2 && __h1.size === 1, ''When the GameOfChance component is first mounted to the DOM and each time the button is clicked thereafter, a single h1 element should be returned that randomly renders either You Win! or You Lose!.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find(''button'').simulate(''click''); };const result = () => ({ h1: comp.find(''h1'').length, text: comp.find(''h1'').text() });const _1 = result(); const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _6 = () => { simulate(); return waitForIt(() => result())}; const _7 = () => { simulate(); return waitForIt(() => result())}; const _8 = () => { simulate(); return waitForIt(() => result())}; const _9 = () => { simulate(); return waitForIt(() => result())}; const _10 = () => { simulate(); return waitForIt(() => result())}; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const __text = new Set([_1.text, _2_val.text, _3_val.text, _4_val.text, _5_val.text, _6_val.text, _7_val.text, _8_val.text, _9_val.text, _10_val.text]); const __h1 = new Set([_1.h1, _2_val.h1, _3_val.h1, _4_val.h1, _5_val.h1, _6_val.h1, _7_val.h1, _8_val.h1, _9_val.h1, _10_val.h1]); assert(__text.size === 2 && __h1.size === 1); }; ' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/render-html-elements-to-the-dom.english.md b/curriculum/challenges/english/03-front-end-libraries/react/render-html-elements-to-the-dom.english.md index c45a43e352..a82712f63b 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/render-html-elements-to-the-dom.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/render-html-elements-to-the-dom.english.md @@ -23,13 +23,13 @@ The code editor has a simple JSX component. Use the ReactDOM.render()JSX should return a div element. - testString: assert(JSX.type === 'div', 'The constant JSX should return a div element.'); + testString: assert(JSX.type === 'div'); - text: The div should contain an h1 tag as the first element. - testString: assert(JSX.props.children[0].type === 'h1', 'The div should contain an h1 tag as the first element.'); + testString: assert(JSX.props.children[0].type === 'h1'); - text: The div should contain a p tag as the second element. - testString: assert(JSX.props.children[1].type === 'p', 'The div should contain a p tag as the second element.'); + testString: assert(JSX.props.children[1].type === 'p'); - text: The provided JSX element should render to the DOM node with id challenge-node. - testString: assert(document.getElementById('challenge-node').childNodes[0].innerHTML === '

Hello World

Lets render this to the DOM

', 'The provided JSX element should render to the DOM node with id challenge-node.'); + testString: assert(document.getElementById('challenge-node').childNodes[0].innerHTML === '

Hello World

Lets render this to the DOM

'); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.english.md b/curriculum/challenges/english/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.english.md index 885482d0ac..eb34725b83 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/render-react-on-the-server-with-rendertostring.english.md @@ -22,7 +22,7 @@ The renderToString() method is provided on ReactDOMServerApp component should render to a string using ReactDOMServer.renderToString. - testString: getUserInput => assert(getUserInput('index').replace(/ /g,'').includes('ReactDOMServer.renderToString()') && Enzyme.mount(React.createElement(App)).children().name() === 'div', 'The App component should render to a string using ReactDOMServer.renderToString.'); + testString: getUserInput => assert(getUserInput('index').replace(/ /g,'').includes('ReactDOMServer.renderToString()') && Enzyme.mount(React.createElement(App)).children().name() === 'div'); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.english.md b/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.english.md index 78c4bba231..3026eb108e 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface-another-way.english.md @@ -22,13 +22,13 @@ Next, in the return statement, render this value in an h1 tag using ```yml tests: - text: MyComponent should have a key name with value freeCodeCamp stored in its state. - testString: assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'freeCodeCamp', 'MyComponent should have a key name with value freeCodeCamp stored in its state.'); + testString: assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'freeCodeCamp'); - text: MyComponent should render an h1 header enclosed in a single div. - testString: assert(/

.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), 'MyComponent should render an h1 header enclosed in a single div.'); + testString: assert(/

.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html())); - text: The rendered h1 tag should include a reference to {name}. - testString: getUserInput => assert(/

\n*\s*\{\s*name\s*\}\s*\n*<\/h1>/.test(getUserInput('index')), 'The rendered h1 tag should include a reference to {name}.'); + testString: getUserInput => assert(/

\n*\s*\{\s*name\s*\}\s*\n*<\/h1>/.test(getUserInput('index'))); - text: The rendered h1 header should contain text rendered from the component's state. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''TestName'' }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === ''

TestName

'', ''The rendered h1 header should contain text rendered from the component's state.''); };' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''TestName'' }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === ''

TestName

''); };' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface.english.md b/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface.english.md index 0dd88e387f..629032cdcf 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/render-state-in-the-user-interface.english.md @@ -25,11 +25,11 @@ In the code editor, MyComponent is already stateful. Define an MyComponent
should have a key name with value freeCodeCamp stored in its state. - testString: assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'freeCodeCamp', 'MyComponent should have a key name with value freeCodeCamp stored in its state.'); + testString: assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'freeCodeCamp'); - text: MyComponent should render an h1 header enclosed in a single div. - testString: assert(/

.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), 'MyComponent should render an h1 header enclosed in a single div.'); + testString: assert(/

.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html())); - text: The rendered h1 header should contain text rendered from the component's state. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''TestName'' }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === ''

TestName

'', ''The rendered h1 header should contain text rendered from the component's state.'');};' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''TestName'' }); return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === ''

TestName

'');};' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/render-with-an-if-else-condition.english.md b/curriculum/challenges/english/03-front-end-libraries/react/render-with-an-if-else-condition.english.md index 51dd94ee58..b82eb3362d 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/render-with-an-if-else-condition.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/render-with-an-if-else-condition.english.md @@ -22,13 +22,13 @@ MyComponent contains a boolean in its state which tracks whether yo ```yml tests: - text: MyComponent should exist and render. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('MyComponent').length === 1; })(), 'MyComponent should exist and render.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('MyComponent').length === 1; })()); - text: When display is set to true, a div, button, and h1 should render. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find(''div'').length === 1 && mockedComponent.find(''div'').children().length === 2 && mockedComponent.find(''button'').length === 1 && mockedComponent.find(''h1'').length === 1, ''When display is set to true, a div, button, and h1 should render.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find(''div'').length === 1 && mockedComponent.find(''div'').children().length === 2 && mockedComponent.find(''button'').length === 1 && mockedComponent.find(''h1'').length === 1); }; ' - text: When display is set to false, only a div and button should render. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find(''div'').length === 1 && mockedComponent.find(''div'').children().length === 1 && mockedComponent.find(''button'').length === 1 && mockedComponent.find(''h1'').length === 0, ''When display is set to false, only a div and button should render.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find(''div'').length === 1 && mockedComponent.find(''div'').children().length === 1 && mockedComponent.find(''button'').length === 1 && mockedComponent.find(''h1'').length === 0); }; ' - text: The render method should use an if/else statement to check the condition of this.state.display. - testString: getUserInput => assert(getUserInput('index').includes('if') && getUserInput('index').includes('else'), 'The render method should use an if/else statement to check the condition of this.state.display.'); + testString: getUserInput => assert(getUserInput('index').includes('if') && getUserInput('index').includes('else')); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/set-state-with-this.setstate.english.md b/curriculum/challenges/english/03-front-end-libraries/react/set-state-with-this.setstate.english.md index ad4cc093e7..8b4e92e46a 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/set-state-with-this.setstate.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/set-state-with-this.setstate.english.md @@ -30,13 +30,13 @@ Click the button and watch the rendered state update. Don't worry if you don't f ```yml tests: - text: 'The state of MyComponent should initialize with the key value pair { name: Initial State }.' - testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state(''name'') === ''Initial State'', ''The state of MyComponent should initialize with the key value pair { name: Initial State }.'');' + testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state(''name'') === ''Initial State'');' - text: MyComponent should render an h1 header. - testString: assert(Enzyme.mount(React.createElement(MyComponent)).find('h1').length === 1, 'MyComponent should render an h1 header.'); + testString: assert(Enzyme.mount(React.createElement(MyComponent)).find('h1').length === 1); - text: The rendered h1 header should contain text rendered from the component's state. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''TestName'' }); return waitForIt(() => mockedComponent.html()); }; const firstValue = await first(); assert(/

TestName<\/h1>/.test(firstValue), ''The rendered h1 header should contain text rendered from the component's state.''); };' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''TestName'' }); return waitForIt(() => mockedComponent.html()); }; const firstValue = await first(); assert(/

TestName<\/h1>/.test(firstValue)); };' - text: Calling the handleClick method on MyComponent should set the name property in state to equal React Rocks!. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''Before'' }); return waitForIt(() => mockedComponent.state(''name'')); }; const second = () => { mockedComponent.instance().handleClick(); return waitForIt(() => mockedComponent.state(''name'')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === ''Before'' && secondValue === ''React Rocks!'', ''Calling the handleClick method on MyComponent should set the name property in state to equal React Rocks!.''); };' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: ''Before'' }); return waitForIt(() => mockedComponent.state(''name'')); }; const second = () => { mockedComponent.instance().handleClick(); return waitForIt(() => mockedComponent.state(''name'')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === ''Before'' && secondValue === ''React Rocks!''); };' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use--for-a-more-concise-conditional.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use--for-a-more-concise-conditional.english.md index 16ec9f1455..f7b646d283 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use--for-a-more-concise-conditional.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use--for-a-more-concise-conditional.english.md @@ -23,13 +23,13 @@ Solve the previous example again, so the h1 only renders if d ```yml tests: - text: MyComponent should exist and render. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('MyComponent').length; })(), 'MyComponent should exist and render.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('MyComponent').length; })()); - text: When display is set to true, a div, button, and h1 should render. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find(''div'').length === 1 && updated.find(''div'').children().length === 2 && updated.find(''button'').length === 1 && updated.find(''h1'').length === 1, ''When display is set to true, a div, button, and h1 should render.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find(''div'').length === 1 && updated.find(''div'').children().length === 2 && updated.find(''button'').length === 1 && updated.find(''h1'').length === 1); }; ' - text: When display is set to false, only a div and button should render. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find(''div'').length === 1 && updated.find(''div'').children().length === 1 && updated.find(''button'').length === 1 && updated.find(''h1'').length === 0, ''When display is set to false, only a div and button should render.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find(''div'').length === 1 && updated.find(''div'').children().length === 1 && updated.find(''button'').length === 1 && updated.find(''h1'').length === 0); }; ' - text: The render method should use the && logical operator to check the condition of this.state.display. - testString: getUserInput => assert(getUserInput('index').includes('&&'), 'The render method should use the && logical operator to check the condition of this.state.display.'); + testString: getUserInput => assert(getUserInput('index').includes('&&')); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.english.md index ccacb1393e..b6500925f4 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use-a-ternary-expression-for-conditional-rendering.english.md @@ -27,19 +27,19 @@ Once the component is rendering information to the page, users should have a way ```yml tests: - text: The CheckUserAge component should render with a single input element and a single button element. - testString: assert(Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('input').length === 1 && Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('button').length === 1, 'The CheckUserAge component should render with a single input element and a single button element.'); + testString: assert(Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('input').length === 1 && Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('button').length === 1); - text: The CheckUserAge component's state should be initialized with a property of userAge and a property of input, both set to a value of an empty string. - testString: assert(Enzyme.mount(React.createElement(CheckUserAge)).state().input === '' && Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === '', 'The CheckUserAge component's state should be initialized with a property of userAge and a property of input, both set to a value of an empty string.'); + testString: assert(Enzyme.mount(React.createElement(CheckUserAge)).state().input === '' && Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === ''); - text: When the CheckUserAge component is first rendered to the DOM, the button's inner text should be Submit. - testString: assert(Enzyme.mount(React.createElement(CheckUserAge)).find('button').text() === 'Submit', 'When the CheckUserAge component is first rendered to the DOM, the button's inner text should be Submit.'); + testString: assert(Enzyme.mount(React.createElement(CheckUserAge)).find('button').text() === 'Submit'); - text: When a number of less than 18 is entered into the input element and the button is clicked, the button's inner text should read You Shall Not Pass. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find(''button'').text(); const enter3AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''3'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const enter17AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''17'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const userAge3 = await enter3AndClickButton(); const userAge17 = await enter17AndClickButton(); assert(initialButton === ''Submit'' && userAge3 === ''You Shall Not Pass'' && userAge17 === ''You Shall Not Pass'', ''When a number of less than 18 is entered into the input element and the button is clicked, the button's inner text should read You Shall Not Pass.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find(''button'').text(); const enter3AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''3'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const enter17AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''17'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const userAge3 = await enter3AndClickButton(); const userAge17 = await enter17AndClickButton(); assert(initialButton === ''Submit'' && userAge3 === ''You Shall Not Pass'' && userAge17 === ''You Shall Not Pass''); }; ' - text: When a number greater than or equal to 18 is entered into the input element and the button is clicked, the button's inner text should read You May Enter. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find(''button'').text(); const enter18AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''18'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const enter35AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''35'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const userAge18 = await enter18AndClickButton(); const userAge35 = await enter35AndClickButton(); assert(initialButton === ''Submit'' && userAge18 === ''You May Enter'' && userAge35 === ''You May Enter'', ''When a number greater than or equal to 18 is entered into the input element and the button is clicked, the button's inner text should read You May Enter.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find(''button'').text(); const enter18AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''18'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const enter35AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''35'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const userAge18 = await enter18AndClickButton(); const userAge35 = await enter35AndClickButton(); assert(initialButton === ''Submit'' && userAge18 === ''You May Enter'' && userAge35 === ''You May Enter''); }; ' - text: Once a number has been submitted, and the value of the input is once again changed, the button should return to reading Submit. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const enter18AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''18'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const changeInputDontClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''5'' }}); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const enter10AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''10'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const userAge18 = await enter18AndClickButton(); const changeInput1 = await changeInputDontClickButton(); const userAge10 = await enter10AndClickButton(); const changeInput2 = await changeInputDontClickButton(); assert(userAge18 === ''You May Enter'' && changeInput1 === ''Submit'' && userAge10 === ''You Shall Not Pass'' && changeInput2 === ''Submit'', ''Once a number has been submitted, and the value of the input is once again changed, the button should return to reading Submit.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const enter18AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''18'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const changeInputDontClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''5'' }}); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const enter10AndClickButton = () => { mockedComponent.find(''input'').simulate(''change'', {target: { value: ''10'' }}); mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find(''button'').text(); }); }; const userAge18 = await enter18AndClickButton(); const changeInput1 = await changeInputDontClickButton(); const userAge10 = await enter10AndClickButton(); const changeInput2 = await changeInputDontClickButton(); assert(userAge18 === ''You May Enter'' && changeInput1 === ''Submit'' && userAge10 === ''You Shall Not Pass'' && changeInput2 === ''Submit''); }; ' - text: Your code should not contain any if/else statements. - testString: assert(new RegExp(/(\s|;)if(\s|\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false, 'Your code should not contain any if/else statements.'); + testString: assert(new RegExp(/(\s|;)if(\s|\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.english.md index 548cb370a2..bcfd9ffd81 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use-advanced-javascript-in-react-render-method.english.md @@ -22,17 +22,17 @@ In the code provided, the render method has an array that contains ```yml tests: - text: The MagicEightBall component should exist and should render to the page. - testString: assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).find('MagicEightBall').length, 1, 'The MagicEightBall component should exist and should render to the page.'); + testString: assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).find('MagicEightBall').length, 1); - text: MagicEightBall's first child should be an input element. - testString: assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(0).name(), 'input', 'MagicEightBall's first child should be an input element.'); + testString: assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(0).name(), 'input'); - text: MagicEightBall's third child should be a button element. - testString: assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), 'button', 'MagicEightBall's third child should be a button element.'); + testString: assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), 'button'); - text: MagicEightBall's state should be initialized with a property of userInput and a property of randomIndex both set to a value of an empty string. - testString: assert(Enzyme.mount(React.createElement(MagicEightBall)).state('randomIndex') === '' && Enzyme.mount(React.createElement(MagicEightBall)).state('userInput') === '', 'MagicEightBall's state should be initialized with a property of userInput and a property of randomIndex both set to a value of an empty string.'); + testString: assert(Enzyme.mount(React.createElement(MagicEightBall)).state('randomIndex') === '' && Enzyme.mount(React.createElement(MagicEightBall)).state('userInput') === ''); - text: When MagicEightBall is first mounted to the DOM, it should return an empty p element. - testString: assert(Enzyme.mount(React.createElement(MagicEightBall)).find('p').length === 1 && Enzyme.mount(React.createElement(MagicEightBall)).find('p').text() === '', 'When MagicEightBall is first mounted to the DOM, it should return an empty p element.'); + testString: assert(Enzyme.mount(React.createElement(MagicEightBall)).find('p').length === 1 && Enzyme.mount(React.createElement(MagicEightBall)).find('p').text() === ''); - text: When text is entered into the input element and the button is clicked, the MagicEightBall component should return a p element that contains a random element from the possibleAnswers array. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find(''input'').simulate(''change'', { target: { value: ''test?'' }}); comp.find(''button'').simulate(''click''); }; const result = () => comp.find(''p'').text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, ''When text is entered into the input element and the button is clicked, the MagicEightBall component should return a p element that contains a random element from the possibleAnswers array.'');}' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find(''input'').simulate(''change'', { target: { value: ''test?'' }}); comp.find(''button'').simulate(''click''); }; const result = () => comp.find(''p'').text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10);}' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.english.md index 236748b989..2c3a9e5799 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use-array.filter-to-dynamically-filter-an-array.english.md @@ -22,15 +22,15 @@ In the code editor, MyComponent's state is initia ```yml tests: - text: MyComponent should exist and render to the page. - testString: assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find('MyComponent').length, 1, 'MyComponent should exist and render to the page.'); + testString: assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find('MyComponent').length, 1); - text: MyComponent's state should be initialized to an array of six users.") testString: assert(Array.isArray(Enzyme.mount(React.createElement(MyComponent)).state('users')) === true && Enzyme.mount(React.createElement(MyComponent)).state('users').length === 6, "MyComponent's state should be initialized to an array of six users."); - text: MyComponent should return a div, an h1, and then an unordered list containing li elements for every user whose online status is set to true. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MyComponent)); const users = (bool) => ({users:[ { username: ''Jeff'', online: bool }, { username: ''Alan'', online: bool }, { username: ''Mary'', online: bool }, { username: ''Jim'', online: bool }, { username: ''Laura'', online: bool } ]}); const result = () => comp.find(''li'').length; const _1 = result(); const _2 = () => { comp.setState(users(true)); return waitForIt(() => result()) }; const _3 = () => { comp.setState(users(false)); return waitForIt(() => result()) }; const _4 = () => { comp.setState({ users: [] }); return waitForIt(() => result()) }; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); assert(comp.find(''div'').length === 1 && comp.find(''h1'').length === 1 && comp.find(''ul'').length === 1 && _1 === 4 && _2_val === 5 && _3_val === 0 && _4_val === 0, ''MyComponent should return a div, an h1, and then an unordered list containing li elements for every user whose online status is set to true.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MyComponent)); const users = (bool) => ({users:[ { username: ''Jeff'', online: bool }, { username: ''Alan'', online: bool }, { username: ''Mary'', online: bool }, { username: ''Jim'', online: bool }, { username: ''Laura'', online: bool } ]}); const result = () => comp.find(''li'').length; const _1 = result(); const _2 = () => { comp.setState(users(true)); return waitForIt(() => result()) }; const _3 = () => { comp.setState(users(false)); return waitForIt(() => result()) }; const _4 = () => { comp.setState({ users: [] }); return waitForIt(() => result()) }; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); assert(comp.find(''div'').length === 1 && comp.find(''h1'').length === 1 && comp.find(''ul'').length === 1 && _1 === 4 && _2_val === 5 && _3_val === 0 && _4_val === 0); }; ' - text: MyComponent should render li elements that contain the username of each online user. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MyComponent)); const users = (bool) => ({users:[ { username: ''Jeff'', online: bool }, { username: ''Alan'', online: bool }, { username: ''Mary'', online: bool }, { username: ''Jim'', online: bool }, { username: ''Laura'', online: bool } ]}); const ul = () => { comp.setState(users(true)); return waitForIt(() => comp.find(''ul'').html()) }; const html = await ul(); assert(html === ''
  • Jeff
  • Alan
  • Mary
  • Jim
  • Laura
'', ''MyComponent should render li elements that contain the username of each online user.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MyComponent)); const users = (bool) => ({users:[ { username: ''Jeff'', online: bool }, { username: ''Alan'', online: bool }, { username: ''Mary'', online: bool }, { username: ''Jim'', online: bool }, { username: ''Laura'', online: bool } ]}); const ul = () => { comp.setState(users(true)); return waitForIt(() => comp.find(''ul'').html()) }; const html = await ul(); assert(html === ''
  • Jeff
  • Alan
  • Mary
  • Jim
  • Laura
''); }; ' - text: Each list item element should have a unique key attribute. - testString: assert((() => { const ul = Enzyme.mount(React.createElement(MyComponent)).find('ul'); console.log(ul.debug()); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key() ]); return keys.size === 4; })(), 'Each list item element should have a unique key attribute.'); + testString: assert((() => { const ul = Enzyme.mount(React.createElement(MyComponent)).find('ul'); console.log(ul.debug()); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key() ]); return keys.size === 4; })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.english.md index 7748d9f7f4..037442a484 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use-array.map-to-dynamically-render-elements.english.md @@ -24,17 +24,17 @@ Inside the constructor, create a this.state object and ```yml tests: - text: The MyToDoList component should exist and render to the page. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').length === 1; })(), 'The MyToDoList component should exist and render to the page.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').length === 1; })()); - text: The first child of MyToDoList should be a textarea element. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').children().childAt(0).type() === 'textarea'; })(), 'The first child of MyToDoList should be a textarea element.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').children().childAt(0).type() === 'textarea'; })()); - text: The third child of MyToDoList should be a button element. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').children().childAt(2).type() === 'button'; })(), 'The third child of MyToDoList should be a button element.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').children().childAt(2).type() === 'button'; })()); - text: The state of MyToDoList should be initialized with toDoList as an empty array. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return Array.isArray(initialState.toDoList) === true && initialState.toDoList.length === 0; })(), 'The state of MyToDoList should be initialized with toDoList as an empty array.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return Array.isArray(initialState.toDoList) === true && initialState.toDoList.length === 0; })()); - text: The state of MyToDoList should be initialized with userInput as an empty string. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return typeof initialState.userInput === 'string' && initialState.userInput.length === 0; })(), 'The state of MyToDoList should be initialized with userInput as an empty string.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return typeof initialState.userInput === 'string' && initialState.userInput.length === 0; })()); - text: When the Create List button is clicked, the MyToDoList component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the textarea element. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const simulateChange = (el, value) => el.simulate(''change'', {target: {value}}); const state_1 = () => { return waitForIt(() => mockedComponent.find(''ul'').find(''li''))}; const setInput = () => { return waitForIt(() => simulateChange(mockedComponent.find(''textarea''), "testA, testB, testC"))}; const click = () => { return waitForIt(() => mockedComponent.find(''button'').simulate(''click''))}; const state_2 = () => { return waitForIt(() => { const nodes = mockedComponent.find(''ul'').find(''li''); return { nodes, text: nodes.reduce((t, n) => t + n.text(), '''') }; })}; const setInput_2 = () => { return waitForIt(() => simulateChange(mockedComponent.find(''textarea''), "t1, t2, t3, t4, t5, t6"))}; const click_1 = () => { return waitForIt(() => mockedComponent.find(''button'').simulate(''click''))}; const state_3 = () => { return waitForIt(() => { const nodes = mockedComponent.find(''ul'').find(''li''); return { nodes, text: nodes.reduce((t, n) => t + n.text(), '''') }; })}; const awaited_state_1 = await state_1(); const awaited_setInput = await setInput(); const awaited_click = await click(); const awaited_state_2 = await state_2(); const awaited_setInput_2 = await setInput_2(); const awaited_click_1 = await click_1(); const awaited_state_3 = await state_3(); assert(awaited_state_1.length === 0 && awaited_state_2.nodes.length === 3 && awaited_state_3.nodes.length === 6 && awaited_state_2.text === ''testA testB testC'' && awaited_state_3.text === ''t1 t2 t3 t4 t5 t6'', ''When the Create List button is clicked, the MyToDoList component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the textarea element.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const simulateChange = (el, value) => el.simulate(''change'', {target: {value}}); const state_1 = () => { return waitForIt(() => mockedComponent.find(''ul'').find(''li''))}; const setInput = () => { return waitForIt(() => simulateChange(mockedComponent.find(''textarea''), "testA, testB, testC"))}; const click = () => { return waitForIt(() => mockedComponent.find(''button'').simulate(''click''))}; const state_2 = () => { return waitForIt(() => { const nodes = mockedComponent.find(''ul'').find(''li''); return { nodes, text: nodes.reduce((t, n) => t + n.text(), '''') }; })}; const setInput_2 = () => { return waitForIt(() => simulateChange(mockedComponent.find(''textarea''), "t1, t2, t3, t4, t5, t6"))}; const click_1 = () => { return waitForIt(() => mockedComponent.find(''button'').simulate(''click''))}; const state_3 = () => { return waitForIt(() => { const nodes = mockedComponent.find(''ul'').find(''li''); return { nodes, text: nodes.reduce((t, n) => t + n.text(), '''') }; })}; const awaited_state_1 = await state_1(); const awaited_setInput = await setInput(); const awaited_click = await click(); const awaited_state_2 = await state_2(); const awaited_setInput_2 = await setInput_2(); const awaited_click_1 = await click_1(); const awaited_state_3 = await state_3(); assert(awaited_state_1.length === 0 && awaited_state_2.nodes.length === 3 && awaited_state_3.nodes.length === 6 && awaited_state_2.text === ''testA testB testC'' && awaited_state_3.text === ''t1 t2 t3 t4 t5 t6''); }; ' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-default-props.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use-default-props.english.md index fab9da4f48..83e7640e17 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-default-props.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use-default-props.english.md @@ -21,9 +21,9 @@ The code editor shows a ShoppingCart component. Define default prop ```yml tests: - text: The ShoppingCart component should render. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })(), 'The ShoppingCart component should render.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })()); - text: 'The ShoppingCart component should have a default prop of { items: 0 }.' - testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); mockedComponent.setProps({items: undefined}); return mockedComponent.find(''ShoppingCart'').props().items === 0; })(), ''The ShoppingCart component should have a default prop of { items: 0 }.'');' + testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); mockedComponent.setProps({items: undefined}); return mockedComponent.find(''ShoppingCart'').props().items === 0; })());' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.english.md index 80e4c35e86..cf8246cff1 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.english.md @@ -26,11 +26,11 @@ Define propTypes for the Items component to require ShoppingCart
component should render. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })(), 'The ShoppingCart component should render.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })()); - text: The Items component should render. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').length === 1; })(), 'The Items component should render.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').length === 1; })()); - text: The Items component should include a propTypes check that requires quantity to be a number. - testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/ /g, ''); return noWhiteSpace.includes('quantity:PropTypes.number.isRequired') && noWhiteSpace.includes('Items.propTypes='); })(), 'The Items component should include a propTypes check that requires quantity to be a number.'); + testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/ /g, ''); return noWhiteSpace.includes('quantity:PropTypes.number.isRequired') && noWhiteSpace.includes('Items.propTypes='); })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-react-to-render-nested-components.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use-react-to-render-nested-components.english.md index 78a75b8270..47cef12e86 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-react-to-render-nested-components.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use-react-to-render-nested-components.english.md @@ -22,13 +22,13 @@ There are two functional components defined in the code editor, called Typ ```yml tests: - text: The TypesOfFood component should return a single div element. - testString: assert(Enzyme.shallow(React.createElement(TypesOfFood)).type() === 'div', 'The TypesOfFood component should return a single div element.'); + testString: assert(Enzyme.shallow(React.createElement(TypesOfFood)).type() === 'div'); - text: The TypesOfFood component should return the Fruits component. - testString: assert(Enzyme.shallow(React.createElement(TypesOfFood)).props().children[1].type.name === 'Fruits', 'The TypesOfFood component should return the Fruits component.'); + testString: assert(Enzyme.shallow(React.createElement(TypesOfFood)).props().children[1].type.name === 'Fruits'); - text: The Fruits component should return the TypesOfFruit component. - testString: assert(Enzyme.mount(React.createElement(TypesOfFood)).find('h2').html() === '

Fruits:

', 'The Fruits component should return the TypesOfFruit component.'); + testString: assert(Enzyme.mount(React.createElement(TypesOfFood)).find('h2').html() === '

Fruits:

'); - text: The TypesOfFruit component should return the h2 and ul elements. - testString: assert(Enzyme.mount(React.createElement(TypesOfFood)).find('ul').text() === 'ApplesBlueberriesStrawberriesBananas', 'The TypesOfFruit component should return the h2 and ul elements.'); + testString: assert(Enzyme.mount(React.createElement(TypesOfFood)).find('ul').text() === 'ApplesBlueberriesStrawberriesBananas'); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-state-to-toggle-an-element.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use-state-to-toggle-an-element.english.md index af17948e6c..b11a935584 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-state-to-toggle-an-element.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use-state-to-toggle-an-element.english.md @@ -24,11 +24,11 @@ Finally, click the button to see the conditional rendering of the component base ```yml tests: - text: MyComponent should return a div element which contains a button. - testString: assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find('div').find('button').length, 1, 'MyComponent should return a div element which contains a button.'); + testString: assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find('div').find('button').length, 1); - text: The state of MyComponent should initialize with a visibility property set to false. - testString: assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).state('visibility'), false, 'The state of MyComponent should initialize with a visibility property set to false.'); + testString: assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).state('visibility'), false); - text: Clicking the button element should toggle the visibility property in state between true and false. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ visibility: false }); return waitForIt(() => mockedComponent.state(''visibility'')); }; const second = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent.state(''visibility'')); }; const third = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent.state(''visibility'')); }; const firstValue = await first(); const secondValue = await second(); const thirdValue = await third(); assert(!firstValue && secondValue && !thirdValue, ''Clicking the button element should toggle the visibility property in state between true and false.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ visibility: false }); return waitForIt(() => mockedComponent.state(''visibility'')); }; const second = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent.state(''visibility'')); }; const third = () => { mockedComponent.find(''button'').simulate(''click''); return waitForIt(() => mockedComponent.state(''visibility'')); }; const firstValue = await first(); const secondValue = await second(); const thirdValue = await third(); assert(!firstValue && secondValue && !thirdValue); }; ' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.english.md index dbda59470b..13e3abca2d 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentdidmount.english.md @@ -22,11 +22,11 @@ There is a mock API call in componentDidMount(). It sets state afte ```yml tests: - text: MyComponent should render a div element which wraps an h1 tag. - testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return (mockedComponent.find('div').length === 1 && mockedComponent.find('h1').length === 1); })(), 'MyComponent should render a div element which wraps an h1 tag.'); + testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return (mockedComponent.find('div').length === 1 && mockedComponent.find('h1').length === 1); })()); - text: Component state should be updated with a timeout function in componentDidMount. - testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return new RegExp('setTimeout(.|\n)+setState(.|\n)+activeUsers').test(String(mockedComponent.instance().componentDidMount)); })(), 'Component state should be updated with a timeout function in componentDidMount.'); + testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return new RegExp('setTimeout(.|\n)+setState(.|\n)+activeUsers').test(String(mockedComponent.instance().componentDidMount)); })()); - text: The h1 tag should render the activeUsers value from MyComponent's state. - testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ activeUsers: 1237 }); return mockedComponent.find(''h1'').text(); }; const second = () => { mockedComponent.setState({ activeUsers: 1000 }); return mockedComponent.find(''h1'').text(); }; assert(new RegExp(''1237'').test(first()) && new RegExp(''1000'').test(second()), ''The h1 tag should render the activeUsers value from MyComponent's state.''); }; ' + testString: 'async () => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ activeUsers: 1237 }); return mockedComponent.find(''h1'').text(); }; const second = () => { mockedComponent.setState({ activeUsers: 1000 }); return mockedComponent.find(''h1'').text(); }; assert(new RegExp(''1237'').test(first()) && new RegExp(''1000'').test(second())); }; ' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.english.md b/curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.english.md index 1ebf41c6dc..83d34b2d7d 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/use-the-lifecycle-method-componentwillmount.english.md @@ -32,9 +32,9 @@ The componentWillMount() method is called before the render() ```yml tests: - text: MyComponent should render a div element. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').length === 1; })(), 'MyComponent should render a div element.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').length === 1; })()); - text: console.log should be called in componentWillMount. - testString: assert((function() { const lifecycle = React.createElement(MyComponent).type.prototype.componentWillMount.toString().replace(/ /g,''); return lifecycle.includes('console.log('); })(), 'console.log should be called in componentWillMount.'); + testString: assert((function() { const lifecycle = React.createElement(MyComponent).type.prototype.componentWillMount.toString().replace(/ /g,''); return lifecycle.includes('console.log('); })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/write-a-react-component-from-scratch.english.md b/curriculum/challenges/english/03-front-end-libraries/react/write-a-react-component-from-scratch.english.md index ebef357540..911284ba89 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/write-a-react-component-from-scratch.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/write-a-react-component-from-scratch.english.md @@ -22,11 +22,11 @@ Render this component to the DOM using ReactDOM.render(). There is ```yml tests: - text: There should be a React component called MyComponent. - testString: getUserInput => assert(getUserInput('index').replace(/\s/g, '').includes('classMyComponentextendsReact.Component{'), 'There should be a React component called MyComponent.'); + testString: getUserInput => assert(getUserInput('index').replace(/\s/g, '').includes('classMyComponentextendsReact.Component{')); - text: MyComponent should contain an h1 tag with text My First React Component! Case and punctuation matter. - testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('h1').text() === 'My First React Component!'; })(), 'MyComponent should contain an h1 tag with text My First React Component! Case and punctuation matter.'); + testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('h1').text() === 'My First React Component!'; })()); - text: MyComponent should render to the DOM. - testString: assert(document.getElementById('challenge-node').childNodes.length === 1, 'MyComponent should render to the DOM.'); + testString: assert(document.getElementById('challenge-node').childNodes.length === 1); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/react/write-a-simple-counter.english.md b/curriculum/challenges/english/03-front-end-libraries/react/write-a-simple-counter.english.md index 42045d6a9c..304e6d33bb 100644 --- a/curriculum/challenges/english/03-front-end-libraries/react/write-a-simple-counter.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/react/write-a-simple-counter.english.md @@ -22,15 +22,15 @@ The Counter component keeps track of a count value in ```yml tests: - text: Counter should return a div element which contains three buttons with text content in this order Increment!, Decrement!, Reset. - testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(Counter)); return (mockedComponent.find('.inc').text() === 'Increment!' && mockedComponent.find('.dec').text() === 'Decrement!' && mockedComponent.find('.reset').text() === 'Reset'); })(), 'Counter should return a div element which contains three buttons with text content in this order Increment!, Decrement!, Reset.'); + testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(Counter)); return (mockedComponent.find('.inc').text() === 'Increment!' && mockedComponent.find('.dec').text() === 'Decrement!' && mockedComponent.find('.reset').text() === 'Reset'); })()); - text: The state of Counter should initialize with a count property set to 0. - testString: assert.strictEqual(Enzyme.mount(React.createElement(Counter)).state('count'), 0, 'The state of Counter should initialize with a count property set to 0.'); + testString: assert.strictEqual(Enzyme.mount(React.createElement(Counter)).state('count'), 0); - text: Clicking the increment button should increment the count by 1. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const first = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state(''count'')); }; const second = () => { mockedComponent.find(''.inc'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1, ''Clicking the increment button should increment the count by 1.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const first = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state(''count'')); }; const second = () => { mockedComponent.find(''.inc'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1); }; ' - text: Clicking the decrement button should decrement the count by 1. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const first = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state(''count'')); }; const second = () => { mockedComponent.find(''.dec'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === -1, ''Clicking the decrement button should decrement the count by 1.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const first = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state(''count'')); }; const second = () => { mockedComponent.find(''.dec'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === -1); }; ' - text: Clicking the reset button should reset the count to 0. - testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const init = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state(''count'')); }; const increment = () => { mockedComponent.find(''.inc'').simulate(''click''); mockedComponent.find(''.inc'').simulate(''click''); mockedComponent.find(''.inc'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const decrement = () => { mockedComponent.find(''.dec'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const reset = () => { mockedComponent.find(''.reset'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const firstValue = await init(); const secondValue = await increment(); const thirdValue = await decrement(); const fourthValue = await reset(); assert(firstValue === 0 && secondValue === 3 && thirdValue === 2 && fourthValue === 0, ''Clicking the reset button should reset the count to 0.''); }; ' + testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const init = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state(''count'')); }; const increment = () => { mockedComponent.find(''.inc'').simulate(''click''); mockedComponent.find(''.inc'').simulate(''click''); mockedComponent.find(''.inc'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const decrement = () => { mockedComponent.find(''.dec'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const reset = () => { mockedComponent.find(''.reset'').simulate(''click''); return waitForIt(() => mockedComponent.state(''count'')); }; const firstValue = await init(); const secondValue = await increment(); const thirdValue = await decrement(); const fourthValue = await reset(); assert(firstValue === 0 && secondValue === 3 && thirdValue === 2 && fourthValue === 0); }; ' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/combine-multiple-reducers.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/combine-multiple-reducers.english.md index 0bcc50191b..20cc8c7557 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/combine-multiple-reducers.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/combine-multiple-reducers.english.md @@ -32,13 +32,13 @@ There are counterReducer() and authReducer() functions ```yml tests: - text: The counterReducer should increment and decrement the state. - testString: 'assert((function() { const initalState = store.getState().count; store.dispatch({type: INCREMENT}); store.dispatch({type: INCREMENT}); const firstState = store.getState().count; store.dispatch({type: DECREMENT}); const secondState = store.getState().count; return firstState === initalState + 2 && secondState === firstState - 1 })(), ''The counterReducer should increment and decrement the state.'');' + testString: 'assert((function() { const initalState = store.getState().count; store.dispatch({type: INCREMENT}); store.dispatch({type: INCREMENT}); const firstState = store.getState().count; store.dispatch({type: DECREMENT}); const secondState = store.getState().count; return firstState === initalState + 2 && secondState === firstState - 1 })());' - text: The authReducer should toggle the state of authenticated between true and false. - testString: 'assert((function() { store.dispatch({type: LOGIN}); const loggedIn = store.getState().auth.authenticated; store.dispatch({type: LOGOUT}); const loggedOut = store.getState().auth.authenticated; return loggedIn === true && loggedOut === false })(), ''The authReducer should toggle the state of authenticated between true and false.'');' + testString: 'assert((function() { store.dispatch({type: LOGIN}); const loggedIn = store.getState().auth.authenticated; store.dispatch({type: LOGOUT}); const loggedOut = store.getState().auth.authenticated; return loggedIn === true && loggedOut === false })());' - text: 'The store state should have two keys: count, which holds a number, and auth, which holds an object. The auth object should have a property of authenticated, which holds a boolean.' - testString: "assert((function() { const state = store.getState(); return typeof state.auth === 'object' && typeof state.auth.authenticated === 'boolean' && typeof state.count === 'number' })(), 'The store state should have two keys: count, which holds a number, and auth, which holds an object. The auth object should have a property of authenticated, which holds a boolean.');" + testString: "assert((function() { const state = store.getState(); return typeof state.auth === 'object' && typeof state.auth.authenticated === 'boolean' && typeof state.count === 'number' })());" - text: The rootReducer should be a function that combines the counterReducer and the authReducer. - testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/\s/g,''); return typeof rootReducer === 'function' && noWhiteSpace.includes('Redux.combineReducers') })(), 'The rootReducer should be a function that combines the counterReducer and the authReducer.'); + testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/\s/g,''); return typeof rootReducer === 'function' && noWhiteSpace.includes('Redux.combineReducers') })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/copy-an-object-with-object.assign.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/copy-an-object-with-object.assign.english.md index 0b62c2ce53..117de04110 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/copy-an-object-with-object.assign.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/copy-an-object-with-object.assign.english.md @@ -23,13 +23,13 @@ The Redux state and actions were modified to handle an object for t ```yml tests: - text: The Redux store should exist and initialize with a state that is equivalent to the defaultState object declared on line 1. - testString: 'assert((function() { const expectedState = { user: ''CamperBot'', status: ''offline'', friends: ''732,982'', community: ''freeCodeCamp'' }; const initialState = store.getState(); return DeepEqual(expectedState, initialState); })(), ''The Redux store should exist and initialize with a state that is equivalent to the defaultState object declared on line 1.'');' + testString: 'assert((function() { const expectedState = { user: ''CamperBot'', status: ''offline'', friends: ''732,982'', community: ''freeCodeCamp'' }; const initialState = store.getState(); return DeepEqual(expectedState, initialState); })());' - text: wakeUp and immutableReducer both should be functions. - testString: assert(typeof wakeUp === 'function' && typeof immutableReducer === 'function', 'wakeUp and immutableReducer both should be functions.'); + testString: assert(typeof wakeUp === 'function' && typeof immutableReducer === 'function'); - text: Dispatching an action of type ONLINE should update the property status in state to online and should NOT mutate state. - testString: 'assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch({type: ''ONLINE''}); const finalState = store.getState(); const expectedState = { user: ''CamperBot'', status: ''online'', friends: ''732,982'', community: ''freeCodeCamp'' }; return isFrozen && DeepEqual(finalState, expectedState); })(), ''Dispatching an action of type ONLINE should update the property status in state to online and should NOT mutate state.'');' + testString: 'assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch({type: ''ONLINE''}); const finalState = store.getState(); const expectedState = { user: ''CamperBot'', status: ''online'', friends: ''732,982'', community: ''freeCodeCamp'' }; return isFrozen && DeepEqual(finalState, expectedState); })());' - text: Object.assign should be used to return new state. - testString: getUserInput => assert(getUserInput('index').includes('Object.assign'), 'Object.assign should be used to return new state.'); + testString: getUserInput => assert(getUserInput('index').includes('Object.assign')); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/create-a-redux-store.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/create-a-redux-store.english.md index 0bcea9c3e9..97e57cba16 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/create-a-redux-store.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/create-a-redux-store.english.md @@ -25,9 +25,9 @@ Declare a store variable and assign it to the createStore()LOGIN. - testString: assert((function() { return action.type === 'LOGIN' })(), 'The action should have a key property type with value LOGIN.'); + testString: assert((function() { return action.type === 'LOGIN' })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/define-an-action-creator.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/define-an-action-creator.english.md index ed34d453d3..efef7516cc 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/define-an-action-creator.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/define-an-action-creator.english.md @@ -21,11 +21,11 @@ Define a function named actionCreator() that returns the acti ```yml tests: - text: The function actionCreator should exist. - testString: assert(typeof actionCreator === 'function', 'The function actionCreator should exist.'); + testString: assert(typeof actionCreator === 'function'); - text: Running the actionCreator function should return the action object. - testString: assert(typeof action === 'object', 'Running the actionCreator function should return the action object.'); + testString: assert(typeof action === 'object'); - text: The returned action should have a key property type with value LOGIN. - testString: assert(action.type === 'LOGIN', 'The returned action should have a key property type with value LOGIN.'); + testString: assert(action.type === 'LOGIN'); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/dispatch-an-action-event.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/dispatch-an-action-event.english.md index 41b3a62aaa..fec303ba84 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/dispatch-an-action-event.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/dispatch-an-action-event.english.md @@ -28,11 +28,11 @@ The Redux store in the code editor has an initialized state that's an object con ```yml tests: - text: Calling the function loginAction should return an object with type property set to the string LOGIN. - testString: assert(loginAction().type === 'LOGIN', 'Calling the function loginAction should return an object with type property set to the string LOGIN.'); + testString: assert(loginAction().type === 'LOGIN'); - text: The store should be initialized with an object with property login set to false. - testString: assert(store.getState().login === false, 'The store should be initialized with an object with property login set to false.'); + testString: assert(store.getState().login === false); - text: The store.dispatch() method should be used to dispatch an action of type LOGIN. - testString: "getUserInput => assert((function() { let noWhiteSpace = getUserInput('index').replace(/\\s/g,''); return noWhiteSpace.includes('store.dispatch(loginAction())') || noWhiteSpace.includes('store.dispatch({type: \\'LOGIN\\'})') === true })(), 'The store.dispatch() method should be used to dispatch an action of type LOGIN.');" + testString: "getUserInput => assert((function() { let noWhiteSpace = getUserInput('index').replace(/\\s/g,''); return noWhiteSpace.includes('store.dispatch(loginAction())') || noWhiteSpace.includes('store.dispatch({type: \\'LOGIN\\'})') === true })());" ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/get-state-from-the-redux-store.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/get-state-from-the-redux-store.english.md index 5a6029ab7c..046f4ef59e 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/get-state-from-the-redux-store.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/get-state-from-the-redux-store.english.md @@ -21,9 +21,9 @@ The code from the previous challenge is re-written more concisely in the code ed ```yml tests: - text: The redux store should have a value of 5 for the initial state. - testString: assert(store.getState()===5, 'The redux store should have a value of 5 for the initial state.'); + testString: assert(store.getState()===5); - text: A variable currentState should exist and should be assigned the current state of the Redux store. - testString: getUserInput => assert(currentState === 5 && getUserInput('index').includes('store.getState()'), 'A variable currentState should exist and should be assigned the current state of the Redux store.'); + testString: getUserInput => assert(currentState === 5 && getUserInput('index').includes('store.getState()')); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/handle-an-action-in-the-store.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/handle-an-action-in-the-store.english.md index d49dbd86b9..f0c92e474d 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/handle-an-action-in-the-store.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/handle-an-action-in-the-store.english.md @@ -22,13 +22,13 @@ The code editor has the previous example as well as the start of a reducer ```yml tests: - text: Calling the function loginAction should return an object with type property set to the string LOGIN. - testString: assert(loginAction().type === 'LOGIN', 'Calling the function loginAction should return an object with type property set to the string LOGIN.'); + testString: assert(loginAction().type === 'LOGIN'); - text: The store should be initialized with an object with property login set to false. - testString: assert(store.getState().login === false, 'The store should be initialized with an object with property login set to false.'); + testString: assert(store.getState().login === false); - text: Dispatching loginAction should update the login property in the store state to true. - testString: assert((function() { const initialState = store.getState(); store.dispatch(loginAction()); const afterState = store.getState(); return initialState.login === false && afterState.login === true })(), 'Dispatching loginAction should update the login property in the store state to true.'); + testString: assert((function() { const initialState = store.getState(); store.dispatch(loginAction()); const afterState = store.getState(); return initialState.login === false && afterState.login === true })()); - text: If the action is not of type LOGIN, the store should return the current state. - testString: 'assert((function() { store.dispatch({type: ''__TEST__ACTION__''}); let afterTest = store.getState(); return typeof afterTest === ''object'' && afterTest.hasOwnProperty(''login'') })(), ''If the action is not of type LOGIN, the store should return the current state.'');' + testString: 'assert((function() { store.dispatch({type: ''__TEST__ACTION__''}); let afterTest = store.getState(); return typeof afterTest === ''object'' && afterTest.hasOwnProperty(''login'') })());' ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/never-mutate-state.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/never-mutate-state.english.md index cfa1500a8a..e30eb6e185 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/never-mutate-state.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/never-mutate-state.english.md @@ -23,11 +23,11 @@ There is a store and reducer in the code editor for ma ```yml tests: - text: The Redux store should exist and initialize with a state equal to the todos array in the code editor. - testString: assert((function() { const todos = [ 'Go to the store', 'Clean the house', 'Cook dinner', 'Learn to code' ]; const initialState = store.getState(); return Array.isArray(initialState) && initialState.join(',') === todos.join(','); })(), 'The Redux store should exist and initialize with a state equal to the todos array in the code editor.'); + testString: assert((function() { const todos = [ 'Go to the store', 'Clean the house', 'Cook dinner', 'Learn to code' ]; const initialState = store.getState(); return Array.isArray(initialState) && initialState.join(',') === todos.join(','); })()); - text: addToDo and immutableReducer both should be functions. - testString: assert(typeof addToDo === 'function' && typeof immutableReducer === 'function', 'addToDo and immutableReducer both should be functions.'); + testString: assert(typeof addToDo === 'function' && typeof immutableReducer === 'function'); - text: Dispatching an action of type ADD_TO_DO on the Redux store should add a todo item and should NOT mutate state. - testString: assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addToDo('__TEST__TO__DO__')); const finalState = store.getState(); const expectedState = [ 'Go to the store', 'Clean the house', 'Cook dinner', 'Learn to code', '__TEST__TO__DO__' ]; return( isFrozen && DeepEqual(finalState, expectedState)); })(), 'Dispatching an action of type ADD_TO_DO on the Redux store should add a todo item and should NOT mutate state.'); + testString: assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addToDo('__TEST__TO__DO__')); const finalState = store.getState(); const expectedState = [ 'Go to the store', 'Clean the house', 'Cook dinner', 'Learn to code', '__TEST__TO__DO__' ]; return( isFrozen && DeepEqual(finalState, expectedState)); })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/register-a-store-listener.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/register-a-store-listener.english.md index e2fba328e9..5c6abe0430 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/register-a-store-listener.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/register-a-store-listener.english.md @@ -21,11 +21,11 @@ Write a callback function that increments the global variable count ```yml tests: - text: Dispatching the ADD action on the store should increment the state by 1. - testString: 'assert((function() { const initialState = store.getState(); store.dispatch({ type: ''ADD'' }); const newState = store.getState(); return newState === (initialState + 1); })(), ''Dispatching the ADD action on the store should increment the state by 1.'');' + testString: 'assert((function() { const initialState = store.getState(); store.dispatch({ type: ''ADD'' }); const newState = store.getState(); return newState === (initialState + 1); })());' - text: There should be a listener function subscribed to the store using store.subscribe. - testString: getUserInput => assert(getUserInput('index').includes('store.subscribe('), 'There should be a listener function subscribed to the store using store.subscribe.'); + testString: getUserInput => assert(getUserInput('index').includes('store.subscribe(')); - text: The callback to store.subscribe should also increment the global count variable as the store is updated. - testString: assert(store.getState() === count, 'The callback to store.subscribe should also increment the global count variable as the store is updated.'); + testString: assert(store.getState() === count); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/remove-an-item-from-an-array.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/remove-an-item-from-an-array.english.md index 4a1fe48d28..aef58a9120 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/remove-an-item-from-an-array.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/remove-an-item-from-an-array.english.md @@ -21,11 +21,11 @@ The reducer and action creator were modified to remove an item from an array bas ```yml tests: - text: The Redux store should exist and initialize with a state equal to [0,1,2,3,4,5] - testString: assert((function() { const initialState = store.getState(); return (Array.isArray(initialState) === true && DeepEqual(initialState, [0, 1, 2, 3, 4, 5])); })(), 'The Redux store should exist and initialize with a state equal to [0,1,2,3,4,5]'); + testString: assert((function() { const initialState = store.getState(); return (Array.isArray(initialState) === true && DeepEqual(initialState, [0, 1, 2, 3, 4, 5])); })()); - text: removeItem and immutableReducer both should be functions. - testString: assert(typeof removeItem === 'function' && typeof immutableReducer === 'function', 'removeItem and immutableReducer both should be functions.'); + testString: assert(typeof removeItem === 'function' && typeof immutableReducer === 'function'); - text: Dispatching the removeItem action creator should remove items from the state and should NOT mutate state. - testString: assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(removeItem(3)); const state_1 = store.getState(); store.dispatch(removeItem(2)); const state_2 = store.getState(); store.dispatch(removeItem(0)); store.dispatch(removeItem(0)); store.dispatch(removeItem(0)); const state_3 = store.getState(); return isFrozen && DeepEqual(state_1, [0, 1, 2, 4, 5]) && DeepEqual(state_2, [0, 1, 4, 5]) && DeepEqual(state_3, [5]); })(), 'Dispatching the removeItem action creator should remove items from the state and should NOT mutate state.'); + testString: assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(removeItem(3)); const state_1 = store.getState(); store.dispatch(removeItem(2)); const state_2 = store.getState(); store.dispatch(removeItem(0)); store.dispatch(removeItem(0)); store.dispatch(removeItem(0)); const state_3 = store.getState(); return isFrozen && DeepEqual(state_1, [0, 1, 2, 4, 5]) && DeepEqual(state_2, [0, 1, 4, 5]) && DeepEqual(state_3, [5]); })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/send-action-data-to-the-store.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/send-action-data-to-the-store.english.md index 3d07c518b9..ba1ece02e1 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/send-action-data-to-the-store.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/send-action-data-to-the-store.english.md @@ -23,9 +23,9 @@ The action is dispatched at the bottom of the code. Once you're finished, run th ```yml tests: - text: The action creator addNoteText should return an object with keys type and text. - testString: assert((function() { const addNoteFn = addNoteText('__TEST__NOTE'); return addNoteFn.type === ADD_NOTE && addNoteFn.text === '__TEST__NOTE' })(), 'The action creator addNoteText should return an object with keys type and text.'); + testString: assert((function() { const addNoteFn = addNoteText('__TEST__NOTE'); return addNoteFn.type === ADD_NOTE && addNoteFn.text === '__TEST__NOTE' })()); - text: Dispatching an action of type ADD_NOTE with the addNoteText action creator should update the state to the string passed to the action creator. - testString: assert((function() { const initialState = store.getState(); store.dispatch(addNoteText('__TEST__NOTE')); const newState = store.getState(); return initialState !== newState && newState === '__TEST__NOTE' })(), 'Dispatching an action of type ADD_NOTE with the addNoteText action creator should update the state to the string passed to the action creator.'); + testString: assert((function() { const initialState = store.getState(); store.dispatch(addNoteText('__TEST__NOTE')); const newState = store.getState(); return initialState !== newState && newState === '__TEST__NOTE' })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.english.md index 329b14d213..416cb74f42 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.english.md @@ -22,17 +22,17 @@ The code editor has a store, actions, and action creators set up for you. Fill i ```yml tests: - text: Calling the function loginUser should return an object with type property set to the string LOGIN. - testString: assert(loginUser().type === 'LOGIN', 'Calling the function loginUser should return an object with type property set to the string LOGIN.'); + testString: assert(loginUser().type === 'LOGIN'); - text: Calling the function logoutUser should return an object with type property set to the string LOGOUT. - testString: assert(logoutUser().type === 'LOGOUT', 'Calling the function logoutUser should return an object with type property set to the string LOGOUT.'); + testString: assert(logoutUser().type === 'LOGOUT'); - text: The store should be initialized with an object with an authenticated property set to false. - testString: assert(store.getState().authenticated === false, 'The store should be initialized with an object with an authenticated property set to false.'); + testString: assert(store.getState().authenticated === false); - text: Dispatching loginUser should update the authenticated property in the store state to true. - testString: assert((function() { const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })(), 'Dispatching loginUser should update the authenticated property in the store state to true.'); + testString: assert((function() { const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })()); - text: Dispatching logoutUser should update the authenticated property in the store state to false. - testString: assert((function() { store.dispatch(loginUser()); const loggedIn = store.getState(); store.dispatch(logoutUser()); const afterLogout = store.getState(); return loggedIn.authenticated === true && afterLogout.authenticated === false })(), 'Dispatching logoutUser should update the authenticated property in the store state to false.'); + testString: assert((function() { store.dispatch(loginUser()); const loggedIn = store.getState(); store.dispatch(logoutUser()); const afterLogout = store.getState(); return loggedIn.authenticated === true && afterLogout.authenticated === false })()); - text: The authReducer function should handle multiple action types with a switch statement. - testString: getUserInput => assert( getUserInput('index').toString().includes('switch') && getUserInput('index').toString().includes('case') && getUserInput('index').toString().includes('default'), 'The authReducer function should handle multiple action types with a switch statement.'); + testString: getUserInput => assert( getUserInput('index').toString().includes('switch') && getUserInput('index').toString().includes('case') && getUserInput('index').toString().includes('default')); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/use-const-for-action-types.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/use-const-for-action-types.english.md index bc3ff0c977..0bf3faff05 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/use-const-for-action-types.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/use-const-for-action-types.english.md @@ -22,21 +22,21 @@ Declare LOGIN and LOGOUT as const values ```yml tests: - text: Calling the function loginUser should return an object with type property set to the string LOGIN. - testString: assert(loginUser().type === 'LOGIN', 'Calling the function loginUser should return an object with type property set to the string LOGIN.'); + testString: assert(loginUser().type === 'LOGIN'); - text: Calling the function logoutUser should return an object with type property set to the string LOGOUT. - testString: assert(logoutUser().type === 'LOGOUT', 'Calling the function logoutUser should return an object with type property set to the string LOGOUT.'); + testString: assert(logoutUser().type === 'LOGOUT'); - text: The store should be initialized with an object with property login set to false. - testString: assert(store.getState().authenticated === false, 'The store should be initialized with an object with property login set to false.'); + testString: assert(store.getState().authenticated === false); - text: Dispatching loginUser should update the login property in the store state to true. - testString: assert((function() { const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })(), 'Dispatching loginUser should update the login property in the store state to true.'); + testString: assert((function() { const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })()); - text: Dispatching logoutUser should update the login property in the store state to false. - testString: assert((function() { store.dispatch(loginUser()); const loggedIn = store.getState(); store.dispatch(logoutUser()); const afterLogout = store.getState(); return loggedIn.authenticated === true && afterLogout.authenticated === false })(), 'Dispatching logoutUser should update the login property in the store state to false.'); + testString: assert((function() { store.dispatch(loginUser()); const loggedIn = store.getState(); store.dispatch(logoutUser()); const afterLogout = store.getState(); return loggedIn.authenticated === true && afterLogout.authenticated === false })()); - text: The authReducer function should handle multiple action types with a switch statement. - testString: getUserInput => assert((function() { return typeof authReducer === 'function' && getUserInput('index').toString().includes('switch') && getUserInput('index').toString().includes('case') && getUserInput('index').toString().includes('default') })(), 'The authReducer function should handle multiple action types with a switch statement.'); + testString: getUserInput => assert((function() { return typeof authReducer === 'function' && getUserInput('index').toString().includes('switch') && getUserInput('index').toString().includes('case') && getUserInput('index').toString().includes('default') })()); - text: LOGIN and LOGOUT should be declared as const values and should be assigned strings of LOGINand LOGOUT. - testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').toString().replace(/\s/g,''); return (noWhiteSpace.includes('constLOGIN=\'LOGIN\'') || noWhiteSpace.includes('constLOGIN="LOGIN"')) && (noWhiteSpace.includes('constLOGOUT=\'LOGOUT\'') || noWhiteSpace.includes('constLOGOUT="LOGOUT"')) })(), 'LOGIN and LOGOUT should be declared as const values and should be assigned strings of LOGINand LOGOUT.'); + testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').toString().replace(/\s/g,''); return (noWhiteSpace.includes('constLOGIN=\'LOGIN\'') || noWhiteSpace.includes('constLOGIN="LOGIN"')) && (noWhiteSpace.includes('constLOGOUT=\'LOGOUT\'') || noWhiteSpace.includes('constLOGOUT="LOGOUT"')) })()); - text: The action creators and the reducer should reference the LOGIN and LOGOUT constants. - testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').toString().replace(/\s/g,''); return noWhiteSpace.includes('caseLOGIN:') && noWhiteSpace.includes('caseLOGOUT:') && noWhiteSpace.includes('type:LOGIN') && noWhiteSpace.includes('type:LOGOUT') })(), 'The action creators and the reducer should reference the LOGIN and LOGOUT constants.'); + testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').toString().replace(/\s/g,''); return noWhiteSpace.includes('caseLOGIN:') && noWhiteSpace.includes('caseLOGOUT:') && noWhiteSpace.includes('type:LOGIN') && noWhiteSpace.includes('type:LOGOUT') })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.english.md index 34622143f2..4b5c3df882 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions.english.md @@ -24,15 +24,15 @@ Write both dispatches in the handleAsync() action creator. Dispatch ```yml tests: - text: The requestingData action creator should return an object of type equal to the value of REQUESTING_DATA. - testString: assert(requestingData().type === REQUESTING_DATA, 'The requestingData action creator should return an object of type equal to the value of REQUESTING_DATA.'); + testString: assert(requestingData().type === REQUESTING_DATA); - text: The receivedData action creator should return an object of type equal to the value of RECEIVED_DATA. - testString: assert(receivedData('data').type === RECEIVED_DATA, 'The receivedData action creator should return an object of type equal to the value of RECEIVED_DATA.'); + testString: assert(receivedData('data').type === RECEIVED_DATA); - text: asyncDataReducer should be a function. - testString: assert(typeof asyncDataReducer === 'function', 'asyncDataReducer should be a function.'); + testString: assert(typeof asyncDataReducer === 'function'); - text: Dispatching the requestingData action creator should update the store state property of fetching to true. - testString: assert((function() { const initialState = store.getState(); store.dispatch(requestingData()); const reqState = store.getState(); return initialState.fetching === false && reqState.fetching === true })(), 'Dispatching the requestingData action creator should update the store state property of fetching to true.'); + testString: assert((function() { const initialState = store.getState(); store.dispatch(requestingData()); const reqState = store.getState(); return initialState.fetching === false && reqState.fetching === true })()); - text: Dispatching handleAsync should dispatch the data request action and then dispatch the received data action after a delay. - testString: assert((function() { const noWhiteSpace = handleAsync.toString().replace(/\s/g,''); return noWhiteSpace.includes('dispatch(requestingData())') === true && noWhiteSpace.includes('dispatch(receivedData(data))') === true })(), 'Dispatching handleAsync should dispatch the data request action and then dispatch the received data action after a delay.'); + testString: assert((function() { const noWhiteSpace = handleAsync.toString().replace(/\s/g,''); return noWhiteSpace.includes('dispatch(requestingData())') === true && noWhiteSpace.includes('dispatch(receivedData(data))') === true })()); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.english.md index bceef79c8b..e68c53fb06 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/use-the-spread-operator-on-arrays.english.md @@ -23,13 +23,13 @@ Use the spread operator to return a new copy of state when a to-do is added. ```yml tests: - text: The Redux store should exist and initialize with a state equal to [Do not mutate state!]. - testString: assert((function() { const initialState = store.getState(); return ( Array.isArray(initialState) === true && initialState[0] === 'Do not mutate state!'); })(), 'The Redux store should exist and initialize with a state equal to [Do not mutate state!].'); + testString: assert((function() { const initialState = store.getState(); return ( Array.isArray(initialState) === true && initialState[0] === 'Do not mutate state!'); })()); - text: addToDo and immutableReducer both should be functions. - testString: assert(typeof addToDo === 'function' && typeof immutableReducer === 'function', 'addToDo and immutableReducer both should be functions.'); + testString: assert(typeof addToDo === 'function' && typeof immutableReducer === 'function'); - text: Dispatching an action of type ADD_TO_DO on the Redux store should add a todo item and should NOT mutate state. - testString: assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addToDo('__TEST__TO__DO__')); const finalState = store.getState(); const expectedState = [ 'Do not mutate state!', '__TEST__TO__DO__' ]; return( isFrozen && DeepEqual(finalState, expectedState)); })(), 'Dispatching an action of type ADD_TO_DO on the Redux store should add a todo item and should NOT mutate state.'); + testString: assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addToDo('__TEST__TO__DO__')); const finalState = store.getState(); const expectedState = [ 'Do not mutate state!', '__TEST__TO__DO__' ]; return( isFrozen && DeepEqual(finalState, expectedState)); })()); - text: The spread operator should be used to return new state. - testString: getUserInput => assert(getUserInput('index').includes('...state'), 'The spread operator should be used to return new state.'); + testString: getUserInput => assert(getUserInput('index').includes('...state')); ``` diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/write-a-counter-with-redux.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/write-a-counter-with-redux.english.md index 8b20a846b1..4eb73ecbae 100644 --- a/curriculum/challenges/english/03-front-end-libraries/redux/write-a-counter-with-redux.english.md +++ b/curriculum/challenges/english/03-front-end-libraries/redux/write-a-counter-with-redux.english.md @@ -21,17 +21,17 @@ In this lesson, you'll implement a simple counter with Redux from scratch. The b ```yml tests: - text: The action creator incAction should return an action object with type equal to the value of INCREMENT - testString: assert(incAction().type ===INCREMENT, 'The action creator incAction should return an action object with type equal to the value of INCREMENT'); + testString: assert(incAction().type ===INCREMENT); - text: The action creator decAction should return an action object with type equal to the value of DECREMENT - testString: assert(decAction().type === DECREMENT, 'The action creator decAction should return an action object with type equal to the value of DECREMENT'); + testString: assert(decAction().type === DECREMENT); - text: The Redux store should initialize with a state of 0. - testString: assert(store.getState() === 0, 'The Redux store should initialize with a state of 0.'); + testString: assert(store.getState() === 0); - text: Dispatching incAction on the Redux store should increment the state by 1. - testString: assert((function() { const initialState = store.getState(); store.dispatch(incAction()); const incState = store.getState(); return initialState + 1 === incState })(), 'Dispatching incAction on the Redux store should increment the state by 1.'); + testString: assert((function() { const initialState = store.getState(); store.dispatch(incAction()); const incState = store.getState(); return initialState + 1 === incState })()); - text: Dispatching decAction on the Redux store should decrement the state by 1. - testString: assert((function() { const initialState = store.getState(); store.dispatch(decAction()); const decState = store.getState(); return initialState - 1 === decState })(), 'Dispatching decAction on the Redux store should decrement the state by 1.'); + testString: assert((function() { const initialState = store.getState(); store.dispatch(decAction()); const decState = store.getState(); return initialState - 1 === decState })()); - text: counterReducer should be a function - testString: assert(typeof counterReducer === 'function', 'counterReducer should be a function'); + testString: assert(typeof counterReducer === 'function'); ```