chore(data-modeling): add tests

Author: gribnoysup

packages/compass-data-modeling/src/components/collection-drawer-content.tsx

@@ -43,7 +43,7 @@ const CollectionDrawerContent: React.FunctionComponent<
       <ul>
         {relationships.map((r) => {
           return (
-            <li key={r.id}>
+            <li key={r.id} data-relationship-id={r.id}>
               {r.relationship[0].fields.join(', ')}&nbsp;-&gt;&nbsp;
               {r.relationship[1].fields.join(', ')}
               <Button

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

@@ -0,0 +1,123 @@
+import React from 'react';
+import { expect } from 'chai';
+import {
+  createPluginTestHelpers,
+  screen,
+  waitFor,
+  userEvent,
+  within,
+} from '@mongodb-js/testing-library-compass';
+import { DataModelingWorkspaceTab } from '../index';
+import DiagramEditorSidePanel from './diagram-editor-side-panel';
+import {
+  getCurrentDiagramFromState,
+  openDiagram,
+  selectCollection,
+  selectCurrentModel,
+  selectRelationship,
+} from '../store/diagram';
+import dataModel from '../../test/fixtures/data-model-with-relationships.json';
+
+async function comboboxSelectItem(
+  label: string,
+  value: string,
+  visibleLabel = value
+) {
+  userEvent.click(screen.getByRole('textbox', { name: label }));
+  await waitFor(() => {
+    screen.getByRole('option', { name: visibleLabel });
+  });
+  userEvent.click(screen.getByRole('option', { name: visibleLabel }));
+  await waitFor(() => {
+    expect(screen.getByRole('textbox', { name: label })).to.have.attribute(
+      'value',
+      value
+    );
+  });
+}
+
+describe.only('DiagramEditorSidePanel', function () {
+  function renderDrawer() {
+    const { renderWithConnections } = createPluginTestHelpers(
+      DataModelingWorkspaceTab.provider.withMockServices({})
+    );
+    const result = renderWithConnections(
+      <DiagramEditorSidePanel></DiagramEditorSidePanel>
+    );
+    result.plugin.store.dispatch(openDiagram(dataModel));
+    return result;
+  }
+
+  it('should not render if no items are selected', function () {
+    renderDrawer();
+  });
+
+  it('should render a collection context drawer when collection is clicked', async function () {
+    const result = renderDrawer();
+    await result.plugin.store.dispatch(selectCollection('flights.airlines'));
+    expect(screen.getByText('flights.airlines')).to.be.visible;
+  });
+
+  it('should render a relationship context drawer when relations is clicked', async function () {
+    const result = renderDrawer();
+    await result.plugin.store.dispatch(
+      selectRelationship('204b1fc0-601f-4d62-bba3-38fade71e049')
+    );
+    expect(screen.getByText('Edit Relationship')).to.be.visible;
+    expect(
+      document.querySelector(
+        '[data-relationship-id="204b1fc0-601f-4d62-bba3-38fade71e049"]'
+      )
+    ).to.exist;
+  });
+
+  it('should open and edit relationship starting from collection', async function () {
+    const result = renderDrawer();
+    await result.plugin.store.dispatch(selectCollection('flights.countries'));
+
+    // Open relationshipt editing form
+    const relationshipCard = document.querySelector<HTMLElement>(
+      '[data-relationship-id="204b1fc0-601f-4d62-bba3-38fade71e049"]'
+    );
+    userEvent.click(
+      within(relationshipCard!).getByRole('button', { name: 'Edit' })
+    );
+    expect(screen.getByText('Edit Relationship')).to.be.visible;
+
+    // Select new values
+    await comboboxSelectItem('Local collection', 'planes');
+    await comboboxSelectItem('Local field', 'name');
+    await comboboxSelectItem('Foreign collection', 'countries');
+    await comboboxSelectItem('Foreign field', 'iso_code');
+
+    userEvent.click(screen.getByRole('button', { name: 'Save' }));
+
+    // We should be testing through rendered UI but as it's really hard to make
+    // diagram rendering in tests property, we are just validating the final
+    // model here
+    const modifiedRelationship = selectCurrentModel(
+      getCurrentDiagramFromState(result.plugin.store.getState()).edits
+    ).relationships.find((r) => {
+      return r.id === '204b1fc0-601f-4d62-bba3-38fade71e049';
+    });
+
+    expect(modifiedRelationship)
+      .to.have.property('relationship')
+      .deep.eq([
+        {
+          ns: 'flights.planes',
+          fields: ['name'],
+          cardinality: 1,
+        },
+        {
+          ns: 'flights.countries',
+          fields: ['iso_code'],
+          cardinality: 1,
+        },
+      ]);
+
+    // After saving when starting from collection, we should end up back in the
+    // collection drawer that we started from
+    expect(screen.getByText('flights.countries')).to.be.visible;
+  });
+});

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

@@ -16,6 +16,7 @@ import {
   selectCurrentModel,
   selectCollection,
   selectRelationship,
+  selectBackground,
 } from '../store/diagram';
 import {
   Banner,
@@ -192,6 +193,7 @@ const DiagramEditor: React.FunctionComponent<{
   onMoveCollection: (ns: string, newPosition: [number, number]) => void;
   onCollectionSelect: (namespace: string) => void;
   onRelationshipSelect: (rId: string) => void;
+  onDiagramBackgroundClicked: () => void;
   selectedItem?: string | null;
 }> = ({
   diagramLabel,
@@ -203,6 +205,7 @@ const DiagramEditor: React.FunctionComponent<{
   onMoveCollection,
   onCollectionSelect,
   onRelationshipSelect,
+  onDiagramBackgroundClicked,
   selectedItem,
 }) => {
   const { log, mongoLogId } = useLogger('COMPASS-DATA-MODELING-DIAGRAM-EDITOR');
@@ -353,6 +356,7 @@ const DiagramEditor: React.FunctionComponent<{
               }
               onCollectionSelect(node.id);
             }}
+            onPaneClick={onDiagramBackgroundClicked}
             onEdgeClick={(_evt, edge) => {
               onRelationshipSelect(edge.id);
             }}
@@ -399,5 +403,6 @@ export default connect(
     onMoveCollection: moveCollection,
     onCollectionSelect: selectCollection,
     onRelationshipSelect: selectRelationship,
+    onDiagramBackgroundClicked: selectBackground,
   }
 )(DiagramEditor);

packages/compass-data-modeling/src/components/relationship-drawer-content.tsx

@@ -80,7 +80,7 @@ const RelationshipDrawerContent: React.FunctionComponent<
   );
 
   return (
-    <>
+    <div data-relationship-id={relationshipId}>
       <H3>Edit Relationship</H3>
 
       <FormFieldContainer>
@@ -198,11 +198,11 @@ const RelationshipDrawerContent: React.FunctionComponent<
           Delete
         </Button>
         <Button disabled={!isValid} onClick={onSubmitFormClick}>
-          Submit
+          Save
         </Button>
         <Button onClick={onCancelEditClick}>Cancel</Button>
       </div>
-    </>
+    </div>
   );
 };
 

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

@@ -42,6 +42,7 @@ export enum DiagramActionTypes {
   REDO_EDIT = 'data-modeling/diagram/REDO_EDIT',
   COLLECTION_SELECTED = 'data-modeling/diagram/COLLECTION_SELECTED',
   RELATIONSHIP_SELECTED = 'data-modeling/diagram/RELATIONSHIP_SELECTED',
+  DIAGRAM_BACKGROUND_SELECTED = 'data-modeling/diagram/DIAGRAM_BACKGROUND_SELECTED',
 }
 
 export type OpenDiagramAction = {
@@ -93,6 +94,10 @@ export type RelationSelectedAction = {
   relationship: Relationship;
 };
 
+export type DiagramBackgroundSelectedAction = {
+  type: DiagramActionTypes.DIAGRAM_BACKGROUND_SELECTED;
+};
+
 export type DiagramActions =
   | OpenDiagramAction
   | DeleteDiagramAction
@@ -103,7 +108,8 @@ export type DiagramActions =
   | UndoEditAction
   | RedoEditAction
   | CollectionSelectedAction
-  | RelationSelectedAction;
+  | RelationSelectedAction
+  | DiagramBackgroundSelectedAction;
 
 const INITIAL_STATE: DiagramState = null;
 
@@ -297,6 +303,12 @@ export const diagramReducer: Reducer<DiagramState> = (
     }
     return state;
   }
+  if (isAction(action, DiagramActionTypes.DIAGRAM_BACKGROUND_SELECTED)) {
+    return {
+      ...state,
+      selectedItems: null,
+    };
+  }
   return state;
 };
 
@@ -375,6 +387,33 @@ export function selectRelationship(
   };
 }
 
