improvements

Author: chcmedeiros

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.1.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.1.4/schema.json",
   "vcs": {
     "enabled": true,
     "clientKind": "git",

components/sections/migrate/__tests__/deep-scan-modal.test.tsx

@@ -1,8 +1,7 @@
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import React from 'react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import type { AppId } from '@/config/apps'
-import { DeepScanModal, type DeepScanOptions } from '../deep-scan-modal'
+import { DeepScanModal } from '../deep-scan-modal'
 
 // Mock UI components
 vi.mock('@/components/ui/dialog', () => ({
@@ -27,15 +26,15 @@ vi.mock('@/components/ui/input', () => ({
 }))
 
 vi.mock('@/components/ui/tabs', () => ({
-  Tabs: ({ children, value, onValueChange }: any) => {
+  Tabs: ({ children, value, onValueChange, 'data-testid': dataTestId }: any) => {
     const childrenWithProps = React.Children.map(children, child => {
       if (React.isValidElement(child)) {
         return React.cloneElement(child as any, { currentValue: value, onValueChange })
       }
       return child
     })
     return (
-      <div data-testid="tabs" data-value={value}>
+      <div data-testid={dataTestId || 'tabs'} data-value={value}>
         {childrenWithProps}
       </div>
     )
@@ -56,22 +55,26 @@ vi.mock('@/components/ui/tabs', () => ({
     })
     return <div data-testid="tabs-list">{childrenWithProps}</div>
   },
-  TabsTrigger: ({ children, value, onValueChange }: any) => (
-    <button data-testid={`tab-trigger-${value}`} onClick={() => onValueChange?.(value)}>
+  TabsTrigger: ({ children, value, onValueChange, 'data-testid': dataTestId }: any) => (
+    <button type="button" data-testid={dataTestId || `tab-trigger-${value}`} onClick={() => onValueChange?.(value)}>
       {children}
     </button>
   ),
 }))
 
 vi.mock('@/components/ui/select', () => ({
-  Select: ({ children, value, onValueChange }: any) => (
+  Select: ({ children, value }: any) => (
     <div data-testid="select" data-value={value}>
       {children}
     </div>
   ),
   SelectContent: ({ children }: any) => <div data-testid="select-content">{children}</div>,
   SelectItem: ({ children, value }: any) => <div data-testid={`select-item-${value}`}>{children}</div>,
-  SelectTrigger: ({ children }: any) => <button data-testid="select-trigger">{children}</button>,
+  SelectTrigger: ({ children }: any) => (
+    <button type="button" data-testid="select-trigger">
+      {children}
+    </button>
+  ),
   SelectValue: ({ placeholder }: any) => <span>{placeholder}</span>,
 }))
 
@@ -162,57 +165,53 @@ describe('DeepScanModal', () => {
     })
 
     it('should generate correct path for account range + address range', async () => {
-      const { container } = render(<DeepScanModal isOpen={true} onClose={mockOnClose} onScan={mockOnScan} />)
+      render(<DeepScanModal isOpen={true} onClose={mockOnClose} onScan={mockOnScan} />)
 
       // Switch to account range tab
-      const accountRangeTab = container.querySelector('[data-testid="tab-trigger-range"]')
-      if (accountRangeTab) {
-        fireEvent.click(accountRangeTab)
-      }
+      const accountTabs = screen.getByTestId('account-tabs')
+      const accountRangeTab = within(accountTabs).getByTestId('account-range-tab')
+      fireEvent.click(accountRangeTab)
 
-      // Switch to address range tab (need to find the second tabs component)
-      const allRangeTabs = container.querySelectorAll('[data-testid="tab-trigger-range"]')
-      if (allRangeTabs[1]) {
-        fireEvent.click(allRangeTabs[1])
-      }
+      // Switch to address range tab
+      const addressTabs = screen.getByTestId('address-tabs')
+      const addressRangeTab = within(addressTabs).getByTestId('address-range-tab')
+      fireEvent.click(addressRangeTab)
 
       // Wait for re-render
       await waitFor(() => {
         // Check for range notation in path
-        const pathText = container.textContent || ''
-        expect(pathText).toMatch(/m\/44'\/354'\/\{1\.\.\.5\}'\/0'\/\{0\.\.\.5\}'/i)
+        expect(screen.getByText(/m\/44'\/354'\/\{1\.\.\.5\}'\/0'\/\{0\.\.\.5\}'/i)).toBeInTheDocument()
       })
     })
 
     it('should handle same start and end indices in range', async () => {
-      const { container } = render(<DeepScanModal isOpen={true} onClose={mockOnClose} onScan={mockOnScan} />)
+      render(<DeepScanModal isOpen={true} onClose={mockOnClose} onScan={mockOnScan} />)
 
       // Switch to account range tab
-      const accountRangeTab = container.querySelector('[data-testid="tab-trigger-range"]')
-      if (accountRangeTab) {
-        fireEvent.click(accountRangeTab)
-      }
+      const accountTabs = screen.getByTestId('account-tabs')
+      const accountRangeTab = within(accountTabs).getByTestId('account-range-tab')
+      fireEvent.click(accountRangeTab)
 
-      // Set same start and end for account range
-      const inputs = container.querySelectorAll('input[type="number"]')
-      const startInput = inputs[0] as HTMLInputElement
-      const endInput = inputs[1] as HTMLInputElement
+      // Set same start and end for account range using label text
+      const startInputs = screen.getAllByLabelText('Start Index')
+      const endInputs = screen.getAllByLabelText('End Index')
+      const accountStartInput = startInputs[0] // Account section comes first
+      const accountEndInput = endInputs[0]
 
-      fireEvent.change(startInput, { target: { value: '3' } })
-      fireEvent.change(endInput, { target: { value: '3' } })
+      fireEvent.change(accountStartInput, { target: { value: '3' } })
+      fireEvent.change(accountEndInput, { target: { value: '3' } })
 
       await waitFor(() => {
-        const pathText = container.textContent || ''
         // When start equals end, should show single value, not range
-        expect(pathText).toMatch(/m\/44'\/354'\/3'\/0'/i)
+        expect(screen.getByText(/m\/44'\/354'\/3'\/0'/i)).toBeInTheDocument()
       })
     })
 
     it('should update path when chain selection changes', () => {
-      const { container } = render(<DeepScanModal isOpen={true} onClose={mockOnClose} onScan={mockOnScan} />)
+      render(<DeepScanModal isOpen={true} onClose={mockOnClose} onScan={mockOnScan} />)
 
       // Initial path should use Polkadot coin type (354)
-      expect(container.textContent).toMatch(/m\/44'\/354'/i)
+      expect(screen.getByText(/m\/44'\/354'/i)).toBeInTheDocument()
 
       // Note: Full chain selection testing would require more complex mocking
       // of the Select component to properly simulate selection changes
@@ -241,21 +240,21 @@ describe('DeepScanModal', () => {
     })
 
     it('should disable scan button when range end is less than start', async () => {
-      const { container } = render(<DeepScanModal isOpen={true} onClose={mockOnClose} onScan={mockOnScan} />)
+      render(<DeepScanModal isOpen={true} onClose={mockOnClose} onScan={mockOnScan} />)
 
       // Switch to account range tab
-      const accountRangeTab = container.querySelector('[data-testid="tab-trigger-range"]')
-      if (accountRangeTab) {
-        fireEvent.click(accountRangeTab)
-      }
+      const accountTabs = screen.getByTestId('account-tabs')
+      const accountRangeTab = within(accountTabs).getByTestId('account-range-tab')
+      fireEvent.click(accountRangeTab)
 
       await waitFor(() => {
-        const inputs = container.querySelectorAll('input[type="number"]')
-        const startInput = inputs[0] as HTMLInputElement
-        const endInput = inputs[1] as HTMLInputElement
+        const startInputs = screen.getAllByLabelText('Start Index')
+        const endInputs = screen.getAllByLabelText('End Index')
+        const accountStartInput = startInputs[0] // Account section comes first
+        const accountEndInput = endInputs[0]
 
-        fireEvent.change(startInput, { target: { value: '5' } })
-        fireEvent.change(endInput, { target: { value: '3' } })
+        fireEvent.change(accountStartInput, { target: { value: '5' } })
+        fireEvent.change(accountEndInput, { target: { value: '3' } })
 
         const scanButton = screen.getByText('Start Deep Scan')
         expect(scanButton).toBeDisabled()
@@ -299,23 +298,28 @@ describe('DeepScanModal', () => {
     })
 
     it('should generate correct options for account range + address range', async () => {
-      const { container } = render(<DeepScanModal isOpen={true} onClose={mockOnClose} onScan={mockOnScan} />)
+      render(<DeepScanModal isOpen={true} onClose={mockOnClose} onScan={mockOnScan} />)
 
       // Switch both to range mode
-      const rangeTabs = container.querySelectorAll('[data-testid="tab-trigger-range"]')
-      if (rangeTabs[0]) fireEvent.click(rangeTabs[0]) // Account range
-      if (rangeTabs[1]) fireEvent.click(rangeTabs[1]) // Address range
+      const accountTabs = screen.getByTestId('account-tabs')
+      const accountRangeTab = within(accountTabs).getByTestId('account-range-tab')
+      fireEvent.click(accountRangeTab)
+
+      const addressTabs = screen.getByTestId('address-tabs')
+      const addressRangeTab = within(addressTabs).getByTestId('address-range-tab')
+      fireEvent.click(addressRangeTab)
 
       await waitFor(() => {
-        const inputs = container.querySelectorAll('input[type="number"]')
+        const startInputs = screen.getAllByLabelText('Start Index')
+        const endInputs = screen.getAllByLabelText('End Index')
 
-        // Set account range 2-5
-        fireEvent.change(inputs[0], { target: { value: '2' } })
-        fireEvent.change(inputs[1], { target: { value: '5' } })
+        // Set account range 2-5 (account inputs come first)
+        fireEvent.change(startInputs[0], { target: { value: '2' } })
+        fireEvent.change(endInputs[0], { target: { value: '5' } })
 
-        // Set address range 1-10
-        fireEvent.change(inputs[2], { target: { value: '1' } })
-        fireEvent.change(inputs[3], { target: { value: '10' } })
+        // Set address range 1-10 (address inputs come second)
+        fireEvent.change(startInputs[1], { target: { value: '1' } })
+        fireEvent.change(endInputs[1], { target: { value: '10' } })
 
         const scanButton = screen.getByText('Start Deep Scan')
         fireEvent.click(scanButton)
@@ -333,20 +337,22 @@ describe('DeepScanModal', () => {
     })
 
     it('should generate correct options for mixed modes', async () => {
-      const { container } = render(<DeepScanModal isOpen={true} onClose={mockOnClose} onScan={mockOnScan} />)
+      render(<DeepScanModal isOpen={true} onClose={mockOnClose} onScan={mockOnScan} />)
 
       // Keep account as single, switch address to range
-      const rangeTabs = container.querySelectorAll('[data-testid="tab-trigger-range"]')
-      if (rangeTabs[1]) fireEvent.click(rangeTabs[1]) // Address range only
+      const addressTabs = screen.getByTestId('address-tabs')
+      const addressRangeTab = within(addressTabs).getByTestId('address-range-tab')
+      fireEvent.click(addressRangeTab)
 
       await waitFor(() => {
         const accountInput = screen.getByPlaceholderText('1') as HTMLInputElement
         fireEvent.change(accountInput, { target: { value: '3' } })
 
-        const inputs = container.querySelectorAll('input[type="number"]')
-        // Set address range
-        const addressStartInput = inputs[1] as HTMLInputElement
-        const addressEndInput = inputs[2] as HTMLInputElement
+        const startInputs = screen.getAllByLabelText('Start Index')
+        const endInputs = screen.getAllByLabelText('End Index')
+        // Set address range (since account is single, address inputs will be the only ones)
+        const addressStartInput = startInputs[0] // Only address range inputs exist
+        const addressEndInput = endInputs[0]
         fireEvent.change(addressStartInput, { target: { value: '0' } })
         fireEvent.change(addressEndInput, { target: { value: '5' } })
 
@@ -386,22 +392,22 @@ describe('DeepScanModal', () => {
     })
 
     it('should show alert for large account ranges', async () => {
-      const { container } = render(<DeepScanModal isOpen={true} onClose={mockOnClose} onScan={mockOnScan} />)
+      render(<DeepScanModal isOpen={true} onClose={mockOnClose} onScan={mockOnScan} />)
 
       // Switch to account range
-      const accountRangeTab = container.querySelector('[data-testid="tab-trigger-range"]')
-      if (accountRangeTab) {
-        fireEvent.click(accountRangeTab)
-      }
+      const accountTabs = screen.getByTestId('account-tabs')
+      const accountRangeTab = within(accountTabs).getByTestId('account-range-tab')
+      fireEvent.click(accountRangeTab)
 
       await waitFor(() => {
-        const inputs = container.querySelectorAll('input[type="number"]')
-        const startInput = inputs[0] as HTMLInputElement
-        const endInput = inputs[1] as HTMLInputElement
+        const startInputs = screen.getAllByLabelText('Start Index')
+        const endInputs = screen.getAllByLabelText('End Index')
+        const accountStartInput = startInputs[0] // Account section comes first
+        const accountEndInput = endInputs[0]
 
         // Set large range (more than 50)
-        fireEvent.change(startInput, { target: { value: '0' } })
-        fireEvent.change(endInput, { target: { value: '60' } })
+        fireEvent.change(accountStartInput, { target: { value: '0' } })
+        fireEvent.change(accountEndInput, { target: { value: '60' } })
 
         const alert = screen.getByTestId('alert')
         expect(alert).toBeInTheDocument()