Addressing issues with failing flaky tests#2630
Conversation
b77a723 to
02dec82
Compare
42de1fd to
02dec82
Compare
This is to fix the flaky test failures that cause: Error: ReferenceError: window is not defined ❯ stopTimer src/composables/autoRefresh.ts:12:7 ❯ startTimer src/composables/autoRefresh.ts:20:5 ❯ executeAndResetTimer src/composables/autoRefresh.ts:31:7 ❯ Timeout._onTimeout src/composables/autoRefresh.ts:22:7 ❯ listOnTimeout node:internal/timers:588:17 ❯ processTimers node:internal/timers:523:7
Added run to vitest so by default we not running in watch mode
Otherwise the cleanup happens in a non deterministic order
| "lint": "eslint .", | ||
| "preview": "vite preview", | ||
| "test:component": "vitest ./src", | ||
| "test:component": "vitest run ./src", |
There was a problem hiding this comment.
By default vitest runs in watch mode, but in our CI we always want it to perform a single run without watch mode.
There was a problem hiding this comment.
This was able to detect that it was running from CI and not hold the execution in an infinite watch. Making it explicit with run is good 👍
| "@testing-library/vue": "8.1.0", | ||
| "@tsconfig/node18": "18.2.4", | ||
| "@types/bootstrap": "5.2.10", | ||
| "@types/jsdom": "27.0.0", |
There was a problem hiding this comment.
We were missing this typescript type
| function deleteAllCookies() { | ||
| const cookies = document.cookie.split(";"); | ||
|
|
||
| for (let i = 0; i < cookies.length; i++) { | ||
| const cookie = cookies[i]; | ||
| const eqPos = cookie.indexOf("="); | ||
| const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie; | ||
| document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT"; | ||
| } | ||
| } | ||
|
|
||
| afterEach(() => { | ||
| //Intentionally not calling mockServer.resetHandlers here to prevent ServicePulse in flight messages after app unmount to fail. | ||
| //mockServer.resetHandlers is being called instead in driver.ts | ||
|
|
||
| //Make JSDOM create a fresh document per each test run | ||
| jsdom.reconfigure({ url: "http://localhost:3000/" }); | ||
| localStorage.clear(); | ||
| sessionStorage.clear(); | ||
| deleteAllCookies(); |
There was a problem hiding this comment.
All this code was moved into the driver.ts
| deleteAllCookies(); | ||
| afterAll(() => { | ||
| console.log("Shutting down mock server"); | ||
| mockServer.close(); |
There was a problem hiding this comment.
We are cleaning up the mock server as per the documentation
There was a problem hiding this comment.
I am glad that this call to close now works. The await flushpromises now being part of the driver probably does the trick. Nice job 👍
| }, | ||
| test: { | ||
| pool: "forks", //https://github.com/vitest-dev/vitest/issues/2008#issuecomment-187106690 | ||
| pool: "forks", |
There was a problem hiding this comment.
forks is now the default.
There was a problem hiding this comment.
If forks is now the default, do we still need to explicitly configure it?
There was a problem hiding this comment.
I left it just to be sure
This file is auto generated by msw
Added more diagnostics so we can see what is going on
This test is just validating what SC does. No need for it.
|
@cquirosj, if you don't mind, can you review this PR? |
| "lint": "eslint .", | ||
| "preview": "vite preview", | ||
| "test:component": "vitest ./src", | ||
| "test:component": "vitest run ./src", |
There was a problem hiding this comment.
This was able to detect that it was running from CI and not hold the execution in an infinite watch. Making it explicit with run is good 👍
| }, | ||
| test: { | ||
| pool: "forks", //https://github.com/vitest-dev/vitest/issues/2008#issuecomment-187106690 | ||
| pool: "forks", |
There was a problem hiding this comment.
If forks is now the default, do we still need to explicitly configure it?
| deleteAllCookies(); | ||
| afterAll(() => { | ||
| console.log("Shutting down mock server"); | ||
| mockServer.close(); |
There was a problem hiding this comment.
I am glad that this call to close now works. The await flushpromises now being part of the driver probably does the trick. Nice job 👍
| console.log("Starting test"); | ||
|
|
||
| //run the test | ||
| await use(driver); | ||
|
|
||
| console.log("Test ended"); | ||
| //unmount the app after the test runs | ||
| driver.disposeApp(); | ||
|
|
||
| // We need to wait for any pending promises to resolve before resetting handlers and clearing storage | ||
| await flushPromises(); | ||
|
|
||
| console.log("Cleanup after test"); |
There was a problem hiding this comment.
Were these console.log statements left here intentionally to be part of the PR? If so, that is ok.
There was a problem hiding this comment.
yeah, I left them intentionally to provide better diagnostics for the tests
We found an issue with the cleaning-up routines that can cause certain instances to be cleaned up before others.
We have started a discussion in vitest to figure out if the behaviour is a bug or if we are just using it incorrectly.
In the meantime, we have addressed the issue by refactoring the code to do the cleanup in a more consistent way.