wip test

Author: paula-stacho

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import { expect } from 'chai';
+import {
+  screen,
+  userEvent,
+  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 { MongoDBDataModelDescription } from '../services/data-model-storage';
+import { DiagramProvider } from '@mongodb-js/diagramming';
+
+const storageItems: MongoDBDataModelDescription[] = [
+  {
+    id: '1',
+    name: 'One',
+    createdAt: '2023-10-01T00:00:00.000Z',
+    updatedAt: '2023-10-03T00:00:00.000Z',
+    edits: [
+      {
+        id: 'edit-id-1',
+        timestamp: '2023-10-02T00:00:00.000Z',
+        type: 'SetModel',
+        model: {
+          collections: [
+            {
+              ns: 'db1.collection1',
+              indexes: [],
+              displayPosition: [1, 1],
+              shardKey: {},
+              jsonSchema: { bsonType: 'object' },
+            },
+          ],
+          relationships: [],
+        },
+      },
+    ],
+    connectionId: null,
+  },
+];
+
+const renderDiagramEditor = async ({
+  items = storageItems,
+}: {
+  items?: MongoDBDataModelDescription[];
+} = {}) => {
+  const mockDataModelStorage = {
+    status: 'READY',
+    error: null,
+    items,
+    save: () => {
+      return Promise.resolve(false);
+    },
+    delete: () => {
+      return Promise.resolve(false);
+    },
+    loadAll: () => Promise.resolve(items),
+    load: (id: string) => {
+      return Promise.resolve(items.find((x) => x.id === id) ?? null);
+    },
+  };
+  console.log(DiagramProvider);
+  const result = await renderWithOpenedDiagramStore(
+    <DataModelStorageServiceProvider storage={mockDataModelStorage}>
+      <DiagramProvider fitView>
+        <DiagramEditor />
+      </DiagramProvider>
+    </DataModelStorageServiceProvider>,
+    {
+      services: {
+        dataModelStorage: mockDataModelStorage,
+      },
+    },
+    items[0]
+  );
+  return result;
+};
+
+describe.only('DiagramEditor', function () {
+  let store: DataModelingStore;
+
+  beforeEach(async function () {
+    const result = await renderDiagramEditor();
+    store = result.store;
+
+    // wait till the editor is loaded
+    // await waitFor(() => {
+    //   expect(screen.getByTestId('model-preview')).to.be.visible;
+    // });
+  });
+
+  it('shows the list of diagrams', async function () {
+    // screen.debug()
+  });
+});

packages/compass-data-modeling/src/store/diagram.spec.ts

@@ -90,17 +90,21 @@ describe('Data Modeling store', function () {
       expect(initialDiagram.connectionId).to.equal(newDiagram.connectionId);
       expect(initialDiagram.edits).to.have.length(1);
       expect(initialDiagram.edits[0].type).to.equal('SetModel');
-      expect(initialDiagram.edits[0].model.collections[0]).to.deep.include({
+      const initialEdit = initialDiagram.edits[0] as Extract<
+        Edit,
+        { type: 'SetModel' }
+      >;
+      expect(initialEdit.model.collections[0]).to.deep.include({
         ns: newDiagram.collections[0].ns,
         jsonSchema: newDiagram.collections[0].schema,
         displayPosition: [-1, -1],
       });
-      expect(initialDiagram.edits[0].model.collections[1]).to.deep.include({
+      expect(initialEdit.model.collections[1]).to.deep.include({
         ns: newDiagram.collections[1].ns,
         jsonSchema: newDiagram.collections[1].schema,
         displayPosition: [-1, -1],
       });
-      expect(initialDiagram.edits[0].model.relationships).to.deep.equal(
+      expect(initialEdit.model.relationships).to.deep.equal(
         newDiagram.relations
       );
 
@@ -116,17 +120,21 @@ describe('Data Modeling store', function () {
       expect(diagramWithLayout.connectionId).to.equal(newDiagram.connectionId);
       expect(diagramWithLayout.edits).to.have.length(1);
       expect(diagramWithLayout.edits[0].type).to.equal('SetModel');
-      expect(diagramWithLayout.edits[0].model.collections[0]).to.deep.include({
+      const initialEditWithPositions = diagramWithLayout.edits[0] as Extract<
+        Edit,
+        { type: 'SetModel' }
+      >;
+      expect(initialEditWithPositions.model.collections[0]).to.deep.include({
         ns: newDiagram.collections[0].ns,
         jsonSchema: newDiagram.collections[0].schema,
         displayPosition: positions[newDiagram.collections[0].ns],
       });
-      expect(diagramWithLayout.edits[0].model.collections[1]).to.deep.include({
+      expect(initialEditWithPositions.model.collections[1]).to.deep.include({
         ns: newDiagram.collections[1].ns,
         jsonSchema: newDiagram.collections[1].schema,
         displayPosition: positions[newDiagram.collections[1].ns],
       });
-      expect(diagramWithLayout.edits[0].model.relationships).to.deep.equal(
+      expect(initialEditWithPositions.model.relationships).to.deep.equal(
         newDiagram.relations
       );
     });

packages/compass-data-modeling/src/store/diagram.ts

@@ -354,6 +354,7 @@ export function getCurrentModel(
   description: MongoDBDataModelDescription
 ): StaticModel {
   // Get the last 'SetModel' edit.
+  console.log('DESCRIPTION', description);
   const reversedSetModelEditIndex = description.edits
     .slice()
     .reverse()

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

@@ -1,5 +1,8 @@
 import React from 'react';
-import { renderWithConnections } from '@mongodb-js/testing-library-compass';
+import {
+  renderWithConnections,
+  waitFor,
+} 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';
@@ -9,6 +12,9 @@ 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<{
@@ -197,3 +203,26 @@ 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);
+    console.log('HAS A DIAGRAM', store.getState().diagram?.edits.current[0]);
+  });
+  const renderResult = renderWithConnections(
+    <Provider store={store}>{component}</Provider>,
+    { connections }
+  );
+  return { ...renderResult, store };
+};