fix tests

Author: mabaasit

packages/compass-data-modeling/src/components/saved-diagrams-list.spec.tsx

@@ -11,44 +11,62 @@ import type { DataModelingStore } from '../../test/setup-store';
 import { DataModelStorageServiceProvider } from '../provider';
 import type { MongoDBDataModelDescription } from '../services/data-model-storage';
 
-describe('SavedDiagramsList', function () {
-  const renderSavedDiagramsList = ({
-    loadAll = () => Promise.resolve([]),
-  }: {
-    loadAll?: () => Promise<MongoDBDataModelDescription[]>;
-  } = {}) => {
-    const mockDataModelStorage = {
-      status: 'READY',
-      error: null,
-      items: [],
-      save: () => {
-        return Promise.resolve(false);
-      },
-      delete: () => {
-        return Promise.resolve(false);
-      },
-      loadAll,
-      load: () => {
-        return Promise.resolve(null);
-      },
-    };
-    return renderWithStore(
-      <DataModelStorageServiceProvider storage={mockDataModelStorage}>
-        <SavedDiagramsList />
-      </DataModelStorageServiceProvider>,
-      {
-        services: {
-          dataModelStorage: mockDataModelStorage,
-        },
-      }
-    );
+const storageItems: MongoDBDataModelDescription[] = [
+  {
+    id: '1',
+    name: 'One',
+    edits: [],
+  },
+  {
+    id: '2',
+    name: 'Two',
+    edits: [],
+  },
+  {
+    id: '3',
+    name: 'Three',
+    edits: [],
+  },
+];
+
+const renderSavedDiagramsList = ({
+  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));
+    },
   };
+  return renderWithStore(
+    <DataModelStorageServiceProvider storage={mockDataModelStorage}>
+      <SavedDiagramsList />
+    </DataModelStorageServiceProvider>,
+    {
+      services: {
+        dataModelStorage: mockDataModelStorage,
+      },
+    }
+  );
+};
 
+describe('SavedDiagramsList', function () {
   context('when there are no saved diagrams', function () {
     let store: DataModelingStore;
 
     beforeEach(async function () {
-      const result = renderSavedDiagramsList();
+      const result = renderSavedDiagramsList({ items: [] });
       store = result.store;
 
       // wait till the empty list is loaded
@@ -78,15 +96,7 @@ describe('SavedDiagramsList', function () {
     let store: DataModelingStore;
 
     beforeEach(async function () {
-      const result = renderSavedDiagramsList({
-        loadAll: () =>
-          Promise.resolve([
-            {
-              id: 'diagram-1',
-              name: 'Diagram 1',
-            } as MongoDBDataModelDescription,
-          ]),
-      });
+      const result = renderSavedDiagramsList();
       store = result.store;
 
       // wait till the list is loaded
@@ -95,8 +105,12 @@ describe('SavedDiagramsList', function () {
       });
     });
 
-    it('shows the list of diagrams', function () {
-      expect(screen.getByText('Diagram 1')).to.exist;
+    it('shows the list of diagrams', async function () {
+      await waitFor(() => {
+        expect(screen.getByText('One')).to.exist;
+        expect(screen.getByText('Two')).to.exist;
+        expect(screen.getByText('Three')).to.exist;
+      });
     });
 
     it('allows to add another diagram', function () {

packages/compass-data-modeling/src/components/saved-diagrams-list.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { createNewDiagram } from '../store/generate-diagram-wizard';
 import {
@@ -137,6 +137,10 @@ export const SavedDiagramsList: React.FunctionComponent<{
   const [sortControls, sortState] = useSortControls(sortBy);
   const sortedItems = useSortedItems(filteredItems, sortState);
 
+  useEffect(() => {
+    setFilteredItems(items);
+  }, [items]);
+
   const onSearchItems = useCallback(
     (search: string) => {
       try {