add side panel tests

Author: paula-stacho

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

@@ -14,6 +14,7 @@ import {
   selectCollection,
   selectCurrentModelFromState,
   selectRelationship,
+  selectField,
 } from '../../store/diagram';
 import dataModel from '../../../test/fixtures/data-model-with-relationships.json';
 import type {
@@ -41,6 +42,14 @@ async function comboboxSelectItem(
   });
 }
 
+function getMultiComboboxValues(testId: string) {
+  const combobox = screen.getByTestId(testId);
+  expect(combobox).to.be.visible;
+  return within(combobox)
+    .getAllByRole('option')
+    .map((option) => option.textContent);
+}
+
 describe('DiagramEditorSidePanel', function () {
   before(function () {
     // TODO(COMPASS-9618): skip in electron runtime for now, drawer has issues rendering
@@ -144,6 +153,45 @@ describe('DiagramEditorSidePanel', function () {
     ).to.be.visible;
   });
 
+  describe('Field context drawer', function () {
+    it('should render a field context drawer when field is clicked', async function () {
+      const result = renderDrawer();
+      result.plugin.store.dispatch(selectField('flights.airlines', ['alias']));
+
+      await waitFor(() => {
+        expect(screen.getByTitle('airlines.alias')).to.be.visible;
+      });
+
+      const nameInput = screen.getByLabelText('Field name');
+      expect(nameInput).to.be.visible;
+      expect(nameInput).to.have.value('alias');
+
+      const selectedTypes = getMultiComboboxValues('lg-combobox-datatype');
+      expect(selectedTypes).to.have.lengthOf(2);
+      expect(selectedTypes).to.include('string');
+      expect(selectedTypes).to.include('int');
+    });
+
+    it('should render a nested field context drawer when field is clicked', async function () {
+      const result = renderDrawer();
+      result.plugin.store.dispatch(
+        selectField('flights.routes', ['airline', 'id'])
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTitle('routes.airline.id')).to.be.visible;
+      });
+
+      const nameInput = screen.getByLabelText('Field name');
+      expect(nameInput).to.be.visible;
+      expect(nameInput).to.have.value('id');
+
+      const selectedTypes = getMultiComboboxValues('lg-combobox-datatype');
+      expect(selectedTypes).to.have.lengthOf(1);
+      expect(selectedTypes).to.include('string');
+    });
+  });
+
   it('should change the content of the drawer when selecting different items', async function () {
     const result = renderDrawer();
 
@@ -182,93 +230,185 @@ describe('DiagramEditorSidePanel', function () {
     expect(screen.getByLabelText('Name')).to.have.value('planes');
   });
 
-  it('should open and edit relationship starting from collection', async function () {
-    const result = renderDrawer();
-    result.plugin.store.dispatch(selectCollection('flights.countries'));
-
-    await waitFor(() => {
-      expect(screen.getByLabelText('Name')).to.have.value('countries');
-    });
+  describe('Collection -> Relationships', function () {
+    it('should add a relationship starting from a collection', async function () {
+      const result = renderDrawer();
+      result.plugin.store.dispatch(selectCollection('flights.countries'));
 
-    // Open relationshipt editing form
-    const relationshipItem = screen
-      .getByText('countries.name → airports.Country')
-      .closest('li');
-    expect(relationshipItem).to.be.visible;
-    userEvent.click(
-      within(relationshipItem!).getByRole('button', {
-        name: 'Edit relationship',
-      })
-    );
-    expect(screen.getByLabelText('Local field')).to.be.visible;
+      await waitFor(() => {
+        expect(screen.getByLabelText('Name')).to.have.value('countries');
+      });
 
-    // Select new values
-    await comboboxSelectItem('Local collection', 'planes');
-    await comboboxSelectItem('Local field', 'name');
-    await comboboxSelectItem('Foreign collection', 'countries');
-    await comboboxSelectItem('Foreign field', 'iso_code');
+      // Click on add relationship button
+      userEvent.click(screen.getByRole('button', { name: 'Add relationship' }));
 
-    userEvent.click(screen.getByRole('textbox', { name: 'Notes' }));
-    userEvent.type(
-      screen.getByRole('textbox', { name: 'Notes' }),
-      'Note about the relationship'
-    );
-    userEvent.tab();
+      // Collection is pre-selected
+      expect(screen.getByLabelText('Local collection')).to.be.visible;
+      expect(screen.getByLabelText('Local collection')).to.have.value(
+        'countries'
+      );
+    });
 
-    // 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 = selectCurrentModelFromState(
-      result.plugin.store.getState()
-    ).relationships.find((r: Relationship) => {
-      return r.id === '204b1fc0-601f-4d62-bba3-38fade71e049';
+    it('should open and edit relationship starting from a collection', async function () {
+      const result = renderDrawer();
+      result.plugin.store.dispatch(selectCollection('flights.countries'));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText('Name')).to.have.value('countries');
+      });
+
+      // Open relationshipt editing form
+      const relationshipItem = screen
+        .getByText('countries.name → airports.Country')
+        .closest('li');
+      expect(relationshipItem).to.be.visible;
+      userEvent.click(
+        within(relationshipItem!).getByRole('button', {
+          name: 'Edit relationship',
+        })
+      );
+      expect(screen.getByLabelText('Local field')).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('textbox', { name: 'Notes' }));
+      userEvent.type(
+        screen.getByRole('textbox', { name: 'Notes' }),
+        'Note about the relationship'
+      );
+      userEvent.tab();
+
+      // 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 = selectCurrentModelFromState(
+        result.plugin.store.getState()
+      ).relationships.find((r: Relationship) => {
+        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: 100,
+          },
+        ]);
+
+      expect(modifiedRelationship).to.have.property(
+        'note',
+        'Note about the relationship'
+      );
     });
 
-    expect(modifiedRelationship)
-      .to.have.property('relationship')
-      .deep.eq([
-        {
-          ns: 'flights.planes',
-          fields: ['name'],
-          cardinality: 1,
-        },
-        {
-          ns: 'flights.countries',
-          fields: ['iso_code'],
-          cardinality: 100,
-        },
-      ]);
-
-    expect(modifiedRelationship).to.have.property(
-      'note',
-      'Note about the relationship'
-    );
+    it('should delete a relationship from a collection', async function () {
+      const result = renderDrawer();
+      result.plugin.store.dispatch(selectCollection('flights.countries'));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText('Name')).to.have.value('countries');
+      });
+
+      // Find the relationhip item
+      const relationshipItem = screen
+        .getByText('countries.name → airports.Country')
+        .closest('li');
+      expect(relationshipItem).to.be.visible;
+
+      // Delete relationship
+      userEvent.click(
+        within(relationshipItem!).getByRole('button', {
+          name: 'Delete relationship',
+        })
+      );
+
+      await waitFor(() => {
+        expect(screen.queryByText('countries.name → airports.Country')).not.to
+          .exist;
+      });
+    });
   });
 
