Update tests with realistic delay

Signed-off-by: Frances Thai <[email protected]>

web/vtadmin/package.json

@@ -89,7 +89,7 @@
     "eslint-config-react-app": "^7.0.1",
     "i": "^0.3.7",
     "jsdom": "^21.1.1",
-    "msw": "^2.5.2",
+    "msw": "^0.36.8",
     "npm": "^10.8.0",
     "postcss": "^8.4.31",
     "prettier": "^2.2.1",

web/vtadmin/src/components/ActionPanel.test.tsx

@@ -16,7 +16,7 @@
 
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { http, HttpResponse } from 'msw';
+import { delay, http, HttpResponse } from 'msw';
 import { QueryClient, QueryClientProvider, useMutation } from 'react-query';
 import { describe, it, expect, vi } from 'vitest';
 
@@ -33,11 +33,7 @@ describe('ActionPanel', () => {
      * provides such a function and should be `render`ed in the context QueryClientProvider.
      */
     const Wrapper: React.FC<ActionPanelProps & { url: string }> = (props) => {
-        const mutation = useMutation(() => fetch(new URL(props['url']), { method: 'post' }), {
-            onError: (error) => {
-                console.log('ERROR: ', error);
-            },
-        });
+        const mutation = useMutation(() => fetch(new URL(props['url']), { method: 'post' }));
         return <ActionPanel {...props} mutation={mutation as any} />;
     };
 
@@ -46,7 +42,8 @@ describe('ActionPanel', () => {
 
         const url = `${import.meta.env.VITE_VTADMIN_API_ADDRESS}/api/test`;
         global.server.use(
-            http.post(url, (info) => {
+            http.post(url, async (info) => {
+                await delay()
                 return HttpResponse.json({ ok: true });
             })
         );
@@ -73,8 +70,8 @@ describe('ActionPanel', () => {
         // Enter the confirmation text
         await user.type(input, 'zone1-101');
         expect(button).not.toHaveAttribute('disabled');
-
-        await user.click(button);
+        
+        await user.click(button)
 
         // Validate form while API request is in flight
         expect(button).toHaveTextContent('Doing Action...');

web/vtadmin/src/components/routes/createKeyspace/CreateKeyspace.test.tsx

@@ -13,8 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { http, HttpResponse } from 'msw';
-import { setupServer } from 'msw/node';
+import { delay, http, HttpResponse } from 'msw';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createMemoryHistory } from 'history';
@@ -32,23 +31,18 @@ import * as Snackbar from '../../Snackbar';
 // about UI structure (boo!), which means this test is rather brittle
 // to UI changes (e.g., like how the Select works, adding new form fields, etc.)
 describe('CreateKeyspace integration test', () => {
-    const server = setupServer();
-
-    afterAll(() => {
-        server.close();
-    });
-
     it('successfully creates a keyspace', async () => {
         vi.spyOn(global, 'fetch');
         vi.spyOn(Snackbar, 'success');
 
         const cluster = { id: 'local', name: 'local' };
         const apiAddr = import.meta.env.VITE_VTADMIN_API_ADDRESS;
-        server.use(
-            http.get(`${apiAddr}/api/clusters`, (info) => {
+        global.server.use(
+            http.get(`${apiAddr}/api/clusters`, async (info) => {
                 return HttpResponse.json({ result: { clusters: [cluster] }, ok: true });
             }),
-            http.post(`${apiAddr}/api/keyspace/:clusterID`, (info) => {
+            http.post(`${apiAddr}/api/keyspace/:clusterID`, async (info) => {
+                await delay()
                 const data: vtadmin.ICreateKeyspaceResponse = {
                     keyspace: {
                         cluster: { id: cluster.id, name: cluster.name },
@@ -58,7 +52,6 @@ describe('CreateKeyspace integration test', () => {
                 return HttpResponse.json({ result: data, ok: true });
             })
         );
-        server.listen();
 
         const history = createMemoryHistory();
         vi.spyOn(history, 'push');