fix(test): update browser test with data test id and render checks

ar-io · Aug 6, 2024 · 93741cb · 93741cb
1 parent 38ca913
commit 93741cb
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 16 deletions.
diff --git a/tests/e2e/web/src/App.test.tsx b/tests/e2e/web/src/App.test.tsx
@@ -1,14 +1,10 @@
-import { ANTRegistry } from '@ar.io/sdk/web';
 import '@testing-library/jest-dom';
 import { act, render, screen, waitFor } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
 import App from './App';
 
 describe('ESM browser validation', () => {
-  const registry = ANTRegistry.init();
-  const address = '7waR8v4STuwPnTck1zFVkQqJh5K9q9Zik4Y5-5dV7nk';
-
   it('should load the app and SDK', async () => {
     await act(async () => render(<App />));
 
@@ -18,7 +14,7 @@ describe('ESM browser validation', () => {
         screen.getByTestId('load-info-result');
       },
       {
-        interval: 2000,
+        interval: 10000,
         timeout: 30000,
       },
     );
@@ -29,9 +25,19 @@ describe('ESM browser validation', () => {
   });
 
   it('should retrieve ids from registry', async () => {
-    const affiliatedAnts = await registry.accessControlList({ address });
+    await act(async () => render(<App />));
 
-    expect(Array.isArray(affiliatedAnts.Owned)).toEqual(true);
-    expect(Array.isArray(affiliatedAnts.Controlled)).toEqual(true);
+    await waitFor(
+      () => {
+        screen.getByTestId('load-registry-result');
+      },
+      {
+        interval: 2000,
+        timeout: 30000,
+      },
+    );
+
+    const result = screen.getByTestId('load-registry-result');
+    expect(result).toHaveTextContent('true');
   });
 });
diff --git a/tests/e2e/web/src/App.tsx b/tests/e2e/web/src/App.tsx
@@ -10,18 +10,19 @@ const antRegistry = ANTRegistry.init();
 function App() {
   const [contract, setContract] = useState<string>('Loading...');
   const [ants, setAnts] = useState<string>('Loading...');
-  const [success, setSuccess] = useState<boolean>(false);
+  const [ioContractSuccess, setIoContractSuccess] = useState<boolean>(false);
+  const [antRegistrySuccess, setAntRegistrySuccess] = useState<boolean>(false);
   const [loaded, setLoaded] = useState<boolean>(false);
 
   useEffect(() => {
     io.getInfo()
       .then((state: any) => {
         setContract(`\`\`\`json\n${JSON.stringify(state, null, 2)}`);
-        setSuccess(true);
+        setIoContractSuccess(true);
       })
       .catch((error: any) => {
         console.error(error);
-        setSuccess(false);
+        setIoContractSuccess(false);
         setContract('Error loading contract state');
       })
       .finally(() => {
@@ -33,20 +34,28 @@ function App() {
       })
       .then((affiliatedAnts: { Owned: string[]; Controlled: string[] }) => {
         setAnts(`\`\`\`json\n${JSON.stringify(affiliatedAnts, null, 2)}`);
+        setAntRegistrySuccess(true);
       })
       .catch((error: any) => {
         console.error(error);
-        setSuccess(false);
+        setAntRegistrySuccess(false);
         setAnts('Error loading affiliated ants');
       });
   }, []);
 
   return (
     <div className="App">
-      {loaded && <div data-testid="load-info-result">{`${success}`}</div>}
-      <Markdown className="markdown" remarkPlugins={[remarkGfm]}>
-        {contract}
-      </Markdown>
+      <div>
+        {loaded && (
+          <div data-testid="load-info-result">{`${ioContractSuccess}`}</div>
+        )}
+        <Markdown className="markdown" remarkPlugins={[remarkGfm]}>
+          {contract}
+        </Markdown>
+      </div>
+      {loaded && (
+        <div data-testid="load-registry-result">{`${antRegistrySuccess}`}</div>
+      )}
       <Markdown className="markdown" remarkPlugins={[remarkGfm]}>
         {ants}
       </Markdown>