Ember.js: Component attribute not reset while testing

Question

I am currently attempting an acceptance test on a nested route, which makes use of the same component twice, but with different arguments. This works fine when I run it normally, however as I run the acceptance test, I notice that the component's arguments aren't being updated, which causes my test to fail. Here is some sample code:

In index.hbs I have:

{{index-view model=model type='location'}}

My index-view component looks like this:

<h1>{{title}} List</h1>

{{listing-table model=model type=type}}

By clicking on an element in the listing-table, I then go to the locations.show route, which contains a link-to the locations.show.devices route. The locations.show.devices route contains:

{{listing-table model=model.devices type='device' exclude='locationName'}}

However, in my acceptance tests, I can see (by echoing out these attributes in the component's javascript) that while model and type are being updated, exclude is always set to whatever was set when the component was initially called.

Now, I have checked (via console.log()) whether the component is being reused or not, and I could see that both init () and didDestroyElement () are called twice, which means that the component goes through an entire lifecycle twice. However, I can't really understand why my exclude argument is not being updated at all, and why does this only happen while acceptance testing?

This is a stripped down version of what I'm doing (of course it works on Twiddle, but not in real life!).

Sonyasoo

Can you paste in your component in question? It sounds like something is out of whack with your specific component... – Smorgasbord

Not sure if this will fix the issue, but state can be shared if you set a property's default to an array or object. It looks like you're doing both that and resetting the defaults in init() so I'm not sure if that's what's causing the issue. Here's more info on sharing state: https://mcmap.net/q/1476649/-shared-state-in-ember-component – Alesandrini

@acorncorn: here is my component's js. – Sonyasoo

@PatrickBerkeley, if I reset the property in the init(), wouldn't that go against what I'm trying to do? I.e. wouldn't it just unset the property right after I've set it in my template? – Sonyasoo

@Sonyasoo yup. So I would either not initialize the attrs in your js file or initialize them to attr: null outside of init() if you want to be explicit about the attrs used by the component. – Alesandrini

The thing is, I'm not initialising the exclude attribute at all, it's just being passed to the component as an argument as you can see from the example above. I'm then only accessing the attribute via this.get('exclude') inside the component's javascript. – Sonyasoo

Could you maybe provide a git repo with a full reproduction? – Azotobacter

OK, I'll work on that and post it here when it's ready, thanks! – Sonyasoo

Answer 1

{{listing-table model=model.devices type='device' exclude='locationName'}}

you pass certain value "locationName" ( string ) not link to the property .locationName of component . ( I'm about quotes around locationName )

You know, yes?

Corporeal

Yes, it's intended to be just a string. In my component (see here), I then transform that string into an array. – Sonyasoo

@Sonyasoo I'm about your question 'while model and type are being updated, exclude is always set to whatever was set when the component was initially called.' – Corporeal

I'm not sure I understand what you mean, but the exclude argument is supposed to be a string and not an object. – Sonyasoo