Replace react-vis with visx, add component testing infrastructure, and update Electron packages (#959)

app/TESTING.md

@@ -0,0 +1,309 @@
+# React Component Testing Guide
+
+This guide explains how to write tests for React components in the MQTT-Explorer project using the generic testing utilities.
+
+## Overview
+
+We use the following testing stack:
+- **Mocha** - Test framework
+- **Chai** - Assertion library
+- **React Testing Library** - React component testing utilities
+- **JSDOM** - DOM implementation for Node.js
+- **Custom Test Utilities** - Located in `src/utils/spec/testUtils.tsx`
+
+## Quick Start
+
+### 1. Create a Test File
+
+Test files should be placed next to the component they test with the `.spec.tsx` extension:
+
+```
+src/components/MyComponent/
+  ├── MyComponent.tsx
+  └── MyComponent.spec.tsx
+```
+
+### 2. Basic Test Structure
+
+```typescript
+import React from 'react'
+import { expect } from 'chai'
+import { describe, it } from 'mocha'
+import MyComponent from './MyComponent'
+import { renderWithProviders } from '../../utils/spec/testUtils'
+
+describe('MyComponent', () => {
+  it('should render correctly', () => {
+    const { container } = renderWithProviders(<MyComponent />)
+    expect(container).to.exist
+  })
+})
+```
+
+## Using Test Utilities
+
+### `renderWithProviders`
+
+This function wraps your component with necessary providers (Theme, Redux).
+
+```typescript
+import { renderWithProviders } from '../../utils/spec/testUtils'
+
+// Render with theme only (default)
+const { container } = renderWithProviders(<MyComponent />, { withTheme: true })
+
+// Render with both theme and Redux
+const { container } = renderWithProviders(<MyComponent />, { 
+  withTheme: true,
+  withRedux: true 
+})
+
+// Render with custom theme
+import { createTheme } from '@mui/material/styles'
+const darkTheme = createTheme({ palette: { mode: 'dark' } })
+const { container } = renderWithProviders(<MyComponent />, { 
+  theme: darkTheme 
+})
+
+// Render with custom Redux store
+import { configureStore } from '@reduxjs/toolkit'
+const customStore = configureStore({ /* ... */ })
+const { container } = renderWithProviders(<MyComponent />, { 
+  store: customStore,
+  withRedux: true
+})
+```
+
+### `createMockChartData`
+
+Helper function to generate mock chart data:
+
+```typescript
+import { createMockChartData } from '../../utils/spec/testUtils'
+
+// Create 10 data points (default)
+const data = createMockChartData()
+
+// Create specific number of points
+const data = createMockChartData(50)
+```
+
+### Global Mocks
+
+The test utilities automatically set up global mocks:
+- **ResizeObserver** - Mocked for components using `react-resize-detector`
+
+## Common Testing Patterns
+
+### Testing Rendering
+
+```typescript
+it('should render without crashing', () => {
+  const { container } = renderWithProviders(<MyComponent />)
+  expect(container).to.exist
+})
+
+it('should render specific element', () => {
+  const { container } = renderWithProviders(<MyComponent />)
+  const element = container.querySelector('.my-class')
+  expect(element).to.exist
+})
+```
+
+### Testing Props
+
+```typescript
+it('should accept all valid props', () => {
+  const props = {
+    title: 'Test',
+    value: 123,
+    onchange: () => {},
+  }
+  const { container } = renderWithProviders(<MyComponent {...props} />)
+  expect(container).to.exist
+})
+```
+
+### Testing User Interactions
+
+```typescript
+import { userEvent } from '../../utils/spec/testUtils'
+
+it('should handle click events', async () => {
+  const { container } = renderWithProviders(<MyComponent />)
+  const button = container.querySelector('button')
+  
+  if (button) {
+    await userEvent.click(button)
+    // Assert expected behavior
+  }
+})
+```
+
+### Testing Different States
+
+```typescript
+it('should render empty state', () => {
+  const { container } = renderWithProviders(<MyComponent data={[]} />)
+  // Assert empty state
+})
+
+it('should render with data', () => {
+  const data = createMockChartData(5)
+  const { container } = renderWithProviders(<MyComponent data={data} />)
+  // Assert data is rendered
+})
+```
+
+### Testing SVG Components
+
+```typescript
+it('should render SVG elements', () => {
+  const { container } = renderWithProviders(<ChartComponent />)
+  
+  const svg = container.querySelector('svg')
+  expect(svg).to.exist
+  
+  const paths = container.querySelectorAll('path')
+  expect(paths.length).to.be.greaterThan(0)
+  
+  const circles = container.querySelectorAll('circle')
+  expect(circles.length).to.equal(5)
+})
+```
+
+### Testing Edge Cases
+
+```typescript
+describe('Edge Cases', () => {
+  it('should handle negative values', () => {
+    const data = [{ x: 1, y: -10 }, { x: 2, y: -20 }]
+    const { container } = renderWithProviders(<MyComponent data={data} />)
+    expect(container.querySelector('svg')).to.exist
+  })
+
+  it('should handle empty arrays', () => {
+    const { container } = renderWithProviders(<MyComponent data={[]} />)
+    expect(container).to.exist
+  })
+
+  it('should handle very large numbers', () => {
+    const data = [{ x: 1, y: 1000000 }]
+    const { container } = renderWithProviders(<MyComponent data={data} />)
+    expect(container).to.exist
+  })
+})
+```
+
+## Running Tests
+
+### Run all tests
+```bash
+yarn test
+```
+
+### Run specific test file
+```bash
+npx mocha --require tsx --require source-map-support/register "src/components/MyComponent/MyComponent.spec.tsx"
+```
+
+### Run tests in watch mode
+```bash
+npx mocha --require tsx --require source-map-support/register --watch "src/**/*.spec.{ts,tsx}"
+```
+
+## Best Practices
+
+1. **Test Behavior, Not Implementation**
+   - Focus on what the component does, not how it does it
+   - Test user-facing behavior and output
+
+2. **Use Descriptive Test Names**
+   ```typescript
+   // Good
+   it('should render error message when validation fails')
+   
+   // Bad
+   it('test1')
+   ```
+
+3. **Group Related Tests**
+   ```typescript
+   describe('MyComponent', () => {
+     describe('Rendering', () => {
+       it('should render correctly')
+       it('should render with props')
+     })
+     
+     describe('Interactions', () => {
+       it('should handle clicks')
+       it('should handle keyboard input')
+     })
+   })
+   ```
+
+4. **Keep Tests Independent**
+   - Each test should be able to run in isolation
+   - Don't rely on test execution order
+   - Clean up after each test if needed
+
+5. **Test Edge Cases**
+   - Empty data
+   - Null/undefined values
+   - Very large/small numbers
+   - Negative values
+   - Single item arrays
+
+6. **Use Chai Assertions**
+   ```typescript
+   expect(value).to.exist
+   expect(value).to.be.true
+   expect(value).to.equal(expected)
+   expect(array).to.have.length(5)
+   expect(number).to.be.greaterThan(0)
+   ```
+
+## Example: Complete Test Suite
+
+See `src/components/Chart/Chart.spec.tsx` for a comprehensive example that demonstrates:
+- Multiple test groups (Rendering, Data Visualization, Edge Cases, etc.)
+- Testing with different props and configurations
+- Testing SVG elements
+- Testing theme integration
+- Performance testing
+- Edge case coverage
+
+## Troubleshooting
+
+### "ResizeObserver is not defined"
+This is automatically mocked by the test utilities. Make sure you're importing from `testUtils.tsx`.
+
+### "Cannot find module"
+Check your import paths. Remember to use relative paths from the test file.
+
+### "Window is not defined"
+Make sure `jsdom-global/register` is imported in testUtils.tsx.
+
+### Tests timing out
+Increase the timeout in your test:
+```typescript
+it('should complete async operation', function() {
+  this.timeout(5000) // 5 seconds
+  // test code
+})
+```
+
+## Adding New Test Utilities
+
+To add new helper functions, update `src/utils/spec/testUtils.tsx`:
+
+```typescript
+export function myNewHelper() {
+  // Helper implementation
+}
+```
+
+Then use it in your tests:
+```typescript
+import { myNewHelper } from '../../utils/spec/testUtils'
+```