test(explorer): add test for loading and empty states for assets

apps/explorer/src/app/components/empty-list/empty-list.tsx

@@ -8,7 +8,10 @@ export type EmptyListProps = {
  */
 const EmptyList = ({ heading, label }: EmptyListProps) => {
   return (
-    <div className="empty-list w-full items-center h-full align-center">
+    <div
+      className="empty-list w-full items-center h-full align-center"
+      data-testid="emptylist"
+    >
       <div className="skeleton-list border-dashed border-neutral-800 rounded p-5 w-full border-[1px] grid gap-4 grid-cols-9 grid-rows-1 place-content-around mb-4">
         <div className="bg-neutral-900 mr-5 h-3 col-span-5"></div>
         <div className="bg-neutral-900 h-3 col-span-1"></div>

apps/explorer/src/app/routes/assets/index.spec.tsx

@@ -0,0 +1,44 @@
+import { MockedProvider } from '@apollo/client/testing';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import Assets from './index';
+import type { MockedResponse } from '@apollo/client/testing';
+import { ExplorerAssetDocument } from '../../components/links/asset-link/__generated__/Asset';
+
+function renderComponent(mock: MockedResponse[]) {
+  return (
+    <MemoryRouter>
+      <MockedProvider mocks={mock}>
+        <Assets />
+      </MockedProvider>
+    </MemoryRouter>
+  );
+}
+
+describe('Assets index', () => {
+  it('Renders loader when loading', async () => {
+    const mock = {
+      request: {
+        query: ExplorerAssetDocument,
+      },
+      result: {
+        data: {},
+      },
+    };
+    const res = render(renderComponent([mock]));
+    expect(await res.findByTestId('loader')).toBeInTheDocument();
+  });
+
+  it('Renders EmptyList when loading completes and there are no results', async () => {
+    const mock = {
+      request: {
+        query: ExplorerAssetDocument,
+      },
+      result: {
+        data: {},
+      },
+    };
+    const res = render(renderComponent([mock]));
+    expect(await res.findByTestId('emptylist')).toBeInTheDocument();
+  });
+});