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

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

client/src/utils/__fixtures/curriculum-helpers-css.js

@@ -0,0 +1,45 @@
+const cssFullExample = `
+a {
+  color: green;
+  display: flex;
+}
+.aClass {
+  font-size: 32px;
+  /* the property below should not appear in final css string
+  width: 400px;
+  height: 200px;
+  */
+  flex: 1;
+  flex-direction: row;
+}
+/* Set the background color to blue for screens that are 300px or less */
+@media screen and (max-width: 300px) {
+  body {
+    background-color: blue;
+  }
+}`;
+
+const cssCodeWithCommentsRemoved = `
+a {
+  color: green;
+  display: flex;
+}
+.aClass {
+  font-size: 32px;
+  
+  flex: 1;
+  flex-direction: row;
+}
+
+@media screen and (max-width: 300px) {
+  body {
+    background-color: blue;
+  }
+}`;
+
+const testValues = {
+  cssFullExample,
+  cssCodeWithCommentsRemoved
+};
+
+export default testValues;

client/src/utils/__fixtures/curriculum-helpers-html.js

@@ -0,0 +1,30 @@
+const htmlFullExample = `
+<!--
+multi line html comment
+-->
+
+not a comment
+
+not a commment <!-- single line html comment --> not a comment
+not a comment
+<!-- this is my blog: <mynixworld.inf> -->
+not a comment
+`;
+
+const htmlCodeWithCommentsRemoved = `
+
+
+not a comment
+
+not a commment  not a comment
+not a comment
+
+not a comment
+`;
+
+const testValues = {
+  htmlFullExample,
+  htmlCodeWithCommentsRemoved
+};
+
+export default testValues;

client/src/utils/__fixtures/curriculum-helpers-javascript.js

@@ -0,0 +1,44 @@
+const jsCodeWithSingleAndMultLineComments = `
+function nonMutatingPush(original, newItem) {
+  /* This is a 
+    multi-line comment 
+    that should be removed. */
+  return original.push(newItem);
+}
+var first = [1, 2, 3];
+// This is a single line comment
+var second = [4, 5];
+nonMutatingPush(first, second);`;
+
+const jsCodeWithSingleAndMultLineCommentsRemoved = `
+function nonMutatingPush(original, newItem) {
+
+
+
+  return original.push(newItem);
+}
+var first = [1, 2, 3];
+
+var second = [4, 5];
+nonMutatingPush(first, second);`;
+
+const jsCodeWithUrl = `
+function nonMutatingPush(original, newItem) {
+  var url = 'https://freecodecamp.org'; // this comment should vanish
+  return original.push(newItem);
+}`;
+
+const jsCodeWithUrlUnchanged = `
+function nonMutatingPush(original, newItem) {
+  var url = 'https://freecodecamp.org';
+  return original.push(newItem);
+}`;
+
+const testValues = {
+  jsCodeWithSingleAndMultLineComments,
+  jsCodeWithSingleAndMultLineCommentsRemoved,
+  jsCodeWithUrl,
+  jsCodeWithUrlUnchanged
+};
+
+export default testValues;

client/src/utils/__fixtures/curriculum-helpers-remove-white-space.js

@@ -0,0 +1,16 @@
+const stringWithWhiteSpaceChars = `
+This string sentence has various white spaces characters:
+\t* This line starts with a tab character.
+\t* This line has several preceding white space characters.`;
+
+/* eslint-disable max-len */
+const stringWithWhiteSpaceCharsRemoved =
+  'Thisstringsentencehasvariouswhitespacescharacters:*Thislinestartswithatabcharacter.*Thislinehasseveralprecedingwhitespacecharacters.';
+/* esline-enable max-len */
+
+const testValues = {
+  stringWithWhiteSpaceChars,
+  stringWithWhiteSpaceCharsRemoved
+};
+
+export default testValues;

client/src/utils/curriculum-helpers.js

