refactor: split testing utilities out of main bundle

.changeset/wet-plants-pretend.md

@@ -0,0 +1,12 @@
+---
+"@frontify/app-bridge": major
+---
+
+BREAKING CHANGE:
+Split the testing utilities out of the main bundle, so they don't end up in production builds.
+You will need to update the import paths in your tests:
+
+```git
+- import { AssetDummy, withAppBridgeBlockStubs } from '@frontify/app-bridge';
++ import { AssetDummy, withAppBridgeBlockStubs } from '@frontify/app-bridge/testing';
+```

packages/app-bridge/src/index.ts

@@ -13,6 +13,5 @@ export * from './errors';
 export * from './helpers';
 export * from './registries';
 export * from './react';
-export * from './tests';
 export * from './types';
 export * from './utilities';

packages/app-bridge/src/react/useBrandportalLink.spec.ts

@@ -1,5 +1,3 @@
-// @vitest-environment happy-dom
-
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { act, renderHook } from '@testing-library/react';

packages/app-bridge/src/react/useCategorizedDocumentPages.spec.ts

@@ -1,5 +1,3 @@
-// @vitest-environment happy-dom
-
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { afterEach, describe, expect, it, vi } from 'vitest';

packages/app-bridge/src/react/useCoverPage.spec.ts

@@ -1,5 +1,3 @@
-// @vitest-environment happy-dom
-
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { act, renderHook, waitFor } from '@testing-library/react';

packages/app-bridge/src/react/useDocumentCategories.spec.ts

@@ -1,5 +1,3 @@
-// @vitest-environment happy-dom
-
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { afterEach, describe, expect, it, vi } from 'vitest';

packages/app-bridge/src/react/useDocumentGroups.spec.ts

@@ -1,5 +1,3 @@
-// @vitest-environment happy-dom
-
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { afterEach, describe, expect, it, vi } from 'vitest';

packages/app-bridge/src/react/useGroupedDocuments.spec.ts

@@ -1,5 +1,3 @@
-// @vitest-environment happy-dom
-
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { afterEach, describe, expect, it, vi } from 'vitest';

packages/app-bridge/src/react/useUncategorizedDocumentPages.spec.ts

@@ -1,5 +1,3 @@
-// @vitest-environment happy-dom
-
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { afterEach, describe, expect, it, vi } from 'vitest';

packages/app-bridge/src/react/useUngroupedDocuments.spec.ts

@@ -1,5 +1,3 @@
-// @vitest-environment happy-dom
-
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
 import { afterEach, describe, expect, it, vi } from 'vitest';

packages/guideline-blocks-settings/package.json

@@ -28,6 +28,7 @@
         "prettier": "prettier --check .",
         "prettier:fix": "prettier --write .",
         "test": "vitest run --silent",
+        "test:ui": "vitest --ui",
         "test:watch": "vitest",
         "typecheck": "tsc --noEmit"
     },

packages/guideline-blocks-settings/src/components/Attachments/Attachments.spec.ct.tsx

@@ -1,10 +1,11 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { type AppBridgeBlock, AssetDummy, getAppBridgeBlockStub } from '@frontify/app-bridge';
+import { type AppBridgeBlock } from '@frontify/app-bridge';
 import { mount } from 'cypress/react18';
 import { Attachments as AttachmentsComponent } from './Attachments';
 import { AttachmentsProps } from './types';
 import { SinonStub } from 'sinon';
+import { getAppBridgeTestingPackage } from '../../tests/helpers/getAppBridgeTestingPackage';
 
 const FlyoutButtonSelector = '[data-test-id="attachments-flyout-button"]';
 const AssetInputSelector = '[data-test-id="asset-input-placeholder"]';