-  it('should delete a relationship from collection', async function () {
-    const result = renderDrawer();
-    result.plugin.store.dispatch(selectCollection('flights.countries'));
+  describe('Field -> Relationships', function () {
+    it('should add a relationship starting from a field', async function () {
+      const result = renderDrawer();
+      result.plugin.store.dispatch(selectField('flights.countries', ['name']));
 
-    await waitFor(() => {
-      expect(screen.getByLabelText('Name')).to.have.value('countries');
+      await waitFor(() => {
+        expect(screen.getByLabelText('Field name')).to.have.value('name');
+      });
+
+      // Click on add relationship button
+      userEvent.click(screen.getByRole('button', { name: 'Add relationship' }));
+
+      // Collection and field are pre-selected
+      expect(screen.getByLabelText('Local collection')).to.be.visible;
+      expect(screen.getByLabelText('Local collection')).to.have.value(
+        'countries'
+      );
+      expect(screen.getByLabelText('Local field')).to.be.visible;
+      expect(screen.getByLabelText('Local field')).to.have.value('name');
     });
 
-    // Find the relationhip item
-    const relationshipItem = screen
-      .getByText('countries.name → airports.Country')
-      .closest('li');
-    expect(relationshipItem).to.be.visible;
-
-    // Delete relationship
-    userEvent.click(
-      within(relationshipItem!).getByRole('button', {
-        name: 'Delete relationship',
-      })
-    );
+    it('should open a relationship starting from a field', async function () {
+      const result = renderDrawer();
+      result.plugin.store.dispatch(selectField('flights.countries', ['name']));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText('Field name')).to.have.value('name');
+      });
+
+      // Open relationshipt editing form
+      const relationshipItem = screen
+        .getByText('airports.Country')
+        .closest('li');
+      expect(relationshipItem).to.be.visible;
+      userEvent.click(
+        within(relationshipItem!).getByRole('button', {
+          name: 'Edit relationship',
+        })
+      );
+      expect(screen.getByLabelText('Local field')).to.be.visible;
+      expect(screen.getByLabelText('Local field')).to.have.value('name');
+      expect(screen.getByLabelText('Foreign field')).to.be.visible;
+      expect(screen.getByLabelText('Foreign field')).to.have.value('Country');
+    });
 
-    await waitFor(() => {
-      expect(screen.queryByText('countries.name → airports.Country')).not.to
-        .exist;
+    it('should delete a relationship from a field', async function () {
+      const result = renderDrawer();
+      result.plugin.store.dispatch(selectField('flights.countries', ['name']));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText('Field name')).to.have.value('name');
+      });
+
+      // Find the relationhip item
+      const relationshipItem = screen
+        .getByText('airports.Country')
+        .closest('li');
+      expect(relationshipItem).to.be.visible;
+
+      // Delete relationship
+      userEvent.click(
+        within(relationshipItem!).getByRole('button', {
+          name: 'Delete relationship',
+        })
+      );
+
+      await waitFor(() => {
+        expect(screen.queryByText('airports.Country')).not.to.exist;
+      });
     });
   });
 

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

