These are chat archives for ractivejs/ractive

11th
Sep 2017
rjeannot
@rjeannot
Sep 11 2017 14:55
Hi everyone. I'm new on Ractive.js and I'm looking for some examples with Unit Testing.
Do you know some good resources? Thank you
Joseph
@fskreuz
Sep 11 2017 14:57
What do you intend to test? Mere functions? DOM generation?
rjeannot
@rjeannot
Sep 11 2017 14:58
Mere functions to start and later DOM generations
Joseph
@fskreuz
Sep 11 2017 14:59
Ractive's repo (the tests/browser directory) is a good place to start. Ractive uses Karma+QUnit+Phantom. Feel free to swap any of those with your preferred tool, they don't really matter (i.e. Phantom with JSDOM, QUnit with Mocha, etc.).
In a gist, you create a test, create an instance, call the function, test the result.
Here's one from the methods tests:
    test( 'ractive.add("foo") adds 1 to the value of foo', t => {
        const ractive = new Ractive({
            data: { foo: 0 }
        });

        ractive.add( 'foo' );
        t.equal( ractive.get( 'foo' ), 1 );

        ractive.add( 'foo' );
        t.equal( ractive.get( 'foo' ), 2 );
    });
rjeannot
@rjeannot
Sep 11 2017 15:03
Thanks. I'm going to dive in.
Joseph
@fskreuz
Sep 11 2017 15:04
For DOM, pretty much the same except that you mount the instance to the DOM and compare what's rendered. For instance, this partials test.
    test( 'specify partial by function', t => {
        new Ractive({
            el: fixture,
            template: '{{>foo}}',
            data: { foo: true },
            partials: partialsFn
        });

        t.htmlEqual( fixture.innerHTML, '<p>yes</p>' );
    });
(htmlEqual is a custom QUnit plugin which can be found in https://github.com/ractivejs/ractive/blob/dev/qunit/qunit-html.js )
Joseph
@fskreuz
Sep 11 2017 15:10
Ractive also uses simulant (https://github.com/Rich-Harris/simulant) to simulate DOM interaction. Use it to fake clicks, hovers, etc. without needing a full-blown Protractor+Selenium setup.
rjeannot
@rjeannot
Sep 11 2017 15:12
Ok great