test(web-terminal): remove TerminalComponent test race condition issue

Signed-off-by: Christoph Jerolimov <[email protected]>
janus-idp · Jan 17, 2024 · ace7a4a · ace7a4a
1 parent ca2b119
commit ace7a4a
Showing 1 changed file with 37 additions and 42 deletions.
diff --git a/plugins/web-terminal/src/components/TerminalComponent/TerminalComponent.test.tsx b/plugins/web-terminal/src/components/TerminalComponent/TerminalComponent.test.tsx
@@ -8,6 +8,7 @@ import {
   TestApiProvider,
 } from '@backstage/test-utils';
 
+import { createTheme, ThemeProvider } from '@material-ui/core';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
@@ -41,6 +42,24 @@ const mockConfig = new MockConfigApi({
   },
 });
 
+const theme = createTheme({
+  transitions: {
+    duration: {
+      // Disable <Progress /> visibility fade-in delay
+      // https://github.com/backstage/backstage/blob/master/packages/core-components/src/components/Progress/Progress.tsx
+      short: 0,
+    },
+  },
+});
+
+const Providers: React.FC = ({ children }) => (
+  <ThemeProvider theme={theme}>
+    <TestApiProvider apis={[[configApiRef, mockConfig]]}>
+      <EntityProvider entity={entityMock}>{children}</EntityProvider>
+    </TestApiProvider>
+  </ThemeProvider>
+);
+
 describe('TerminalComponent', () => {
   const server = setupServer();
   const VALID_TOKEN = 'valid-token';
@@ -81,7 +100,6 @@ describe('TerminalComponent', () => {
             );
           }
           return res(
-            ctx.delay(800),
             ctx.status(200),
             ctx.json(require('./__fixtures__/createWorkspace.json')),
           );
@@ -90,62 +108,38 @@ describe('TerminalComponent', () => {
       }),
     );
   });
+
   afterEach(() => {
     server.resetHandlers();
   });
+
   it('should render form for the Web Terminal', async () => {
     const rendered = render(
-      <TestApiProvider apis={[[configApiRef, mockConfig]]}>
-        <EntityProvider entity={entityMock}>
-          <TerminalComponent />
-        </EntityProvider>
-      </TestApiProvider>,
+      <Providers>
+        <TerminalComponent />
+      </Providers>,
     );
     expect(rendered.getByText('Web Terminal')).toBeInTheDocument();
   });
-  it('should start loading', async () => {
-    const rendered = render(
-      <TestApiProvider apis={[[configApiRef, mockConfig]]}>
-        <EntityProvider entity={entityMock}>
-          <TerminalComponent />
-        </EntityProvider>
-      </TestApiProvider>,
-    );
-    const inputField = rendered
-      .getByTestId('token-input')
-      .querySelector('input');
-    if (!inputField) {
-      throw new Error('Input field not found');
-    }
-    fireEvent.change(inputField, { target: { value: VALID_TOKEN } });
-    expect(inputField.value).toBe(VALID_TOKEN);
-    const submit = rendered.getByTestId('submit-token-button');
-    fireEvent.click(submit);
-    await waitFor(() =>
-      expect(rendered.getByTestId('progress')).toBeInTheDocument(),
-    );
-  });
 
   it('should render popup on token without valid permissions', async () => {
     const rendered = render(
-      <TestApiProvider apis={[[configApiRef, mockConfig]]}>
-        <EntityProvider entity={entityMock}>
-          <TerminalComponent />
-        </EntityProvider>
-      </TestApiProvider>,
+      <Providers>
+        <TerminalComponent />
+      </Providers>,
     );
     const inputField = rendered
       .getByTestId('token-input')
       .querySelector('input');
     if (!inputField) {
       throw new Error('Input field not found');
     }
-    fireEvent.change(inputField, {
+    await fireEvent.change(inputField, {
       target: { value: NOT_VALID_PERMISSIONS_TOKEN },
     });
     expect(inputField.value).toBe(NOT_VALID_PERMISSIONS_TOKEN);
     const submit = rendered.getByTestId('submit-token-button');
-    fireEvent.click(submit);
+    await fireEvent.click(submit);
     await waitFor(() =>
       expect(rendered.getByTestId('namespace-picker')).toBeInTheDocument(),
     );
@@ -163,22 +157,23 @@ describe('TerminalComponent', () => {
       })),
     });
     const rendered = render(
-      <TestApiProvider apis={[[configApiRef, mockConfig]]}>
-        <EntityProvider entity={entityMock}>
-          <TerminalComponent />
-        </EntityProvider>
-      </TestApiProvider>,
+      <Providers>
+        <TerminalComponent />
+      </Providers>,
     );
     const inputField = rendered
       .getByTestId('token-input')
       .querySelector('input');
     if (!inputField) {
       throw new Error('Input field not found');
     }
-    fireEvent.change(inputField, { target: { value: VALID_TOKEN } });
+    await fireEvent.change(inputField, { target: { value: VALID_TOKEN } });
     expect(inputField.value).toBe(VALID_TOKEN);
     const submit = rendered.getByTestId('submit-token-button');
-    fireEvent.click(submit);
+    await fireEvent.click(submit);
+    await waitFor(() =>
+      expect(rendered.getByTestId('progress')).toBeInTheDocument(),
+    );
     await waitFor(() =>
       expect(rendered.getByTestId('terminal')).toBeInTheDocument(),
     );