@@ -18,6 +18,7 @@ import {
 import { getDefaultRelationshipName } from '../../utils';
 import FieldDrawerContent from './field-drawer-content';
 import type { FieldPath } from '../../services/data-model-storage';
+import { getFieldFromSchema } from '../../utils/schema-traversal';
 
 export const DATA_MODELING_DRAWER_ID = 'data-modeling-drawer';
 
@@ -213,16 +214,19 @@ export default connect(
     }
 
     if (selected.type === 'field') {
-      // const collection = model.collections.find((collection) => (collection.ns === selected.namespace));
-      // const field =
-
-      // if (!field) {
-      //   // TODO(COMPASS-9680): When the selected field doesn't exist we don't
-      //   // show any selection.
-      //   return {
-      //     selectedItems: null,
-      //   };
-      // }
+      // TODO(COMPASS-9680): Can be cleaned up after COMPASS-9680 is done (the selection updates with undo/redo)
+      const collection = model.collections.find(
+        (collection) => collection.ns === selected.namespace
+      );
+      const field = getFieldFromSchema({
+        jsonSchema: collection?.jsonSchema ?? {},
+        fieldPath: selected.fieldPath,
+      });
+      if (!field) {
+        return {
+          selectedItems: null,
+        };
+      }
 
       return {
         selectedItems: {
@@ -237,6 +241,6 @@ export default connect(
   {
     onDeleteCollection: deleteCollection,
     onDeleteRelationship: deleteRelationship,
-    onDeleteField: () => {}, // TODO onDeleteField,
+    onDeleteField: () => {}, // TODO(COMPASS-9659) part 2 - implement onDeleteField,
   }
 )(DiagramEditorSidePanel);

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

@@ -144,6 +144,8 @@ const FieldDrawerContent: React.FunctionComponent<FieldDrawerContentProps> = ({
 
         <DMFormFieldContainer>
           <Combobox
+            data-testid="lg-combobox-datatype"
+            label="Datatype"
             aria-label="Datatype"
             disabled={true} // TODO: enable when field type change is implemented
             value={types}