Adding tests for mytokens page (#2290)

* Adding tests for mytokens page

* Moved tests for pages to separate folder

* Updated coverage thresholds

packages/apps/marmalade-marketplace/package.json

@@ -34,14 +34,15 @@
     "@types/node": "^20.12.7",
     "@types/node-cron": "^3.0.11",
     "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "@types/webpack-env": "^1.18.5",
     "@vanilla-extract/css": "1.14.2",
     "@vanilla-extract/next-plugin": "2.4.0",
     "@vanilla-extract/vite-plugin": "4.0.7",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-v8": "^1.6.0",
     "dotenv": "~16.4.5",
-    "jsdom": "^22.1.0",
+    "happy-dom": "^12.9.1",
     "next-router-mock": "^0.9.10",
     "node-cron": "^3.0.3",
     "ts-node": "~10.9.2",

packages/apps/marmalade-marketplace/src/__tests__/pages/mytokens.test.tsx

@@ -0,0 +1,103 @@
+import { expect, test } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react';
+import { useAccount } from '@/hooks/account';
+import { getTokens } from '@/graphql/queries/client';
+import MyTokens from '@/pages/mytokens'
+
+// Mocking the custom hooks and functions
+vi.mock('@/hooks/account');
+vi.mock('@/graphql/queries/client');
+
+const mockUseAccount = vi.mocked(useAccount);
+const mockGetTokens = vi.mocked(getTokens);
+
+// Mocking the Token component
+vi.mock('@/components/Token', () => ({
+  Token: ({ tokenId }: { tokenId: string }) => <div>{tokenId}</div>,
+}));
+
+const dummyAccountContext = {
+  account: null,
+  isMounted: false,
+  login: () => {},
+  logout: () => {},
+};
+
+describe('MyTokens component', () => {
+  beforeEach(() => {
+    // Clear all mocks before each test
+    vi.clearAllMocks();
+  });
+
+  test('renders the component and fetches tokens', async () => {
+    const mockAccount = {
+      accountName: 'test-account',
+      alias: 'test-alias',
+      pendingTxIds: [],
+      credentials: []
+    };
+
+    const mockAccountContext = { ...dummyAccountContext, account: mockAccount };
+
+    const mockTokens = [
+      { accountName: 'test-account', balance: 15, tokenId: '1', chainId: '1' },
+      { accountName: 'test-account', balance: 1, tokenId: '2', chainId: '1' },
+    ];
+
+    mockUseAccount.mockReturnValue(mockAccountContext);
+    mockGetTokens.mockResolvedValue(mockTokens);
+
+    render(<MyTokens />);
+
+    // Check if the title is rendered
+    expect(screen.getByText('My Tokens')).toBeInTheDocument();
+
+    // Check if tokens are fetched and displayed
+    await waitFor(() => {
+      mockTokens.forEach(token => {
+        expect(screen.getByText(token.tokenId)).toBeInTheDocument();
+      });
+    });
+  });
+
+  test('displays "No tokens found" when there are no tokens', async () => {
+    const mockAccount = {
+      accountName: 'test-account',
+      alias: 'test-alias',
+      pendingTxIds: [],
+      credentials: []
+    };
+    const mockTokens: any[] = [];
+    const mockAccountContext = { ...dummyAccountContext, account: mockAccount };
+
+    mockUseAccount.mockReturnValue(mockAccountContext);
+    mockGetTokens.mockResolvedValue(mockTokens);
+
+    render(<MyTokens />);
+
+    // Check if the title is rendered
+    expect(screen.getByText('My Tokens')).toBeInTheDocument();
+
+    // Check if "No tokens found" is displayed
+    await waitFor(() => {
+      expect(screen.getByText('No tokens found')).toBeInTheDocument();
+    });
+  });
+
+  test('does not fetch tokens if account name is not provided', async () => {
+    const mockAccountContext = { ...dummyAccountContext, account: undefined };
+    mockUseAccount.mockReturnValue(mockAccountContext);
+    render(<MyTokens />);
+
+    // Check if the title is rendered
+    expect(screen.getByText('My Tokens')).toBeInTheDocument();
+
+    // Ensure getTokens is not called
+    await waitFor(() => {
+      expect(mockGetTokens).not.toHaveBeenCalled();
+    });
+
+    // Check if "No tokens found" is displayed
+    expect(screen.getByText('No tokens found')).toBeInTheDocument();
+  });
+});

packages/apps/marmalade-marketplace/src/components/Badge/__tests__/badge.test.tsx

@@ -2,7 +2,7 @@ import { expect, test } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { Badge } from '../'
 
-test('Page', () => {
+test('Badge', () => {
   render(<Badge label="Test Label"/>)
   expect(screen.getAllByText('Test Label')).toBeDefined()
 })

packages/apps/marmalade-marketplace/src/pages/mytokens/index.tsx

@@ -9,8 +9,6 @@ export default function MyTokens() {
   const [tokens, setTokens] = useState<Array<NonFungibleTokenBalance>>([]);
   const { account } = useAccount();
 
-  console.log(tokens)
-
   const fetchTokens = async (accountName?:string) => {
     if (!accountName) return;
     const tokens = await getTokens(accountName);

packages/apps/marmalade-marketplace/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "./node_modules/@kadena-dev/shared-config/tsconfig-base.json",
   "compilerOptions": {
-    "types": ["node", "vitest/globals"],
+    "types": ["node", "vitest/globals", "vitest-dom/extend-expect"],
     "rootDir": ".",
     "baseUrl": ".",
     "target": "ES2020",

packages/apps/marmalade-marketplace/vitest.config.ts

@@ -1,32 +1,29 @@
+import react from '@vitejs/plugin-react'
 import baseConfig from '@kadena-dev/shared-config/vitest.config';
-import { defineConfig, mergeConfig } from 'vitest/config'
 import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
-import react from '@vitejs/plugin-react'
+import { defineConfig, mergeConfig } from 'vitest/config'
 
-export default mergeConfig(
-  baseConfig,
-  defineConfig({
-    plugins: [react(), vanillaExtractPlugin()],
-    test: {
-      globals: true,
-      globalSetup: './vitest-globals.ts',
-      setupFiles: ['vitest.setup.ts'],
-      environment: 'jsdom',
-      coverage: {
-        provider: 'v8',
-        thresholds: {
-          lines: 1,
-          functions: 3,
-          branches: 3,
-          statements: 1,
-          autoUpdate: false
-        },
+const localConfig = defineConfig({
+  plugins: [react(), vanillaExtractPlugin()],
+  test: {
+    globals: true,
+    setupFiles: ['vitest.setup.ts'],
+    environment: 'happy-dom',
+    coverage: {
+      thresholds: {
+        lines: 10,
+        functions: 8,
+        branches: 25,
+        statements: 10,
+        autoUpdate: false
       },
     },
-    resolve: {
-      alias: {
-        '@': '/src',
-      },
+  },
+  resolve: {
+    alias: {
+      '@': '/src',
     },
-  })
-)
+  },
+})
+
+export default mergeConfig(baseConfig, localConfig);