update test helpers

Author: paula-stacho

packages/compass-data-modeling/src/components/diagram-editor.spec.tsx

@@ -27,16 +27,20 @@ const mockDiagramming = {
 
 import React from 'react';
 import { expect } from 'chai';
-import { screen, waitFor } from '@mongodb-js/testing-library-compass';
+import {
+  createPluginTestHelpers,
+  screen,
+  waitFor,
+} from '@mongodb-js/testing-library-compass';
 import DiagramEditor from './diagram-editor';
-import { renderWithOpenedDiagramStore } from '../../test/setup-store';
 import type { DataModelingStore } from '../../test/setup-store';
-import { DataModelStorageServiceProvider } from '../provider';
 import type {
   Edit,
   MongoDBDataModelDescription,
 } from '../services/data-model-storage';
 import { DiagramProvider } from '@mongodb-js/diagramming';
+import { CompassDataModelingPlugin } from '..';
+import { openDiagram } from '../store/diagram';
 
 const storageItems: MongoDBDataModelDescription[] = [
   {
@@ -107,7 +111,7 @@ const storageItems: MongoDBDataModelDescription[] = [
   },
 ];
 
-const renderDiagramEditor = async ({
+const renderDiagramEditor = ({
   items = storageItems,
   renderedItem = items[0],
 }: {
@@ -129,28 +133,35 @@ const renderDiagramEditor = async ({
       return Promise.resolve(items.find((x) => x.id === id) ?? null);
     },
   };
-  const result = await renderWithOpenedDiagramStore(
-    <DataModelStorageServiceProvider storage={mockDataModelStorage}>
-      <DiagramProvider fitView>
-        <DiagramEditor />
-      </DiagramProvider>
-    </DataModelStorageServiceProvider>,
-    {
+
+  const { renderWithConnections } = createPluginTestHelpers(
+    CompassDataModelingPlugin.provider.withMockServices({
       services: {
         dataModelStorage: mockDataModelStorage,
       },
-    },
-    renderedItem
+    }),
+    {
+      namespace: 'foo.bar',
+    } as any
+  );
+  const {
+    plugin: { store },
+  } = renderWithConnections(
+    <DiagramProvider fitView>
+      <DiagramEditor />
+    </DiagramProvider>
   );
-  return result;
+  store.dispatch(openDiagram(renderedItem));
+
+  return { store };
 };
 
 describe('DiagramEditor', function () {
   let store: DataModelingStore;
 
   context('with initial diagram', function () {
     beforeEach(async function () {
-      const result = await renderDiagramEditor({
+      const result = renderDiagramEditor({
         renderedItem: storageItems[1],
       });
       store = result.store;
@@ -181,7 +192,7 @@ describe('DiagramEditor', function () {
 
   context('with existing diagram', function () {
     beforeEach(async function () {
-      const result = await renderDiagramEditor({
+      const result = renderDiagramEditor({
         renderedItem: storageItems[0],
       });
       store = result.store;

packages/compass-data-modeling/src/components/diagram-editor.tsx

@@ -282,7 +282,7 @@ const DiagramEditor: React.FunctionComponent<{
   let content;
 
   if (step === 'NO_DIAGRAM_SELECTED') {
-    throw new Error('Unexpected');
+    return null;
   }
 
   if (step === 'ANALYZING') {

packages/compass-data-modeling/src/index.spec.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { expect } from 'chai';
 import { render } from '@mongodb-js/testing-library-compass';
-import { WorkspaceTab } from './index';
+import { CompassDataModelingPlugin } from './index';
 
 describe('Compass Plugin', function () {
-  const Plugin = WorkspaceTab.provider.withMockServices({});
+  const Plugin = CompassDataModelingPlugin.provider.withMockServices({});
 
   it('renders a Plugin', function () {
     expect(() =>
       render(
         <Plugin>
-          <WorkspaceTab.content />
+          <CompassDataModelingPlugin.content />
         </Plugin>
       )
     ).to.not.throw();

packages/compass-data-modeling/src/index.ts

@@ -11,25 +11,28 @@ import { dataModelStorageServiceLocator } from './provider';
 import { activateDataModelingStore } from './store';
 import { PluginTabTitleComponent, WorkspaceName } from './plugin-tab-title';
 
-export const WorkspaceTab: WorkspacePlugin<typeof WorkspaceName> = {
-  name: WorkspaceName,
-  provider: registerCompassPlugin(
-    {
-      name: 'DataModeling',
-      component: function DataModelingProvider({ children }) {
-        return React.createElement(React.Fragment, null, children);
-      },
-      activate: activateDataModelingStore,
+const CompassDataModelingPluginProvider = registerCompassPlugin(
+  {
+    name: 'DataModeling',
+    component: function DataModelingProvider({ children }) {
+      return React.createElement(React.Fragment, null, children);
     },
-    {
-      preferences: preferencesLocator,
-      connections: connectionsLocator,
-      instanceManager: mongoDBInstancesManagerLocator,
-      dataModelStorage: dataModelStorageServiceLocator,
-      track: telemetryLocator,
-      logger: createLoggerLocator('COMPASS-DATA-MODELING'),
-    }
-  ),
-  content: DataModelingComponent,
-  header: PluginTabTitleComponent,
-};
+    activate: activateDataModelingStore,
+  },
+  {
+    preferences: preferencesLocator,
+    connections: connectionsLocator,
+    instanceManager: mongoDBInstancesManagerLocator,
+    dataModelStorage: dataModelStorageServiceLocator,
+    track: telemetryLocator,
+    logger: createLoggerLocator('COMPASS-DATA-MODELING'),
+  }
+);
+
+export const CompassDataModelingPlugin: WorkspacePlugin<typeof WorkspaceName> =
+  {
+    name: WorkspaceName,
+    provider: CompassDataModelingPluginProvider,
+    content: DataModelingComponent,
+    header: PluginTabTitleComponent,
+  };

packages/compass-data-modeling/test/setup-store.tsx

@@ -1,8 +1,5 @@
 import React from 'react';
-import {
-  renderWithConnections,
-  waitFor,
-} from '@mongodb-js/testing-library-compass';
+import { renderWithConnections } from '@mongodb-js/testing-library-compass';
 import { createActivateHelpers } from '@mongodb-js/compass-app-registry';
 import { createNoopTrack } from '@mongodb-js/compass-telemetry/provider';
 import { createNoopLogger } from '@mongodb-js/compass-logging/provider';
@@ -12,9 +9,6 @@ import { activateDataModelingStore } from '../src/store';
 import type { DataModelingStoreServices } from '../src/store';
 import { noopDataModelStorageService } from '../src/provider';
 import { Provider } from 'react-redux';
-import { openDiagram } from '../src/store/diagram';
-import { expect } from 'chai';
-import type { MongoDBDataModelDescription } from '../src/services/data-model-storage';
 
 type ConnectionInfoWithMockData = ConnectionInfo & {
   databases: Array<{
@@ -203,25 +197,3 @@ export const renderWithStore = (
   );
   return { ...renderResult, store };
 };
-export const renderWithOpenedDiagramStore = async (
-  component: JSX.Element,
-  {
-    services = {},
-    connections = testConnections,
-  }: {
-    services?: Partial<DataModelingStoreServices>;
-    connections?: ConnectionInfoWithMockData[];
-  } = {},
-  diagram: MongoDBDataModelDescription
-) => {
-  const store = setupStore(services, connections);
-  store.dispatch(openDiagram(diagram));
-  await waitFor(() => {
-    expect(store.getState().diagram?.edits.current).to.have.lengthOf(1);
-  });
-  const renderResult = renderWithConnections(
-    <Provider store={store}>{component}</Provider>,
-    { connections }
-  );
-  return { ...renderResult, store };
-};