From d69d5ba39f1a5ca66e40361e3ecc90cbcc925bd4 Mon Sep 17 00:00:00 2001
From: Edd <edd@vega.xyz>
Date: Tue, 3 Jan 2023 11:46:20 +0000
Subject: [PATCH] test(explorer): add test for loading and empty states for
 assets

---
 .../app/components/empty-list/empty-list.tsx  |  5 ++-
 .../src/app/routes/assets/index.spec.tsx      | 44 +++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 apps/explorer/src/app/routes/assets/index.spec.tsx

diff --git a/apps/explorer/src/app/components/empty-list/empty-list.tsx b/apps/explorer/src/app/components/empty-list/empty-list.tsx
index 89fa5d320..6fd2df7dd 100644
--- a/apps/explorer/src/app/components/empty-list/empty-list.tsx
+++ b/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>
diff --git a/apps/explorer/src/app/routes/assets/index.spec.tsx b/apps/explorer/src/app/routes/assets/index.spec.tsx
new file mode 100644
index 000000000..a7bbe8ca8
--- /dev/null
+++ b/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();
+  });
+});