text: /* eslint-disable */
  import React from 'react'
  import assert from 'assert'
  import { shallow } from 'enzyme'
  import { transform } from 'babel-standalone'
  
  // snippet for defining HTML: <code>&lt;div /&gt;</code>
  
  // SET TO TRUE WHEN QA IS COMPLETE:
  export const QA = false;
  
  // ---------------------------- define challenge title ----------------------------
  export const challengeTitle = `<span class = 'default'>Challenge: </span>Access Props Using this.props`
  
  // ---------------------------- challenge text ----------------------------
  export const challengeText = `<span class = 'default'>Intro: </span>
  The last several challenges covered the basic ways to pass props to child components. But what if the child component that you're passing a prop to is an ES6 class component, rather than a stateless functional component? The ES6 class component uses a slightly different convention to access props.<br><br>
  
  Anytime you refer to a class component within itself, you use the <code>this</code> keyword. To access props within a class component, you preface the code that you use to access it with <code>this</code>. For example, if an ES6 class component has a prop called <code>data</code>, you write <code>{this.props.data}</code> in JSX.`
  
  // ---------------------------- challenge instructions ----------------------------
  export const challengeInstructions = `<span class = 'default'>Instructions: </span>
  Render an instance of the <code>ReturnTempPassword</code> component in the parent component <code>ResetPassword</code>. Give this component a prop of <code>tempPassword</code> and assign it a value of a string that is at least 8 characters long. Within the child, <code>ReturnTempPassword</code>, access the <code>tempPassword</code> prop within the <code>strong</code> tags to make sure the user sees the temporary password.`
  
  // ---------------------------- define challenge seed code ----------------------------
  export const seedCode =
  `class ReturnTempPassword extends React.Component {
    constructor(props) {
    	super(props);
  
    }
    render() {
      return (
          <div>
          		{ /* change code below this line */ }
              <p>Your temporary password is: <strong></strong></p>
              { /* change code above this line */ }
          </div>
      );
    }
  };
  
  class ResetPassword extends React.Component {
    constructor(props) {
    	super(props);
  
    }
    render() {
      return (
          <div>
          	<h2>Reset Password</h2>
          	<h3>We've generated a new temporary password for you.</h3>
          	<h3>Please reset this password from your account settings ASAP.</h3>
          	{ /* change code below this line */ }
  
          	{ /* change code above this line */ }
          </div>
      );
    }
  };`
  
  // ---------------------------- define challenge solution code ----------------------------
  export const solutionCode =
  `class ReturnTempPassword extends React.Component {
    constructor(props) {
    	super(props);
  
    }
    render() {
      return (
          <div>
              <p>Your temporary password is: <strong>{this.props.tempPassword}</strong></p>
          </div>
      );
    }
  };
  
  class ResetPassword extends React.Component {
    constructor(props) {
    	super(props);
  
    }
    render() {
      return (
          <div>
          	<h2>Reset Password</h2>
          	<h3>We've generated a new temporary password for you.</h3>
          	<h3>Please reset this password from your account settings ASAP.</h3>
          	{ /* change code below this line */ }
            <ReturnTempPassword tempPassword="serrPbqrPnzc" />
          	{ /* change code above this line */ }
          </div>
      );
    }
  };`
  
  // ---------------------------- define challenge tests ----------------------------
  
  export const executeTests = (code) => {
  
  	const error_0 = 'Your JSX code should transpile successfully.';
  	const error_1 = 'The ResetPassword component should return a single div element.';
  	const error_2 = 'The ResetPassword component\'s fourth child should be the ReturnTempPassword component.';
  	const error_3 = 'The ReturnTempPassword component should have a prop called tempPassword.';
  	const error_4 = 'The ReturnTempPassword component\'s tempPassword prop should be equal to a string of at least 8 characters.';
  
  	let testResults = [
  		{
  			test: 0,
  			status: false,
  			condition: error_0
  		},
  		{
  			test: 1,
  			status: false,
  			condition: error_1
  		},
  		{
  			test: 2,
  			status: false,
  			condition: error_2
  		},
  		{
  			test: 3,
  			status: false,
  			condition: error_3
  		},
  		{
  			test: 3,
  			status: false,
  			condition: error_4
  		}
  	];
  
  	let es5, mockedComponent, passed = true;
  
  	// this applies an export to the user's code so
  	// we can access their component here for tests
  	const exportScript = '\n export default ResetPassword'
  	const modifiedCode = code.concat(exportScript);
  
  	// test 0: try to transpile JSX, ES6 code to ES5 in browser
  	try {
  		es5 = transform(modifiedCode, { presets: [ 'es2015', 'react' ] }).code;
  		testResults[0].status = true;
  	} catch (err) {
  		passed = false;
  		testResults[0].status = false;
  	}
  
  	// now we will try to shallow render the component with Enzyme's shallow method
  	// you can also use mount to perform a full render to the DOM environment
  	// to do this you must import mount above; i.e. import { shallow, mount } from enzyme
  	try {
  		mockedComponent = shallow(React.createElement(eval(es5)));
  	} catch (err) {
  		passed = false;
  	}
  
  	console.log(mockedComponent.props());
  
  	// run specific tests to verify the functionality
  	// that the challenge is trying to assess:
  
  	// test 1:
  	try {
  		assert.strictEqual(mockedComponent.type(), 'div', error_1);
  		testResults[1].status = true;
  	} catch (err) {
  		passed = false;
  		testResults[1].status = false;
  	}
  
  	// test 2:
  	try {
  		assert.strictEqual(mockedComponent.nodes[0].props.children[3].type.name, 'ReturnTempPassword', error_2)
  		testResults[2].status = true;
  	} catch (err) {
  		passed = false;
  		testResults[2].status = false;
  	}
  
  	// test 3:
  	try {
  		assert(mockedComponent.props().children[3].props.hasOwnProperty('tempPassword'), error_3)
  		testResults[3].status = true;
  	} catch (err) {
  		passed = false;
  		testResults[3].status = false;
  	}
  
  	// test 4:
  	try {
  		assert(typeof mockedComponent.props().children[3].props.tempPassword === 'string' &&
  			mockedComponent.props().children[3].props.tempPassword.length >= 8, error_4)
  		testResults[4].status = true;
  	} catch (err) {
  		passed = false;
  		testResults[4].status = false;
  	}
  
  	return {
  		passed,
  		testResults
  	}
  
  }
  
  // ---------------------------- define live render function ----------------------------
  
  export const liveRender = (code) => {
  
  	try {
  		const exportScript = '\n export default ResetPassword'
  		const modifiedCode = code.concat(exportScript);
  		const es5 = transform(modifiedCode, { presets: [ 'es2015', 'react' ] }).code;
  		const renderedComponent = React.createElement(eval(es5));
  		return renderedComponent;
  	} catch (err) {
  		console.log('Live rendering failed', err);
  	}
  
  }
  