CODEWITHSUNDEEP
javascriptember.js
Andrew Zaw
Andrew Zaw

Reputation: 814

EmberJS testing: Testing a component inside a component

I'm new to Ember, and I'm trying to learn how to write tests.

At the moment I have a component, lets call it "ParentComponent" and to simplify, it looks like this.

<div>
    <div class="childDiv">
        {{childComponent trait=someBoolean}}
    </div>
    <div>
        other stuff
    </div>
</div>

I am writing an integration component test on ParentComponent and I would like to test to make sure "trait" is true. someBoolean is determined inside the ParentComponent, and can be true or false. At the moment my test looks something like this:

test('my test', async function(assert){
    this.set('someBoolean', true)
    await render(hbs`
    {{parentComponent}}
    `)
    
    // insert code here
});

At the "insert code here", I'd like to be able to check that childComponent's "trait" is indeed equal to true.

Upvotes: 0

Views: 242

Answers (1)

jelhan
jelhan

Reputation: 6338

What you are trying to achieve is not supported by Ember's testing suite out-of-the box. This is for good reasons in my opinion.

Ember's test suite is build around the idea that the public API of a component should be tested. If a component uses other components to provide it's features or not should be considered an implementation detail. It's not part of the public API. It may change any time by refactoring the component implementation without affecting the public API. Therefore also the tests should not be affected.

Long story short: You should not test if <ChildComponent /> is invoked with the correct arguments but if <ParentComponent /> renders expected markup.

Upvotes: 2

Related Questions