datajunction-ui 0.0.75 → 0.0.76

package/src/app/pages/MyWorkspacePage/__tests__/ActiveBranchesSection.test.jsx

@@ -0,0 +1,295 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { ActiveBranchesSection } from '../ActiveBranchesSection';
+import DJClientContext from '../../../providers/djclient';
+
+jest.mock('../MyWorkspacePage.css', () => ({}));
+jest.mock('../../../utils/date', () => ({
+  formatRelativeTime: () => '2d ago',
+}));
+
+describe('<ActiveBranchesSection />', () => {
+  const mockDjClient = {
+    listNodesForLanding: jest.fn().mockResolvedValue({
+      data: { findNodesPaginated: { edges: [] } },
+    }),
+  };
+
+  const renderWithContext = props => {
+    return render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <MemoryRouter>
+          <ActiveBranchesSection {...props} />
+        </MemoryRouter>
+      </DJClientContext.Provider>,
+    );
+  };
+
+  const mockOwnedNodes = [
+    {
+      name: 'myproject.main.users',
+      gitInfo: {
+        repo: 'myorg/myrepo',
+        branch: 'main',
+        defaultBranch: 'main',
+        parentNamespace: 'myproject',
+      },
+      current: { updatedAt: '2024-01-01T10:00:00Z' },
+    },
+    {
+      name: 'myproject.feature-1.orders',
+      gitInfo: {
+        repo: 'myorg/myrepo',
+        branch: 'feature-1',
+        defaultBranch: 'main',
+        parentNamespace: 'myproject',
+      },
+      current: { updatedAt: '2024-01-02T10:00:00Z' },
+    },
+    {
+      name: 'otherproject.main.products',
+      gitInfo: {
+        repo: 'myorg/otherrepo',
+        branch: 'main',
+        defaultBranch: 'main',
+        parentNamespace: 'otherproject',
+      },
+      current: { updatedAt: '2024-01-03T10:00:00Z' },
+    },
+  ];
+
+  const mockRecentlyEdited = [
+    {
+      name: 'myproject.feature-1.orders',
+      gitInfo: {
+        repo: 'myorg/myrepo',
+        branch: 'feature-1',
+        defaultBranch: 'main',
+        parentNamespace: 'myproject',
+      },
+      current: { updatedAt: '2024-01-02T10:00:00Z' },
+    },
+  ];
+
+  it('should render loading state', () => {
+    renderWithContext({
+      ownedNodes: [],
+      recentlyEdited: [],
+      loading: true,
+    });
+
+    expect(screen.getByText('Git Namespaces')).toBeInTheDocument();
+  });
+
+  it('should render empty state when no branches', async () => {
+    renderWithContext({
+      ownedNodes: [],
+      recentlyEdited: [],
+      loading: false,
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('No git-managed namespaces.'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('should group nodes by base namespace', async () => {
+    renderWithContext({
+      ownedNodes: mockOwnedNodes,
+      recentlyEdited: mockRecentlyEdited,
+      loading: false,
+    });
+
+    // Should show both base namespaces
+    await waitFor(() => {
+      expect(screen.getByText('myproject')).toBeInTheDocument();
+      expect(screen.getByText('otherproject')).toBeInTheDocument();
+    });
+  });
+
+  it('should show repo and branch names', async () => {
+    renderWithContext({
+      ownedNodes: mockOwnedNodes,
+      recentlyEdited: mockRecentlyEdited,
+      loading: false,
+    });
+
+    // Should show repos
+    await waitFor(() => {
+      expect(screen.getByText('myorg/myrepo')).toBeInTheDocument();
+      expect(screen.getByText('myorg/otherrepo')).toBeInTheDocument();
+    });
+
+    // Should show branches (there can be multiple "main" branches)
+    await waitFor(() => {
+      expect(screen.getAllByText('main').length).toBeGreaterThan(0);
+      expect(screen.getByText('feature-1')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle nodes without git info', async () => {
+    const nodesWithoutGit = [
+      {
+        name: 'default.node1',
+        current: { updatedAt: '2024-01-01T10:00:00Z' },
+      },
+      ...mockOwnedNodes,
+    ];
+
+    renderWithContext({
+      ownedNodes: nodesWithoutGit,
+      recentlyEdited: [],
+      loading: false,
+    });
+
+    // Should still render the git-managed nodes
+    await waitFor(() => {
+      expect(screen.getByText('myproject')).toBeInTheDocument();
+      expect(screen.getByText('myorg/myrepo')).toBeInTheDocument();
+    });
+  });
+
+  it('should render with many namespaces without crashing', async () => {
+    const manyNamespaces = Array.from({ length: 10 }, (_, i) => ({
+      name: `project${i}.main.node`,
+      gitInfo: {
+        repo: `org/repo${i}`,
+        branch: 'main',
+        defaultBranch: 'main',
+        parentNamespace: `project${i}`,
+      },
+      current: { updatedAt: '2024-01-01T10:00:00Z' },
+    }));
+
+    renderWithContext({
+      ownedNodes: manyNamespaces,
+      recentlyEdited: [],
+      loading: false,
+    });
+
+    // Should render component successfully
+    expect(screen.getByText('Git Namespaces')).toBeInTheDocument();
+    // Should show some of the namespaces (maxDisplay is 3)
+    await waitFor(() => {
+      expect(screen.getByText('project0')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle nodes without parentNamespace (fallback parsing)', async () => {
+    const nodesWithoutParent = [
+      {
+        name: 'repo1.branch1.node1',
+        gitInfo: {
+          repo: 'myorg/myrepo',
+          branch: 'branch1',
+          defaultBranch: 'main',
+          // No parentNamespace - should fallback to parsing
+        },
+        current: { updatedAt: '2024-01-01T10:00:00Z' },
+      },
+    ];
+
+    renderWithContext({
+      ownedNodes: nodesWithoutParent,
+      recentlyEdited: [],
+      loading: false,
+    });
+
+    await waitFor(() => {
+      // Should extract "repo1" as base namespace
+      expect(screen.getByText('repo1')).toBeInTheDocument();
+      expect(screen.getByText('myorg/myrepo')).toBeInTheDocument();
+    });
+  });
+
+  it('should track most recent activity across multiple nodes', async () => {
+    const nodesWithDifferentTimes = [
+      {
+        name: 'myproject.main.node1',
+        gitInfo: {
+          repo: 'myorg/myrepo',
+          branch: 'main',
+          defaultBranch: 'main',
+          parentNamespace: 'myproject',
+        },
+        current: { updatedAt: '2024-01-01T10:00:00Z' },
+      },
+      {
+        name: 'myproject.main.node2',
+        gitInfo: {
+          repo: 'myorg/myrepo',
+          branch: 'main',
+          defaultBranch: 'main',
+          parentNamespace: 'myproject',
+        },
+        current: { updatedAt: '2024-01-05T10:00:00Z' }, // More recent
+      },
+    ];
+
+    renderWithContext({
+      ownedNodes: nodesWithDifferentTimes,
+      recentlyEdited: [],
+      loading: false,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('myproject')).toBeInTheDocument();
+      // Should show the more recent update time
+      expect(screen.getByText(/updated 2d ago/)).toBeInTheDocument();
+    });
+  });
+
+  it('should handle API errors when fetching counts', async () => {
+    const consoleErrorSpy = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+
+    mockDjClient.listNodesForLanding.mockRejectedValueOnce(
+      new Error('API error'),
+    );
+
+    renderWithContext({
+      ownedNodes: mockOwnedNodes,
+      recentlyEdited: [],
+      loading: false,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('myproject')).toBeInTheDocument();
+    });
+
+    // Should still render despite API error
+    expect(consoleErrorSpy).toHaveBeenCalled();
+    consoleErrorSpy.mockRestore();
+  });
+
+  it('should show default branch even when user has no nodes on it', async () => {
+    const nodesOnlyFeatureBranch = [
+      {
+        name: 'myproject.feature.node1',
+        gitInfo: {
+          repo: 'myorg/myrepo',
+          branch: 'feature',
+          defaultBranch: 'main',
+          parentNamespace: 'myproject',
+        },
+        current: { updatedAt: '2024-01-01T10:00:00Z' },
+      },
+    ];
+
+    renderWithContext({
+      ownedNodes: nodesOnlyFeatureBranch,
+      recentlyEdited: [],
+      loading: false,
+    });
+
+    await waitFor(() => {
+      // Should show both the feature branch and the default main branch
+      expect(screen.getAllByText('main').length).toBeGreaterThan(0);
+      expect(screen.getByText('feature')).toBeInTheDocument();
+    });
+  });
+});

package/src/app/pages/MyWorkspacePage/__tests__/CollectionsSection.test.jsx

@@ -0,0 +1,278 @@
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { CollectionsSection } from '../CollectionsSection';
+import DJClientContext from '../../../providers/djclient';
+
+jest.mock('../MyWorkspacePage.css', () => ({}));
+
+describe('<CollectionsSection />', () => {
+  const mockDjClient = {
+    listAllCollections: jest.fn(),
+  };
+
+  const mockCollections = [
+    {
+      name: 'my_collection',
+      description: 'My test collection',
+      nodeCount: 5,
+      createdBy: { username: 'test.user@example.com' },
+    },
+    {
+      name: 'other_collection',
+      description: 'Another collection',
+      nodeCount: 10,
+      createdBy: { username: 'other.user@example.com' },
+    },
+  ];
+
+  const mockCurrentUser = {
+    username: 'test.user@example.com',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const renderWithContext = props => {
+    return render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <MemoryRouter>
+          <CollectionsSection {...props} />
+        </MemoryRouter>
+      </DJClientContext.Provider>,
+    );
+  };
+
+  it('should render loading state', () => {
+    mockDjClient.listAllCollections.mockResolvedValue({
+      data: { listCollections: [] },
+    });
+
+    renderWithContext({
+      collections: [],
+      loading: true,
+      currentUser: mockCurrentUser,
+    });
+
+    expect(screen.getByText('Collections')).toBeInTheDocument();
+  });
+
+  it('should fetch and display all collections', async () => {
+    mockDjClient.listAllCollections.mockResolvedValue({
+      data: { listCollections: mockCollections },
+    });
+
+    renderWithContext({
+      collections: [],
+      loading: false,
+      currentUser: mockCurrentUser,
+    });
+
+    await waitFor(() => {
+      expect(mockDjClient.listAllCollections).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('my_collection')).toBeInTheDocument();
+      expect(screen.getByText('other_collection')).toBeInTheDocument();
+    });
+  });
+
+  it('should show owner as "you" for current user collections', async () => {
+    mockDjClient.listAllCollections.mockResolvedValue({
+      data: { listCollections: mockCollections },
+    });
+
+    renderWithContext({
+      collections: [],
+      loading: false,
+      currentUser: mockCurrentUser,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('by you')).toBeInTheDocument();
+    });
+  });
+
+  it('should show username for other user collections', async () => {
+    mockDjClient.listAllCollections.mockResolvedValue({
+      data: { listCollections: mockCollections },
+    });
+
+    renderWithContext({
+      collections: [],
+      loading: false,
+      currentUser: mockCurrentUser,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('by other.user')).toBeInTheDocument();
+    });
+  });
+
+  it('should display node counts', async () => {
+    mockDjClient.listAllCollections.mockResolvedValue({
+      data: { listCollections: mockCollections },
+    });
+
+    renderWithContext({
+      collections: [],
+      loading: false,
+      currentUser: mockCurrentUser,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('5 nodes')).toBeInTheDocument();
+      expect(screen.getByText('10 nodes')).toBeInTheDocument();
+    });
+  });
+
+  it('should render empty state when no collections', async () => {
+    mockDjClient.listAllCollections.mockResolvedValue({
+      data: { listCollections: [] },
+    });
+
+    renderWithContext({
+      collections: [],
+      loading: false,
+      currentUser: mockCurrentUser,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('No collections yet')).toBeInTheDocument();
+    });
+  });
+
+  it('should display user and other collections', async () => {
+    const collections = [
+      {
+        name: 'other_first',
+        description: 'Other collection',
+        createdBy: { username: 'other@example.com' },
+        nodeCount: 1,
+      },
+      {
+        name: 'my_first',
+        description: 'My collection',
+        createdBy: { username: 'test.user@example.com' },
+        nodeCount: 2,
+      },
+    ];
+
+    mockDjClient.listAllCollections.mockResolvedValue({
+      data: { listCollections: collections },
+    });
+
+    renderWithContext({
+      collections: [],
+      loading: false,
+      currentUser: mockCurrentUser,
+    });
+
+    await waitFor(() => {
+      // Both collections should be displayed
+      expect(screen.getByText('my_first')).toBeInTheDocument();
+      expect(screen.getByText('other_first')).toBeInTheDocument();
+    });
+  });
+
+  it('should limit display to 8 collections', async () => {
+    const manyCollections = Array.from({ length: 12 }, (_, i) => ({
+      name: `collection_${i}`,
+      nodeCount: i,
+      createdBy: { username: 'test@example.com' },
+    }));
+
+    mockDjClient.listAllCollections.mockResolvedValue({
+      data: { listCollections: manyCollections },
+    });
+
+    renderWithContext({
+      collections: [],
+      loading: false,
+      currentUser: mockCurrentUser,
+    });
+
+    await waitFor(() => {
+      const links = screen.getAllByRole('link');
+      // Should have at most 9 links (8 collections + 1 "Create Collection")
+      expect(links.length).toBeLessThanOrEqual(9);
+    });
+  });
+
+  it('should handle API errors gracefully', async () => {
+    mockDjClient.listAllCollections.mockRejectedValue(new Error('API error'));
+
+    const fallbackCollections = [
+      {
+        name: 'fallback_collection',
+        nodeCount: 1,
+        createdBy: { username: 'test@example.com' },
+      },
+    ];
+
+    renderWithContext({
+      collections: fallbackCollections,
+      loading: false,
+      currentUser: mockCurrentUser,
+    });
+
+    await waitFor(() => {
+      // Should fall back to props collections
+      expect(screen.getByText('fallback_collection')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle collections without createdBy', async () => {
+    const collectionsWithoutOwner = [
+      {
+        name: 'no_owner',
+        nodeCount: 1,
+        createdBy: null,
+      },
+    ];
+
+    mockDjClient.listAllCollections.mockResolvedValue({
+      data: { listCollections: collectionsWithoutOwner },
+    });
+
+    renderWithContext({
+      collections: [],
+      loading: false,
+      currentUser: mockCurrentUser,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('by unknown')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle hover interactions on collection cards', async () => {
+    mockDjClient.listAllCollections.mockResolvedValue({
+      data: { listCollections: mockCollections },
+    });
+
+    renderWithContext({
+      collections: [],
+      loading: false,
+      currentUser: mockCurrentUser,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('my_collection')).toBeInTheDocument();
+    });
+
+    const collectionLink = screen.getByText('my_collection').closest('a');
+
+    // Test mouse enter - should change styles
+    if (collectionLink) {
+      fireEvent.mouseEnter(collectionLink);
+      expect(collectionLink).toBeInTheDocument();
+
+      // Test mouse leave - should reset styles
+      fireEvent.mouseLeave(collectionLink);
+      expect(collectionLink).toBeInTheDocument();
+    }
+  });
+});