Assert tests appear in the preview window while typing in editor

[mstellaluna]

Assert tests appear in the preview window while typing in editor

[nikrb]

@tchaffee not sure to which pr you refer.
ValeraS pr is linked just above my comment.
I haven't created a pr, just putting forward ideas, quincy commented on another pr that we should discuss the fix in this issue to find the best solution.

[Bouncey]

That isn't the assert tests, that looks like the test runner we use inside the test-frame/preview. I have never seen that before.

@mstellaluna Was it in the preview or editor? Did you type anything weird? Does it happen all the time?

[mstellaluna]

@Bouncey ah, sorry i didnt know what it was. It was in the preview window. It started blank, I started typing, as I am typing this shows up in the preview pane, once I'm done typing it's gone and the preview windows shows what it supposed to.

here's the breakdown:

1. lesson loads, preview area is empty white area
2. as I'm writing .pink-text, the preview area flashes and changes to a black background with Hello World in green
3. as I am writing to create a class in h1 element, the preview pane flashes again and test runner shows up.
4. when I finish adding the class, the test runner disappear

I am able to re-produce this on a different computer, within chrome

Here is a group of screenshots showing the above steps:

On lesson load:

While creating the pink-text css class:

While adding the pink-text class to h1 element:

Lesson completed without running the tests:

[mstellaluna]

@Bouncey so, to add something further. If I am typing quickly it doesn't show up in the preview pane. if I am typing class=" and I stop for a second (let say to check the name of the css class again) or type slowly, it shows up. not sure if this help or not.

[Bouncey]

Grizzly!

Nice find @mstellaluna 👍

[Bouncey]

I cannot reproduce on Ubuntu in FF or Chrome, I think it is a windows thing

[mstellaluna]

@Bouncey I have a VM with RHEL Developer Edition and one with Ubuntu. do you want me to try it there to see if I can re-produce on Linux?

[Bouncey]

Sure, anything can help

[mstellaluna]

@Bouncey I tried it on RHEL Developer Edition 7.5.0 with FF ESR 52.7.0 (64-bit) and with Ubuntu 18.04 LTS with FF Quantum 59.0.2 64-bit, I'm getting the issue on both.

I was able to pin-point exactly when this shows up.

When you are typing in the class pink-text into the element and stop at the open quotation, the test runner will show up in the preview pane and stay there until the quotation is closed.

This happens on linux and windows in both chrome and FF.

Hope this helps.

Below are the screenshots explaining what im talking about

1. h1 element class being added, no open quotation, no test runner is seen in preview pane
   

2. h1 element class being added, open quotation and class name is present, test runner appears as soon as the single quotation " is typed in the editor

a) only the open quotation

b) open quotation with class name

3. the addition of the class name is completed, so the quotation marks have both the opening and the closing and now the test runner disappears from the preview pane
   

[johnkennedy9147]

@Bouncey @mstellaluna I can recreate this issue, on Win7 in both FF and Chrome. It looks like it is rendering some javascript when there is an unclosed attribute. ending in some base64 encoded data.

It only happens if the unclosed attribute is on the last element and not followed by another attribute for example the invalid attribute is ignored here:

and here:

whereas here we get the rendered code:

Tried it with ID and style and similar behaviour seen.

Example text rendered (FYI the start seems to be clipped off):

e),checkChallengePayload=document.__checkChallengePayload;
function isPromise(e){return e&&"function"!=typeof e.subscribe&&"function"==typeof e.then}
const DeepEqual=(e,t)=>JSON.stringify(e)===JSON.stringify(t);
var DeepFreeze=e=>(Object.freeze(e),Object.getOwnPropertyNames(e).forEach(function(t){!e.hasOwnProperty(t)||null===e[t]||"object"!=typeof e[t]&&"function"!=typeof e[t]||Object.isFrozen(e[t])||DeepFreeze(e[t])}),e);
document.Enzyme&&(window.Enzyme=document.Enzyme),document.__getJsOutput=function getJsOutput(){if(window.__err)return window.__err;
let output;try{output=eval(source)}catch(e){output=e.message+"\n"+e.stack,window.__err=e}return output},document.__runTests=function runTests(tests=[]){const code=source,editor={getValue:()=>source};
return window.__err?Rx.Observable.from(tests).map(e=>Object.assign({},e,{err:window.__err.message+"\n"+window.__err.stack,message:window.__err.message,stack:window.__err.stack})).toArray().do(()=>{window.__err=null}):Rx.Observable.from(tests,null,null,Rx.Scheduler.default).delay(200).flatMap(({text:text,testString:testString})=>{const assert=chai.assert,getUserInput=__getUserInput,newTest={text:text,testString:testString};
let test,__result;
try{test=eval(testString),"function"==typeof test&&(__result=test(getUserInput),isPromise(__result)&&(__result=Rx.Observable.fromPromise(__result))),__result&&"function"==typeof __result.subscribe||(__result=Rx.Observable.of(null))}catch(e){__result=Rx.Observable.throw(e)}return __result.timeout(testTimeout).map(()=>(newTest.pass=!0,newTest)).catch(e=>{let t=e.message||"";
const r=t.indexOf(": expected");
return-1!==r&&(t=t.slice(0,r)),t=t.replace(/(.*?)<\/code>/g,"$1"),newTest.err=e.message+"\n"+e.stack,newTest.stack=e.stack,newTest.message=t,Rx.Observable.of(newTest)})}).toArray()},frameReady.next({checkChallengePayload:checkChallengePayload})})}]);
 //# sourceMappingURL=data:application/json;
 charset=utf-8; 
