Comments (22)
@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.
from learn.
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?
from learn.
@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:
- lesson loads, preview area is empty white area
- as I'm writing .pink-text, the preview area flashes and changes to a black background with Hello World in green
- as I am writing to create a class in h1 element, the preview pane flashes again and test runner shows up.
- 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:
While creating the pink-text css class:
While adding the pink-text class to h1 element:
Lesson completed without running the tests:
from learn.
@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.
from learn.
Grizzly!
Nice find @mstellaluna 👍
from learn.
I cannot reproduce on Ubuntu in FF or Chrome, I think it is a windows thing
from learn.
@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?
from learn.
Sure, anything can help
from learn.
@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
-
h1 element class being added, no open quotation, no test runner is seen in preview pane
-
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
b) open quotation with class name
- 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
from learn.
@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:
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.
from learn.
@Bouncey @mstellaluna forgot to mention its not specific to the mentioned challenge, it happens in all the challenges with a preview pane.
from learn.
@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.
from learn.
Sorry it's nothing to do with the hot reload.
I think it got escaped when someone inserts "
from learn.
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?
from learn.
@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.
from learn.
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.
from learn.
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!
from learn.
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)
from learn.
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
from learn.
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?
from learn.
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.
from learn.
@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?
from learn.
Related Issues (20)
- Accept value 0 without measure unit HOT 1
- Random quotes for 404 page flickers HOT 10
- Flash message hard to read in night mode. HOT 1
- Improve the "ask for help" forum post autopopulation functionality HOT 1
- Error in comment in a JS regex page HOT 3
- "Map is not a function" in a Rosetta Code problem HOT 4
- "Responsive Web Design Principles: Create a Media Query" test is not forgiving. HOT 1
- Support for curriculum challenge translations HOT 1
- Dasherize in learn HOT 1
- News page link not in navigation bar on learn.freecodecamp.org HOT 1
- curriculum - insert category on HTML5
- Cannot see the curriculum
- Profile picture overflow
- All challenges which test if something is console.logged are not working HOT 2
- [CI Tests] Add test for challenges that use `console.log`
- [CI Tests] Define a test suit that can handle unit -> integration -> e-2-e tests
- Update package.json so @freecodecamp/curriculum in recent version 3.1.2 or later
- Better install instruction for Learn
- Learn platform doesn't work on Edge Browser Windows 10
- Streak being shown wrong
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from learn.