feat: Updated 3 files

apps/nextjs/app/dashboard/userVariables/[variableId]/charts/page.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { UserVariableCharts } from './page';
+import { UserVariable } from '@/types/models/UserVariable';
+
+// Mock the fetch request
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve(mockUserVariable),
+  })
+) as jest.Mock;
+
+const mockUserVariable: UserVariable = {
+  id: 1,
+  name: 'Test Variable',
+  charts: {
+    lineChartWithSmoothing: {
+      highchartConfig: {} // Mock config
+    },
+    // Mock other chart types...
+  }
+  // Mock other fields...
+};
+
+describe('UserVariableCharts', () => {
+  it('renders charts successfully', async () => {
+    render(<UserVariableCharts variableId={1} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Variable')).toBeInTheDocument();
+      // Assert other chart elements are rendered
+    });
+  });
+
+  it('handles loading state', () => {
+    render(<UserVariableCharts variableId={1} />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument(); 
+  });
+
+  it('handles error state', async () => {
+    // Mock fetch error
+    global.fetch.mockImplementationOnce(() => Promise.reject('API is down'));
+
+    render(<UserVariableCharts variableId={1} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Error fetching data')).toBeInTheDocument();
+    });
+  });
+});

apps/nextjs/components/userVariable/user-variable-charts.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen, waitFor } from '@testing-library/react'; 
+import { UserVariableCharts } from './user-variable-charts';
+import { UserVariable } from '@/types/models/UserVariable';
+
+// Mock fetch
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve(mockUserVariable),
+  })
+) as jest.Mock;
+
+const mockUserVariable: UserVariable = {
+  id: 1,
+  name: 'Test Variable',
+  charts: {
+    lineChartWithSmoothing: {
+      highchartConfig: {} // Mock config 
+    },
+    // Mock other chart types...
+  }
+  // Mock other fields...
+};
+
+describe('UserVariableCharts', () => {
+  it('fetches data and renders charts', async () => {
+    render(<UserVariableCharts variableId={1} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Test Variable')).toBeInTheDocument();
+      // Assert chart elements are rendered  
+    });
+  });
+
+  it('shows loading spinner', () => {
+    render(<UserVariableCharts variableId={1} />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('handles fetch errors', async () => {
+    global.fetch.mockImplementationOnce(() => Promise.reject('API is down'));
+
+    render(<UserVariableCharts variableId={1} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Error fetching user variables')).toBeInTheDocument();
+    });
+  });  
+});

apps/nextjs/components/userVariable/user-variable-list.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { UserVariableList } from './user-variable-list'; 
+import { UserVariable } from '@/types/models/UserVariable';
+
+// Mock fetch request
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve(mockUserVariables),
+  })
+) as jest.Mock;
+
+const mockUserVariables: UserVariable[] = [
+  {
+    id: 1,
+    name: 'Variable 1',
+    // Mock other fields...
+  },
+  {
+    id: 2, 
+    name: 'Variable 2',
+    // Mock other fields...  
+  },
+];
+
+describe('UserVariableList', () => {
+  it('fetches and renders user variables', async () => {
+    render(<UserVariableList user={{ id: '1' }} searchParams={{}} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Variable 1')).toBeInTheDocument();
+      expect(screen.getByText('Variable 2')).toBeInTheDocument();
+    });
+  });
+
+  it('shows loading state', () => {
+    render(<UserVariableList user={{ id: '1' }} searchParams={{}} />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('handles empty variables', async () => {
+    global.fetch.mockImplementationOnce(() =>
+      Promise.resolve({
+        json: () => Promise.resolve([]),
+      })
+    );
+
+    render(<UserVariableList user={{ id: '1' }} searchParams={{}} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Get Started!')).toBeInTheDocument();
+    });
+  });
+
+  it('handles fetch errors', async () => {
+    global.fetch.mockImplementationOnce(() => Promise.reject('API is down'));
+
+    render(<UserVariableList user={{ id: '1' }} searchParams={{}} />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Error fetching user variables')).toBeInTheDocument();  
+    });
+  });
+});