base64,eyJ2ZXJzaW9uIjozLCJ....this goes on and on and on so I cut it short

Let me know if you want the full text, there are about 12780 characters in the base64 encoded data,but it might be clipped off at the end also.

[johnkennedy9147]

@Bouncey @mstellaluna forgot to mention its not specific to the mentioned challenge, it happens in all the challenges with a preview pane.

[alvinkl]

@Bouncey I think it's because of the hot reload.
Maybe we can just display more readable error message if the iframe runner catches an error. (I haven't investigate about this yet)
I'll try to fix it.

[alvinkl]

Sorry it's nothing to do with the hot reload.
I think it got escaped when someone inserts "

[nikrb]

yes I think it's unbalanced quotes, haven't found the tests yet thought - doh!

Looks like if there are other issues, e.g. invalid css color name, the Preview style is
changed to display='none', which I assume is done in the tests, somewhere.

in templates/Challenges/utils/frame.js::writeTestDepsToDocument:
tests.__getUserInput = fileName => toString(sources[fileName]);
seems a good place to check though it doesn't seem to be called.
writeTestDepsToDocument is called from createTestFramer yet doesn't seem to be called itself which is really confusing - a short circuit from rxjs/flow perhaps?

looking for checkChallengePayload atm but not found anything.

@Bouncey can you give us any pointers?

[alvinkl]

@nikrb yeah so I added this line before updating the file

   /* for regular "" */
    const totalAp = (editorValue.match(/\"/g) || []).length;
    /* for escape \" */
    const totalBap = (editorValue.match(/\\"/g) || []).length;
    if ((totalAp - totalBap) % 2 === 0) {
      updateFile({ key: fileKey, editorValue });
    }

It works and passed the test.
What do you guys think? But I'm a bit concern about the performance for large files.

[nikrb]

good find dude. Fix seems to work, though can't help thinking the Preview pane should be cleared for invalid code. e.g. if you put an invalid css color name in, the Preview pane clears, rather than leaving the last valid Preview up. See what the 'powers that be' think.

just found this in global.css:

[hidden],
template {
  display: none;
}

Looks like it's used it quite a few places, will have a look later see if I can find how it used for other cases of invalid code.

[nikrb]

ignore me, seems I picked on the one thing that made it look like Preview pane is cleared. In fact invalid color leads to black, so it isn't cleared at all, just looks like it - doh!

[nikrb]

seems source here is appended to user solution when unbalanced quotes are present and gets passed to Preview.

e),checkChallengePayload=document.__checkChallengePayload;function isPromise(e)

[moT01]

I think this issue affects the javascript challenges as well...
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator
this challenge wants var myStr = "This is the start. " + "This is the end."; as a solution - but if you remove the last quote - the test button does nothing...

Actually it happens for a lot of javascript errors, missing function keywords, missing = when assigning values - I'm not sure if that's related to this or not

[nikrb]

Looks like the body is built here.
It seems only double quotes cause the bleed over to Preview pane, as the contents are built by string concatenation.
We could put a check for matched quotes in here, but Preview pane will look ugly if we leave out the body, or append a quote.
🤔
We could keep a last version of the body in the editor onChange handler, and display that instead?

EDIT: how about replacing double quotes with single quotes after replaceNBSP in transformer?

[nikrb]

another possibility would be to throw an error on unbalanced quotes preventing the Preview pane update, similar to the babel transformer, "collapsing the pipeline" to quote bouncey's comment.
I have a patch ready but will wait to see how ValeraS's pr progresses.

[tchaffee]

@nikrb Which PR is that?

@Bouncey can we remove the "help wanted" label? Looks like @nikrb has a patch ready and someone else is working on a PR?