6

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!).

finferflu
  • 1,368
  • 2
  • 11
  • 28
  • Can you paste in your component in question? It sounds like something is out of whack with your specific component... – acorncom Aug 17 '17 at 02:21
  • 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://stackoverflow.com/a/19071065/916734 – Patrick Berkeley Aug 17 '17 at 03:09
  • @acorncorn: [here](https://gist.github.com/finferflu/f4832e7dd6e3bcc78bbe5a0abfd87ee3) is my component's js. – finferflu Aug 17 '17 at 14:46
  • @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? – finferflu Aug 17 '17 at 14:47
  • @finferflu 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. – Patrick Berkeley Aug 17 '17 at 16:10
  • 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. – finferflu Aug 17 '17 at 16:59
  • Could you maybe provide a git repo with a full reproduction? – Lux Aug 17 '17 at 19:48
  • 1
    OK, I'll work on that and post it here when it's ready, thanks! – finferflu Aug 17 '17 at 20:13

1 Answers1

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?

Vasiliy vvscode Vanchuk
  • 7,007
  • 2
  • 21
  • 44
  • Yes, it's intended to be just a string. In my component (see [here](https://gist.github.com/finferflu/f4832e7dd6e3bcc78bbe5a0abfd87ee3#file-listing-table-js-L73)), I then transform that string into an array. – finferflu Aug 18 '17 at 15:42
  • @finferflu 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.' – Vasiliy vvscode Vanchuk Aug 19 '17 at 05:15
  • I'm not sure I understand what you mean, but the `exclude` argument is supposed to be a string and not an object. – finferflu Aug 20 '17 at 11:24