fix(curriculum): Remove unnecessary assert message argument from English Front End Libraries challenges - 02 (#36409)
* fix: removed assert msg argument * fix: removed more assert msg args * fix: removed more assert msg args
This commit is contained in:
committed by
Parth Parth
parent
d0d8282f86
commit
f2df76c099
@ -22,15 +22,15 @@ Render an instance of the <code>ReturnTempPassword</code> component in the paren
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>ResetPassword</code> component should return a single <code>div</code> element.
|
- text: The <code>ResetPassword</code> component should return a single <code>div</code> element.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().type() === 'div'; })(), 'The <code>ResetPassword</code> component should return a single <code>div</code> element.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().type() === 'div'; })());
|
||||||
- text: The fourth child of <code>ResetPassword</code> should be the <code>ReturnTempPassword</code> component.
|
- text: The fourth child of <code>ResetPassword</code> should be the <code>ReturnTempPassword</code> component.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().childAt(3).name() === 'ReturnTempPassword'; })(), 'The fourth child of <code>ResetPassword</code> should be the <code>ReturnTempPassword</code> component.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().childAt(3).name() === 'ReturnTempPassword'; })());
|
||||||
- text: The <code>ReturnTempPassword</code> component should have a prop called <code>tempPassword</code>.
|
- text: The <code>ReturnTempPassword</code> component should have a prop called <code>tempPassword</code>.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find('ReturnTempPassword').props().tempPassword; })(), 'The <code>ReturnTempPassword</code> component should have a prop called <code>tempPassword</code>.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find('ReturnTempPassword').props().tempPassword; })());
|
||||||
- text: The <code>tempPassword</code> prop of <code>ReturnTempPassword</code> should be equal to a string of at least <code>8</code> characters.
|
- text: The <code>tempPassword</code> prop of <code>ReturnTempPassword</code> should be equal to a string of at least <code>8</code> 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 <code>tempPassword</code> prop of <code>ReturnTempPassword</code> should be equal to a string of at least <code>8</code> 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 <code>ReturnTempPassword</code> component should display the password you create as the <code>tempPassword</code> prop within <code>strong</code> tags.
|
- text: The <code>ReturnTempPassword</code> component should display the password you create as the <code>tempPassword</code> prop within <code>strong</code> tags.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find('strong').text() === mockedComponent.find('ReturnTempPassword').props().tempPassword; })(), 'The <code>ReturnTempPassword</code> component should display the password you create as the <code>tempPassword</code> prop within <code>strong</code> tags.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find('strong').text() === mockedComponent.find('ReturnTempPassword').props().tempPassword; })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -23,13 +23,13 @@ Then, in <code>componentWillUnmount()</code>, remove this same event listener. Y
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: <code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.
|
- text: <code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.
|
||||||
testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').children().find('h1').length === 1; })(), '<code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> 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 <code>componentDidMount</code>.
|
- text: A keydown listener should be attached to the document in <code>componentDidMount</code>.
|
||||||
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 <code>componentDidMount</code>.');
|
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 <code>componentWillUnmount</code>.
|
- text: The keydown listener should be removed from the document in <code>componentWillUnmount</code>.
|
||||||
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 <code>componentWillUnmount</code>.');
|
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 <code>enter</code> should update its state and the rendered <code>h1</code> tag.
|
- text: Once the component has mounted, pressing <code>enter</code> should update its state and the rendered <code>h1</code> 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 <code>enter</code> should update its state and the rendered <code>h1</code> 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); }; '
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,17 +22,17 @@ If you have a large set of styles, you can assign a style <code>object</code> to
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>styles</code> variable should be an <code>object</code> with three properties.
|
- text: The <code>styles</code> variable should be an <code>object</code> with three properties.
|
||||||
testString: assert(Object.keys(styles).length === 3, 'The <code>styles</code> variable should be an <code>object</code> with three properties.');
|
testString: assert(Object.keys(styles).length === 3);
|
||||||
- text: The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.
|
- text: The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.
|
||||||
testString: assert(styles.color === 'purple', 'The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.');
|
testString: assert(styles.color === 'purple');
|
||||||
- text: The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.
|
- text: The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.
|
||||||
testString: assert(styles.fontSize === 40, 'The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.');
|
testString: assert(styles.fontSize === 40);
|
||||||
- text: The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.
|
- text: The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.
|
||||||
testString: assert(styles.border === "2px solid purple", 'The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.');
|
testString: assert(styles.border === "2px solid purple");
|
||||||
- text: The component should render a <code>div</code> element.
|
- text: The component should render a <code>div</code> element.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === 'div'; })(), 'The component should render a <code>div</code> element.');
|
testString: assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === 'div'; })());
|
||||||
- text: The <code>div</code> element should have its styles defined by the <code>styles</code> object.
|
- text: The <code>div</code> element should have its styles defined by the <code>styles</code> 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 <code>div</code> element should have its styles defined by the <code>styles</code> 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"); })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -25,11 +25,11 @@ Once you complete the above steps you should be able to click the button and see
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: <code>MyComponent</code> should return a <code>div</code> element which wraps two elements, a button and an <code>h1</code> element, in that order.
|
- text: <code>MyComponent</code> should return a <code>div</code> element which wraps two elements, a button and an <code>h1</code> 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', '<code>MyComponent</code> should return a <code>div</code> element which wraps two elements, a button and an <code>h1</code> 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 <code>MyComponent</code> should initialize with the key value pair <code>{ itemCount: 0 }</code>.'
|
- text: 'The state of <code>MyComponent</code> should initialize with the key value pair <code>{ itemCount: 0 }</code>.'
|
||||||
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state(''itemCount'') === 0, ''The state of <code>MyComponent</code> should initialize with the key value pair <code>{ itemCount: 0 }</code>.'');'
|
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state(''itemCount'') === 0);'
|
||||||
- text: Clicking the <code>button</code> element should run the <code>addItem</code> method and increment the state <code>itemCount</code> by <code>1</code>.
|
- text: Clicking the <code>button</code> element should run the <code>addItem</code> method and increment the state <code>itemCount</code> by <code>1</code>.
|
||||||
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 <code>button</code> element should run the <code>addItem</code> method and increment the state <code>itemCount</code> by <code>1</code>.''); };'
|
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); };'
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,15 +22,15 @@ The code editor has a simple controlled input component with a styled border. Yo
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>GateKeeper</code> component should render a <code>div</code> element.
|
- text: The <code>GateKeeper</code> component should render a <code>div</code> element.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('div').length === 1; })(), 'The <code>GateKeeper</code> component should render a <code>div</code> element.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('div').length === 1; })());
|
||||||
- text: The <code>GateKeeper</code> component should be initialized with a state key <code>input</code> set to an empty string.
|
- text: The <code>GateKeeper</code> component should be initialized with a state key <code>input</code> set to an empty string.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.state().input === ''; })(), 'The <code>GateKeeper</code> component should be initialized with a state key <code>input</code> set to an empty string.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.state().input === ''; })());
|
||||||
- text: The <code>GateKeeper</code> component should render an <code>h3</code> tag and an <code>input</code> tag.
|
- text: The <code>GateKeeper</code> component should render an <code>h3</code> tag and an <code>input</code> tag.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('h3').length === 1 && mockedComponent.find('input').length === 1; })(), 'The <code>GateKeeper</code> component should render an <code>h3</code> tag and an <code>input</code> tag.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('h3').length === 1 && mockedComponent.find('input').length === 1; })());
|
||||||
- text: The <code>input</code> tag should initially have a style of <code>1px solid black</code> for the <code>border</code> property.
|
- text: The <code>input</code> tag should initially have a style of <code>1px solid black</code> for the <code>border</code> property.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('input').props().style.border === '1px solid black'; })(), 'The <code>input</code> tag should initially have a style of <code>1px solid black</code> for the <code>border</code> property.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('input').props().style.border === '1px solid black'; })());
|
||||||
- text: The <code>input</code> tag should be styled with a border of <code>3px solid red</code> if the input value in state is longer than 15 characters.
|
- text: The <code>input</code> tag should be styled with a border of <code>3px solid red</code> 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 <code>input</code> tag should be styled with a border of <code>3px solid red</code> 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''); }; '
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,13 +22,13 @@ Nest two components inside of <code>Fruits</code> — first <code>NonCitrus<
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>TypesOfFood</code> component should return a single <code>div</code> element.
|
- text: The <code>TypesOfFood</code> component should return a single <code>div</code> element.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === 'div'; })(), 'The <code>TypesOfFood</code> component should return a single <code>div</code> element.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === 'div'; })());
|
||||||
- text: The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.
|
- text: The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === 'Fruits'; })(), 'The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === 'Fruits'; })());
|
||||||
- text: The <code>Fruits</code> component should return the <code>NonCitrus</code> component and the <code>Citrus</code> component.
|
- text: The <code>Fruits</code> component should return the <code>NonCitrus</code> component and the <code>Citrus</code> 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 <code>Fruits</code> component should return the <code>NonCitrus</code> component and the <code>Citrus</code> 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 <code>TypesOfFood</code> component should return the <code>Vegetables</code> component below the <code>Fruits</code> component.
|
- text: The <code>TypesOfFood</code> component should return the <code>Vegetables</code> component below the <code>Fruits</code> component.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === 'Vegetables'; })(), 'The <code>TypesOfFood</code> component should return the <code>Vegetables</code> component below the <code>Fruits</code> component.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === 'Vegetables'; })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -35,11 +35,11 @@ In the code editor, there is a simple functional component called <code>ChildCom
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The React component should return a single <code>div</code> element.
|
- text: The React component should return a single <code>div</code> element.
|
||||||
testString: assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.type() === 'div'; })(), 'The React component should return a single <code>div</code> element.');
|
testString: assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.type() === 'div'; })());
|
||||||
- text: The component should return two nested elements.
|
- 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.
|
- 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; })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -24,15 +24,15 @@ Finally, create an <code>h1</code> tag after the <code>form</code> which renders
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: <code>MyForm</code> should return a <code>div</code> element which contains a <code>form</code> and an <code>h1</code> tag. The form should include an <code>input</code> and a <code>button</code>.
|
- text: <code>MyForm</code> should return a <code>div</code> element which contains a <code>form</code> and an <code>h1</code> tag. The form should include an <code>input</code> and a <code>button</code>.
|
||||||
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) })(), '<code>MyForm</code> should return a <code>div</code> element which contains a <code>form</code> and an <code>h1</code> tag. The form should include an <code>input</code> and a <code>button</code>.');
|
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 <code>MyForm</code> should initialize with <code>input</code> and <code>submit</code> properties, both set to empty strings.
|
- text: The state of <code>MyForm</code> should initialize with <code>input</code> and <code>submit</code> 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 <code>MyForm</code> should initialize with <code>input</code> and <code>submit</code> 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 <code>input</code> element should update the <code>input</code> property of the component's state.
|
- text: Typing in the <code>input</code> element should update the <code>input</code> 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 <code>input</code> element should update the <code>input</code> 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 <code>handleSubmit</code> which should set the <code>submit</code> property in state equal to the current input.
|
- text: Submitting the form should run <code>handleSubmit</code> which should set the <code>submit</code> 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 <code>handleSubmit</code> which should set the <code>submit</code> 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 <code>h1</code> header should render the value of the <code>submit</code> field from the component's state.
|
- text: The <code>h1</code> header should render the value of the <code>submit</code> 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 <code>h1</code> header should render the value of the <code>submit</code> 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''); }; '
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -25,11 +25,11 @@ Last but not least, don't forget to add the necessary bindings in the constructo
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: <code>ControlledInput</code> should return a <code>div</code> element which contains an <code>input</code> and a <code>p</code> tag.
|
- text: <code>ControlledInput</code> should return a <code>div</code> element which contains an <code>input</code> and a <code>p</code> 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, '<code>ControlledInput</code> should return a <code>div</code> element which contains an <code>input</code> and a <code>p</code> 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 <code>ControlledInput</code> should initialize with an <code>input</code> property set to an empty string.
|
- text: The state of <code>ControlledInput</code> should initialize with an <code>input</code> property set to an empty string.
|
||||||
testString: assert.strictEqual(Enzyme.mount(React.createElement(ControlledInput)).state('input'), '', 'The state of <code>ControlledInput</code> should initialize with an <code>input</code> 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 <code>p</code> element should render this state as you type.
|
- text: Typing in the input element should update the state and the value of the input, and the <code>p</code> 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 <code>p</code> 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''); }; '
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -38,11 +38,11 @@ Also notice the <code>Kitten</code> class has a <code>constructor</code> defined
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The React component should return a <code>div</code> element.
|
- text: The React component should return a <code>div</code> element.
|
||||||
testString: assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div', 'The React component should return a <code>div</code> element.');
|
testString: assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div');
|
||||||
- text: The returned <code>div</code> should render an <code>h1</code> header within it.
|
- text: The returned <code>div</code> should render an <code>h1</code> header within it.
|
||||||
testString: assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.shallow(React.createElement(MyComponent)).html()), 'The returned <code>div</code> should render an <code>h1</code> header within it.');
|
testString: assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.shallow(React.createElement(MyComponent)).html()));
|
||||||
- text: The <code>h1</code> header should contain the string <code>Hello React!</code>.
|
- text: The <code>h1</code> header should contain the string <code>Hello React!</code>.
|
||||||
testString: assert(Enzyme.shallow(React.createElement(MyComponent)).html() === '<div><h1>Hello React!</h1></div>', 'The <code>h1</code> header should contain the string <code>Hello React!</code>.');
|
testString: assert(Enzyme.shallow(React.createElement(MyComponent)).html() === '<div><h1>Hello React!</h1></div>');
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -25,9 +25,9 @@ It's worth noting that under the hood the challenges are calling <code>ReactDOM.
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The constant <code>JSX</code> should return an <code>h1</code> element.
|
- text: The constant <code>JSX</code> should return an <code>h1</code> element.
|
||||||
testString: assert(JSX.type === 'h1', 'The constant <code>JSX</code> should return an <code>h1</code> element.');
|
testString: assert(JSX.type === 'h1');
|
||||||
- text: The <code>h1</code> tag should include the text <code>Hello JSX!</code>
|
- text: The <code>h1</code> tag should include the text <code>Hello JSX!</code>
|
||||||
testString: assert(Enzyme.shallow(JSX).contains('Hello JSX!'), 'The <code>h1</code> tag should include the text <code>Hello JSX!</code>');
|
testString: assert(Enzyme.shallow(JSX).contains('Hello JSX!'));
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -30,13 +30,13 @@ There is a component in the code editor that is trying to render a <code>name</c
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: <code>StatefulComponent</code> should exist and render.
|
- text: <code>StatefulComponent</code> should exist and render.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('StatefulComponent').length === 1; })(), '<code>StatefulComponent</code> should exist and render.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('StatefulComponent').length === 1; })());
|
||||||
- text: <code>StatefulComponent</code> should render a <code>div</code> and an <code>h1</code> element.
|
- text: <code>StatefulComponent</code> should render a <code>div</code> and an <code>h1</code> element.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('div').length === 1 && mockedComponent.find('h1').length === 1; })(), '<code>StatefulComponent</code> should render a <code>div</code> and an <code>h1</code> 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 <code>StatefulComponent</code> should be initialized with a property <code>name</code> set to a string.
|
- text: The state of <code>StatefulComponent</code> should be initialized with a property <code>name</code> 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 <code>StatefulComponent</code> should be initialized with a property <code>name</code> 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 <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.
|
- text: The property <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find('h1').text() === initialState.name; })(), 'The property <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find('h1').text() === initialState.name; })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -35,11 +35,11 @@ The code editor has a function called <code>MyComponent</code>. Complete this fu
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: <code>MyComponent</code> should return JSX.
|
- text: <code>MyComponent</code> should return JSX.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.length === 1; })(), '<code>MyComponent</code> should return JSX.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.length === 1; })());
|
||||||
- text: <code>MyComponent</code> should return a <code>div</code> element.
|
- text: <code>MyComponent</code> should return a <code>div</code> element.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.children().type() === 'div' })(), '<code>MyComponent</code> should return a <code>div</code> element.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.children().type() === 'div' })());
|
||||||
- text: The <code>div</code> element should contain a string of text.
|
- text: The <code>div</code> element should contain a string of text.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').text() !== ''; })(), 'The <code>div</code> element should contain a string of text.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').text() !== ''; })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -24,9 +24,9 @@ Apply a class of <code>myDiv</code> to the <code>div</code> provided in the JSX
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The constant <code>JSX</code> should return a <code>div</code> element.
|
- text: The constant <code>JSX</code> should return a <code>div</code> element.
|
||||||
testString: assert.strictEqual(JSX.type, 'div', 'The constant <code>JSX</code> should return a <code>div</code> element.');
|
testString: assert.strictEqual(JSX.type, 'div');
|
||||||
- text: The <code>div</code> has a class of <code>myDiv</code>.
|
- text: The <code>div</code> has a class of <code>myDiv</code>.
|
||||||
testString: assert.strictEqual(JSX.props.className, 'myDiv', 'The <code>div</code> has a class of <code>myDiv</code>.');
|
testString: assert.strictEqual(JSX.props.className, 'myDiv');
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,17 +22,17 @@ Normally, you want to make the key something that uniquely identifies the elemen
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>Frameworks</code> component should exist and render to the page.
|
- text: The <code>Frameworks</code> component should exist and render to the page.
|
||||||
testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('Frameworks').length === 1, 'The <code>Frameworks</code> component should exist and render to the page.');
|
testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('Frameworks').length === 1);
|
||||||
- text: <code>Frameworks</code> should render an <code>h1</code> element.
|
- text: <code>Frameworks</code> should render an <code>h1</code> element.
|
||||||
testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('h1').length === 1, '<code>Frameworks</code> should render an <code>h1</code> element.');
|
testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('h1').length === 1);
|
||||||
- text: <code>Frameworks</code> should render a <code>ul</code> element.
|
- text: <code>Frameworks</code> should render a <code>ul</code> element.
|
||||||
testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').length === 1, '<code>Frameworks</code> should render a <code>ul</code> element.');
|
testString: assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').length === 1);
|
||||||
- text: The <code>ul</code> tag should render 6 child <code>li</code> elements.
|
- text: The <code>ul</code> tag should render 6 child <code>li</code> 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 <code>ul</code> tag should render 6 child <code>li</code> 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 <code>key</code> attribute.
|
- text: Each list item element should have a unique <code>key</code> 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 <code>key</code> 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 <code>frontEndFrameworks</code>.
|
- text: Each list item element should contain text from <code>frontEndFrameworks</code>.
|
||||||
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 <code>frontEndFrameworks</code');
|
testString: assert((() => {const li = Enzyme.mount(React.createElement(Frameworks)).find('ul').children(); return [...Array(5)].every((_, i) => frontEndFrameworks.includes(li.at(i).text()))})());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -28,11 +28,11 @@ Note that you can optionally set the font size to be a number, omitting the unit
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The component should render a <code>div</code> element.
|
- text: The component should render a <code>div</code> element.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().type() === 'div'; })(), 'The component should render a <code>div</code> element.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().type() === 'div'; })());
|
||||||
- text: The <code>div</code> element should have a color of <code>red</code>.
|
- text: The <code>div</code> element should have a color of <code>red</code>.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().props().style.color === 'red'; })(), 'The <code>div</code> element should have a color of <code>red</code>.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().props().style.color === 'red'; })());
|
||||||
- text: The <code>div</code> element should have a font size of <code>72px</code>.
|
- text: The <code>div</code> element should have a font size of <code>72px</code>.
|
||||||
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 <code>div</code> element should have a font size of <code>72px</code>.');
|
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'); })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -25,11 +25,11 @@ Fix the errors in the code editor so that it is valid JSX and successfully trans
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The constant <code>JSX</code> should return a <code>div</code> element.
|
- text: The constant <code>JSX</code> should return a <code>div</code> element.
|
||||||
testString: assert.strictEqual(JSX.type, 'div', 'The constant <code>JSX</code> should return a <code>div</code> element.');
|
testString: assert.strictEqual(JSX.type, 'div');
|
||||||
- text: The <code>div</code> should contain a <code>br</code> tag.
|
- text: The <code>div</code> should contain a <code>br</code> tag.
|
||||||
testString: assert(Enzyme.shallow(JSX).find('br').length === 1, 'The <code>div</code> should contain a <code>br</code> tag.');
|
testString: assert(Enzyme.shallow(JSX).find('br').length === 1);
|
||||||
- text: The <code>div</code> should contain an <code>hr</code> tag.
|
- text: The <code>div</code> should contain an <code>hr</code> tag.
|
||||||
testString: assert(Enzyme.shallow(JSX).find('hr').length === 1, 'The <code>div</code> should contain an <code>hr</code> tag.');
|
testString: assert(Enzyme.shallow(JSX).find('hr').length === 1);
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -24,13 +24,13 @@ Next, add <code>componentDidUpdate()</code> in the <code>Dialog</code> component
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>Controller</code> component should render the <code>Dialog</code> component as a child.
|
- text: The <code>Controller</code> component should render the <code>Dialog</code> 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 <code>Controller</code> component should render the <code>Dialog</code> 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 <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>this.props</code> to the console.
|
- text: The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>this.props</code> 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 <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>this.props</code> 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 <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>nextProps</code> to the console.
|
- text: The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>nextProps</code> 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 <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>nextProps</code> 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 <code>Dialog</code> component should call the <code>componentDidUpdate</code> method and log a message to the console.
|
- text: The <code>Dialog</code> component should call the <code>componentDidUpdate</code> 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 <code>Dialog</code> component should call the <code>componentDidUpdate</code> 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'); })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,13 +22,13 @@ The <code>shouldComponentUpdate()</code> method is added in a component called <
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>Controller</code> component should render the <code>OnlyEvens</code> component as a child.
|
- text: The <code>Controller</code> component should render the <code>OnlyEvens</code> 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 <code>Controller</code> component should render the <code>OnlyEvens</code> 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 <code>shouldComponentUpdate</code> method should be defined on the <code>OnlyEvens</code> component.
|
- text: The <code>shouldComponentUpdate</code> method should be defined on the <code>OnlyEvens</code> component.
|
||||||
testString: assert((() => { const child = React.createElement(OnlyEvens).type.prototype.shouldComponentUpdate.toString().replace(/s/g,''); return child !== 'undefined'; })(), 'The <code>shouldComponentUpdate</code> method should be defined on the <code>OnlyEvens</code> component.');
|
testString: assert((() => { const child = React.createElement(OnlyEvens).type.prototype.shouldComponentUpdate.toString().replace(/s/g,''); return child !== 'undefined'; })());
|
||||||
- text: The <code>OnlyEvens</code> component should return an <code>h1</code> tag which renders the value of <code>this.props.value</code>.
|
- text: The <code>OnlyEvens</code> component should return an <code>h1</code> tag which renders the value of <code>this.props.value</code>.
|
||||||
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 === ''<h1>1000</h1>'' && secondValue === ''<h1>10</h1>'', ''The <code>OnlyEvens</code> component should return an <code>h1</code> tag which renders the value of <code>this.props.value</code>.''); }; '
|
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 === ''<h1>1000</h1>'' && secondValue === ''<h1>10</h1>''); }; '
|
||||||
- text: <code>OnlyEvens</code> should re-render only when <code>nextProps.value</code> is even.
|
- text: <code>OnlyEvens</code> should re-render only when <code>nextProps.value</code> 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'', ''<code>OnlyEvens</code> should re-render only when <code>nextProps.value</code> 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''); }; '
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,11 +22,11 @@ The <code>ShoppingCart</code> component now renders a child component <code>Item
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The component <code>ShoppingCart</code> should render.
|
- text: The component <code>ShoppingCart</code> should render.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })(), 'The component <code>ShoppingCart</code> should render.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })());
|
||||||
- text: The component <code>Items</code> should render.
|
- text: The component <code>Items</code> should render.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').length === 1; })(), 'The component <code>Items</code> should render.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').length === 1; })());
|
||||||
- text: "The <code>Items</code> component should have a prop of <code>{ quantity: 10 }</code> passed from the <code>ShoppingCart</code> component."
|
- text: "The <code>Items</code> component should have a prop of <code>{ quantity: 10 }</code> passed from the <code>ShoppingCart</code> component."
|
||||||
testString: "getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').props().quantity == 10 && getUserInput('index').replace(/ /g,'').includes('<Itemsquantity={10}/>'); })(), 'The <code>Items</code> component should have a prop of <code>{ quantity: 10 }</code> passed from the <code>ShoppingCart</code> component.');"
|
testString: "getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').props().quantity == 10 && getUserInput('index').replace(/ /g,'').includes('<Itemsquantity={10}/>'); })());"
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,15 +22,15 @@ Next, add <code>RenderInput</code> to the render method in <code>MyApp</code>, t
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>MyApp</code> component should render.
|
- text: The <code>MyApp</code> component should render.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('MyApp').length === 1; })(), 'The <code>MyApp</code> component should render.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('MyApp').length === 1; })());
|
||||||
- text: The <code>GetInput</code> component should render.
|
- text: The <code>GetInput</code> component should render.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('GetInput').length === 1; })(), 'The <code>GetInput</code> component should render.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('GetInput').length === 1; })());
|
||||||
- text: The <code>RenderInput</code> component should render.
|
- text: The <code>RenderInput</code> component should render.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('RenderInput').length === 1; })(), 'The <code>RenderInput</code> component should render.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('RenderInput').length === 1; })());
|
||||||
- text: The <code>GetInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props and contain an <code>input</code> element which modifies <code>MyApp</code> state.
|
- text: The <code>GetInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props and contain an <code>input</code> element which modifies <code>MyApp</code> 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 <code>GetInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props and contain an <code>input</code> element which modifies <code>MyApp</code> 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 <code>RenderInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props.
|
- text: The <code>RenderInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> 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 <code>RenderInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> 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'')); }; '
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -33,19 +33,19 @@ There are <code>List</code> and <code>ToDo</code> components in the code editor.
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>ToDo</code> component should return a single outer <code>div</code>.
|
- text: The <code>ToDo</code> component should return a single outer <code>div</code>.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().type() === 'div'; })(), 'The <code>ToDo</code> component should return a single outer <code>div</code>.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().type() === 'div'; })());
|
||||||
- text: The third child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.
|
- text: The third child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(2).name() === 'List'; })(), 'The third child of the <code>ToDo</code> component should be an instance of the <code>List</code> 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 <code>ToDo</code> component should be an instance of the <code>List</code> component.
|
- text: The fifth child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(4).name() === 'List'; })(), 'The fifth child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(4).name() === 'List'; })());
|
||||||
- text: Both instances of the <code>List</code> component should have a property called <code>tasks</code> and <code>tasks</code> should be of type array.
|
- text: Both instances of the <code>List</code> component should have a property called <code>tasks</code> and <code>tasks</code> 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 <code>List</code> component should have a property called <code>tasks</code> and <code>tasks</code> 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 <code>List</code> component representing the tasks for today should have 2 or more items.
|
- text: The first <code>List</code> 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 <code>List</code> 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 <code>List</code> component representing the tasks for tomorrow should have 3 or more items.
|
- text: The second <code>List</code> 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 <code>List</code> 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 <code>List</code> component should render the value from the <code>tasks</code> prop in the <code>p</code> tag.
|
- text: The <code>List</code> component should render the value from the <code>tasks</code> prop in the <code>p</code> 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 <code>List</code> component should render the value from the <code>tasks</code> prop in the <code>p</code> 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(', '); })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -35,15 +35,15 @@ There are <code>Calendar</code> and <code>CurrentDate</code> components in the c
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>Calendar</code> component should return a single <code>div</code> element.
|
- text: The <code>Calendar</code> component should return a single <code>div</code> element.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().type() === 'div'; })(), 'The <code>Calendar</code> component should return a single <code>div</code> element.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().type() === 'div'; })());
|
||||||
- text: The second child of the <code>Calendar</code> component should be the <code>CurrentDate</code> component.
|
- text: The second child of the <code>Calendar</code> component should be the <code>CurrentDate</code> component.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).name() === 'CurrentDate'; })(), 'The second child of the <code>Calendar</code> component should be the <code>CurrentDate</code> component.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).name() === 'CurrentDate'; })());
|
||||||
- text: The <code>CurrentDate</code> component should have a prop called <code>date</code>.
|
- text: The <code>CurrentDate</code> component should have a prop called <code>date</code>.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).props().date })(), 'The <code>CurrentDate</code> component should have a prop called <code>date</code>.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).props().date })());
|
||||||
- text: The <code>date</code> prop of the <code>CurrentDate</code> should contain a string of text.
|
- text: The <code>date</code> prop of the <code>CurrentDate</code> 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 <code>date</code> prop of the <code>CurrentDate</code> 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 <code>CurrentDate</code> component should render the value from the <code>date</code> prop in the <code>p</code> tag.
|
- text: The <code>CurrentDate</code> component should render the value from the <code>date</code> prop in the <code>p</code> tag.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.find('p').html().includes(Date().substr(3)); })(), 'The <code>CurrentDate</code> component should render the value from the <code>date</code> prop in the <code>p</code> tag.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.find('p').html().includes(Date().substr(3)); })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -23,11 +23,11 @@ The <code>MyApp</code> component is stateful and renders a <code>Navbar</code> c
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>MyApp</code> component should render with a <code>Navbar</code> component inside.
|
- text: The <code>MyApp</code> component should render with a <code>Navbar</code> component inside.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('MyApp').length === 1 && mockedComponent.find('Navbar').length === 1; })(), 'The <code>MyApp</code> component should render with a <code>Navbar</code> 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 <code>Navbar</code> component should receive the <code>MyApp</code> state property <code>name</code> as props.
|
- text: The <code>Navbar</code> component should receive the <code>MyApp</code> state property <code>name</code> 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 <code>Navbar</code> component should receive the <code>MyApp</code> state property <code>name</code> 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 <code>h1</code> element in <code>Navbar</code> should render the <code>name</code> prop.
|
- text: The <code>h1</code> element in <code>Navbar</code> should render the <code>name</code> 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 <code>h1</code> element in <code>Navbar</code> should render the <code>name</code> 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); }; '
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -23,13 +23,13 @@ Both the <code>Fruits</code> and <code>Vegetables</code> components are defined
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>TypesOfFood</code> component should return a single <code>div</code> element.
|
- text: The <code>TypesOfFood</code> component should return a single <code>div</code> element.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === 'div'; })(), 'The <code>TypesOfFood</code> component should return a single <code>div</code> element.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === 'div'; })());
|
||||||
- text: The <code>TypesOfFood</code> component should render the <code>Fruits</code> component after the <code>h1</code> element.
|
- text: The <code>TypesOfFood</code> component should render the <code>Fruits</code> component after the <code>h1</code> element.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === 'Fruits'; })(), 'The <code>TypesOfFood</code> component should render the <code>Fruits</code> component after the <code>h1</code> element.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === 'Fruits'; })());
|
||||||
- text: The <code>TypesOfFood</code> component should render the <code>Vegetables</code> component after <code>Fruits</code>.
|
- text: The <code>TypesOfFood</code> component should render the <code>Vegetables</code> component after <code>Fruits</code>.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === 'Vegetables'; })(), 'The <code>TypesOfFood</code> component should render the <code>Vegetables</code> component after <code>Fruits</code>.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === 'Vegetables'; })());
|
||||||
- text: The <code>TypesOfFood</code> component should render to the DOM within the <code>div</code> with the id <code>challenge-node</code>.
|
- text: The <code>TypesOfFood</code> component should render to the DOM within the <code>div</code> with the id <code>challenge-node</code>.
|
||||||
testString: assert((function() { const html = document.getElementById('challenge-node').childNodes[0].innerHTML; return (html === '<h1>Types of Food:</h1><div><h2>Fruits:</h2><h4>Non-Citrus:</h4><ul><li>Apples</li><li>Blueberries</li><li>Strawberries</li><li>Bananas</li></ul><h4>Citrus:</h4><ul><li>Lemon</li><li>Lime</li><li>Orange</li><li>Grapefruit</li></ul></div><div><h2>Vegetables:</h2><ul><li>Brussel Sprouts</li><li>Broccoli</li><li>Squash</li></ul></div>'); })(), 'The <code>TypesOfFood</code> component should render to the DOM within the <code>div</code> with the id <code>challenge-node</code>.');
|
testString: assert((function() { const html = document.getElementById('challenge-node').childNodes[0].innerHTML; return (html === '<h1>Types of Food:</h1><div><h2>Fruits:</h2><h4>Non-Citrus:</h4><ul><li>Apples</li><li>Blueberries</li><li>Strawberries</li><li>Bananas</li></ul><h4>Citrus:</h4><ul><li>Lemon</li><li>Lime</li><li>Orange</li><li>Grapefruit</li></ul></div><div><h2>Vegetables:</h2><ul><li>Brussel Sprouts</li><li>Broccoli</li><li>Squash</li></ul></div>'); })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -24,19 +24,19 @@ Now you have an expression that you can use to make a randomized decision in the
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>GameOfChance</code> component should exist and render to the page.
|
- text: The <code>GameOfChance</code> component should exist and render to the page.
|
||||||
testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('GameOfChance').length, 1, 'The <code>GameOfChance</code> component should exist and render to the page.');
|
testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('GameOfChance').length, 1);
|
||||||
- text: <code>GameOfChance</code> should return a single <code>button</code> element.
|
- text: <code>GameOfChance</code> should return a single <code>button</code> element.
|
||||||
testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('button').length, 1, '<code>GameOfChance</code> should return a single <code>button</code> element.');
|
testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('button').length, 1);
|
||||||
- text: <code>GameOfChance</code> should return a single instance of the <code>Results</code> component, which has a prop called <code>fiftyFifty</code>.
|
- text: <code>GameOfChance</code> should return a single instance of the <code>Results</code> component, which has a prop called <code>fiftyFifty</code>.
|
||||||
testString: assert(Enzyme.mount(React.createElement(GameOfChance)).find('Results').length === 1 && Enzyme.mount(React.createElement(GameOfChance)).find('Results').props().hasOwnProperty('fiftyFifty') === true, '<code>GameOfChance</code> should return a single instance of the <code>Results</code> component, which has a prop called <code>fiftyFifty</code>.');
|
testString: assert(Enzyme.mount(React.createElement(GameOfChance)).find('Results').length === 1 && Enzyme.mount(React.createElement(GameOfChance)).find('Results').props().hasOwnProperty('fiftyFifty') === true);
|
||||||
- text: <code>GameOfChance</code> state should be initialized with a property of <code>counter</code> set to a value of <code>1</code>.
|
- text: <code>GameOfChance</code> state should be initialized with a property of <code>counter</code> set to a value of <code>1</code>.
|
||||||
testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).state().counter, 1, '<code>GameOfChance</code> state should be initialized with a property of <code>counter</code> set to a value of <code>1</code>.');
|
testString: assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).state().counter, 1);
|
||||||
- text: 'When the <code>GameOfChance</code> component is first rendered to the DOM, a <code>p</code> element should be returned with the inner text of <code>Turn: 1</code>.'
|
- text: 'When the <code>GameOfChance</code> component is first rendered to the DOM, a <code>p</code> element should be returned with the inner text of <code>Turn: 1</code>.'
|
||||||
testString: 'assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find(''p'').text(), ''Turn: 1'', ''When the <code>GameOfChance</code> component is first rendered to the DOM, a <code>p</code> element should be returned with the inner text of <code>Turn: 1</code>.'');'
|
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 <code>p</code> element should be rendered to the DOM that contains the text "Turn: N", where N is the value of the counter state.'
|
- text: 'Each time the button is clicked, the counter state should be incremented by a value of 1, and a single <code>p</code> 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 <code>p</code> 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 <code>GameOfChance</code> component is first mounted to the DOM and each time the button is clicked thereafter, a single <code>h1</code> element should be returned that randomly renders either <code>You Win!</code> or <code>You Lose!</code>.
|
- text: When the <code>GameOfChance</code> component is first mounted to the DOM and each time the button is clicked thereafter, a single <code>h1</code> element should be returned that randomly renders either <code>You Win!</code> or <code>You Lose!</code>.
|
||||||
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 <code>GameOfChance</code> component is first mounted to the DOM and each time the button is clicked thereafter, a single <code>h1</code> element should be returned that randomly renders either <code>You Win!</code> or <code>You Lose!</code>.''); }; '
|
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); }; '
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -23,13 +23,13 @@ The code editor has a simple JSX component. Use the <code>ReactDOM.render()</cod
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The constant <code>JSX</code> should return a <code>div</code> element.
|
- text: The constant <code>JSX</code> should return a <code>div</code> element.
|
||||||
testString: assert(JSX.type === 'div', 'The constant <code>JSX</code> should return a <code>div</code> element.');
|
testString: assert(JSX.type === 'div');
|
||||||
- text: The <code>div</code> should contain an <code>h1</code> tag as the first element.
|
- text: The <code>div</code> should contain an <code>h1</code> tag as the first element.
|
||||||
testString: assert(JSX.props.children[0].type === 'h1', 'The <code>div</code> should contain an <code>h1</code> tag as the first element.');
|
testString: assert(JSX.props.children[0].type === 'h1');
|
||||||
- text: The <code>div</code> should contain a <code>p</code> tag as the second element.
|
- text: The <code>div</code> should contain a <code>p</code> tag as the second element.
|
||||||
testString: assert(JSX.props.children[1].type === 'p', 'The <code>div</code> should contain a <code>p</code> 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 <code>challenge-node</code>.
|
- text: The provided JSX element should render to the DOM node with id <code>challenge-node</code>.
|
||||||
testString: assert(document.getElementById('challenge-node').childNodes[0].innerHTML === '<h1>Hello World</h1><p>Lets render this to the DOM</p>', 'The provided JSX element should render to the DOM node with id <code>challenge-node</code>.');
|
testString: assert(document.getElementById('challenge-node').childNodes[0].innerHTML === '<h1>Hello World</h1><p>Lets render this to the DOM</p>');
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,7 +22,7 @@ The <code>renderToString()</code> method is provided on <code>ReactDOMServer</co
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>App</code> component should render to a string using <code>ReactDOMServer.renderToString</code>.
|
- text: The <code>App</code> component should render to a string using <code>ReactDOMServer.renderToString</code>.
|
||||||
testString: getUserInput => assert(getUserInput('index').replace(/ /g,'').includes('ReactDOMServer.renderToString(<App/>)') && Enzyme.mount(React.createElement(App)).children().name() === 'div', 'The <code>App</code> component should render to a string using <code>ReactDOMServer.renderToString</code>.');
|
testString: getUserInput => assert(getUserInput('index').replace(/ /g,'').includes('ReactDOMServer.renderToString(<App/>)') && Enzyme.mount(React.createElement(App)).children().name() === 'div');
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,13 +22,13 @@ Next, in the return statement, render this value in an <code>h1</code> tag using
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: <code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.
|
- text: <code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.
|
||||||
testString: assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'freeCodeCamp', '<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.');
|
testString: assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'freeCodeCamp');
|
||||||
- text: <code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.
|
- text: <code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.
|
||||||
testString: assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), '<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.');
|
testString: assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()));
|
||||||
- text: The rendered <code>h1</code> tag should include a reference to <code>{name}</code>.
|
- text: The rendered <code>h1</code> tag should include a reference to <code>{name}</code>.
|
||||||
testString: getUserInput => assert(/<h1>\n*\s*\{\s*name\s*\}\s*\n*<\/h1>/.test(getUserInput('index')), 'The rendered <code>h1</code> tag should include a reference to <code>{name}</code>.');
|
testString: getUserInput => assert(/<h1>\n*\s*\{\s*name\s*\}\s*\n*<\/h1>/.test(getUserInput('index')));
|
||||||
- text: The rendered <code>h1</code> header should contain text rendered from the component's state.
|
- text: The rendered <code>h1</code> 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 === ''<div><h1>TestName</h1></div>'', ''The rendered <code>h1</code> 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 === ''<div><h1>TestName</h1></div>''); };'
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -25,11 +25,11 @@ In the code editor, <code>MyComponent</code> is already stateful. Define an <cod
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: <code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.
|
- text: <code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.
|
||||||
testString: assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'freeCodeCamp', '<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.');
|
testString: assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'freeCodeCamp');
|
||||||
- text: <code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.
|
- text: <code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.
|
||||||
testString: assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), '<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.');
|
testString: assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()));
|
||||||
- text: The rendered <code>h1</code> header should contain text rendered from the component's state.
|
- text: The rendered <code>h1</code> 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 === ''<div><h1>TestName</h1></div>'', ''The rendered <code>h1</code> 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 === ''<div><h1>TestName</h1></div>'');};'
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,13 +22,13 @@ MyComponent contains a <code>boolean</code> in its state which tracks whether yo
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: <code>MyComponent</code> should exist and render.
|
- text: <code>MyComponent</code> should exist and render.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('MyComponent').length === 1; })(), '<code>MyComponent</code> should exist and render.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('MyComponent').length === 1; })());
|
||||||
- text: When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render.
|
- text: When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> 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 <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> 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 <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render.
|
- text: When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> 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 <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> 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 <code>if/else</code> statement to check the condition of <code>this.state.display</code>.
|
- text: The render method should use an <code>if/else</code> statement to check the condition of <code>this.state.display</code>.
|
||||||
testString: getUserInput => assert(getUserInput('index').includes('if') && getUserInput('index').includes('else'), 'The render method should use an <code>if/else</code> statement to check the condition of <code>this.state.display</code>.');
|
testString: getUserInput => assert(getUserInput('index').includes('if') && getUserInput('index').includes('else'));
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -30,13 +30,13 @@ Click the button and watch the rendered state update. Don't worry if you don't f
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: 'The state of <code>MyComponent</code> should initialize with the key value pair <code>{ name: Initial State }</code>.'
|
- text: 'The state of <code>MyComponent</code> should initialize with the key value pair <code>{ name: Initial State }</code>.'
|
||||||
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state(''name'') === ''Initial State'', ''The state of <code>MyComponent</code> should initialize with the key value pair <code>{ name: Initial State }</code>.'');'
|
testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state(''name'') === ''Initial State'');'
|
||||||
- text: <code>MyComponent</code> should render an <code>h1</code> header.
|
- text: <code>MyComponent</code> should render an <code>h1</code> header.
|
||||||
testString: assert(Enzyme.mount(React.createElement(MyComponent)).find('h1').length === 1, '<code>MyComponent</code> should render an <code>h1</code> header.');
|
testString: assert(Enzyme.mount(React.createElement(MyComponent)).find('h1').length === 1);
|
||||||
- text: The rendered <code>h1</code> header should contain text rendered from the component's state.
|
- text: The rendered <code>h1</code> 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(/<h1>TestName<\/h1>/.test(firstValue), ''The rendered <code>h1</code> 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(/<h1>TestName<\/h1>/.test(firstValue)); };'
|
||||||
- text: Calling the <code>handleClick</code> method on <code>MyComponent</code> should set the name property in state to equal <code>React Rocks!</code>.
|
- text: Calling the <code>handleClick</code> method on <code>MyComponent</code> should set the name property in state to equal <code>React Rocks!</code>.
|
||||||
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 <code>handleClick</code> method on <code>MyComponent</code> should set the name property in state to equal <code>React Rocks!</code>.''); };'
|
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!''); };'
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -23,13 +23,13 @@ Solve the previous example again, so the <code>h1</code> only renders if <code>d
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: <code>MyComponent</code> should exist and render.
|
- text: <code>MyComponent</code> should exist and render.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('MyComponent').length; })(), '<code>MyComponent</code> should exist and render.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('MyComponent').length; })());
|
||||||
- text: When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render.
|
- text: When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> 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 <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> 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 <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render.
|
- text: When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> 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 <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> 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.
|
- 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('&&'));
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -27,19 +27,19 @@ Once the component is rendering information to the page, users should have a way
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>CheckUserAge</code> component should render with a single <code>input</code> element and a single <code>button</code> element.
|
- text: The <code>CheckUserAge</code> component should render with a single <code>input</code> element and a single <code>button</code> 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 <code>CheckUserAge</code> component should render with a single <code>input</code> element and a single <code>button</code> 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 <code>CheckUserAge</code> component's state should be initialized with a property of <code>userAge</code> and a property of <code>input</code>, both set to a value of an empty string.
|
- text: The <code>CheckUserAge</code> component's state should be initialized with a property of <code>userAge</code> and a property of <code>input</code>, 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 <code>CheckUserAge</code> component's state should be initialized with a property of <code>userAge</code> and a property of <code>input</code>, 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 <code>CheckUserAge</code> component is first rendered to the DOM, the <code>button</code>'s inner text should be Submit.
|
- text: When the <code>CheckUserAge</code> component is first rendered to the DOM, the <code>button</code>'s inner text should be Submit.
|
||||||
testString: assert(Enzyme.mount(React.createElement(CheckUserAge)).find('button').text() === 'Submit', 'When the <code>CheckUserAge</code> component is first rendered to the DOM, the <code>button</code>'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 <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>'s inner text should read <code>You Shall Not Pass</code>.
|
- text: When a number of less than 18 is entered into the <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>'s inner text should read <code>You Shall Not Pass</code>.
|
||||||
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 <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>'s inner text should read <code>You Shall Not Pass</code>.''); }; '
|
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 <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>'s inner text should read <code>You May Enter</code>.
|
- text: When a number greater than or equal to 18 is entered into the <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>'s inner text should read <code>You May Enter</code>.
|
||||||
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 <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>'s inner text should read <code>You May Enter</code>.''); }; '
|
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 <code>input</code> is once again changed, the <code>button</code> should return to reading <code>Submit</code>.
|
- text: Once a number has been submitted, and the value of the <code>input</code> is once again changed, the <code>button</code> should return to reading <code>Submit</code>.
|
||||||
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 <code>input</code> is once again changed, the <code>button</code> should return to reading <code>Submit</code>.''); }; '
|
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 <code>if/else</code> statements.
|
- text: Your code should not contain any <code>if/else</code> statements.
|
||||||
testString: assert(new RegExp(/(\s|;)if(\s|\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false, 'Your code should not contain any <code>if/else</code> statements.');
|
testString: assert(new RegExp(/(\s|;)if(\s|\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false);
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,17 +22,17 @@ In the code provided, the <code>render</code> method has an array that contains
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>MagicEightBall</code> component should exist and should render to the page.
|
- text: The <code>MagicEightBall</code> component should exist and should render to the page.
|
||||||
testString: assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).find('MagicEightBall').length, 1, 'The <code>MagicEightBall</code> component should exist and should render to the page.');
|
testString: assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).find('MagicEightBall').length, 1);
|
||||||
- text: <code>MagicEightBall</code>'s first child should be an <code>input</code> element.
|
- text: <code>MagicEightBall</code>'s first child should be an <code>input</code> element.
|
||||||
testString: assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(0).name(), 'input', '<code>MagicEightBall</code>'s first child should be an <code>input</code> element.');
|
testString: assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(0).name(), 'input');
|
||||||
- text: <code>MagicEightBall</code>'s third child should be a <code>button</code> element.
|
- text: <code>MagicEightBall</code>'s third child should be a <code>button</code> element.
|
||||||
testString: assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), 'button', '<code>MagicEightBall</code>'s third child should be a <code>button</code> element.');
|
testString: assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), 'button');
|
||||||
- text: <code>MagicEightBall</code>'s state should be initialized with a property of <code>userInput</code> and a property of <code>randomIndex</code> both set to a value of an empty string.
|
- text: <code>MagicEightBall</code>'s state should be initialized with a property of <code>userInput</code> and a property of <code>randomIndex</code> 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') === '', '<code>MagicEightBall</code>'s state should be initialized with a property of <code>userInput</code> and a property of <code>randomIndex</code> 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 <code>MagicEightBall</code> is first mounted to the DOM, it should return an empty <code>p</code> element.
|
- text: When <code>MagicEightBall</code> is first mounted to the DOM, it should return an empty <code>p</code> element.
|
||||||
testString: assert(Enzyme.mount(React.createElement(MagicEightBall)).find('p').length === 1 && Enzyme.mount(React.createElement(MagicEightBall)).find('p').text() === '', 'When <code>MagicEightBall</code> is first mounted to the DOM, it should return an empty <code>p</code> 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 <code>input</code> element and the button is clicked, the <code>MagicEightBall</code> component should return a <code>p</code> element that contains a random element from the <code>possibleAnswers</code> array.
|
- text: When text is entered into the <code>input</code> element and the button is clicked, the <code>MagicEightBall</code> component should return a <code>p</code> element that contains a random element from the <code>possibleAnswers</code> 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 <code>input</code> element and the button is clicked, the <code>MagicEightBall</code> component should return a <code>p</code> element that contains a random element from the <code>possibleAnswers</code> 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);}'
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,15 +22,15 @@ In the code editor, <code>MyComponent</code>'s <code>state</code> is initia
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: <code>MyComponent</code> should exist and render to the page.
|
- text: <code>MyComponent</code> should exist and render to the page.
|
||||||
testString: assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find('MyComponent').length, 1, '<code>MyComponent</code> should exist and render to the page.');
|
testString: assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find('MyComponent').length, 1);
|
||||||
- text: <code>MyComponent</code>'s state should be initialized to an array of six users.")
|
- text: <code>MyComponent</code>'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, "<code>MyComponent</code>'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, "<code>MyComponent</code>'s state should be initialized to an array of six users.");
|
||||||
- text: <code>MyComponent</code> should return a <code>div</code>, an <code>h1</code>, and then an unordered list containing <code>li</code> elements for every user whose online status is set to <code>true</code>.
|
- text: <code>MyComponent</code> should return a <code>div</code>, an <code>h1</code>, and then an unordered list containing <code>li</code> elements for every user whose online status is set to <code>true</code>.
|
||||||
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, ''<code>MyComponent</code> should return a <code>div</code>, an <code>h1</code>, and then an unordered list containing <code>li</code> elements for every user whose online status is set to <code>true</code>.''); }; '
|
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: <code>MyComponent</code> should render <code>li</code> elements that contain the username of each online user.
|
- text: <code>MyComponent</code> should render <code>li</code> 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 === ''<ul><li>Jeff</li><li>Alan</li><li>Mary</li><li>Jim</li><li>Laura</li></ul>'', ''<code>MyComponent</code> should render <code>li</code> 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 === ''<ul><li>Jeff</li><li>Alan</li><li>Mary</li><li>Jim</li><li>Laura</li></ul>''); }; '
|
||||||
- text: Each list item element should have a unique <code>key</code> attribute.
|
- text: Each list item element should have a unique <code>key</code> 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 <code>key</code> 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; })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -24,17 +24,17 @@ Inside the <code>constructor</code>, create a <code>this.state</code> object and
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The MyToDoList component should exist and render to the page.
|
- 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 <code>MyToDoList</code> should be a <code>textarea</code> element.
|
- text: The first child of <code>MyToDoList</code> should be a <code>textarea</code> element.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').children().childAt(0).type() === 'textarea'; })(), 'The first child of <code>MyToDoList</code> should be a <code>textarea</code> 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 <code>MyToDoList</code> should be a <code>button</code> element.
|
- text: The third child of <code>MyToDoList</code> should be a <code>button</code> element.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').children().childAt(2).type() === 'button'; })(), 'The third child of <code>MyToDoList</code> should be a <code>button</code> element.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').children().childAt(2).type() === 'button'; })());
|
||||||
- text: The state of <code>MyToDoList</code> should be initialized with <code>toDoList</code> as an empty array.
|
- text: The state of <code>MyToDoList</code> should be initialized with <code>toDoList</code> 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 <code>MyToDoList</code> should be initialized with <code>toDoList</code> 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 <code>MyToDoList</code> should be initialized with <code>userInput</code> as an empty string.
|
- text: The state of <code>MyToDoList</code> should be initialized with <code>userInput</code> 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 <code>MyToDoList</code> should be initialized with <code>userInput</code> 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 <code>Create List</code> button is clicked, the <code>MyToDoList</code> component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the <code>textarea</code> element.
|
- text: When the <code>Create List</code> button is clicked, the <code>MyToDoList</code> component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the <code>textarea</code> 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 <code>Create List</code> button is clicked, the <code>MyToDoList</code> component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the <code>textarea</code> 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''); }; '
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -21,9 +21,9 @@ The code editor shows a <code>ShoppingCart</code> component. Define default prop
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>ShoppingCart</code> component should render.
|
- text: The <code>ShoppingCart</code> component should render.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })(), 'The <code>ShoppingCart</code> component should render.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })());
|
||||||
- text: 'The <code>ShoppingCart</code> component should have a default prop of <code>{ items: 0 }</code>.'
|
- text: 'The <code>ShoppingCart</code> component should have a default prop of <code>{ items: 0 }</code>.'
|
||||||
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); mockedComponent.setProps({items: undefined}); return mockedComponent.find(''ShoppingCart'').props().items === 0; })(), ''The <code>ShoppingCart</code> component should have a default prop of <code>{ items: 0 }</code>.'');'
|
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); mockedComponent.setProps({items: undefined}); return mockedComponent.find(''ShoppingCart'').props().items === 0; })());'
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -26,11 +26,11 @@ Define <code>propTypes</code> for the <code>Items</code> component to require <c
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>ShoppingCart</code> component should render.
|
- text: The <code>ShoppingCart</code> component should render.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })(), 'The <code>ShoppingCart</code> component should render.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })());
|
||||||
- text: The <code>Items</code> component should render.
|
- text: The <code>Items</code> component should render.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').length === 1; })(), 'The <code>Items</code> component should render.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').length === 1; })());
|
||||||
- text: The <code>Items</code> component should include a <code>propTypes</code> check that requires <code>quantity</code> to be a <code>number</code>.
|
- text: The <code>Items</code> component should include a <code>propTypes</code> check that requires <code>quantity</code> to be a <code>number</code>.
|
||||||
testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/ /g, ''); return noWhiteSpace.includes('quantity:PropTypes.number.isRequired') && noWhiteSpace.includes('Items.propTypes='); })(), 'The <code>Items</code> component should include a <code>propTypes</code> check that requires <code>quantity</code> to be a <code>number</code>.');
|
testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/ /g, ''); return noWhiteSpace.includes('quantity:PropTypes.number.isRequired') && noWhiteSpace.includes('Items.propTypes='); })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,13 +22,13 @@ There are two functional components defined in the code editor, called <code>Typ
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>TypesOfFood</code> component should return a single <code>div</code> element.
|
- text: The <code>TypesOfFood</code> component should return a single <code>div</code> element.
|
||||||
testString: assert(Enzyme.shallow(React.createElement(TypesOfFood)).type() === 'div', 'The <code>TypesOfFood</code> component should return a single <code>div</code> element.');
|
testString: assert(Enzyme.shallow(React.createElement(TypesOfFood)).type() === 'div');
|
||||||
- text: The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.
|
- text: The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.
|
||||||
testString: assert(Enzyme.shallow(React.createElement(TypesOfFood)).props().children[1].type.name === 'Fruits', 'The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.');
|
testString: assert(Enzyme.shallow(React.createElement(TypesOfFood)).props().children[1].type.name === 'Fruits');
|
||||||
- text: The <code>Fruits</code> component should return the <code>TypesOfFruit</code> component.
|
- text: The <code>Fruits</code> component should return the <code>TypesOfFruit</code> component.
|
||||||
testString: assert(Enzyme.mount(React.createElement(TypesOfFood)).find('h2').html() === '<h2>Fruits:</h2>', 'The <code>Fruits</code> component should return the <code>TypesOfFruit</code> component.');
|
testString: assert(Enzyme.mount(React.createElement(TypesOfFood)).find('h2').html() === '<h2>Fruits:</h2>');
|
||||||
- text: The <code>TypesOfFruit</code> component should return the <code>h2</code> and <code>ul</code> elements.
|
- text: The <code>TypesOfFruit</code> component should return the <code>h2</code> and <code>ul</code> elements.
|
||||||
testString: assert(Enzyme.mount(React.createElement(TypesOfFood)).find('ul').text() === 'ApplesBlueberriesStrawberriesBananas', 'The <code>TypesOfFruit</code> component should return the <code>h2</code> and <code>ul</code> elements.');
|
testString: assert(Enzyme.mount(React.createElement(TypesOfFood)).find('ul').text() === 'ApplesBlueberriesStrawberriesBananas');
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -24,11 +24,11 @@ Finally, click the button to see the conditional rendering of the component base
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: <code>MyComponent</code> should return a <code>div</code> element which contains a <code>button</code>.
|
- text: <code>MyComponent</code> should return a <code>div</code> element which contains a <code>button</code>.
|
||||||
testString: assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find('div').find('button').length, 1, '<code>MyComponent</code> should return a <code>div</code> element which contains a <code>button</code>.');
|
testString: assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find('div').find('button').length, 1);
|
||||||
- text: The state of <code>MyComponent</code> should initialize with a <code>visibility</code> property set to <code>false</code>.
|
- text: The state of <code>MyComponent</code> should initialize with a <code>visibility</code> property set to <code>false</code>.
|
||||||
testString: assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).state('visibility'), false, 'The state of <code>MyComponent</code> should initialize with a <code>visibility</code> property set to <code>false</code>.');
|
testString: assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).state('visibility'), false);
|
||||||
- text: Clicking the button element should toggle the <code>visibility</code> property in state between <code>true</code> and <code>false</code>.
|
- text: Clicking the button element should toggle the <code>visibility</code> property in state between <code>true</code> and <code>false</code>.
|
||||||
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 <code>visibility</code> property in state between <code>true</code> and <code>false</code>.''); }; '
|
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); }; '
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,11 +22,11 @@ There is a mock API call in <code>componentDidMount()</code>. It sets state afte
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: <code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.
|
- text: <code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.
|
||||||
testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return (mockedComponent.find('div').length === 1 && mockedComponent.find('h1').length === 1); })(), '<code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> 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 <code>componentDidMount</code>.
|
- text: Component state should be updated with a timeout function in <code>componentDidMount</code>.
|
||||||
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 <code>componentDidMount</code>.');
|
testString: assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return new RegExp('setTimeout(.|\n)+setState(.|\n)+activeUsers').test(String(mockedComponent.instance().componentDidMount)); })());
|
||||||
- text: The <code>h1</code> tag should render the <code>activeUsers</code> value from <code>MyComponent</code>'s state.
|
- text: The <code>h1</code> tag should render the <code>activeUsers</code> value from <code>MyComponent</code>'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 <code>h1</code> tag should render the <code>activeUsers</code> value from <code>MyComponent</code>'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())); }; '
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -32,9 +32,9 @@ The <code>componentWillMount()</code> method is called before the <code>render()
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: <code>MyComponent</code> should render a <code>div</code> element.
|
- text: <code>MyComponent</code> should render a <code>div</code> element.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').length === 1; })(), '<code>MyComponent</code> should render a <code>div</code> element.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').length === 1; })());
|
||||||
- text: <code>console.log</code> should be called in <code>componentWillMount</code>.
|
- text: <code>console.log</code> should be called in <code>componentWillMount</code>.
|
||||||
testString: assert((function() { const lifecycle = React.createElement(MyComponent).type.prototype.componentWillMount.toString().replace(/ /g,''); return lifecycle.includes('console.log('); })(), '<code>console.log</code> should be called in <code>componentWillMount</code>.');
|
testString: assert((function() { const lifecycle = React.createElement(MyComponent).type.prototype.componentWillMount.toString().replace(/ /g,''); return lifecycle.includes('console.log('); })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,11 +22,11 @@ Render this component to the DOM using <code>ReactDOM.render()</code>. There is
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: There should be a React component called <code>MyComponent</code>.
|
- text: There should be a React component called <code>MyComponent</code>.
|
||||||
testString: getUserInput => assert(getUserInput('index').replace(/\s/g, '').includes('classMyComponentextendsReact.Component{'), 'There should be a React component called <code>MyComponent</code>.');
|
testString: getUserInput => assert(getUserInput('index').replace(/\s/g, '').includes('classMyComponentextendsReact.Component{'));
|
||||||
- text: <code>MyComponent</code> should contain an <code>h1</code> tag with text <code>My First React Component!</code> Case and punctuation matter.
|
- text: <code>MyComponent</code> should contain an <code>h1</code> tag with text <code>My First React Component!</code> Case and punctuation matter.
|
||||||
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('h1').text() === 'My First React Component!'; })(), '<code>MyComponent</code> should contain an <code>h1</code> tag with text <code>My First React Component!</code> Case and punctuation matter.');
|
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('h1').text() === 'My First React Component!'; })());
|
||||||
- text: <code>MyComponent</code> should render to the DOM.
|
- text: <code>MyComponent</code> should render to the DOM.
|
||||||
testString: assert(document.getElementById('challenge-node').childNodes.length === 1, '<code>MyComponent</code> should render to the DOM.');
|
testString: assert(document.getElementById('challenge-node').childNodes.length === 1);
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,15 +22,15 @@ The <code>Counter</code> component keeps track of a <code>count</code> value in
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: <code>Counter</code> should return a <code>div</code> element which contains three buttons with text content in this order <code>Increment!</code>, <code>Decrement!</code>, <code>Reset</code>.
|
- text: <code>Counter</code> should return a <code>div</code> element which contains three buttons with text content in this order <code>Increment!</code>, <code>Decrement!</code>, <code>Reset</code>.
|
||||||
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'); })(), '<code>Counter</code> should return a <code>div</code> element which contains three buttons with text content in this order <code>Increment!</code>, <code>Decrement!</code>, <code>Reset</code>.');
|
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 <code>Counter</code> should initialize with a <code>count</code> property set to <code>0</code>.
|
- text: The state of <code>Counter</code> should initialize with a <code>count</code> property set to <code>0</code>.
|
||||||
testString: assert.strictEqual(Enzyme.mount(React.createElement(Counter)).state('count'), 0, 'The state of <code>Counter</code> should initialize with a <code>count</code> property set to <code>0</code>.');
|
testString: assert.strictEqual(Enzyme.mount(React.createElement(Counter)).state('count'), 0);
|
||||||
- text: Clicking the increment button should increment the count by <code>1</code>.
|
- text: Clicking the increment button should increment the count by <code>1</code>.
|
||||||
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 <code>1</code>.''); }; '
|
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 <code>1</code>.
|
- text: Clicking the decrement button should decrement the count by <code>1</code>.
|
||||||
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 <code>1</code>.''); }; '
|
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 <code>0</code>.
|
- text: Clicking the reset button should reset the count to <code>0</code>.
|
||||||
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 <code>0</code>.''); }; '
|
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); }; '
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -32,13 +32,13 @@ There are <code>counterReducer()</code> and <code>authReducer()</code> functions
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>counterReducer</code> should increment and decrement the <code>state</code>.
|
- text: The <code>counterReducer</code> should increment and decrement the <code>state</code>.
|
||||||
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 <code>counterReducer</code> should increment and decrement the <code>state</code>.'');'
|
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 <code>authReducer</code> should toggle the <code>state</code> of <code>authenticated</code> between <code>true</code> and <code>false</code>.
|
- text: The <code>authReducer</code> should toggle the <code>state</code> of <code>authenticated</code> between <code>true</code> and <code>false</code>.
|
||||||
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 <code>authReducer</code> should toggle the <code>state</code> of <code>authenticated</code> between <code>true</code> and <code>false</code>.'');'
|
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 <code>state</code> should have two keys: <code>count</code>, which holds a number, and <code>auth</code>, which holds an object. The <code>auth</code> object should have a property of <code>authenticated</code>, which holds a boolean.'
|
- text: 'The store <code>state</code> should have two keys: <code>count</code>, which holds a number, and <code>auth</code>, which holds an object. The <code>auth</code> object should have a property of <code>authenticated</code>, 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 <code>state</code> should have two keys: <code>count</code>, which holds a number, and <code>auth</code>, which holds an object. The <code>auth</code> object should have a property of <code>authenticated</code>, 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 <code>rootReducer</code> should be a function that combines the <code>counterReducer</code> and the <code>authReducer</code>.
|
- text: The <code>rootReducer</code> should be a function that combines the <code>counterReducer</code> and the <code>authReducer</code>.
|
||||||
testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/\s/g,''); return typeof rootReducer === 'function' && noWhiteSpace.includes('Redux.combineReducers') })(), 'The <code>rootReducer</code> should be a function that combines the <code>counterReducer</code> and the <code>authReducer</code>.');
|
testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/\s/g,''); return typeof rootReducer === 'function' && noWhiteSpace.includes('Redux.combineReducers') })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -23,13 +23,13 @@ The Redux state and actions were modified to handle an <code>object</code> for t
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The Redux store should exist and initialize with a state that is equivalent to the <code>defaultState</code> object declared on line 1.
|
- text: The Redux store should exist and initialize with a state that is equivalent to the <code>defaultState</code> 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 <code>defaultState</code> 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: <code>wakeUp</code> and <code>immutableReducer</code> both should be functions.
|
- text: <code>wakeUp</code> and <code>immutableReducer</code> both should be functions.
|
||||||
testString: assert(typeof wakeUp === 'function' && typeof immutableReducer === 'function', '<code>wakeUp</code> and <code>immutableReducer</code> both should be functions.');
|
testString: assert(typeof wakeUp === 'function' && typeof immutableReducer === 'function');
|
||||||
- text: Dispatching an action of type <code>ONLINE</code> should update the property <code>status</code> in state to <code>online</code> and should NOT mutate state.
|
- text: Dispatching an action of type <code>ONLINE</code> should update the property <code>status</code> in state to <code>online</code> 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 <code>ONLINE</code> should update the property <code>status</code> in state to <code>online</code> 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: <code>Object.assign</code> should be used to return new state.
|
- text: <code>Object.assign</code> should be used to return new state.
|
||||||
testString: getUserInput => assert(getUserInput('index').includes('Object.assign'), '<code>Object.assign</code> should be used to return new state.');
|
testString: getUserInput => assert(getUserInput('index').includes('Object.assign'));
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -25,9 +25,9 @@ Declare a <code>store</code> variable and assign it to the <code>createStore()</
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The redux store exists.
|
- 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.
|
- 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);
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,9 +22,9 @@ Writing a Redux action is as simple as declaring an object with a type property.
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: An action object should exist.
|
- 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 <code>LOGIN</code>.
|
- text: The action should have a key property type with value <code>LOGIN</code>.
|
||||||
testString: assert((function() { return action.type === 'LOGIN' })(), 'The action should have a key property type with value <code>LOGIN</code>.');
|
testString: assert((function() { return action.type === 'LOGIN' })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -21,11 +21,11 @@ Define a function named <code>actionCreator()</code> that returns the <code>acti
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The function <code>actionCreator</code> should exist.
|
- text: The function <code>actionCreator</code> should exist.
|
||||||
testString: assert(typeof actionCreator === 'function', 'The function <code>actionCreator</code> should exist.');
|
testString: assert(typeof actionCreator === 'function');
|
||||||
- text: Running the <code>actionCreator</code> function should return the action object.
|
- text: Running the <code>actionCreator</code> function should return the action object.
|
||||||
testString: assert(typeof action === 'object', 'Running the <code>actionCreator</code> function should return the action object.');
|
testString: assert(typeof action === 'object');
|
||||||
- text: The returned action should have a key property type with value <code>LOGIN</code>.
|
- text: The returned action should have a key property type with value <code>LOGIN</code>.
|
||||||
testString: assert(action.type === 'LOGIN', 'The returned action should have a key property type with value <code>LOGIN</code>.');
|
testString: assert(action.type === 'LOGIN');
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -28,11 +28,11 @@ The Redux store in the code editor has an initialized state that's an object con
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: Calling the function <code>loginAction</code> should return an object with <code>type</code> property set to the string <code>LOGIN</code>.
|
- text: Calling the function <code>loginAction</code> should return an object with <code>type</code> property set to the string <code>LOGIN</code>.
|
||||||
testString: assert(loginAction().type === 'LOGIN', 'Calling the function <code>loginAction</code> should return an object with <code>type</code> property set to the string <code>LOGIN</code>.');
|
testString: assert(loginAction().type === 'LOGIN');
|
||||||
- text: The store should be initialized with an object with property <code>login</code> set to <code>false</code>.
|
- text: The store should be initialized with an object with property <code>login</code> set to <code>false</code>.
|
||||||
testString: assert(store.getState().login === false, 'The store should be initialized with an object with property <code>login</code> set to <code>false</code>.');
|
testString: assert(store.getState().login === false);
|
||||||
- text: The <code>store.dispatch()</code> method should be used to dispatch an action of type <code>LOGIN</code>.
|
- text: The <code>store.dispatch()</code> method should be used to dispatch an action of type <code>LOGIN</code>.
|
||||||
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 <code>store.dispatch()</code> method should be used to dispatch an action of type <code>LOGIN</code>.');"
|
testString: "getUserInput => assert((function() { let noWhiteSpace = getUserInput('index').replace(/\\s/g,''); return noWhiteSpace.includes('store.dispatch(loginAction())') || noWhiteSpace.includes('store.dispatch({type: \\'LOGIN\\'})') === true })());"
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -21,9 +21,9 @@ The code from the previous challenge is re-written more concisely in the code ed
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The redux store should have a value of 5 for the initial state.
|
- 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 <code>currentState</code> should exist and should be assigned the current state of the Redux store.
|
- text: A variable <code>currentState</code> 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 <code>currentState</code> should exist and should be assigned the current state of the Redux store.');
|
testString: getUserInput => assert(currentState === 5 && getUserInput('index').includes('store.getState()'));
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,13 +22,13 @@ The code editor has the previous example as well as the start of a <code>reducer
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: Calling the function <code>loginAction</code> should return an object with type property set to the string <code>LOGIN</code>.
|
- text: Calling the function <code>loginAction</code> should return an object with type property set to the string <code>LOGIN</code>.
|
||||||
testString: assert(loginAction().type === 'LOGIN', 'Calling the function <code>loginAction</code> should return an object with type property set to the string <code>LOGIN</code>.');
|
testString: assert(loginAction().type === 'LOGIN');
|
||||||
- text: The store should be initialized with an object with property <code>login</code> set to <code>false</code>.
|
- text: The store should be initialized with an object with property <code>login</code> set to <code>false</code>.
|
||||||
testString: assert(store.getState().login === false, 'The store should be initialized with an object with property <code>login</code> set to <code>false</code>.');
|
testString: assert(store.getState().login === false);
|
||||||
- text: Dispatching <code>loginAction</code> should update the <code>login</code> property in the store state to <code>true</code>.
|
- text: Dispatching <code>loginAction</code> should update the <code>login</code> property in the store state to <code>true</code>.
|
||||||
testString: assert((function() { const initialState = store.getState(); store.dispatch(loginAction()); const afterState = store.getState(); return initialState.login === false && afterState.login === true })(), 'Dispatching <code>loginAction</code> should update the <code>login</code> property in the store state to <code>true</code>.');
|
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 <code>LOGIN</code>, the store should return the current state.
|
- text: If the action is not of type <code>LOGIN</code>, 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 <code>LOGIN</code>, 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'') })());'
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -23,11 +23,11 @@ There is a <code>store</code> and <code>reducer</code> in the code editor for ma
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The Redux store should exist and initialize with a state equal to the <code>todos</code> array in the code editor.
|
- text: The Redux store should exist and initialize with a state equal to the <code>todos</code> 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 <code>todos</code> 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: <code>addToDo</code> and <code>immutableReducer</code> both should be functions.
|
- text: <code>addToDo</code> and <code>immutableReducer</code> both should be functions.
|
||||||
testString: assert(typeof addToDo === 'function' && typeof immutableReducer === 'function', '<code>addToDo</code> and <code>immutableReducer</code> both should be functions.');
|
testString: assert(typeof addToDo === 'function' && typeof immutableReducer === 'function');
|
||||||
- text: Dispatching an action of type <code>ADD_TO_DO</code> on the Redux store should add a <code>todo</code> item and should NOT mutate state.
|
- text: Dispatching an action of type <code>ADD_TO_DO</code> on the Redux store should add a <code>todo</code> 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 <code>ADD_TO_DO</code> on the Redux store should add a <code>todo</code> 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)); })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -21,11 +21,11 @@ Write a callback function that increments the global variable <code>count</code>
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: Dispatching the <code>ADD</code> action on the store should increment the state by <code>1</code>.
|
- text: Dispatching the <code>ADD</code> action on the store should increment the state by <code>1</code>.
|
||||||
testString: 'assert((function() { const initialState = store.getState(); store.dispatch({ type: ''ADD'' }); const newState = store.getState(); return newState === (initialState + 1); })(), ''Dispatching the <code>ADD</code> action on the store should increment the state by <code>1</code>.'');'
|
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 <code>store.subscribe</code>.
|
- text: There should be a listener function subscribed to the store using <code>store.subscribe</code>.
|
||||||
testString: getUserInput => assert(getUserInput('index').includes('store.subscribe('), 'There should be a listener function subscribed to the store using <code>store.subscribe</code>.');
|
testString: getUserInput => assert(getUserInput('index').includes('store.subscribe('));
|
||||||
- text: The callback to <code>store.subscribe</code> should also increment the global <code>count</code> variable as the store is updated.
|
- text: The callback to <code>store.subscribe</code> should also increment the global <code>count</code> variable as the store is updated.
|
||||||
testString: assert(store.getState() === count, 'The callback to <code>store.subscribe</code> should also increment the global <code>count</code> variable as the store is updated.');
|
testString: assert(store.getState() === count);
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -21,11 +21,11 @@ The reducer and action creator were modified to remove an item from an array bas
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The Redux store should exist and initialize with a state equal to <code>[0,1,2,3,4,5]</code>
|
- text: The Redux store should exist and initialize with a state equal to <code>[0,1,2,3,4,5]</code>
|
||||||
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 <code>[0,1,2,3,4,5]</code>');
|
testString: assert((function() { const initialState = store.getState(); return (Array.isArray(initialState) === true && DeepEqual(initialState, [0, 1, 2, 3, 4, 5])); })());
|
||||||
- text: <code>removeItem</code> and <code>immutableReducer</code> both should be functions.
|
- text: <code>removeItem</code> and <code>immutableReducer</code> both should be functions.
|
||||||
testString: assert(typeof removeItem === 'function' && typeof immutableReducer === 'function', '<code>removeItem</code> and <code>immutableReducer</code> both should be functions.');
|
testString: assert(typeof removeItem === 'function' && typeof immutableReducer === 'function');
|
||||||
- text: Dispatching the <code>removeItem</code> action creator should remove items from the state and should NOT mutate state.
|
- text: Dispatching the <code>removeItem</code> 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 <code>removeItem</code> 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]); })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -23,9 +23,9 @@ The action is dispatched at the bottom of the code. Once you're finished, run th
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The action creator <code>addNoteText</code> should return an object with keys <code>type</code> and <code>text</code>.
|
- text: The action creator <code>addNoteText</code> should return an object with keys <code>type</code> and <code>text</code>.
|
||||||
testString: assert((function() { const addNoteFn = addNoteText('__TEST__NOTE'); return addNoteFn.type === ADD_NOTE && addNoteFn.text === '__TEST__NOTE' })(), 'The action creator <code>addNoteText</code> should return an object with keys <code>type</code> and <code>text</code>.');
|
testString: assert((function() { const addNoteFn = addNoteText('__TEST__NOTE'); return addNoteFn.type === ADD_NOTE && addNoteFn.text === '__TEST__NOTE' })());
|
||||||
- text: Dispatching an action of type <code>ADD_NOTE</code> with the <code>addNoteText</code> action creator should update the <code>state</code> to the string passed to the action creator.
|
- text: Dispatching an action of type <code>ADD_NOTE</code> with the <code>addNoteText</code> action creator should update the <code>state</code> 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 <code>ADD_NOTE</code> with the <code>addNoteText</code> action creator should update the <code>state</code> 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' })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,17 +22,17 @@ The code editor has a store, actions, and action creators set up for you. Fill i
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: Calling the function <code>loginUser</code> should return an object with type property set to the string <code>LOGIN</code>.
|
- text: Calling the function <code>loginUser</code> should return an object with type property set to the string <code>LOGIN</code>.
|
||||||
testString: assert(loginUser().type === 'LOGIN', 'Calling the function <code>loginUser</code> should return an object with type property set to the string <code>LOGIN</code>.');
|
testString: assert(loginUser().type === 'LOGIN');
|
||||||
- text: Calling the function <code>logoutUser</code> should return an object with type property set to the string <code>LOGOUT</code>.
|
- text: Calling the function <code>logoutUser</code> should return an object with type property set to the string <code>LOGOUT</code>.
|
||||||
testString: assert(logoutUser().type === 'LOGOUT', 'Calling the function <code>logoutUser</code> should return an object with type property set to the string <code>LOGOUT</code>.');
|
testString: assert(logoutUser().type === 'LOGOUT');
|
||||||
- text: The store should be initialized with an object with an <code>authenticated</code> property set to <code>false</code>.
|
- text: The store should be initialized with an object with an <code>authenticated</code> property set to <code>false</code>.
|
||||||
testString: assert(store.getState().authenticated === false, 'The store should be initialized with an object with an <code>authenticated</code> property set to <code>false</code>.');
|
testString: assert(store.getState().authenticated === false);
|
||||||
- text: Dispatching <code>loginUser</code> should update the <code>authenticated</code> property in the store state to <code>true</code>.
|
- text: Dispatching <code>loginUser</code> should update the <code>authenticated</code> property in the store state to <code>true</code>.
|
||||||
testString: assert((function() { const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })(), 'Dispatching <code>loginUser</code> should update the <code>authenticated</code> property in the store state to <code>true</code>.');
|
testString: assert((function() { const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })());
|
||||||
- text: Dispatching <code>logoutUser</code> should update the <code>authenticated</code> property in the store state to <code>false</code>.
|
- text: Dispatching <code>logoutUser</code> should update the <code>authenticated</code> property in the store state to <code>false</code>.
|
||||||
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 <code>logoutUser</code> should update the <code>authenticated</code> property in the store state to <code>false</code>.');
|
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 <code>authReducer</code> function should handle multiple action types with a <code>switch</code> statement.
|
- text: The <code>authReducer</code> function should handle multiple action types with a <code>switch</code> statement.
|
||||||
testString: getUserInput => assert( getUserInput('index').toString().includes('switch') && getUserInput('index').toString().includes('case') && getUserInput('index').toString().includes('default'), 'The <code>authReducer</code> function should handle multiple action types with a <code>switch</code> statement.');
|
testString: getUserInput => assert( getUserInput('index').toString().includes('switch') && getUserInput('index').toString().includes('case') && getUserInput('index').toString().includes('default'));
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -22,21 +22,21 @@ Declare <code>LOGIN</code> and <code>LOGOUT</code> as <code>const</code> values
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: Calling the function <code>loginUser</code> should return an object with <code>type</code> property set to the string <code>LOGIN</code>.
|
- text: Calling the function <code>loginUser</code> should return an object with <code>type</code> property set to the string <code>LOGIN</code>.
|
||||||
testString: assert(loginUser().type === 'LOGIN', 'Calling the function <code>loginUser</code> should return an object with <code>type</code> property set to the string <code>LOGIN</code>.');
|
testString: assert(loginUser().type === 'LOGIN');
|
||||||
- text: Calling the function <code>logoutUser</code> should return an object with <code>type</code> property set to the string <code>LOGOUT</code>.
|
- text: Calling the function <code>logoutUser</code> should return an object with <code>type</code> property set to the string <code>LOGOUT</code>.
|
||||||
testString: assert(logoutUser().type === 'LOGOUT', 'Calling the function <code>logoutUser</code> should return an object with <code>type</code> property set to the string <code>LOGOUT</code>.');
|
testString: assert(logoutUser().type === 'LOGOUT');
|
||||||
- text: The store should be initialized with an object with property <code>login</code> set to <code>false</code>.
|
- text: The store should be initialized with an object with property <code>login</code> set to <code>false</code>.
|
||||||
testString: assert(store.getState().authenticated === false, 'The store should be initialized with an object with property <code>login</code> set to <code>false</code>.');
|
testString: assert(store.getState().authenticated === false);
|
||||||
- text: Dispatching <code>loginUser</code> should update the <code>login</code> property in the store state to <code>true</code>.
|
- text: Dispatching <code>loginUser</code> should update the <code>login</code> property in the store state to <code>true</code>.
|
||||||
testString: assert((function() { const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })(), 'Dispatching <code>loginUser</code> should update the <code>login</code> property in the store state to <code>true</code>.');
|
testString: assert((function() { const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })());
|
||||||
- text: Dispatching <code>logoutUser</code> should update the <code>login</code> property in the store state to <code>false</code>.
|
- text: Dispatching <code>logoutUser</code> should update the <code>login</code> property in the store state to <code>false</code>.
|
||||||
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 <code>logoutUser</code> should update the <code>login</code> property in the store state to <code>false</code>.');
|
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 <code>authReducer</code> function should handle multiple action types with a switch statement.
|
- text: The <code>authReducer</code> 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 <code>authReducer</code> 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: <code>LOGIN</code> and <code>LOGOUT</code> should be declared as <code>const</code> values and should be assigned strings of <code>LOGIN</code>and <code>LOGOUT</code>.
|
- text: <code>LOGIN</code> and <code>LOGOUT</code> should be declared as <code>const</code> values and should be assigned strings of <code>LOGIN</code>and <code>LOGOUT</code>.
|
||||||
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"')) })(), '<code>LOGIN</code> and <code>LOGOUT</code> should be declared as <code>const</code> values and should be assigned strings of <code>LOGIN</code>and <code>LOGOUT</code>.');
|
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 <code>LOGIN</code> and <code>LOGOUT</code> constants.
|
- text: The action creators and the reducer should reference the <code>LOGIN</code> and <code>LOGOUT</code> 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 <code>LOGIN</code> and <code>LOGOUT</code> 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') })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -24,15 +24,15 @@ Write both dispatches in the <code>handleAsync()</code> action creator. Dispatch
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The <code>requestingData</code> action creator should return an object of type equal to the value of <code>REQUESTING_DATA</code>.
|
- text: The <code>requestingData</code> action creator should return an object of type equal to the value of <code>REQUESTING_DATA</code>.
|
||||||
testString: assert(requestingData().type === REQUESTING_DATA, 'The <code>requestingData</code> action creator should return an object of type equal to the value of <code>REQUESTING_DATA</code>.');
|
testString: assert(requestingData().type === REQUESTING_DATA);
|
||||||
- text: The <code>receivedData</code> action creator should return an object of type equal to the value of <code>RECEIVED_DATA</code>.
|
- text: The <code>receivedData</code> action creator should return an object of type equal to the value of <code>RECEIVED_DATA</code>.
|
||||||
testString: assert(receivedData('data').type === RECEIVED_DATA, 'The <code>receivedData</code> action creator should return an object of type equal to the value of <code>RECEIVED_DATA</code>.');
|
testString: assert(receivedData('data').type === RECEIVED_DATA);
|
||||||
- text: <code>asyncDataReducer</code> should be a function.
|
- text: <code>asyncDataReducer</code> should be a function.
|
||||||
testString: assert(typeof asyncDataReducer === 'function', '<code>asyncDataReducer</code> should be a function.');
|
testString: assert(typeof asyncDataReducer === 'function');
|
||||||
- text: Dispatching the requestingData action creator should update the store <code>state</code> property of fetching to <code>true</code>.
|
- text: Dispatching the requestingData action creator should update the store <code>state</code> property of fetching to <code>true</code>.
|
||||||
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 <code>state</code> property of fetching to <code>true</code>.');
|
testString: assert((function() { const initialState = store.getState(); store.dispatch(requestingData()); const reqState = store.getState(); return initialState.fetching === false && reqState.fetching === true })());
|
||||||
- text: Dispatching <code>handleAsync</code> should dispatch the data request action and then dispatch the received data action after a delay.
|
- text: Dispatching <code>handleAsync</code> 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 <code>handleAsync</code> 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 })());
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -23,13 +23,13 @@ Use the spread operator to return a new copy of state when a to-do is added.
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The Redux store should exist and initialize with a state equal to <code>[Do not mutate state!]</code>.
|
- text: The Redux store should exist and initialize with a state equal to <code>[Do not mutate state!]</code>.
|
||||||
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 <code>[Do not mutate state!]</code>.');
|
testString: assert((function() { const initialState = store.getState(); return ( Array.isArray(initialState) === true && initialState[0] === 'Do not mutate state!'); })());
|
||||||
- text: <code>addToDo</code> and <code>immutableReducer</code> both should be functions.
|
- text: <code>addToDo</code> and <code>immutableReducer</code> both should be functions.
|
||||||
testString: assert(typeof addToDo === 'function' && typeof immutableReducer === 'function', '<code>addToDo</code> and <code>immutableReducer</code> both should be functions.');
|
testString: assert(typeof addToDo === 'function' && typeof immutableReducer === 'function');
|
||||||
- text: Dispatching an action of type <code>ADD_TO_DO</code> on the Redux store should add a <code>todo</code> item and should NOT mutate state.
|
- text: Dispatching an action of type <code>ADD_TO_DO</code> on the Redux store should add a <code>todo</code> 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 <code>ADD_TO_DO</code> on the Redux store should add a <code>todo</code> 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.
|
- 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'));
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -21,17 +21,17 @@ In this lesson, you'll implement a simple counter with Redux from scratch. The b
|
|||||||
```yml
|
```yml
|
||||||
tests:
|
tests:
|
||||||
- text: The action creator <code>incAction</code> should return an action object with <code>type</code> equal to the value of <code>INCREMENT</code>
|
- text: The action creator <code>incAction</code> should return an action object with <code>type</code> equal to the value of <code>INCREMENT</code>
|
||||||
testString: assert(incAction().type ===INCREMENT, 'The action creator <code>incAction</code> should return an action object with <code>type</code> equal to the value of <code>INCREMENT</code>');
|
testString: assert(incAction().type ===INCREMENT);
|
||||||
- text: The action creator <code>decAction</code> should return an action object with <code>type</code> equal to the value of <code>DECREMENT</code>
|
- text: The action creator <code>decAction</code> should return an action object with <code>type</code> equal to the value of <code>DECREMENT</code>
|
||||||
testString: assert(decAction().type === DECREMENT, 'The action creator <code>decAction</code> should return an action object with <code>type</code> equal to the value of <code>DECREMENT</code>');
|
testString: assert(decAction().type === DECREMENT);
|
||||||
- text: The Redux store should initialize with a <code>state</code> of 0.
|
- text: The Redux store should initialize with a <code>state</code> of 0.
|
||||||
testString: assert(store.getState() === 0, 'The Redux store should initialize with a <code>state</code> of 0.');
|
testString: assert(store.getState() === 0);
|
||||||
- text: Dispatching <code>incAction</code> on the Redux store should increment the <code>state</code> by 1.
|
- text: Dispatching <code>incAction</code> on the Redux store should increment the <code>state</code> by 1.
|
||||||
testString: assert((function() { const initialState = store.getState(); store.dispatch(incAction()); const incState = store.getState(); return initialState + 1 === incState })(), 'Dispatching <code>incAction</code> on the Redux store should increment the <code>state</code> by 1.');
|
testString: assert((function() { const initialState = store.getState(); store.dispatch(incAction()); const incState = store.getState(); return initialState + 1 === incState })());
|
||||||
- text: Dispatching <code>decAction</code> on the Redux store should decrement the <code>state</code> by 1.
|
- text: Dispatching <code>decAction</code> on the Redux store should decrement the <code>state</code> by 1.
|
||||||
testString: assert((function() { const initialState = store.getState(); store.dispatch(decAction()); const decState = store.getState(); return initialState - 1 === decState })(), 'Dispatching <code>decAction</code> on the Redux store should decrement the <code>state</code> by 1.');
|
testString: assert((function() { const initialState = store.getState(); store.dispatch(decAction()); const decState = store.getState(); return initialState - 1 === decState })());
|
||||||
- text: <code>counterReducer</code> should be a function
|
- text: <code>counterReducer</code> should be a function
|
||||||
testString: assert(typeof counterReducer === 'function', '<code>counterReducer</code> should be a function');
|
testString: assert(typeof counterReducer === 'function');
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user