Fix lint and format issues

Author: lubej

TESTING.md

@@ -1,6 +1,7 @@
 # Testing Guide
 
-This document provides a comprehensive guide for testing the ROFL App application.
+This document provides a comprehensive guide for testing the ROFL App
+application.
 
 ## Table of Contents
 
@@ -27,7 +28,8 @@ We use the following testing tools:
 
 ### Installation
 
-Testing dependencies are already included in `package.json`. After cloning the repository:
+Testing dependencies are already included in `package.json`. After cloning
+the repository:
 
 ```bash
 yarn install
@@ -62,7 +64,9 @@ yarn test:run
 yarn test:coverage
 ```
 
-This generates a coverage report in the `coverage/` directory with multiple formats:
+This generates a coverage report in the `coverage/` directory with multiple
+formats:
+
 - HTML report: `coverage/index.html`
 - JSON: `coverage/coverage-final.json`
 - LCOV: `coverage/lcov.info`
@@ -79,7 +83,8 @@ This launches the Vitest UI for an interactive test experience.
 
 ### Component Tests
 
-Use the custom `render` function from `test-utils.tsx` which includes all necessary providers:
+Use the custom `render` function from `test-utils.tsx` which includes all
+necessary providers:
 
 ```tsx
 import { render, screen } from '@/test/test-utils'
@@ -176,6 +181,7 @@ describe('myUtility', () => {
    - Avoid testing internal state or methods
 
 2. **Write descriptive test names**
+
    ```tsx
    // Good
    it('should display error message when API call fails')
