test: update test files

Author: fathima-mirza

tests/App.test.tsx

@@ -6,49 +6,68 @@ import App from '../src/App';
 describe('App Component', () => {
   it('renders without crashing', () => {
     render(<App />);
-    expect(screen.getByRole('button', { name: /dark mode/i })).toBeInTheDocument();
+    expect(screen.getByTestId('app-container')).toBeInTheDocument();
   });
 
   it('renders the MultiLevelTable component', () => {
     render(<App />);
     // Check for table headers
+    expect(screen.getByText('Resource Type')).toBeInTheDocument();
     expect(screen.getByText('Name')).toBeInTheDocument();
-    expect(screen.getByText('Value')).toBeInTheDocument();
     expect(screen.getByText('Status')).toBeInTheDocument();
+    expect(screen.getByText('Orchestration')).toBeInTheDocument();
   });
 
-  it('toggles theme when theme button is clicked', () => {
+  it('renders table title and subtitle', () => {
     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' });
+    expect(screen.getByText('Multi-Level Table Demo')).toBeInTheDocument();
+    expect(screen.getByText('A comprehensive table showing resource management')).toBeInTheDocument();
+  });
+
+  it('renders search input', () => {
+    render(<App />);
+    const searchInput = screen.getByPlaceholderText('Search');
+    expect(searchInput).toBeInTheDocument();
   });
 
-  it('renders parent items correctly', () => {
+  it('renders export and filter buttons', () => {
     render(<App />);
-    // Check for some parent items
-    expect(screen.getByText('Parent 1')).toBeInTheDocument();
-    expect(screen.getByText('Parent 2')).toBeInTheDocument();
+    expect(screen.getByText('Export')).toBeInTheDocument();
+    expect(screen.getByText('Filter')).toBeInTheDocument();
   });
 
-  it('renders status cells with correct colors', () => {
+  it('renders sample data items', () => {
     render(<App />);
-    const activeStatus = screen.getAllByText('Active')[0];
-    const inactiveStatus = screen.getAllByText('Inactive')[0];
-    const pendingStatus = screen.getAllByText('Pending')[0];
+    // Check for some sample data items
+    expect(screen.getByText('web-service')).toBeInTheDocument();
+    expect(screen.getByText('mobile-app-backend')).toBeInTheDocument();
+    expect(screen.getByText('analytics-platform')).toBeInTheDocument();
+  });
 
-    expect(activeStatus).toHaveStyle({ color: '#2ecc71' });
-    expect(inactiveStatus).toHaveStyle({ color: '#e74c3c' });
-    expect(pendingStatus).toHaveStyle({ color: '#f1c40f' });
+  it('renders status cells', () => {
+    render(<App />);
+    // Check that status badges are rendered (use getAllByText since there are multiple)
+    const activeElements = screen.getAllByText('Active');
+    const inactiveElements = screen.getAllByText('Inactive');
+    const pendingElements = screen.getAllByText('Pending');
+    
+    expect(activeElements.length).toBeGreaterThan(0);
+    expect(inactiveElements.length).toBeGreaterThan(0);
+    expect(pendingElements.length).toBeGreaterThan(0);
+  });
+
+  it('renders resource types', () => {
+    render(<App />);
+    // Use getAllByText since there are multiple Application elements
+    const applicationElements = screen.getAllByText('Application');
+    expect(applicationElements.length).toBeGreaterThan(0);
+    expect(screen.getByText('Redis')).toBeInTheDocument();
+  });
+
+  it('renders orchestration values', () => {
+    render(<App />);
+    // Use getAllByText since there are multiple ECS elements
+    const ecsElements = screen.getAllByText('ECS');
+    expect(ecsElements.length).toBeGreaterThan(0);
   });
 });

tests/components/ExpandIcon.test.tsx

@@ -1,52 +1,95 @@
 import React from 'react';
-import { describe, it, expect } from 'vitest';
+
+import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
+
 import '@testing-library/jest-dom';
 
-import { ExpandIcon } from '../../src/components/icons';
+import { ExpandIcon } from '../../src/components/icons/ExpandIcon';
 import type { ThemeProps } from '../../src/types/theme';
 
-describe('ExpandIcon', () => {
-  const mockTheme: ThemeProps = {
-    expandIcon: {
-      color: '#000000',
-    },
-  };
+const mockTheme: ThemeProps = {
+  colors: {
+    primaryColor: '#5D5FEF',
+    textColor: '#262626',
+    borderColor: '#E5E5E5',
+  },
+  expandIcon: {
+    color: '#000000',
+  },
+};
 
-  it('renders expanded icon when isExpanded is true', () => {
+describe('ExpandIcon', () => {
+  it('applies correct transform for expanded state', () => {
     render(<ExpandIcon isExpanded theme={mockTheme} mode="expand" />);
-    const icon = screen.getByRole('img', { hidden: true });
-    expect(icon).toBeInTheDocument();
-    expect(icon.closest('.expand-icon')).toHaveClass('expand-icon');
+    
+    const expandIcon = document.querySelector('.expand-icon');
+    expect(expandIcon).toHaveStyle({ transform: 'rotate(90deg)' });
   });
 
-  it('renders collapsed icon when isExpanded is false', () => {
+  it('applies correct transform for collapsed state', () => {
     render(<ExpandIcon isExpanded={false} theme={mockTheme} mode="expand" />);
+    
+    const expandIcon = document.querySelector('.expand-icon');
+    expect(expandIcon).toHaveStyle({ transform: 'rotate(0deg)' });
+  });
+
+  it('renders SVG element', () => {
+    render(<ExpandIcon isExpanded theme={mockTheme} mode="expand" />);
+    
+    const svg = document.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24');
+  });
 
-    const icon = screen.getByRole('img', { hidden: true });
-    expect(icon).toBeInTheDocument();
-    expect(icon.closest('.expand-icon')).toHaveClass('expand-icon');
+  it('renders expand icon with SVG', () => {
+    render(<ExpandIcon isExpanded theme={mockTheme} mode="expand" />);
+    
+    const svg = document.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
+  });
+
+  it('renders collapsed icon with SVG', () => {
+    render(<ExpandIcon isExpanded={false} theme={mockTheme} mode="expand" />);
+    
+    const svg = document.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
   });
 
   it('applies custom theme color when provided', () => {
     const customTheme: ThemeProps = {
+      ...mockTheme,
       expandIcon: {
         color: '#FF0000',
       },
     };
 
     render(<ExpandIcon isExpanded theme={customTheme} mode="expand" />);
-
-    const icon = screen.getByRole('img', { hidden: true });
-    expect(icon).toBeInTheDocument();
+    
+    const svg = document.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
   });
 
   it('renders without theme color when not provided', () => {
-    const themeWithoutColor: ThemeProps = {};
+    const themeWithoutColor: ThemeProps = {
+      colors: {
+        primaryColor: '#5D5FEF',
+        textColor: '#262626',
+        borderColor: '#E5E5E5',
+      },
+    };
 
     render(<ExpandIcon isExpanded theme={themeWithoutColor} mode="expand" />);
-
-    const icon = screen.getByRole('img', { hidden: true });
-    expect(icon).toBeInTheDocument();
+    
+    const svg = document.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
   });
 });