feat(tangle-dapp): Setup Tests, Fix Infinite Render on Restaking (#2674)

.github/workflows/test.yml

@@ -0,0 +1,49 @@
+name: test 🧪
+
+on:
+  workflow_dispatch:
+
+  # TODO: Re-enable once @webb-tools/sdk-core is removed
+  # pull_request:
+  #   branches: [develop, staging, master, feature/**]
+
+  # push:
+  #   branches: [develop, staging, master, feature/**]
+
+jobs:
+  build_code:
+    name: run
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: ['>=18.12.x']
+
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/[email protected]
+        with:
+          access_token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: actions/checkout@v4
+
+      - name: Enable corepack
+        run: |
+          corepack enable
+          corepack prepare [email protected] --activate
+          yarn set version 4.2.2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/[email protected]
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: yarn
+
+      - name: Install deps
+        run: yarn install
+
+      - name: Run tests
+        run: yarn nx run-many --all --target=test
+        # Fix: JavaScript heap out of memory
+        # https://github.com/actions/runner-images/issues/70#issuecomment-1191708172
+        env:
+          NODE_OPTIONS: '--max_old_space_size=4096'

__mocks__/svg.js

@@ -0,0 +1 @@
+export default 'span';

__mocks__/svgUrl.js

@@ -0,0 +1 @@
+export default '/svgUrl';

apps/tangle-cloud/jest.config.ts

@@ -1,6 +1,6 @@
 export default {
   displayName: 'tangle-cloud',
-  preset: '../../jest.preset.js',
+  preset: '../../jest.preset.cjs',
   transform: {
     '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
     '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }],

apps/tangle-dapp/app/blueprints/page.test.tsx

@@ -0,0 +1,31 @@
+import { act, render } from '@testing-library/react';
+import { PolkadotApiProvider } from '@webb-tools/tangle-shared-ui/context/PolkadotApiContext';
+
+import { RestakeContextProvider } from '../../context/RestakeContext';
+import { mockMatchMedia } from '../test-utils';
+import Page from './page';
+
+describe('Blueprints Page', () => {
+  beforeAll(() => {
+    mockMatchMedia();
+  });
+
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('renders without crashing', async () => {
+    let container;
+    await act(async () => {
+      const result = render(
+        <PolkadotApiProvider>
+          <RestakeContextProvider>
+            <Page />
+          </RestakeContextProvider>
+        </PolkadotApiProvider>,
+      );
+      container = result.container;
+    });
+    expect(container).toBeInTheDocument();
+  });
+});

apps/tangle-dapp/app/bridge/ChainSelectors.tsx

@@ -1,7 +1,7 @@
 'use client';
 
+import { calculateTypedChainId } from '@webb-tools/dapp-types/TypedChainId';
 import { ArrowRight } from '@webb-tools/icons/ArrowRight';
-import { calculateTypedChainId } from '@webb-tools/sdk-core/typed-chain-id';
 import {
   Label,
   Modal,
@@ -88,11 +88,11 @@ const ChainSelectors: FC = () => {
   ]);
 
   return (
-    <div className="flex flex-col md:flex-row justify-center md:justify-between items-center md:items-end md:gap-3">
+    <div className="flex flex-col items-center justify-center md:flex-row md:justify-between md:items-end md:gap-3">
       {/* Source Chain Selector */}
-      <div className="flex flex-col gap-2 flex-1">
+      <div className="flex flex-col flex-1 gap-2">
         <Label
-          className="text-mono-120 dark:text-mono-120 font-bold"
+          className="font-bold text-mono-120 dark:text-mono-120"
           htmlFor="bridge-source-chain-selector"
         >
           From
@@ -108,16 +108,16 @@ const ChainSelectors: FC = () => {
       </div>
 
       <div
-        className="flex-shrink cursor-pointer px-1 pt-5 md:pt-0 md:pb-5"
+        className="flex-shrink px-1 pt-5 cursor-pointer md:pt-0 md:pb-5"
         onClick={onSwitchChains}
       >
         <ArrowRight size="lg" className="rotate-90 md:rotate-0" />
       </div>
 
       {/* Destination Chain Selector */}
-      <div className="flex flex-col gap-2 flex-1">
+      <div className="flex flex-col flex-1 gap-2">
         <Label
-          className="text-mono-120 dark:text-mono-120 font-bold"
+          className="font-bold text-mono-120 dark:text-mono-120"
           htmlFor="bridge-destination-chain-selector"
         >
           To

apps/tangle-dapp/app/bridge/hooks/useActionButton.ts

@@ -4,7 +4,7 @@ import {
   useConnectWallet,
   useWebContext,
 } from '@webb-tools/api-provider-environment';
-import { calculateTypedChainId } from '@webb-tools/sdk-core/typed-chain-id';
+import { calculateTypedChainId } from '@webb-tools/dapp-types/TypedChainId';
 import { useCallback, useMemo } from 'react';
 
 import { useBridge } from '../../../context/BridgeContext';

apps/tangle-dapp/app/bridge/hooks/useTypedChainId.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { calculateTypedChainId } from '@webb-tools/sdk-core/typed-chain-id';
+import { calculateTypedChainId } from '@webb-tools/dapp-types/TypedChainId';
 import { useMemo } from 'react';
 
 import { useBridge } from '../../../context/BridgeContext';

apps/tangle-dapp/app/bridge/page.test.tsx

@@ -0,0 +1,33 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, render } from '@testing-library/react';
+
+import BridgeProvider from '../../context/BridgeContext';
+import { mockMatchMedia } from '../test-utils';
+import Page from './page';
+
+const queryClient = new QueryClient();
+
+describe('Bridge Page', () => {
+  beforeAll(() => {
+    mockMatchMedia();
+  });
+
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('renders without crashing', async () => {
+    let container;
+    await act(async () => {
+      const result = render(
+        <QueryClientProvider client={queryClient}>
+          <BridgeProvider>
+            <Page />
+          </BridgeProvider>
+        </QueryClientProvider>,
+      );
+      container = result.container;
+    });
+    expect(container).toBeInTheDocument();
+  });
+});

apps/tangle-dapp/app/claim/page.test.tsx

@@ -0,0 +1,14 @@
+import { act, render } from '@testing-library/react';
+
+import Page from './page';
+
+describe('Claim Page', () => {
+  it('renders without crashing', async () => {
+    let container;
+    await act(async () => {
+      const result = render(<Page />);
+      container = result.container;
+    });
+    expect(container).toBeInTheDocument();
+  });
+});

apps/tangle-dapp/app/liquid-staking/page.test.tsx

@@ -0,0 +1,29 @@
+import { act, render } from '@testing-library/react';
+
+import Providers from '../providers';
+import { mockFetch, mockMatchMedia } from '../test-utils';
+import Page from './page';
+
+describe('Liquid Staking Page', () => {
+  beforeAll(() => {
+    mockMatchMedia();
+    mockFetch({ country_code: 'US', state: 'CA' });
+  });
+
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('renders without crashing', async () => {
+    let container;
+    await act(async () => {
+      const result = render(
+        <Providers>
+          <Page />
+        </Providers>,
+      );
+      container = result.container;
+    });
+    expect(container).toBeInTheDocument();
+  });
+});

apps/tangle-dapp/app/nomination/page.test.tsx

@@ -0,0 +1,29 @@
+import { act, render } from '@testing-library/react';
+
+import Providers from '../providers';
+import { mockFetch, mockMatchMedia } from '../test-utils';
+import Page from './page';
+
+describe('Nomination Page', () => {
+  beforeAll(() => {
+    mockMatchMedia();
+    mockFetch({ country_code: 'US', state: 'CA' });
+  });
+
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('renders without crashing', async () => {
+    let container;
+    await act(async () => {
+      const result = render(
+        <Providers>
+          <Page />
+        </Providers>,
+      );
+      container = result.container;
+    });
+    expect(container).toBeInTheDocument();
+  });
+});

apps/tangle-dapp/app/nomination/page.tsx

@@ -20,7 +20,7 @@ export const metadata: Metadata = createPageMetadata({
     'Elevate your TNT tokens through NPoS by nominating validators on Tangle Network. Stake on EVM and Substrate to support network security and enjoy rewards.',
 });
 
-export default async function NominationPage() {
+export default function NominationPage() {
   return (
     <div className="space-y-6 md:space-y-9 lg:space-y-12">
       <div className="flex items-center justify-between">

apps/tangle-dapp/app/page.test.tsx

@@ -0,0 +1,29 @@
+import { act, render } from '@testing-library/react';
+
+import Page from './page';
+import Providers from './providers';
+import { mockFetch, mockMatchMedia } from './test-utils';
+
+describe('Account Page', () => {
+  beforeAll(() => {
+    mockMatchMedia();
+    mockFetch({ country_code: 'US', state: 'CA' });
+  });
+
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('renders without crashing', async () => {
+    let container;
+    await act(async () => {
+      const result = render(
+        <Providers>
+          <Page />
+        </Providers>,
+      );
+      container = result.container;
+    });
+    expect(container).toBeInTheDocument();
+  });
+});

apps/tangle-dapp/app/restake/deposit/DepositForm.tsx

@@ -3,15 +3,15 @@
 import { useWebContext } from '@webb-tools/api-provider-environment/webb-context';
 import { ChainConfig } from '@webb-tools/dapp-config';
 import { ZERO_BIG_INT } from '@webb-tools/dapp-config/constants';
+import { calculateTypedChainId } from '@webb-tools/dapp-types/TypedChainId';
 import isDefined from '@webb-tools/dapp-types/utils/isDefined';
-import { calculateTypedChainId } from '@webb-tools/sdk-core';
 import useRestakeOperatorMap from '@webb-tools/tangle-shared-ui/data/restake/useRestakeOperatorMap';
 import { useRpcSubscription } from '@webb-tools/tangle-shared-ui/hooks/usePolkadotApi';
+import useQueryState from '@webb-tools/tangle-shared-ui/hooks/useQueryState';
 import { Card } from '@webb-tools/webb-ui-components';
 import { type TokenListCardProps } from '@webb-tools/webb-ui-components/components/ListCard/types';
 import { Modal } from '@webb-tools/webb-ui-components/components/Modal';
 import { useModal } from '@webb-tools/webb-ui-components/hooks/useModal';
-import { useQueryState } from 'nuqs';
 import {
   type ComponentProps,
   useCallback,

apps/tangle-dapp/app/restake/deposit/page.test.tsx

@@ -0,0 +1,19 @@
+import { act, render } from '@testing-library/react';
+
+import { mockMatchMedia } from '../../test-utils';
+import Page from './page';
+
+describe('Deposit Page', () => {
+  beforeAll(() => {
+    mockMatchMedia();
+  });
+
+  it('renders without crashing', async () => {
+    let container;
+    await act(async () => {
+      const result = render(<Page />);
+      container = result.container;
+    });
+    expect(container).toBeInTheDocument();
+  });
+});

apps/tangle-dapp/app/restake/operators/[address]/page.test.tsx

@@ -0,0 +1,27 @@
+import { act, render } from '@testing-library/react';
+
+import { mockMatchMedia } from '../../../test-utils';
+import Page from './page';
+
+const address = '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY';
+
+describe('Operators Page', () => {
+  beforeAll(() => {
+    mockMatchMedia();
+  });
+
+  it('renders without crashing', async () => {
+    let container;
+    await act(async () => {
+      const result = render(
+        <Page
+          params={{
+            address,
+          }}
+        />,
+      );
+      container = result.container;
+    });
+    expect(container).toBeInTheDocument();
+  });
+});

apps/tangle-dapp/app/restake/providers.tsx

@@ -1,17 +1,14 @@
 'use client';
 
 import { PolkadotApiProvider } from '@webb-tools/tangle-shared-ui/context/PolkadotApiContext';
-import { NuqsAdapter } from 'nuqs/adapters/next/app';
 import { type PropsWithChildren } from 'react';
 
 import { RestakeContextProvider } from '../../context/RestakeContext';
 
 export default function Providers({ children }: PropsWithChildren) {
   return (
     <PolkadotApiProvider>
-      <RestakeContextProvider>
-        <NuqsAdapter>{children}</NuqsAdapter>
-      </RestakeContextProvider>
+      <RestakeContextProvider>{children}</RestakeContextProvider>
     </PolkadotApiProvider>
   );
 }