@@ -0,0 +1,35 @@
+import { parse } from '@babel/parser';
+import generate from '@babel/generator';
+
+const removeHtmlComments = str => str.replace(/<!--(.|\s)*?-->/g, '');
+
+const removeCssComments = str => str.replace(/\/\*[\s\S]+?\*\//g, '');
+
+const removeJSComments = codeStr => {
+  // Note: removes trailing new lines and tailing spaces at end of lines
+  const options = {
+    comments: false,
+    retainLines: true,
+    compact: false,
+    concise: false,
+    minified: false
+  };
+  try {
+    const ast = parse(codeStr);
+    const { code } = generate(ast, options, codeStr);
+    return code;
+  } catch (err) {
+    return codeStr;
+  }
+};
+
+const removeWhiteSpace = (str = '') => {
+  return str.replace(/\s/g, '');
+};
+
+export default {
+  removeHtmlComments,
+  removeCssComments,
+  removeJSComments,
+  removeWhiteSpace
+};

client/src/utils/curriculum-helpers.test.js

@@ -0,0 +1,87 @@
+/* global describe it expect */
+
+import __testHelpers from './curriculum-helpers';
+import jsTestValues from './__fixtures/curriculum-helpers-javascript';
+import cssTestValues from './__fixtures/curriculum-helpers-css';
+import htmlTestValues from './__fixtures/curriculum-helpers-html';
+/* eslint-disable max-len */
+import whiteSpaceTestValues from './__fixtures/curriculum-helpers-remove-white-space';
+/* eslint-enable max-len */
+
+const {
+  stringWithWhiteSpaceChars,
+  stringWithWhiteSpaceCharsRemoved
+} = whiteSpaceTestValues;
+
+const { cssFullExample, cssCodeWithCommentsRemoved } = cssTestValues;
+
+const { htmlFullExample, htmlCodeWithCommentsRemoved } = htmlTestValues;
+
+const {
+  jsCodeWithSingleAndMultLineComments,
+  jsCodeWithSingleAndMultLineCommentsRemoved,
+  jsCodeWithUrl,
+  jsCodeWithUrlUnchanged
+} = jsTestValues;
+
+describe('removeWhiteSpace', () => {
+  const { removeWhiteSpace } = __testHelpers;
+  it('returns a string', () => {
+    expect(typeof removeWhiteSpace('This should return a string')).toBe(
+      'string'
+    );
+  });
+
+  it('returns a string with no white space characters', () => {
+    expect(removeWhiteSpace(stringWithWhiteSpaceChars)).toBe(
+      stringWithWhiteSpaceCharsRemoved
+    );
+  });
+});
+
+describe('removeJSComments', () => {
+  const { removeJSComments } = __testHelpers;
+  it('returns a string', () => {
+    expect(typeof removeJSComments('const should = "return a string"')).toBe(
+      'string'
+    );
+  });
+
+  it('returns a string with no single or multi-line comments', () => {
+    expect(removeJSComments(jsCodeWithSingleAndMultLineComments)).toBe(
+      jsCodeWithSingleAndMultLineCommentsRemoved
+    );
+  });
+
+  it('does not remove a url found in JS code', () => {
+    expect(removeJSComments(jsCodeWithUrl)).toBe(jsCodeWithUrlUnchanged);
+  });
+});
+
+describe('removeCssComments', () => {
+  const { removeCssComments } = __testHelpers;
+  it('returns a string', () => {
+    expect(typeof removeCssComments('.aClass: { color: red; }')).toBe('string');
+  });
+
+  it('returns a CSS string with no single or multi-line comments', () => {
+    expect(removeCssComments(cssFullExample)).toBe(cssCodeWithCommentsRemoved);
+  });
+});
+
+describe('removeHtmlComments', () => {
+  const { removeHtmlComments } = __testHelpers;
+  it('returns a string', () => {
+    expect(
+      typeof removeHtmlComments(
+        '<h1>hello world</h1><!-- a comment--><h2>h2 element</h2>'
+      )
+    ).toBe('string');
+  });
+
+  it('returns an HTML string with no single or multi-line comments', () => {
+    expect(removeHtmlComments(htmlFullExample)).toBe(
+      htmlCodeWithCommentsRemoved
+    );
+  });
+});