Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Anton Emery
    @AntonEmery
    hey folks. i am new to mithril, and trying to setup basic unit tests. I am running into some issues, is this room a good place to talk about that?
    or is the general mithril room better for that
    Einar Norðfjörð
    @nordfjord
    I'm sure everybody here is happy to help
    but there are more people in the mithril room, which might lead to more discussion if that's what you're after
    Anton Emery
    @AntonEmery
    yea i posted something there, but i think it got kind of overwhelmed with all the other chatter
    working on impelementing tests with mithril-query, but i think i am at a point where i need to hammer at it on my own a bit more
    if i comment out line 11 both tests pass.
    Anton Emery
    @AntonEmery
    so i am having trouble figuring out how to mock the dom using mithril-query.
    Einar Norðfjörð
    @nordfjord
    Ok. Yes if you’re running the tests in node then you’re going to need a Dom mock . The way we do it is using jest as our test runner with jsdom as the dom mock
    The dom mock mithril provides is the bare minimum to test mithril. It does not follow that it is the bare minimum to test your app
    So I’d recommend either running the tests in a browser or using a more complete browser environment mock like jsdom
    Stephan Hoyer
    @StephanHoyer
    @AntonEmery We test most of the stuff server side with mithril query. But that requires to not use any browser stuff that can't be mocked
    Anton Emery
    @AntonEmery
    Thanks guys! This definitely helps, Ive got some basic tests working now
    Stephan Hoyer
    @StephanHoyer
    :+1:
    Alex G Rice
    @guidorice

    @StephanHoyer a quick mithril-query question if you dont mind! (thanks for this library again, btw)

    I have a component that is working fine in the browser, but this test is failing and I cannot figure out why:

     ● TagsEditor component
    
        Wrong count of elements that matches "span.tag"
          expected: 2
          actual: 3
    
          at Object.shouldHave [as have] (node_modules/mithril-query/index.js:246:13)
          at Object.<anonymous> (src/common/TagsEditor.test.js:35:22)

    Here are the relevant lines:

        component.should.have(3, 'span.tag');
        component.click('a');
        component.should.have(2, 'span.tag');

    basically the onclick event causes a dom element to be removed. Any ideas why it would work in browser but not in mithril-query? Using mithril@latest and nodejs 8.7 for running tests.

    Stephan Hoyer
    @StephanHoyer
    you can inspect mithril querys state with component.log('span.tag')
    that sometimes helps to see whats going on
    Sam Szreter
    @onlyskin
    Hey!
    I've had some issues testing vdom updates triggered by events in mithril-query. The issue is that mithril-query doesn't pick up on components which have been swapped out for other components in the same positions in the node tree. I've raised a PR (MithrilJS/mithril-query#88) to fix it as it looks like it might've been a regression from a while ago...
    From looking in the source, it seems that for each component node in the vdom tree, mithril-query calculates a treePath and saves it with a reference to that component's view. After redraws, any component node found with the same treePath as one previously calculated is drawn using the previously saved component view.
    At the moment the treePath for a component doesn't distinguish between differing components when they occur in the same point in the tree, meaning that mithril-query doesn't redraw these components after event triggers, etc. It looks like in the past the treePath for components used to be calculated taking into account the key provided for the component.
    Pieter Martin
    @pietermartin
    Hi, I have just started using Mithril.
    I created a view with a couple of nested divs. It all renders fine, but now on oncreate when I look at the vnodes children it is empty. vnode.instance however do have the children. Am I suppose to see the children?
        view: function () {
            return m("div", {id: "main"}, [
                m("div", {id: "vertical"}, [
                    m("div", {id: "top-pane"}, "Top Pane", [
                        m("div", {id: "left-pane"}, "Left Pane"),
                        m("div", {id: "right-pane"}, "Right Pane")
                    ]),
                    m("div", {id: "bottom-pane"}, "Bottom Pane"),
    
                ])
            ]);
    Stephan Hoyer
    @StephanHoyer
    handling of oncreate, onremove and onbeforeremove are currently not supported by mithril-query since it needs DOM support which is not available in node
    jaymitap
    @jaymitap
    Hi I have just started with Mithriljs and i need help in validation of form
    Jayaram R
    @nice
    how can I specify div#app selector in m.route() ?
    nvm, i got it, i can use m.route(document.getElementById("app"), ....)
    Galen Abell
    @gjabell
    hey all
    anyone here used construct-ui? I'm having an issue getting mq to render its elements as part of a test
    Stephan Hoyer
    @StephanHoyer
    better ask in the mithril main chat
    Fabe
    @fabianmarcus

    Hey guys,

    I've this Code

    import mq from "mithril-query";
    import test from "ospec";
    import m from 'mithril';
    
    // Will be generated, when calling npm test
    import TabView from '../../../testfiles/tabs/index.m.js';
    
    Object.assign(global, m);
    
    test.spec('Verhaltenscheck', () => {
    
        test('Klickverhalten', () => {
            const Tabs = mq(m(TabView, { tabs: ['Tab 1', 'Tab 2'] }, [ m('div', 'div 1'), m('div', 'div 2') ]));
    
            // Tabs checken
            test(Tabs.should.have('.tab-1')).equals(true);
            test(Tabs.should.have('.tab--link')).equals(true);
            test(Tabs.should.have('.tab-1.is-inactive-tab')).equals(true);
            test(Tabs.should.have('.tab-0.is-active-tab')).equals(true);
            test(Tabs.should.not.have('.tab-1.is-active')).equals(true);
            // Content checken
            test(Tabs.has('.tab-content-0.is-visible-tab')).equals(true);
            test(Tabs.has('.tab-content-1.is-hidden-tab')).equals(true);
            // zu Tab 2 wechseln
            Tabs.click('.tab-1');
            // Tabs checken
            test(Tabs.has('.tab-1.is-active-tab')).equals(true);
            test(Tabs.has('.tab-0.is-inactive-tab')).equals(true);
            // Content checken
            test(Tabs.should.have('.tab-content-0.is-hidden-tab')).equals(true);
            test(Tabs.should.have('.tab-content-1.is-visible-tab')).equals(true);
            // Wieder zu Tab 1
            Tabs.click('.tab-0');
            // Tabs checken
            test(Tabs.should.have('.tab-0.is-active-tab')).equals(true);
            test(Tabs.should.have('.tab-1.is-inactive-tab')).equals(true);
            // Content checken
            test(Tabs.should.have('.tab-content-1.is-hidden-tab')).equals(true);
            test(Tabs.should.have('.tab-content-0.is-visible-tab')).equals(true);
        });
    });

    When I run the tests, it throws failed tests after the first click event even though it rerenders right. So the markup changes correctly, but the should.have does not find the changes. Do you know why?