From 055b7aec3da8b0b04801525d8180d47ea8978d36 Mon Sep 17 00:00:00 2001
From: Camila Belo <camilaibs@gmail.com>
Date: Fri, 13 Oct 2023 10:56:10 +0200
Subject: [PATCH] test(frontend-plugin-api): cover extension suspense component

Signed-off-by: Camila Belo <camilaibs@gmail.com>
---
 .../src/components/ExtensionSuspense.test.tsx | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 packages/frontend-plugin-api/src/components/ExtensionSuspense.test.tsx

diff --git a/packages/frontend-plugin-api/src/components/ExtensionSuspense.test.tsx b/packages/frontend-plugin-api/src/components/ExtensionSuspense.test.tsx
new file mode 100644
index 0000000000..166c57b83b
--- /dev/null
+++ b/packages/frontend-plugin-api/src/components/ExtensionSuspense.test.tsx
@@ -0,0 +1,54 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { lazy } from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { renderWithEffects, wrapInTestApp } from '@backstage/test-utils';
+import { ExtensionSuspense } from './ExtensionSuspense';
+
+describe('ExtensionSuspense', () => {
+  it('should render the app progress component as fallback', async () => {
+    const LazyComponent = lazy(() => new Promise(() => {}));
+
+    await renderWithEffects(
+      wrapInTestApp(
+        <ExtensionSuspense>
+          <LazyComponent />
+        </ExtensionSuspense>,
+      ),
+    );
+
+    expect(screen.getByTestId('progress')).toBeInTheDocument();
+  });
+
+  it('should render the lazy loaded children component', async () => {
+    const LazyComponent = lazy(() =>
+      Promise.resolve({ default: () => <div>Lazy Component</div> }),
+    );
+
+    await renderWithEffects(
+      wrapInTestApp(
+        <ExtensionSuspense>
+          <LazyComponent />
+        </ExtensionSuspense>,
+      ),
+    );
+
+    await waitFor(() =>
+      expect(screen.getByText('Lazy Component')).toBeInTheDocument(),
+    );
+  });
+});