tddbin / tddbin-frontend Goto Github PK

Hello there,
I have learned ES6 recently and I found your site which helped me a lot. However when I used your site to study ES6 sometimes it was really hard for me to get correct answers.
So I writed down a part of answers in my Github Gist and I'll update it as soon as I can.
Hope your guys will like it.

browserify automatically replaced a required http module with an AJAX verison, so lets use this instead of atomic, should be simpler

It would be great if other themes could be applied :)

like here https://github.com/wolframkriesing/es6-react-workshop/blob/master/src/_external-deps/http-get.js#L7

one of the katas for promise "extending a Promise" will not work in the current version of babel used see: babel/babel#1120

maybe setting "loose": true in http://babeljs.io/docs/plugins/transform-es2015-classes/ will possibly fix.

You learn faster when the answers are provided when needed. Please work that into this app.

Test executes and passes successfully, but linter gives warning message:

Expected "," and instead saw "="
Expected an identifier and instead saw "0"

on lines with constructor parameters.

   describe('es6 parameters', function() {  
        it('constructor destructuring optional object with default values', function() {
    
            class Vector {
                constructor ({x = 0, y = 0} = {}) {
                  this.x = x
                  this.y = y
                }
            }
  
            class VisibleObject extends Vector {
              constructor ({x = 0, y = 0, opacity = 1} = {}) {
                  super({x, y})
                  this.opacity = opacity
                }
            }

            let vo1 = new VisibleObject({x: 10, y: 15})
            let vo2 = new VisibleObject()
    
            assert.equal(co1.x, 10);
            assert.equal(co1.y, 15);
            assert.equal(co1.opacity, 1);
            assert.equal(co2.x, 0);
            assert.equal(co2.y, 0);
            assert.equal(co2.opacity, 1);
        });
    });

If a function is defined like let foo = () => foo() and then called foo(), the site lags in an infinite loop, some maximum stack reached error should be displayed perhaps instead?

https://bugs.chromium.org/p/v8/issues/detail?id=5115#c11
tc39/ecma262@c57ef95

In current version http://tddbin.com/#?kata=es6/language/arrow-functions/basics
first test will not pass with transipiler turn on. When it is off solution pass.

//solution to this requires transpailer to be turn off to be accepted. it('are shorter to write, instead of function(){}write() => {}', function() { var func = function(){}; assert.equal('' + func, '() => {}'); });

Clicking one of the kata links in the footer navigation updates the location hash in the browser address bar but doesn't actually load the kata. Is this a feature? Shouldn't the app listen to the hashchange event?

On a side note: Could you elaborate on why the kata gets removed from the location.hash on startup? See startup.js line 16

the localstorage quota raises an error, and the test wont run

I'm currently trying to learn http://elm-lang.org/ it would be pretty cool to use tddbin to learn it. Besides elm tddbin could support other languages as well.

• https://github.com/clojure/clojurescript
• https://www.dartlang.org/
• https://www.typescriptlang.org/
• http://elm-lang.org/

So tddbin could become a learning platform for languages which run in the browser and node.

That is wayyyy toooo complicated and lots of overhead. And it is buggy, sometimes the save dialog opens instead of the save+run

It would be nice for beginners to have a simple way to show messages or output in tddbin, without having to resort to the Developer Console of their browsers.

A proposal could be to temporarily replace window.console with a custom object that captures calls to e.g. console.log or console.dir and displays them below of the test results.

This is a generalization of #34. Linting seems to be broken for ES6+ syntax in general. Here is a screenshot, showing that the "const" keyword is not recognized (as an example).

Seems like the test should be assert.strictEqual(fn.call(anotherObj), bound);, the same as test one, since you are proving that a new context can't be provided.

The last test on the iterator - string kata is wrong, i think it should say done=true, that's also what the assert ask for...

Great project by the way, would love to hear if you need any help

Mocha Istanbul could allow to display code coverage as follow :
Statements : 100% ( 83/83 )
Branches : 100% ( 24/24 )
Functions : 100% ( 23/23 )
Lines : 100% ( 83/83 )
Ideally, it would color the lines tested in the editor.
An example here : https://github.com/jeffeland/jscoderetreat4

Here is the editor : http://ace.c9.io/#nav=about
which I found really nice to use in https://www.codeeval.com

Steps to reproduce

Open http://tddbin.com/

Actual result

Browser window stays emtpy. Console prompts the following error.

Uncaught TypeError: s.default is not a function
    at Object.n.196.atomic (index.min.js:4)
    at o (index.min.js:1)
    at index.min.js:1
    at Object.n.204../_aceDefaultShortcuts (index.min.js:4)
    at o (index.min.js:1)
    at e (index.min.js:1)
    at index.min.js:1

Expected result

Start tddbin ;)

see https://twitter.com/martinandert/status/620608233540059136 for fix

on iPad it does not work :( I'm not in safari private mode (test results are rendered)

• if there are many test, it is impossible to scroll to see all of them
• Cursor movements are sporadic
• UI is broken see attachment