Hi all! I recently upgraded Aurelia dependencies in my project, and I’ve noticed random issues in my Karma screen and component tests that didn’t exist previously. Often, my tests pass completely fine, but there are other times where it seems that the test doesn’t finish bootstrapping the data to the DOM before the test is executed, so I will randomly get failures looking for bound values or even an “a. Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.” error at times. It’s inconsistent, and not specific to one test.
Has anyone else encountered this? It seems to be when there are a good number of tests run together, and happens more often in our Continuous Integration server than when running locally. A quick example of how I’m setting up bindings:
Test snippet
describe('Testing the component', () => {
let dataRows = [
{
propertyOne: 'a',
propertyTwo: 'b'
},
{
propertyOne: 'c',
propertyTwo: 'd'
}
];
let expected = [
{
propertyOne: 'a',
propertyTwo: 'b'
},
{
propertyOne: 'c',
propertyTwo: 'd'
}
];
beforeEach(() => {
component = StageComponent
.withResources('component/my-component')
.inView('<my-component data-array.bind="testDataArray"></my-component>')
.boundTo({
testDataArray: dataRows
});
});
afterEach(() => {
component.dispose();
});
it('should display the correct result count', done => {
component.create(bootstrap).then(() => {
const resultCount = document.getElementById('result-count');
expect(resultCount.innerText).toEqual('Displaying 2 Results');
done();
return null;
}).catch(error => {
fail("An error has occurred: " + error.toString());
});
});
// etc.
});
Example Component JS
@customElement('my-component')
@inject(Element, ComponentSession)
export class MyComponent {
@bindable dataArray;
constructor(element, componentSession) {
this.element = element;
this.session = componentSession;
}
attached() {
// attaches array of data to a table element, updates a string that says
// "Displaying x Results" with a row count from the table, and some other
// setup
this.resultCount = this.dataArray.length;
// etc.
}
// other helper methods below...
}
Example component HTML
<template>
<table>
<!-- A table using repeat.for to build the table rows from an array ...-->
</table>
<p>
<strong id="result-count">Displaying ${resultCount} Results</strong>
</p>
</template>
Example error for this test
Expected 'Displaying Results' to equal 'Displaying 2 Results'.
These are definitely very simplified snippets and I use more than one binding in my component, but I’m wondering if anything jumps out to someone based on the way we tend to set up these tests.
I’ve noticed that if I make each individual test wait 5 milliseconds after bootstrapping the components before execution, the tests seem to never fail, so something odd seems to be happening with waiting asynchronously