@@ -15,15 +16,15 @@ const MenuItemSelector = '[data-test-id="menu-item"]';
 const LoadingCircleSelector = '[data-test-id="loading-circle"]';
 
 const Attachments = ({
-    appBridge = getAppBridgeBlockStub(),
+    appBridge,
     onDelete = cy.stub(),
     items,
     onReplaceWithBrowse = cy.stub(),
     onReplaceWithUpload = cy.stub(),
     onSorted = cy.stub(),
     onBrowse = cy.stub(),
     onUpload = cy.stub(),
-}: Partial<AttachmentsProps>) => {
+}: Partial<AttachmentsProps> & { appBridge: AttachmentsProps['appBridge'] }) => {
     return (
         <AttachmentsComponent
             appBridge={appBridge}
@@ -49,59 +50,83 @@ const hasOpenAssetChooser = (
     return 'openAssetChooser' in appBridge;
 };
 
-describe('Attachments', () => {
-    it('renders attachments flyout if it is in edit mode', () => {
+describe('Attachments', async () => {
+    it('renders attachments flyout if it is in edit mode', async () => {
+        const { getAppBridgeBlockStub } = await getAppBridgeTestingPackage();
+
         mount(<Attachments appBridge={getAppBridgeBlockStub({ editorState: true })} />);
         cy.get(FlyoutButtonSelector).should('exist');
     });
 
-    it('renders attachments flyout if it has attachments', () => {
-        mount(<Attachments items={[AssetDummy.with(1)]} />);
+    it('renders attachments flyout if it has attachments', async () => {
+        const { AssetDummy, getAppBridgeBlockStub } = await getAppBridgeTestingPackage();
+
+        mount(<Attachments appBridge={getAppBridgeBlockStub()} items={[AssetDummy.with(1)]} />);
         cy.get(FlyoutButtonSelector).should('exist');
     });
 
-    it('does not render attachments flyout if there are no attachments', () => {
-        mount(<Attachments items={[]} />);
+    it('does not render attachments flyout if there are no attachments', async () => {
+        const { getAppBridgeBlockStub } = await getAppBridgeTestingPackage();
+
+        mount(<Attachments appBridge={getAppBridgeBlockStub()} items={[]} />);
         cy.get(FlyoutButtonSelector).should('not.exist');
     });
 
-    it('renders asset input if in edit mode', () => {
+    it('renders asset input if in edit mode', async () => {
+        const { AssetDummy, getAppBridgeBlockStub } = await getAppBridgeTestingPackage();
+
         mount(<Attachments appBridge={getAppBridgeBlockStub({ editorState: true })} items={[AssetDummy.with(1)]} />);
         cy.get(FlyoutButtonSelector).click();
         cy.get(AssetInputSelector).should('exist');
     });
 
-    it('does not render asset input if in view mode', () => {
-        mount(<Attachments items={[AssetDummy.with(1)]} />);
+    it('does not render asset input if in view mode', async () => {
+        const { AssetDummy, getAppBridgeBlockStub } = await getAppBridgeTestingPackage();
+
+        mount(<Attachments appBridge={getAppBridgeBlockStub()} items={[AssetDummy.with(1)]} />);
         cy.get(FlyoutButtonSelector).click();
         cy.get(AssetInputSelector).should('not.exist');
     });
 
-    it('renders asset action buttons if in edit mode', () => {
+    it('renders asset action buttons if in edit mode', async () => {
+        const { AssetDummy, getAppBridgeBlockStub } = await getAppBridgeTestingPackage();
+
         mount(<Attachments appBridge={getAppBridgeBlockStub({ editorState: true })} items={[AssetDummy.with(1)]} />);
         cy.get(FlyoutButtonSelector).click();
         cy.get(ActionBarSelector).should('exist');
     });
 
-    it('does not render asset action buttons if in view mode', () => {
-        mount(<Attachments items={[AssetDummy.with(1)]} />);
+    it('does not render asset action buttons if in view mode', async () => {
+        const { AssetDummy, getAppBridgeBlockStub } = await getAppBridgeTestingPackage();
+
+        mount(<Attachments appBridge={getAppBridgeBlockStub()} items={[AssetDummy.with(1)]} />);
         cy.get(FlyoutButtonSelector).click();
         cy.get(ActionBarSelector).should('not.exist');
     });
 
-    it('renders an attachment item for each asset', () => {
-        mount(<Attachments items={[AssetDummy.with(1), AssetDummy.with(2), AssetDummy.with(3)]} />);
+    it('renders an attachment item for each asset', async () => {
+        const { AssetDummy, getAppBridgeBlockStub } = await getAppBridgeTestingPackage();
+
+        mount(
+            <Attachments
+                appBridge={getAppBridgeBlockStub()}
+                items={[AssetDummy.with(1), AssetDummy.with(2), AssetDummy.with(3)]}
+            />,
+        );
         cy.get(FlyoutButtonSelector).click();
         cy.get(AttachmentItemSelector).should('have.length', 3);
     });
 
     it('renders loading circle for attachment item', async () => {
+        const { AssetDummy, getAppBridgeBlockStub } = await getAppBridgeTestingPackage();
+
         const appBridge = getAppBridgeBlockStub({
             editorState: true,
         });
 
         if ((await isPre302Stub(appBridge)) && hasOpenAssetChooser(appBridge)) {
-            (appBridge.openAssetChooser as SinonStub) = cy.stub().callsArgWith(0, AssetDummy.with(4));
+            // @ts-expect-error stubbing
+            appBridge.openAssetChooser = cy.stub().callsArgWith(0, AssetDummy.with(4));
         }
 
         cy.clock();
@@ -129,7 +154,9 @@ describe('Attachments', () => {
         cy.get(LoadingCircleSelector).should('not.exist');
     });
 
-    it('renders focus ring on flyout button while tabbing and open it', () => {
+    it('renders focus ring on flyout button while tabbing and open it', async () => {
+        const { AssetDummy, getAppBridgeBlockStub } = await getAppBridgeTestingPackage();
+
         mount(
             <Attachments
                 appBridge={getAppBridgeBlockStub({ editorState: true })}

packages/guideline-blocks-settings/src/components/BlockInjectButton/BlockInjectButton.spec.ct.tsx

@@ -1,15 +1,17 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { withAppBridgeBlockStubs } from '@frontify/app-bridge';
 import { mount } from 'cypress/react18';
 import { BlockInjectButton } from './BlockInjectButton';
 import { IconAdobeCreativeCloud } from '@frontify/fondue';
+import { getAppBridgeTestingPackage } from '../../tests/helpers/getAppBridgeTestingPackage';
 
 const BlockInjectButtonSelector = '[data-test-id="block-inject-button"]';
 const ActionMenuItemSelector = '[data-test-id="menu-item"]';
 
 describe('Block Inject Button', () => {
-    it('renders a simple block inject button', () => {
+    it('renders a simple block inject button', async () => {
+        const { withAppBridgeBlockStubs } = await getAppBridgeTestingPackage();
+
         const [BlockInjectButtonWithStubs] = withAppBridgeBlockStubs(BlockInjectButton, {});
 
         mount(
@@ -25,7 +27,9 @@ describe('Block Inject Button', () => {
             .should('have.class', 'first:tw-rounded-tl last:tw-rounded-br', 'first:tw-rounded-bl last:tw-rounded-tr');
     });
 
-    it('renders a block inject button with Menu upload and asset', () => {
+    it('renders a block inject button with Menu upload and asset', async () => {
+        const { withAppBridgeBlockStubs } = await getAppBridgeTestingPackage();
+
         const [BlockInjectButtonWithStubs] = withAppBridgeBlockStubs(BlockInjectButton, {});
 
         mount(

packages/guideline-blocks-settings/src/components/BlockItemWrapper/Toolbar/Toolbar.spec.tsx

@@ -1,23 +1,21 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { getAppBridgeBlockStub } from '@frontify/app-bridge';
 import { render } from '@testing-library/react';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 
 import { AttachmentsProvider } from '../../../hooks/useAttachments';
+import { getAppBridgeTestingPackage } from '../../../tests/helpers/getAppBridgeTestingPackage';
 
 import { Toolbar } from './Toolbar';
 
-/**
- * @vitest-environment happy-dom
- */
-
 const ATTACHMENTS_FLYOUT_ID = 'attachments-flyout-content';
 const MENU_FLYOUT_ID = 'menu-item';
 
 const MOCK_ASSET_FIELD_ID = 'attachment';
 
-describe('Toolbar', () => {
+describe('Toolbar', async () => {
+    const { getAppBridgeBlockStub } = await getAppBridgeTestingPackage();
+
     beforeAll(() => {
         vi.stubGlobal(
             'Worker',