@@ -185,6 +191,7 @@ describe('myUtility', () => {
    ```
 
 3. **Use appropriate assertions**
+
    ```tsx
    // Good
    expect(screen.getByRole('button', { name: 'Submit' })).toBeInTheDocument()
@@ -204,6 +211,7 @@ describe('myUtility', () => {
 ### Component Testing
 
 1. **Test user interactions**
+
    ```tsx
    import { render, screen } from '@testing-library/react'
    import userEvent from '@testing-library/user-event'
@@ -229,6 +237,7 @@ describe('myUtility', () => {
    - Empty state
 
 3. **Test accessibility**
+
    ```tsx
    it('should be accessible', () => {
      render(<MyComponent />)
@@ -239,6 +248,7 @@ describe('myUtility', () => {
 ### Hook Testing
 
 1. **Test hook behavior**
+
    ```tsx
    it('should update state when action is called', () => {
      const { result } = renderHook(() => useMyHook())
@@ -252,6 +262,7 @@ describe('myUtility', () => {
    ```
 
 2. **Test error handling**
+
    ```tsx
    it('should handle errors gracefully', async () => {
      const { result } = renderHook(() => useMyHook())
@@ -350,6 +361,7 @@ The ROFL app has comprehensive test coverage exceeding industry standards:
 ### Coverage Thresholds
 
 Configured in `vitest.config.ts`:
+
 - Statements: 80%
 - Branches: 75%
 - Functions: 80%
@@ -372,14 +384,16 @@ xdg-open coverage/index.html  # Linux
 start coverage/index.html  # Windows
 ```
 
-
 ### CI/CD Integration
 
-Coverage reports are automatically generated in CI/CD and uploaded as artifacts. Failed coverage thresholds will cause the build to fail.
+Coverage reports are automatically generated in CI/CD and uploaded as
+artifacts. Failed coverage thresholds will cause the build to fail.
 
 ## Resources
 
 - [Vitest Documentation](https://vitest.dev/)
 - [React Testing Library](https://testing-library.com/react)
 - [MSW Documentation](https://mswjs.io/)
-- [Testing Best Practices](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)
+- [Testing Best Practices][best-practices]
+
+[best-practices]: https://kentcdodds.com/blog/common-mistakes-with-react-testing-library

TESTING_QUICKSTART.md

@@ -13,16 +13,19 @@ yarn install
 ## Run Your First Test
 
 1. **Run all tests in watch mode**:
+
    ```bash
    yarn test
    ```
 
 2. **Run tests once**:
+
    ```bash
    yarn test:run
    ```
 
 3. **Generate coverage report**:
+
    ```bash
    yarn test:coverage
    ```
@@ -227,6 +230,7 @@ Before committing your code, ensure:
 ### Tests are failing with "Cannot find module"
 
 Make sure you're using the correct import path alias:
+
 ```tsx
 // Correct
 import { render } from '@/test/test-utils'
@@ -238,6 +242,7 @@ import { render } from '../../../test/test-utils'
 ### Tests are timing out
 
 Use `waitFor` for async operations:
+
 ```tsx
 import { waitFor } from '@testing-library/react'
 
@@ -249,6 +254,7 @@ await waitFor(() => {
 ### MSW is not intercepting requests
 
 Make sure to setup and teardown the server:
+
 ```tsx
 beforeAll(() => server.listen())
 afterEach(() => server.resetHandlers())

eslint.config.js

@@ -23,4 +23,14 @@ export default tseslint.config(
       'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     },
   },
+  // Relaxed rules for test files and test utilities
+  {
+    files: ['**/*.test.{ts,tsx}', '**/test/**/*.{ts,tsx}'],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
+      '@typescript-eslint/ban-ts-comment': 'off',
+      'react-refresh/only-export-components': 'off',
+    },
+  },
 )

src/backend/api.test.ts

@@ -1,14 +1,12 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import axios from 'axios'
 import { renderHook, act, waitFor } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import * as React from 'react'
-import * as wagmi from 'wagmi'
-import * as wagmiCore from '@wagmi/core'
-import * as oasis from '@oasisprotocol/client'
-import * as oasisRT from '@oasisprotocol/client-rt'
-import * as nexusApi from '../nexus/api'
-import type { Template } from '../pages/CreateApp/BootstrapStep'
+import * as _wagmi from 'wagmi'
+import * as _wagmiCore from '@wagmi/core'
+import * as _oasis from '@oasisprotocol/client'
+import * as _oasisRT from '@oasisprotocol/client-rt'
+import * as _nexusApi from '../nexus/api'
 import type { AppData } from '../pages/CreateApp/types'
 import type { BuildFormData } from '../types/build-form.ts'
 import { ViewMetadataState, ViewSecretsState } from '../pages/Dashboard/AppDetails/types'
@@ -57,7 +55,7 @@ vi.mock('@wagmi/core', () => ({
 vi.mock('@oasisprotocol/client', () => ({
   misc: {
     fromHex: vi.fn(() => new Uint8Array(32)),
-    fromBase64: vi.fn((str: string) => {
+    fromBase64: vi.fn((_str: string) => {
       const arr = new Uint8Array(64)
       arr.fill(1)
       return arr
@@ -158,7 +156,7 @@ vi.mock('@oasisprotocol/client-rt', () => {
   }
 })
 
-const GetRuntimeEventsMock = vi.fn((network, runtime, params) =>
+const GetRuntimeEventsMock = vi.fn((_network, _runtime, _params) =>
   Promise.resolve({
     data: {
       events: [
@@ -172,7 +170,7 @@ const GetRuntimeEventsMock = vi.fn((network, runtime, params) =>
   }),
 )
 
-const GetRuntimeRoflmarketInstancesMock = vi.fn((network, runtime, params) =>
+const GetRuntimeRoflmarketInstancesMock = vi.fn((_network, _runtime, _params) =>
   Promise.resolve({
     data: {
       instances: [
@@ -580,7 +578,7 @@ describe('backend/api', () => {
       await act(async () => {
         try {
           await result.current.mutateAsync({ compose: 'test' })
-        } catch (e) {
+        } catch {
           // Expected
         }
       })
@@ -1047,7 +1045,7 @@ describe('backend/api', () => {
             id: 'test-rofl-yaml',
             file: new Blob(['test']),
           })
-        } catch (e) {
+        } catch {
           // Expected
         }
       })
@@ -1126,6 +1124,11 @@ describe('backend/api', () => {
         'app789-compose-yaml',
         'app000-readme-md',
       ] as const
+      const _wagmi = '*'
+      const _wagmiCore = '*'
+      const _oasis = '*'
+      const _oasisRT = '*'
+      const _nexusApi = '*'
 
       for (const id of validIds) {
         const result = await downloadArtifact(id, 'token123')

src/backend/machine-api.test.ts

@@ -414,7 +414,7 @@ describe('backend/machine-api', () => {
       // This test ensures the defensive error message at lines 135-136 is correct
       // even though reaching those lines requires exceptional circumstances
       // We verify this by checking the error message structure
-      const defensiveErrorMessage = 'Authentication failed - no token available'
+      const _defensiveErrorMessage = 'Authentication failed - no token available'
 
       // Mock a scenario where auth might fail silently
       mockFetch.mockRejectedValueOnce(new Error('Connection timeout'))

src/components/AccountAvatar/AccountAvatar.test.tsx

@@ -13,7 +13,7 @@ vi.mock('../JazzIcon', () => ({
 
 // Mock the addressToJazzIconSeed function
 vi.mock('../JazzIcon/addressToJazzIconSeed', () => ({
-  addressToJazzIconSeed: vi.fn(account => 12345),
+  addressToJazzIconSeed: vi.fn(_account => 12345),
 }))
 
 describe('AccountAvatar', () => {

src/components/AccountAvatar/index.test.tsx

@@ -47,10 +47,10 @@ describe('AccountAvatar', () => {
 
     it('should render with different oasis addresses', () => {
       const account1 = { address: 'oasis1qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqupr77p' }
-      const { container: container1 } = render(<AccountAvatar account={account1} diameter={32} />)
+      const { container: _container1 } = render(<AccountAvatar account={account1} diameter={32} />)
 
       const account2 = { address: 'oasis1qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqyqrr5s' }
-      const { container: container2 } = render(<AccountAvatar account={account2} diameter={32} />)
+      const { container: _container2 } = render(<AccountAvatar account={account2} diameter={32} />)
 
       expect(screen.getAllByTestId('jazz-icon')).toHaveLength(2)
     })
@@ -74,10 +74,10 @@ describe('AccountAvatar', () => {
 
     it('should render with different ethereum addresses', () => {
       const account1 = { address_eth: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb' }
-      const { container: container1 } = render(<AccountAvatar account={account1} diameter={32} />)
+      const { container: _container1 } = render(<AccountAvatar account={account1} diameter={32} />)
 
       const account2 = { address_eth: '0x1234567890123456789012345678901234567890' }
-      const { container: container2 } = render(<AccountAvatar account={account2} diameter={32} />)
+      const { container: _container2 } = render(<AccountAvatar account={account2} diameter={32} />)
 
       expect(screen.getAllByTestId('jazz-icon')).toHaveLength(2)
     })

src/components/AppCard/ViewWithOnlyLogsPermission.test.tsx

@@ -15,7 +15,7 @@ vi.mock('wagmi', () => ({
 }))
 
 vi.mock('@oasisprotocol/ui-library/src/components/ui/button', () => ({
-  Button: ({ children, asChild, ...props }: any) => <button {...props}>{children}</button>,
+  Button: ({ children, _asChild, ...props }: any) => <button {...props}>{children}</button>,
 }))
 
 vi.mock('../../utils/hasViewLogsPermission', () => ({
@@ -31,8 +31,6 @@ import type { RoflApp } from '../../nexus/api'
 import { useAccount } from 'wagmi'
 import { hasViewLogsPermission } from '../../utils/hasViewLogsPermission'
 import { isMachineRemoved } from '../MachineStatusIcon/isMachineRemoved'
-import { WagmiProvider } from 'wagmi'
-import { wagmiConfig } from '../constants/wagmi-config'
 
 const mockUseGetRuntimeRoflmarketInstances = vi.mocked(useGetRuntimeRoflmarketInstances)
 const mockUseAccount = vi.mocked(useAccount)
@@ -207,7 +205,7 @@ describe('ViewWithOnlyLogsPermission', () => {
 
     it('should filter out machines without logs permission', () => {
       mockIsMachineRemoved.mockReturnValue(false)
-      mockHasViewLogsPermission.mockImplementation((machine, address) => {
+      mockHasViewLogsPermission.mockImplementation((machine, _address) => {
         return machine.id === 'machine-1' ? new Uint8Array([1, 2, 3]) : false
       })
 

src/components/AppCard/index.test.tsx

@@ -3,8 +3,6 @@ import { render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { AppCard } from './index'
 import { MemoryRouter } from 'react-router-dom'
-import { WagmiProvider } from 'wagmi'
-import { wagmiConfig } from '../constants/wagmi-config'
 
 // Mock ui-library components
 vi.mock('@oasisprotocol/ui-library/src/components/ui/tooltip', () => ({

src/components/AppsList/index.test.tsx

@@ -1,8 +1,6 @@
 import { describe, it, expect, vi } from 'vitest'
 import { render, screen } from '@testing-library/react'
 import { AppsList } from './index'
-import { WagmiProvider } from 'wagmi'
-import { wagmiConfig } from '../constants/wagmi-config'
 
 // Mock dependencies
 const mockUseInView = vi.fn(() => ({ ref: vi.fn(), inView: false }))
@@ -91,7 +89,7 @@ describe('AppsList Component', () => {
 
   describe('dashboard type', () => {
     it('should render app cards when connected and apps exist', () => {
-      const { container } = render(<AppsList emptyState={<div>No apps</div>} type="dashboard" />)
+      const { container: _container } = render(<AppsList emptyState={<div>No apps</div>} type="dashboard" />)
 
       expect(screen.getByTestId('app-card-app-0')).toBeInTheDocument()
       expect(screen.getByTestId('app-card-app-1')).toBeInTheDocument()
@@ -110,7 +108,7 @@ describe('AppsList Component', () => {
 
   describe('explore type', () => {
     it('should render app cards', () => {
-      const { container } = render(<AppsList emptyState={<div>No apps</div>} type="explore" />)
+      const { container: _container } = render(<AppsList emptyState={<div>No apps</div>} type="explore" />)
 
       expect(screen.getByTestId('app-card-app-0')).toBeInTheDocument()
     })
@@ -378,7 +376,7 @@ describe('AppsList Component', () => {
 
   describe('AppCard rendering', () => {
     it('should pass correct props to AppCard for dashboard', () => {
-      const { container } = render(<AppsList emptyState={<div>No apps</div>} type="dashboard" />)
+      const { container: _container } = render(<AppsList emptyState={<div>No apps</div>} type="dashboard" />)
 
       const firstCard = screen.getByTestId('app-card-app-0')
       expect(firstCard).toHaveTextContent('app-0')
@@ -387,7 +385,7 @@ describe('AppsList Component', () => {
     })
 
     it('should pass correct props to AppCard for explore', () => {
-      const { container } = render(<AppsList emptyState={<div>No apps</div>} type="explore" />)
+      const { container: _container } = render(<AppsList emptyState={<div>No apps</div>} type="explore" />)
 
       const firstCard = screen.getByTestId('app-card-app-0')
       expect(firstCard).toHaveTextContent('app-0')