feat(client, learn): add helper functions for common validation operations (#38605)

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

curriculum/challenges/english/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.english.md

@@ -44,7 +44,7 @@ tests:
   - 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 ); })());
   - text: The <code>date</code> prop should be generated by calling <code>Date()</code>
-    testString: assert(/<CurrentDatedate={Date\(\)}\/>/.test(code.replace(/\s/g, '')))
+    testString: assert(/<CurrentDatedate={Date\(\)}\/>/.test(__helpers.removeWhiteSpace(code)))
   - text: The <code>CurrentDate</code> component should render the value from the <code>date</code> prop in the <code>p</code> tag.
     testString: let date = "dummy date"; assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CurrentDate, {date})); return mockedComponent.find('p').html().includes(date); })());
 

curriculum/challenges/english/03-front-end-libraries/react/review-using-props-with-stateless-functional-components.english.md

@@ -28,9 +28,9 @@ tests:
   - text: The <code>Camper</code> component should render.
     testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('Camper').length === 1; })());
   - text: The <code>Camper</code> component should include default props which assign the string <code>CamperBot</code> to the key <code>name</code>.
-    testString: assert(/Camper.defaultProps={name:(['"`])CamperBot\1,?}/.test(code.replace(/\s/g, '')));
+    testString: assert(/Camper.defaultProps={name:(['"`])CamperBot\1,?}/.test(__helpers.removeWhiteSpace(code)));
   - text: The <code>Camper</code> component should include prop types which require the <code>name</code> prop to be of type <code>string</code>.
-    testString: assert(/Camper.propTypes={name:PropTypes.string.isRequired,?}/.test(code.replace(/\s/g, '')));
+    testString: assert(/Camper.propTypes={name:PropTypes.string.isRequired,?}/.test(__helpers.removeWhiteSpace(code)));
   - text: The <code>Camper</code> component should contain a <code>p</code> element with only the text from the <code>name</code> prop.
     testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('p').text() === mockedComponent.find('Camper').props().name; })());
 

curriculum/challenges/english/03-front-end-libraries/react/use-proptypes-to-define-the-props-you-expect.english.md

@@ -33,7 +33,7 @@ tests:
   - text: 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>.
-    testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/ /g, ''); return noWhiteSpace.includes('quantity:PropTypes.number.isRequired') && noWhiteSpace.includes('Items.propTypes='); })());
+    testString: getUserInput => assert((function() { const noWhiteSpace = __helpers.removeWhiteSpace(getUserInput('index')); return noWhiteSpace.includes('quantity:PropTypes.number.isRequired') && noWhiteSpace.includes('Items.propTypes='); })());
 
 ```
 

curriculum/challenges/english/03-front-end-libraries/react/use-state-to-toggle-an-element.english.md

@@ -77,7 +77,7 @@ tests:
       assert(!firstValue && secondValue && !thirdValue);
       })();"
   - text: An anonymous function should be passed to <code>setState</code>.
-    testString: const paramRegex = '[a-zA-Z$_]\\w*(,[a-zA-Z$_]\\w*)?'; const noSpaces = code.replace(/\s/g, ''); assert(new RegExp('this\\.setState\\((function\\(' + paramRegex + '\\){|([a-zA-Z$_]\\w*|\\(' + paramRegex + '\\))=>)').test(noSpaces));
+    testString: const paramRegex = '[a-zA-Z$_]\\w*(,[a-zA-Z$_]\\w*)?'; assert(new RegExp('this\\.setState\\((function\\(' + paramRegex + '\\){|([a-zA-Z$_]\\w*|\\(' + paramRegex + '\\))=>)').test(__helpers.removeWhiteSpace(code)));
   - text: <code>this</code> should not be used inside <code>setState</code>
     testString: assert(!/this\.setState\([^}]*this/.test(code));
 ```

curriculum/challenges/english/03-front-end-libraries/react/write-a-react-component-from-scratch.english.md

@@ -23,7 +23,7 @@ Render this component to the DOM using <code>ReactDOM.render()</code>. There is
 ```yml
 tests:
   - text: There should be a React component called <code>MyComponent</code>.
-    testString: getUserInput => assert(getUserInput('index').replace(/\s/g, '').includes('classMyComponentextendsReact.Component{'));
+    testString: getUserInput => assert(__helpers.removeWhiteSpace(getUserInput('index')).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.
     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.