<commit_before>/* eslint-disable */
import React from 'react'
import assert from 'assert'
import { shallow } from 'enzyme'
import { transform } from 'babel-standalone'

// snippet for defining HTML: <code>&#60;div /&#62</code>

// SET TO TRUE WHEN QA IS COMPLETE:
export const QA = false;

// -------------- define challenge title and challenge instructions --------------
export const challengeTitle = `<span class = 'default'>Challenge: </span>Render HTML Elements to the DOM` 
export const challengeText = `<span class = 'default'>Intro: </span>
Now that we've learned how to compose HTML with JSX, let's learn how React allows us to render this JSX as HTML to the DOM.
For this we will use React's rendering API known as ReactDOM.<br><br>

ReactDOM is not complex, it allows us a very simple syntax for rendering React elements 
to the DOM which looks like this: <code>ReactDOM.render(componentToRender, targetNode)</code>, where the
first argument is the React element or component that we want to render, and the second argument is the DOM 
node that we would like to render that component within. As logic would follow, ReactDOM.render() must be called 
below where the element has been declared.`

export const challengeInstructions = `<span class = 'default'>Instructions: </span>
We've defined a simple JSX component for you. Use the <code>ReactDOM.render()</code> method to render this component to the page. 
You can pass defined JSX elements directly in as the first argument and select the target DOM node with the <code>getElementById()</code>
method on the document object. We've provided a <code>div</code> with <code>id='challenge-node'</code> for you to use.
Be sure not to modify the JSX constant at all.`

// ---------------------------- define challenge seed code ----------------------------
export const seedCode = 
`const JSX = (
<div>
	<h1>Hello World</h1>
	<p>Lets render this to the DOM</p>
</div>
);
// change code below this line`

// ---------------------------- define challenge solution code ----------------------------
export const solutionCode =
`const JSX = (
<div>
	<h1>Hello World</h1>
	<p>Lets render this to the DOM</p>
</div>
);
// change code below this line
ReactDOM.render(JSX, document.getElementById('challenge-node'));`

// ---------------------------- define challenge tests ----------------------------

export const executeTests = (code) => {

	// clear the target DOM node before running the tests
	document.getElementById('challenge-node').innerHTML = '';

	let es5, mockedComponent, jsx, passed = true;

	let testResults = [
		{
			test: 0,
			status: false,
			condition: 'Your JSX code was transpiled successfully.'
		},
		{
			test: 1,
			status: false,
			condition: 'The constant JSX returns an <div> element.'
		},
		{
			test: 2,
			status: false,
			condition: 'The div contains an h1 tag as the second element.'
		},
		{
			test: 3,
			status: false,
			condition: 'The div contains an p tag as the second element.'
		},
		{
			test: 4,
			status: false,<commit_msg>Fix typo on test case<commit_after>/* eslint-disable */
import React from 'react'
import assert from 'assert'
import { shallow } from 'enzyme'
import { transform } from 'babel-standalone'

// snippet for defining HTML: <code>&#60;div /&#62</code>

// SET TO TRUE WHEN QA IS COMPLETE:
export const QA = false;

// -------------- define challenge title and challenge instructions --------------
export const challengeTitle = `<span class = 'default'>Challenge: </span>Render HTML Elements to the DOM` 
export const challengeText = `<span class = 'default'>Intro: </span>
Now that we've learned how to compose HTML with JSX, let's learn how React allows us to render this JSX as HTML to the DOM.
For this we will use React's rendering API known as ReactDOM.<br><br>

ReactDOM is not complex, it allows us a very simple syntax for rendering React elements 
to the DOM which looks like this: <code>ReactDOM.render(componentToRender, targetNode)</code>, where the
first argument is the React element or component that we want to render, and the second argument is the DOM 
node that we would like to render that component within. As logic would follow, ReactDOM.render() must be called 
below where the element has been declared.`

export const challengeInstructions = `<span class = 'default'>Instructions: </span>
We've defined a simple JSX component for you. Use the <code>ReactDOM.render()</code> method to render this component to the page. 
You can pass defined JSX elements directly in as the first argument and select the target DOM node with the <code>getElementById()</code>
method on the document object. We've provided a <code>div</code> with <code>id='challenge-node'</code> for you to use.
Be sure not to modify the JSX constant at all.`

// ---------------------------- define challenge seed code ----------------------------
export const seedCode = 
`const JSX = (
<div>
	<h1>Hello World</h1>
	<p>Lets render this to the DOM</p>
</div>
);
// change code below this line`

// ---------------------------- define challenge solution code ----------------------------
export const solutionCode =
`const JSX = (
<div>
	<h1>Hello World</h1>
	<p>Lets render this to the DOM</p>
</div>
);
// change code below this line
ReactDOM.render(JSX, document.getElementById('challenge-node'));`

// ---------------------------- define challenge tests ----------------------------

export const executeTests = (code) => {

	// clear the target DOM node before running the tests
	document.getElementById('challenge-node').innerHTML = '';

	let es5, mockedComponent, jsx, passed = true;

	let testResults = [
		{
			test: 0,
			status: false,
			condition: 'Your JSX code was transpiled successfully.'
		},
		{
			test: 1,
			status: false,
			condition: 'The constant JSX returns an <div> element.'
		},
		{
			test: 2,
			status: false,
			condition: 'The div contains an h1 tag as the first element.'
		},
		{
			test: 3,
			status: false,
			condition: 'The div contains an p tag as the second element.'
		},
		{
			test: 4,
			status: false,
{'fraction_non_alphanumeric': 0.15861500412201154, 'fraction_numerical': 0.00494641384995878, 'mean_word_length': 2.9415204678362574, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 71, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3303023', 'n_tokens_mistral': 1772, 'n_tokens_neox': 1645, 'n_words': 745}