chore: fixing tests

Signed-off-by: benjdlambert <ben@blam.sh>

packages/frontend-app-api/src/apis/implementations/SwappableComponentsApi/DefaultSwappableComponentsApi.test.tsx

@@ -23,7 +23,7 @@ const { ref: testRefB1 } = createSwappableComponent({ id: 'test.b' });
 const { ref: testRefB2 } = createSwappableComponent({ id: 'test.b' });
 
 describe('DefaultComponentsApi', () => {
-  it('should provide components', () => {
+  it('should provide components', async () => {
     const api = DefaultSwappableComponentsApi.fromComponents([
       {
         ref: testRefA,
@@ -35,10 +35,10 @@ describe('DefaultComponentsApi', () => {
 
     render(<ComponentA />);
 
-    expect(screen.getByText('test.a')).toBeInTheDocument();
+    await expect(screen.findByText('test.a')).resolves.toBeInTheDocument();
   });
 
-  it('should key extension refs by ID', () => {
+  it('should key extension refs by ID', async () => {
     const mockLoader = jest.fn(() => <div>test.b</div>);
     const api = DefaultSwappableComponentsApi.fromComponents([
       {
@@ -49,12 +49,8 @@ describe('DefaultComponentsApi', () => {
 
     const ComponentB2 = api.getComponent(testRefB2);
 
-    const ComponentB1 = api.getComponent(testRefB1);
+    render(<ComponentB2 />);
 
-    expect(ComponentB1).toBe(ComponentB2);
-
-    render(<ComponentB1 />);
-
-    expect(screen.getByText('test.b')).toBeInTheDocument();
+    await expect(screen.findByText('test.b')).resolves.toBeInTheDocument();
   });
 });

packages/frontend-defaults/src/createApp.test.tsx

@@ -366,13 +366,13 @@ describe('createApp', () => {
               <theme:app/light out=[core.theme.theme] />
             ]
           </api:app/app-theme>
-          <api:app/components out=[core.api.factory]>
+          <api:app/swappable-components out=[core.api.factory]>
             components [
               <component:app/core.components.progress out=[core.component.component] />
               <component:app/core.components.notFoundErrorPage out=[core.component.component] />
               <component:app/core.components.errorBoundary out=[core.component.component] />
             ]
-          </api:app/components>
+          </api:app/swappable-components>
           <api:app/icons out=[core.api.factory] />
           <api:app/feature-flags out=[core.api.factory] />
           <api:app/translations out=[core.api.factory] />

packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx

@@ -26,9 +26,9 @@ import { ErrorBoundary } from './ErrorBoundary';
 // eslint-disable-next-line @backstage/no-relative-monorepo-imports
 import { routableExtensionRenderedEvent } from '../../../core-plugin-api/src/analytics/Tracker';
 import { AppNode } from '../apis';
-import { Progress } from '@backstage/frontend-plugin-api';
 import { coreExtensionData } from '../wiring';
 import { AppNodeProvider } from './AppNodeProvider';
+import { Progress } from './DefaultSwappableComponents';
 
 type RouteTrackerProps = PropsWithChildren<{
   enabled?: boolean;

packages/frontend-plugin-api/src/components/createSwappableComponent.tsx

@@ -106,5 +106,5 @@ export function createSwappableComponent<
 
   return ComponentRefImpl as {
     ref: SwappableComponentRef<TInnerComponentProps, TExternalComponentProps>;
-  } & ((props: object) => JSX.Element | null);
+  } & ((props: TExternalComponentProps) => JSX.Element | null);
 }