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?