One of my Vue components is supposed to render a pretty huge hierarchical data structure. I've to admit there might be room for improvement in terms of performance of this particular component (lazy loaded data, transforming into an internal UI Model with some refs and depending computeds). It takes up to a second until Vue / the component is done updateing.
Anyway we have some E2E Tests in place with playwright which work just fine in almost all places. As you might already expect we have a problem with this lazy loading inefficient component mentioned before.
test('Modifications can be persisted and reloaded', async ({page}) => {
// .. doing something like editing, saving
// refreshing to check the mutated model loads fine
await page.reload();
await page.waitForTimeout(2000);
// check the value of an inputField which should be set by the internal model
const statusValue = await page.getByLabel('Status').inputValue();
expect(statusValue).toBe("Modified"); // fails with Value ""
});
The code above is a reduced version of the failing test. It fails sometimes on the line with expect(statusValue) because the inputValue() is empty. As a workaround I added await page.waitForTimeout(2000);. :-(
How would I wait for Vue being done with the update (waiting for "updated" Events)? Is there something like waitUntilVueIsDone()?
Are there any best practices on how to test lazy loaded data visualisations?
In the end it turned out that it hasn't been an issue with Vue at all. We solved the problem by rewriting the test to utilize expect like this:
await expect(page.getByLabel('Status')).toHaveValue("Modified");
The key is expect automaticly retests until the assertion matches while inputValue does not.