separate into different file

js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/AssetView.test.tsx

@@ -1,6 +1,6 @@
 import {MockedProvider} from '@apollo/client/testing';
 import {act, render, screen, waitFor} from '@testing-library/react';
-import Router, {MemoryRouter} from 'react-router-dom';
+import {MemoryRouter} from 'react-router-dom';
 
 import {
   ASSETS_GRAPH_LIVE_QUERY,
@@ -23,8 +23,6 @@ import {
 } from '../../graphql/types';
 import {buildQueryMock} from '../../testing/mocking';
 import {AssetView} from '../AssetView';
-import AssetsCatalogRoot from '../AssetsCatalogRoot';
-import {fetchRecentlyVisitedAssetsFromLocalStorage} from '../RecentlyVisitedAssetsStorage';
 import {
   AssetViewDefinitionNonSDA,
   AssetViewDefinitionSDA,
@@ -40,12 +38,6 @@ jest.mock('../../graph/asyncGraphLayout', () => ({}));
 jest.mock('../AssetPartitions', () => ({AssetPartitions: () => <div />}));
 jest.mock('../AssetEvents', () => ({AssetEvents: () => <div />}));
 
-// Mock the `useParams` hook to override the asset key in the URL.
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useParams: jest.fn(),
-}));
-
 function mockLiveData(key: string) {
   const assetKey = {path: [key]};
   return buildQueryMock<AssetGraphLiveQuery, AssetGraphLiveQueryVariables>({
@@ -156,43 +148,5 @@ describe('AssetView', () => {
       });
       expect(screen.queryByText(MESSAGE)).toBeNull();
     });
-
-    it('store visited asset in local storage', async () => {
-      jest.spyOn(Router, 'useParams').mockReturnValue({0: 'sda_asset'});
-
-      const assetKey = {path: ['sda_asset']};
-      const Test = (
-        <MockedProvider
-          mocks={[
-            AssetViewDefinitionSDA,
-            AssetViewDefinitionNonSDA,
-            AssetViewDefinitionSourceAsset,
-            mockLiveData('sda_asset'),
-            mockLiveData('observable_source_asset'),
-            mockLiveData('non_sda_asset'),
-            buildQueryMock<AssetGraphQuery, AssetGraphQueryVariables>({
-              query: ASSET_GRAPH_QUERY,
-              variables: {},
-              data: {
-                assetNodes: [buildAssetNode()],
-              },
-            }),
-          ]}
-        >
-          <AssetLiveDataProvider>
-            <MemoryRouter initialEntries={['/assets/sda_asset']}>
-              <AssetsCatalogRoot />
-            </MemoryRouter>
-          </AssetLiveDataProvider>
-        </MockedProvider>
-      );
-      const {rerender} = render(Test); // nothing logged
-      await waitFor(() => {
-        expect(screen.getByText('Materialize')).toBeVisible();
-      });
-
-      rerender(Test);
-      expect(fetchRecentlyVisitedAssetsFromLocalStorage()).toEqual([assetKey]);
-    });
   });
 });

js_modules/dagster-ui/packages/ui-core/src/assets/__tests__/RecentlyVisitedAssetsStorage.test.tsx

@@ -0,0 +1,112 @@
+import {MockedProvider} from '@apollo/client/testing';
+import {render, screen, waitFor} from '@testing-library/react';
+import Router, {MemoryRouter} from 'react-router-dom';
+
+import {AnalyticsContext} from '../../app/analytics';
+import {AssetLiveDataProvider} from '../../asset-data/AssetLiveDataProvider';
+import {buildAsset, buildAssetKey} from '../../graphql/types';
+import {buildQueryMock} from '../../testing/mocking';
+import AssetsCatalogRoot, {ASSETS_CATALOG_ROOT_QUERY} from '../AssetsCatalogRoot';
+import {fetchRecentlyVisitedAssetsFromLocalStorage} from '../RecentlyVisitedAssetsStorage';
+import {
+  AssetsCatalogRootQuery,
+  AssetsCatalogRootQueryVariables,
+} from '../types/AssetsCatalogRoot.types';
+
+// Mock the `useParams` hook to override the asset key in the URL.
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: jest.fn(),
+}));
+
+describe('RecentlyVisitedAssetsStorage', () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it('Store visited asset in local storage', async () => {
+    // Set the asset key in the URL
+    jest.spyOn(Router, 'useParams').mockReturnValue({0: 'sda_asset'});
+
+    const assetKey = {path: ['sda_asset']};
+    const TestAssetView = (
+      <MockedProvider
+        mocks={[
+          buildQueryMock<AssetsCatalogRootQuery, AssetsCatalogRootQueryVariables>({
+            query: ASSETS_CATALOG_ROOT_QUERY,
+            variables: {
+              assetKey,
+            },
+            data: {
+              assetOrError: buildAsset({
+                key: buildAssetKey(assetKey),
+              }),
+            },
+          }),
+        ]}
+      >
+        <AnalyticsContext.Provider value={{page: () => {}} as any}>
+          <AssetLiveDataProvider>
+            <MemoryRouter initialEntries={['/assets/sda_asset']}>
+              <AssetsCatalogRoot />
+            </MemoryRouter>
+          </AssetLiveDataProvider>
+        </AnalyticsContext.Provider>
+      </MockedProvider>
+    );
+
+    // First render displays the page in a loading state
+    const {rerender} = render(TestAssetView);
+    await waitFor(() => {
+      expect(screen.queryByText('Loading assets…')).toBeNull();
+    });
+    // Second render displays the page in a loaded state
+    // Effect called to store asset in local storage
+    rerender(TestAssetView);
+
+    expect(fetchRecentlyVisitedAssetsFromLocalStorage()).toEqual([assetKey]);
+  });
+
+  it('Do not store nonexistent asset in local storage', async () => {
+    // Set the asset key in the URL
+    jest.spyOn(Router, 'useParams').mockReturnValue({0: 'nonexistent_asset'});
+
+    const assetKey = {path: ['nonexistent_asset']};
+    const TestAssetView = (
+      <MockedProvider
+        mocks={[
+          buildQueryMock<AssetsCatalogRootQuery, AssetsCatalogRootQueryVariables>({
+            query: ASSETS_CATALOG_ROOT_QUERY,
+            variables: {
+              assetKey,
+            },
+            data: {
+              assetOrError: {
+                __typename: 'AssetNotFoundError',
+              },
+            },
+          }),
+        ]}
+      >
+        <AnalyticsContext.Provider value={{page: () => {}} as any}>
+          <AssetLiveDataProvider>
+            <MemoryRouter initialEntries={['/assets/nonexistent_asset']}>
+              <AssetsCatalogRoot />
+            </MemoryRouter>
+          </AssetLiveDataProvider>
+        </AnalyticsContext.Provider>
+      </MockedProvider>
+    );
+
+    // First render displays the page in a loading state
+    const {rerender} = render(TestAssetView);
+    await waitFor(() => {
+      expect(screen.queryByText('Loading assets…')).toBeNull();
+    });
+    // Second render displays the page in a loaded state
+    // Effect called to store asset in local storage
+    rerender(TestAssetView);
+
+    expect(fetchRecentlyVisitedAssetsFromLocalStorage()).toEqual([]);
+  });
+});