tests

Author: mabaasit

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { expect } from 'chai';
+import { render, screen, userEvent } from '@mongodb-js/testing-library-compass';
+import { DiagramEditorToolbar } from './diagram-editor-toolbar';
+import sinon from 'sinon';
+
+function renderDiagramEditorToolbar(
+  props: Partial<React.ComponentProps<typeof DiagramEditorToolbar>> = {}
+) {
+  render(
+    <DiagramEditorToolbar
+      step="EDITING"
+      hasUndo={true}
+      hasRedo={true}
+      onUndoClick={() => {}}
+      onRedoClick={() => {}}
+      onExportClick={() => {}}
+      {...props}
+    />
+  );
+}
+
+describe('DiagramEditorToolbar', function () {
+  it('throws if step is NO_DIAGRAM_SELECTED', function () {
+    expect(() => {
+      renderDiagramEditorToolbar({ step: 'NO_DIAGRAM_SELECTED' });
+    }).to.throw('Unexpected');
+  });
+
+  it('renders nothing if step is not EDITING', function () {
+    renderDiagramEditorToolbar({ step: 'ANALYSIS_CANCELED' });
+    expect(() => screen.getByTestId('diagram-editor-toolbar')).to.throw;
+  });
+
+  context('undo button', function () {
+    it('renders it disabled if hasUndo is false', function () {
+      renderDiagramEditorToolbar({ hasUndo: false });
+      const undoButton = screen.getByRole('button', { name: 'Undo' });
+      expect(undoButton).to.have.attribute('aria-disabled', 'true');
+    });
+    it('renders it enabled if hasUndo is true and calls onUndoClick', function () {
+      const undoSpy = sinon.spy();
+      renderDiagramEditorToolbar({ hasUndo: true, onUndoClick: undoSpy });
+      const undoButton = screen.getByRole('button', { name: 'Undo' });
+      expect(undoButton).to.have.attribute('aria-disabled', 'false');
+      userEvent.click(undoButton);
+      expect(undoSpy).to.have.been.calledOnce;
+    });
+  });
+
+  context('redo button', function () {
+    it('renders it disabled if hasRedo is false', function () {
+      renderDiagramEditorToolbar({ hasRedo: false });
+      const redoButton = screen.getByRole('button', { name: 'Redo' });
+      expect(redoButton).to.have.attribute('aria-disabled', 'true');
+    });
+    it('renders it enabled if hasRedo is true and calls onRedoClick', function () {
+      const redoSpy = sinon.spy();
+      renderDiagramEditorToolbar({ hasRedo: true, onRedoClick: redoSpy });
+      const redoButton = screen.getByRole('button', { name: 'Redo' });
+      expect(redoButton).to.have.attribute('aria-disabled', 'false');
+      userEvent.click(redoButton);
+      expect(redoSpy).to.have.been.calledOnce;
+    });
+  });
+
+  it('renders export buttona and calls onExportClick', function () {
+    const exportSpy = sinon.spy();
+    renderDiagramEditorToolbar({ onExportClick: exportSpy });
+    const exportButton = screen.getByRole('button', { name: 'Export' });
+    expect(exportButton).to.exist;
+    userEvent.click(exportButton);
+    expect(exportSpy).to.have.been.calledOnce;
+  });
+});

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

@@ -4,7 +4,7 @@ import type { DataModelingState } from '../store/reducer';
 import { redoEdit, showExportModal, undoEdit } from '../store/diagram';
 import { Icon, IconButton } from '@mongodb-js/compass-components';
 
-const DiagramEditorToolbar: React.FunctionComponent<{
+export const DiagramEditorToolbar: React.FunctionComponent<{
   step: DataModelingState['step'];
   hasUndo: boolean;
   hasRedo: boolean;
@@ -19,7 +19,7 @@ const DiagramEditorToolbar: React.FunctionComponent<{
     return null;
   }
   return (
-    <>
+    <div data-testid="diagram-editor-toolbar">
       <IconButton aria-label="Undo" disabled={!hasUndo} onClick={onUndoClick}>
         <Icon glyph="Undo"></Icon>
       </IconButton>
@@ -29,7 +29,7 @@ const DiagramEditorToolbar: React.FunctionComponent<{
       <IconButton aria-label="Export" onClick={onExportClick}>
         <Icon glyph="Export"></Icon>
       </IconButton>
-    </>
+    </div>
   );
 };
 

packages/compass-data-modeling/src/components/export-diagram-modal.tsx

@@ -74,7 +74,7 @@ const ExportDiagramModal = ({
         title="Export data model"
         subtitle={
           <div>
-            Export the data modal to JSON Schema format.
+            Export the data modal to JSON format.
             {nbsp}
             <Link
               href="https://www.mongodb.com/docs/compass/current/data-modeling/export-diagram/"

packages/compass-data-modeling/src/services/export-diagram.spec.ts

@@ -0,0 +1,22 @@
+import { expect } from 'chai';
+import { getExportJsonFromModel } from './export-diagram';
+import FlightModel from '../../test/fixtures/flights-model.json';
+
+describe('export-diagram', function () {
+  context('json export', function () {
+    it('should convert a model to JSON', function () {
+      const json = getExportJsonFromModel(FlightModel);
+
+      const expectedCollections = Object.fromEntries(
+        FlightModel.collections
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          .map(({ displayPosition, indexes, ...rest }) => [rest.ns, rest])
+      );
+      expect(json.collections).to.deep.equal(expectedCollections);
+
+      expect(json.relationships.length).to.equal(
+        FlightModel.relationships.length
+      );
+    });
+  });
+});