test(server): fix flaky (#4088)

apps/server/src/tests/prometheus-metrics.spec.ts

@@ -36,15 +36,27 @@ test('should be able to increment counter', async () => {
 });
 
 test('should be able to timer', async () => {
-  const endTimer = metrics.socketIOEventTimer({ event: 'client-handshake' });
+  let minimum: number;
-  await new Promise(resolve => setTimeout(resolve, 50));
+  {
-  endTimer();
+    const endTimer = metrics.socketIOEventTimer({ event: 'client-handshake' });
+    const a = performance.now();
+    await new Promise(resolve => setTimeout(resolve, 50));
+    const b = performance.now();
+    minimum = b - a;
+    endTimer();
+  }
 
-  const endTimer2 = metrics.socketIOEventTimer({ event: 'client-handshake' });
+  let maximum: number;
-  await new Promise(resolve => setTimeout(resolve, 100));
+  {
-  endTimer2();
+    const a = performance.now();
+    const endTimer = metrics.socketIOEventTimer({ event: 'client-handshake' });
+    await new Promise(resolve => setTimeout(resolve, 100));
+    endTimer();
+    const b = performance.now();
+    maximum = b - a;
+  }
 
-  const socketIOTimerMetric = await register.getSingleMetric('socket_io_timer');
+  const socketIOTimerMetric = register.getSingleMetric('socket_io_timer');
   ok(socketIOTimerMetric);
 
   const observations = (await socketIOTimerMetric.get()).values;
@@ -54,8 +66,14 @@ test('should be able to timer', async () => {
       observation.labels.event === 'client-handshake' &&
       'quantile' in observation.labels
     ) {
-      ok(observation.value >= 0.05);
+      ok(
-      ok(observation.value <= 0.2);
+        observation.value >= minimum / 1000,
+        'observation.value should be greater than minimum'
+      );
+      ok(
+        observation.value <= maximum / 1000,
+        'observation.value should be less than maximum'
+      );
     }
   }
 });

apps/storybook/src/stories/core.stories.tsx

@@ -37,9 +37,14 @@ export const SettingPage: StoryFn = () => {
 };
 SettingPage.play = async ({ canvasElement, step }) => {
   const canvas = within(canvasElement);
-  await waitFor(async () => {
+  await waitFor(
-    assertExists(canvasElement.querySelector('v-line'));
+    () => {
-  });
+      assertExists(canvasElement.querySelector('v-line'));
+    },
+    {
+      timeout: 10000,
+    }
+  );
   await step('click setting modal button', async () => {
     await userEvent.click(canvas.getByTestId('settings-modal-trigger'));
   });
@@ -111,9 +116,14 @@ export const SearchPage: StoryFn = () => {
 };
 SearchPage.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  await waitFor(async () => {
+  await waitFor(
-    assertExists(canvasElement.querySelector('v-line'));
+    () => {
-  });
+      assertExists(canvasElement.querySelector('v-line'));
+    },
+    {
+      timeout: 10000,
+    }
+  );
   await userEvent.click(canvas.getByTestId('slider-bar-quick-search-button'));
 };
 SearchPage.decorators = [withRouter];
@@ -131,9 +141,14 @@ export const ImportPage: StoryFn = () => {
 };
 ImportPage.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  await waitFor(() => {
+  await waitFor(
-    assertExists(canvasElement.querySelector('v-line'));
+    () => {
-  });
+      assertExists(canvasElement.querySelector('v-line'));
+    },
+    {
+      timeout: 10000,
+    }
+  );
   await waitFor(() => {
     assertExists(
       canvasElement.querySelector('[data-testid="header-dropDownButton"]')
@@ -165,7 +180,7 @@ OpenAppPage.parameters = {
   reactRouter: reactRouterParameters({
     routing: reactRouterOutlets(routes),
     location: {
-      path: '/open-app',
+      path: '/open-app/url',
       searchParams: {
         url: 'affine-beta://foo-bar.com',
         open: 'false',