The commented code is considered for code validatation rather than just comment!

[Saif-Shines]

[Using Objects for lookup]

link for the challenge:
https://www.freecodecamp.com/challenges/using-objects-for-lookups

Issue Description

In this challenge, I had to produce object version of switch statements. As I had to remember each 'case' member of switch to produce an object version, I had commented out the whole switch part and retyped the correct object version.
Though, I haven't able to pass the test.
This is due to test check of
You should not use case, switch, or if statements

During commenting out the switch, it should not validate the usage of switch and consider it just as a comment.

Browser Information

• Browser Name, Version: Google Chrome
• Operating System: Windows 10
• Mobile, Desktop, or Tablet: Desktop

Your Code

// Setup
function phoneticLookup(val) {
  var result = "";

  // Only change code below this line
   var lookup = {
    "alpha":"Adams",
    "bravo":"Boston",
    "charlie":"Chicago",
    "delta":"Denver",
    "echo":"Easy",
    "foxtrot":"Frank"
    };
  
  result = lookup[val];
  
  /*
  switch(val) {
    case "alpha": 
      result = "Adams";
      break;
    case "bravo": 
      result = "Boston";
      break;
    case "charlie": 
      result = "Chicago";
      break;
    case "delta": 
      result = "Denver";
      break;
    case "echo": 
      result = "Easy";
      break;
    case "foxtrot": 
      result = "Frank";
  }
*/
  // Only change code above this line
  return result;
}

// Change this value to test
phoneticLookup("charlie");

Screenshot

[raisedadead]

@Saif-Shines Yes, we are aware of this as an existing issue on the main website, and we do lack the infrastructure to have a strict parser if you may.

The only way currently would be to move forth by deleting the comments.

[raisedadead]

Potential contributors, this needs to be investigated around here:
https://github.com/freeCodeCamp/freeCodeCamp/blob/staging/client/rechallenge/throwers.js#L16

/cc @BerkeleyTrue

[ioakeimo]

On the very first challenge of Basic Javascript I ran into a similar issue while trying to comment:

// Use comments only when they are actually needed

/* Sometimes, using descriptive names for variables and functions is way better 
than leaving code smell all over your code */

In this case, because in my second comment I use the word "function", would throw:
Error: SyntaxError: Unsafe or unfinished function declaration

Maybe running tests for contents.replace(/\/\*[\s\S]*\*\/|\/\/[^\n]*/gi,'')) instead of contents could solve that issue? (meaning the general issue, because in my case this specific test would still fail because of contents being empty after replacing comments)

[conscioustahoe]

Cannot we do something like :
Node node = nodeList.item(i); if(node.getNodeType() == Node.COMMENT_NODE) { continue; } else { //do something }

[conscioustahoe]

I would like to take on this.

[knrt10]

I am intrested in this issue can this be assigned to me and can you direct me to the files that need to be changed.

[adityaparab]

Since there is no update on this in more than a week, I'll take this up. Hope it's okay with you guys @Survivor75 and @knrt10

@raisedadead : I believe the solution is way simpler than we have been thinking.

We run assertions on code which is a string. So why don't we just run a regex on this string and remove comments before it is being used for validation?

For example in - client/frame-runner.js, we fetch content of codemirror editor like

const editor = { getValue() { return source; } };
const code = source;

Instead of directly passing in the code as it is, I'd run a regex to get rid of comments like

const editor = { getValue() { return source; } };
const code = source.replace(/\/\*[\s\S]*?\*\/|[^\S]\/\/.*$/gm, '');

When done this way the test runner never receives the comments in code and all is good.

I've validated this regex here - http://regexr.com/3ghvi

NOTE:

• This doesn't consider HTML comments as there are some challenges towards the beginning that do validate existence of HTML comments.
• URL pattern is excluded.
• As this regex replaces a character leading to // we don't be replacing the inline comments that don;t exist on their own lines.

[conscioustahoe]

@adityaparab its cool 👍 .
I almost forgot about it as I got engaged in something else.
However I came up with this code, if you are going to be working on this take a look at the below function.
function stripComments ( code ) { return code . replace (/\/\/.*|\/\*[^]*?\*\// g , "") ; }

This will strip out any commented code :)

[BerkeleyTrue]

Unfortunately the only real solution here is to use AST's for tests. I've discussed this with @QuincyLarson about adding in an API that exposes the JS AST produced by babel and add an API similar to eslint's plugin interface. This may be a bit off as priority is to move on the react challenges and then generalize the way challenges themselves are imported from files.

[ZebulanStanphill]

I just ran into this issue with comments containing the word "function"... I got really confused until someone one the forums explained what was going on. Hope this issue gets fixed soon! Perhaps there should be some message displayed to users warning them about the parser issues regarding comments in the challenges?

See also:
https://forum.freecodecamp.org/t/javascript-tests-in-challenges-no-longer-working-correctly/190249

[QuincyLarson]

@SuperGeniusZeb Thanks for reporting this, and confirming the steps to reproduce it.

[QuincyLarson]

I'm closing this issue as stale since it hasn't been active lately. If you think this is still relevant to the newly updated platform, please explain why, then reopen it.

[ZebulanStanphill]

@QuincyLarson

In the updated site, comments are still being mistakenly read as code by the challenge tests. Take this challenge for example:

https://learn.freecodecamp.org/responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap

Using the following code, I can pass the test (which checks for grid-column-gap to be set to 20px), even though grid-column-gap: 20px is in a comment.

<style>
  .d1{background:LightSkyBlue;}
  .d2{background:LightSalmon;}
  .d3{background:PaleTurquoise;}
  .d4{background:LightPink;}
  .d5{background:PaleGreen;}
  
  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    /* add your code below this line */
    grid-column-gap: 10px;
    // grid-column-gap: 20px;
    /* add your code above this line */
  }
</style>
  
<div class="container">
  <div class="d1">1</div>
  <div class="d2">2</div>
  <div class="d3">3</div>
  <div class="d4">4</div>
  <div class="d5">5</div>
</div>

Please re-open this issue.

[raisedadead]

@SuperGeniusZeb Can you please open a new issue at https://github.com/freeCodeCamp/learn/issues ? Thanks a lot.

[ZebulanStanphill]

@raisedadead I have just created a new issue there:
freeCodeCamp/learn#165