Feat/unit tests (#17)

* feat: Unit test setup

* test: Add unit tests for TableRow, Pagination, and TableHeader components

- Introduced unit tests for TableRow component, covering rendering, expansion, and custom rendering.
- Added tests for Pagination component, validating navigation and page size changes.
- Implemented tests for TableHeader component, ensuring correct rendering and filtering functionality.
- Included necessary imports and mock data for testing.

* feat: Add unit tests for SortType and defaultTheme

- Introduced unit tests for the SortType enum, verifying its values and count.
- Added tests for the defaultTheme structure, ensuring it contains the correct properties and valid configuration values for colors, table, pagination, and expand icon.
- Updated vitest configuration to include test files with .ts and .tsx extensions.
- Added @vitest/coverage-v8 dependency for improved test coverage reporting.

* test: Add unit tests for MultiLevelTable component

- Introduced comprehensive unit tests for the MultiLevelTable component, covering rendering, row expansion, sorting, pagination, custom theming, and filtering functionalities.
- Validated the correct application of custom styles and rendering for status cells and pagination controls.
- Ensured that the component behaves as expected with mock data and various configurations.

* chore: Update test configuration and add coverage reporting

- Added coverage reporting configuration to vitest for improved test insights.
- Updated .gitignore to exclude coverage directory.
- Enhanced App component with a data-testid for easier testing.
- Introduced unit tests for the App component, validating rendering, theme toggling, and status cell colors.
- Added tests for index exports to ensure correct component and type exports.
- Created main test to verify App component rendering in strict mode.

---------

Co-authored-by: anitta-keyvalue <[email protected]>

Author: abhay-keyvalue

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+coverage

src/App.tsx

@@ -416,18 +416,8 @@ const App: React.FC = () => {
     },
   ];
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const renderCustomPagination = () => {
-    return <div>Custom Pagination </div>;
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const renderCustomExpandButton = () => {
-    return <div>➡</div>;
-  };
-
   return (
-    <div className="app" style={{ backgroundColor: theme.colors?.background }}>
+    <div className="app" data-testid="app-container" style={{ backgroundColor: theme.colors?.background }}>
       <header
         className="app-header"
         style={{ backgroundColor: theme.table?.header?.background }}

tests/App.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import App from '../src/App';
+
+describe('App Component', () => {
+  it('renders without crashing', () => {
+    render(<App />);
+    expect(screen.getByRole('button', { name: /dark mode/i })).toBeInTheDocument();
+  });
+
+  it('renders the MultiLevelTable component', () => {
+    render(<App />);
+    // Check for table headers
+    expect(screen.getByText('Name')).toBeInTheDocument();
+    expect(screen.getByText('Value')).toBeInTheDocument();
+    expect(screen.getByText('Status')).toBeInTheDocument();
+  });
+
+  it('toggles theme when theme button is clicked', () => {
+    render(<App />);
+    const themeButton = screen.getByRole('button', { name: /dark mode/i });
+    const appDiv = screen.getByTestId('app-container');
+    
+    // Initial state should be light theme
+    expect(appDiv).toHaveStyle({ backgroundColor: '#ffffff' });
+    
+    // Click to toggle to dark theme
+    fireEvent.click(themeButton);
+    expect(appDiv).toHaveStyle({ backgroundColor: '#212529' });
+    
+    // Click again to toggle back to light theme
+    fireEvent.click(themeButton);
+    expect(appDiv).toHaveStyle({ backgroundColor: '#ffffff' });
+  });
+
+  it('renders parent items correctly', () => {
+    render(<App />);
+    // Check for some parent items
+    expect(screen.getByText('Parent 1')).toBeInTheDocument();
+    expect(screen.getByText('Parent 2')).toBeInTheDocument();
+  });
+
+  it('renders status cells with correct colors', () => {
+    render(<App />);
+    const activeStatus = screen.getAllByText('Active')[0];
+    const inactiveStatus = screen.getAllByText('Inactive')[0];
+    const pendingStatus = screen.getAllByText('Pending')[0];
+
+    expect(activeStatus).toHaveStyle({ color: '#2ecc71' });
+    expect(inactiveStatus).toHaveStyle({ color: '#e74c3c' });
+    expect(pendingStatus).toHaveStyle({ color: '#f1c40f' });
+  });
+});

tests/index.test.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest';
+import { MultiLevelTable } from '../src/index';
+import { MultiLevelTable as OriginalMultiLevelTable } from '../src/components/MultiLevelTable';
+
+describe('index', () => {
+  it('exports MultiLevelTable component', () => {
+    expect(MultiLevelTable).toBe(OriginalMultiLevelTable);
+  });
+
+  it('exports MultiLevelTableProps type', () => {
+    // TypeScript will verify this at compile time
+    const props: Parameters<typeof MultiLevelTable>[0] = {
+      data: [],
+      columns: [],
+    };
+    expect(props).toBeDefined();
+  });
+}); 

tests/main.test.tsx

@@ -0,0 +1,26 @@
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+// Mock ReactDOM
+vi.mock('react-dom/client', () => ({
+  default: {
+    createRoot: vi.fn(() => ({
+      render: vi.fn(),
+    })),
+  },
+}));
+
+describe('main', () => {
+  it('renders App component in strict mode', async () => {
+    const root = document.createElement('div');
+    root.id = 'root';
+    document.body.appendChild(root);
+
+    // Import the main module and wait for it to complete
+    await import('../src/main');
+
+    // Verify that createRoot was called with the root element
+    expect(ReactDOM.createRoot).toHaveBeenCalledWith(root);
+  });
+}); 

tests/setup.ts

@@ -1,4 +1,5 @@
 import '@testing-library/jest-dom';
+import { vi } from 'vitest';
 
 // Mock window.matchMedia
 Object.defineProperty(window, 'matchMedia', {

vitest.config.ts

@@ -6,5 +6,9 @@ export default defineConfig({
     setupFiles: ['./tests/setup.ts'],
     globals: true,
     include: ['tests/**/*.test.{ts,tsx}'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+    },
   },
 });