lundi 4 septembre 2017

Unit Testing - Save the DOM Ref and pass it to a Component

I have refactored a component from this

let PageHeaderRef;

<header className="jt-list__header" ref={(el: HTMLElement) => { PageHeaderRef = el; }}>
    { header }
</header>

// code not refactored

<RacecardContainer onRender={() => PageHeaderRef && PageHeaderRef.scrollIntoView()} />

to

<PageHeader style="primary" ref={(el: HTMLElement) => { PageHeaderRef = el; }}>
    { header }
</PageHeader>

// code not refactored

<RacecardContainer onRender={() => PageHeaderRef && PageHeaderRef.scrollIntoView()} />

This change is only about to use a PageHeader component imported from the styleguide.

The problem is here, now the Unit Testing is failing in the last line

expect(scrollSpy.called).to.equal(true);

where it returns false

   it('saves the DOM ref to the header and passes it to RacecardContainer', () => {
        const racecardContainerStub = sinon.stub().returns(null);
        RewireAPI.__set__('RacecardContainer', racecardContainerStub);
        const wrapper = mount(<ListRowOpen />);
        const headerEl = wrapper.find(headerCls).getDOMNode();
        const onRender = racecardContainerStub.firstCall.args[0].onRender;

        const scrollSpy = headerEl.scrollIntoView = sinon.spy();

        expect(scrollSpy.called).to.equal(false);
        onRender();
        expect(scrollSpy.called).to.equal(true);

Why when i use a PageHeader component instead of the previous header tag , the Unit Test is failing?

The variable for the new header selector has been changed too, so it is not because of it.

Aucun commentaire:

Enregistrer un commentaire