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()
```yml
tests:
- text: The redux store exists.
- testString: assert(typeof store.getState === 'function', 'The redux store exists.');
+ testString: assert(typeof store.getState === 'function');
- text: The redux store has a value of 5 for the state.
- testString: assert(store.getState()=== 5, 'The redux store has a value of 5 for the state.');
+ testString: assert(store.getState()=== 5);
```
diff --git a/curriculum/challenges/english/03-front-end-libraries/redux/define-a-redux-action.english.md b/curriculum/challenges/english/03-front-end-libraries/redux/define-a-redux-action.english.md
index db7ba00ec0..ad45f47ed0 100644
--- a/curriculum/challenges/english/03-front-end-libraries/redux/define-a-redux-action.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/redux/define-a-redux-action.english.md
@@ -22,9 +22,9 @@ Writing a Redux action is as simple as declaring an object with a type property.
```yml
tests:
- text: An action object should exist.
- testString: assert((function() { return typeof action === 'object' })(), 'An action object should exist.');
+ testString: assert((function() { return typeof action === 'object' })());
- text: The action should have a key property type with value 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 LOGIN
and 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 LOGIN
and 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');
```