Unit testing components involving signaler

I have a custom list element that displays a collection of items in a table, where delegates (lambdas) can be bound for editing/deleting items from the list. In one of such list, I open a dialog on edit, and make some changes to the item. After that, the changes can either be accepted or discarded. On the closing of the dialog, it always returns the changed item. The usage of the list looks as follows.

<list items.bind="items" edit-callback.bind="editItem">
  <template replace-part="row">
    <td>
      <!-- my-element uses prop to render the view-->
      <my-element prop.bind="item.method()  & signal:'aurelia-translation-signal':`item${$index}`"></my-element>
    </td>
  </template>
</list>

I am using the editItem delegate to open the dialog, and do the further processing. Here, I am using a signaler to notify and refresh the list bindings. This can also bee seen in the markup above. The editItem delegate looks as follows.

private editItem: (item: any, index: number) => Promise < any > = async (item: Item, index: number) => {
  const settings = getDialogSettings(item);
  // set the clone of the item to avoid wrongly change the item if the edit dialog is cancelled
  settings.model = ItemFactory.convertToItem(JSON.parse(JSON.stringify(item)));

  this.dialogService
      .open(settings)
      .whenClosed(async (response) => {
        if (!response.wasCancelled) {
          item = Object.assign(item, response.output);
          this.signaler.signal(`item${index}`);
        }
      });
}

This works (i.e. the text changes when I edit an item) when I run the entire application, or when I run the individual test case. However, the same test case fails when all the tests in the suite are ran together. Is there anything, I should particularly look for, to correct this situation?

1 Like

Hi, I was about to create an own topic but it seems I run into the exact same issue.

I have a test suite for a component library where components are registered as global resources.
Some of the components are using signal binding behaviour.
After running the first test with signals successfully, signals are broken in subsequent test cases.
Each test case bootstraps an own Aurelia instance using aurelia-testing. However, it looks like view resources (bindingBehaviours) of the first test case are somehow cached and took over by the ViewFactory of the subsequent tests.
I have created a simplified repo to illustrate the problem here: https://github.com/reinholdk/au-signaler-issue
The problem seems to be related to the registration of components as global resources.

Anybody having an idea how to workaround this?

1 Like

@reinholdk that repro repo looks a bit big. Could you help do a smaller one (just the core bit that demonstrates the issue) here: https://gist.dumber.app ? I can have a look, probably there’s an easy workaround/fix.

@bigopon will try to strip it down.

1 Like

@bigopon here you go: https://gist.dumber.app/?gist=aa35292fc518c886cea4eabd5528bb30
The issue can be seen in the (Jasmine) Tests page. There are two identical tests triggering signal and validating that binding got updated. The second test is failing. If you run the tests standalone, e.g.:
fit('should render message - second'
They are running fine.

1 Like

You are hitting the same issue described in this GH issue: https://github.com/aurelia/testing/issues/70

Similar workaround can be applied. And here’s how it’d look like to fix this https://gist.dumber.app/?gist=e83f105c2abe7660ad160c89257bdecf