+export function selectBackground(): DataModelingThunkAction<
+  Promise<void>,
+  DiagramBackgroundSelectedAction
+> {
+  return async (dispatch, getState) => {
+    const { sidePanel } = getState();
+
+    if (
+      sidePanel.viewType === 'relationship-editing' &&
+      sidePanel.relationshipFormState.modified
+    ) {
+      const allowSelect = await showConfirmation({
+        title: 'You have unsaved chages',
+        description:
+          'You are currently editing a relationship. Are you sure you want to stop editing?',
+      });
+      if (!allowSelect) {
+        return;
+      }
+    }
+
+    dispatch({
+      type: DiagramActionTypes.DIAGRAM_BACKGROUND_SELECTED,
+    });
+  };
+}
+
 export function undoEdit(): DataModelingThunkAction<void, UndoEditAction> {
   return (dispatch, getState, { dataModelStorage }) => {
     dispatch({ type: DiagramActionTypes.UNDO_EDIT });

packages/compass-data-modeling/src/store/side-panel.ts

@@ -252,7 +252,8 @@ export const sidePanelReducer: Reducer<SidePanelState> = (
   if (
     isAction(action, SidePanelActionTypes.EDIT_RELATIONSHIP_FORM_CANCELED) ||
     isAction(action, SidePanelActionTypes.EDIT_RELATIONSHIP_FORM_SUBMITTED) ||
-    isAction(action, DiagramActionTypes.COLLECTION_SELECTED)
+    isAction(action, DiagramActionTypes.COLLECTION_SELECTED) ||
+    isAction(action, DiagramActionTypes.DIAGRAM_BACKGROUND_SELECTED)
   ) {
     return { viewType: null };
   }