content: /* eslint-disable */
  import React from 'react'
  import assert from 'assert'
  
  import { transform } from 'babel-standalone'
  
  import Enzyme from '../Enzyme';
  const shallow = Enzyme.shallow;
  const mount = Enzyme.mount;
  const render = Enzyme.render;
  
  export const QA = true;
  
  // ---------------------------- define challenge title ----------------------------
  export const challengeTitle = `<span class = 'default'>Challenge: </span>Use Default Props`
  
  // ---------------------------- challenge text ----------------------------
  export const challengeText = `<span class = 'default'>Intro: </span>React also has an option to set default props. You can assign default props to a component as a property on the component itself and React assigns the default prop if necessary. This allows you to specify what a prop value should be if no value is explicitly provided. For example, if you declare <code>MyComponent.defaultProps = { location: 'San Francisco' }</code>, you have defined a location prop that's set to the string <code>San Francisco</code>, unless you specify otherwise. React assigns default props if
  props are undefined, but if you pass <code>null</code> as the value for a prop, it will remain <code>null</code>.`
  
  // ---------------------------- challenge instructions ----------------------------
  export const challengeInstructions = `<span class = 'default'>Instructions: </span>The code editor shows a <code>ShoppingCart</code> component. Define default props on this component which specify a prop <code>items</code> with a value of <code>0</code>.`
  
  // ---------------------------- define challenge seed code ----------------------------
  export const seedCode =
  `const ShoppingCart = (props) => {
    return (
      <div>
        <h1>Shopping Cart Component</h1>
      </div>
    )
  };
  // change code below this line
  `
  
  // ---------------------------- define challenge solution code ----------------------------
  export const solutionCode =
  `const ShoppingCart = (props) => {
    return (
      <div>
        <h1>Shopping Cart Component</h1>
      </div>
    )
  };
  
  // change code below this line
  ShoppingCart.defaultProps = {
    items: 0
  }`
  
  // ---------------------------- define challenge tests ----------------------------
  
  export const executeTests = (code, errorSuppression) => {
  
    const error_1 = 'The ShoppingCart component should render.';
    const error_2 = 'The ShoppingCart component should have a default prop of { items: 0 }';
  
    let testResults = [
      {
        test: 0,
        status: false,
        condition: 'Your JSX code should transpile successfully.'
      },
      {
        test: 1,
        status: false,
        condition: error_1
      },
      {
        test: 2,
        status: false,
        condition: error_2
      }
    ];
  
    let es5, mockedComponent, shallowRender, passed = true;
  
    const exportScript = '\n export default ShoppingCart'
    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;
      if (!errorSuppression) console.log('No transpilation errors!');
    } catch (err) {
      passed = false;
      testResults[0].status = false;
      if (!errorSuppression) console.error(`Transpilation error: ${err}`);
    }
  
    // 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 {
      var React = require('react');
      mockedComponent = mount(React.createElement(eval(es5)));
    } catch (err) {
      passed = false;
      if (!errorSuppression) console.error(`Invalid React code: ${err}`);
    }
  
    // run specific tests to verify the functionality
    // that the challenge is trying to assess:
  
    // test 1:
    try {
      assert.strictEqual(mockedComponent.find('ShoppingCart').length, 1, error_1);
      testResults[1].status = true;
    } catch (err) {
      passed = false;
      testResults[1].status = false;
    }
  
    // test 2:
    try {
      mockedComponent.setProps({items: undefined});
      assert.strictEqual(mockedComponent.find('ShoppingCart').props().items, 0, error_2);
      testResults[2].status = true;
    } catch (err) {
      passed = false;
      testResults[2].status = false;
    }
  
  
    return {
      passed,
      testResults
    }
  
  }
  
  // ---------------------------- define live render function ----------------------------
  
  export const liveRender = (code) => {
  
    try {
      const exportScript = '\n export default ShoppingCart'
      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 failure: ${err}`);
    }
  
  }
  