datajunction-ui 0.0.75 → 0.0.77

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

@@ -0,0 +1,162 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { NodeList } from '../NodeList';
+
+jest.mock('../MyWorkspacePage.css', () => ({}));
+jest.mock('../../../components/NodeListActions', () => {
+  return function MockNodeListActions({ nodeName }) {
+    return <div data-testid="node-actions">{nodeName}</div>;
+  };
+});
+
+describe('<NodeList />', () => {
+  const mockNodes = [
+    {
+      name: 'default.test_metric',
+      type: 'METRIC',
+      current: {
+        displayName: 'Test Metric',
+        updatedAt: '2024-01-01T12:00:00Z',
+      },
+    },
+    {
+      name: 'default.test_dimension',
+      type: 'DIMENSION',
+      current: {
+        displayName: 'Test Dimension',
+        updatedAt: '2024-01-02T15:30:00Z',
+      },
+    },
+  ];
+
+  it('should render list of nodes', () => {
+    render(
+      <MemoryRouter>
+        <NodeList nodes={mockNodes} showUpdatedAt={false} />
+      </MemoryRouter>,
+    );
+
+    // Node names appear twice (in NodeDisplay and as full name)
+    expect(
+      screen.getAllByText('default.test_metric').length,
+    ).toBeGreaterThanOrEqual(1);
+    expect(
+      screen.getAllByText('default.test_dimension').length,
+    ).toBeGreaterThanOrEqual(1);
+  });
+
+  it('should render node actions for each node', () => {
+    render(
+      <MemoryRouter>
+        <NodeList nodes={mockNodes} showUpdatedAt={false} />
+      </MemoryRouter>,
+    );
+
+    const actions = screen.getAllByTestId('node-actions');
+    expect(actions).toHaveLength(2);
+    expect(actions[0]).toHaveTextContent('default.test_metric');
+    expect(actions[1]).toHaveTextContent('default.test_dimension');
+  });
+
+  it('should show updated timestamp when showUpdatedAt is true', () => {
+    render(
+      <MemoryRouter>
+        <NodeList nodes={mockNodes} showUpdatedAt={true} />
+      </MemoryRouter>,
+    );
+
+    // Should show formatted date
+    expect(screen.getByText(/Jan 1/)).toBeInTheDocument();
+    expect(screen.getByText(/Jan 2/)).toBeInTheDocument();
+  });
+
+  it('should not show updated timestamp when showUpdatedAt is false', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <NodeList nodes={mockNodes} showUpdatedAt={false} />
+      </MemoryRouter>,
+    );
+
+    // Should not show formatted date
+    expect(
+      container.querySelector('.node-list-item-updated'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should handle nodes without updatedAt gracefully', () => {
+    const nodesWithoutDate = [
+      {
+        name: 'default.no_date_metric',
+        type: 'METRIC',
+        current: {
+          displayName: 'No Date Metric',
+        },
+      },
+    ];
+
+    render(
+      <MemoryRouter>
+        <NodeList nodes={nodesWithoutDate} showUpdatedAt={true} />
+      </MemoryRouter>,
+    );
+
+    // Should render the node name (appears twice - in display name area and as full name)
+    const nodeNames = screen.getAllByText('default.no_date_metric');
+    expect(nodeNames.length).toBeGreaterThanOrEqual(1);
+    // Should not crash when no updatedAt
+  });
+
+  it('should render empty list when no nodes', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <NodeList nodes={[]} showUpdatedAt={false} />
+      </MemoryRouter>,
+    );
+
+    // Should render the container but with no items
+    expect(container.querySelector('.node-list')).toBeInTheDocument();
+    expect(screen.queryByTestId('node-actions')).not.toBeInTheDocument();
+  });
+
+  it('should format datetime correctly', () => {
+    const nodeWithDate = [
+      {
+        name: 'default.dated_metric',
+        type: 'METRIC',
+        current: {
+          displayName: 'Dated Metric',
+          updatedAt: '2024-03-15T14:30:00Z',
+        },
+      },
+    ];
+
+    const { container } = render(
+      <MemoryRouter>
+        <NodeList nodes={nodeWithDate} showUpdatedAt={true} />
+      </MemoryRouter>,
+    );
+
+    // Should show month, day, and time in the updated timestamp
+    const updatedSpan = container.querySelector('.node-list-item-updated');
+    expect(updatedSpan).toBeInTheDocument();
+    expect(updatedSpan.textContent).toMatch(/Mar 15/);
+  });
+
+  it('should apply correct CSS classes', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <NodeList nodes={mockNodes} showUpdatedAt={false} />
+      </MemoryRouter>,
+    );
+
+    expect(container.querySelector('.node-list')).toBeInTheDocument();
+    expect(container.querySelector('.node-list-item')).toBeInTheDocument();
+    expect(
+      container.querySelector('.node-list-item-content'),
+    ).toBeInTheDocument();
+    expect(
+      container.querySelector('.node-list-item-actions'),
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,204 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { NotificationsSection } from '../NotificationsSection';
+
+jest.mock('../MyWorkspacePage.css', () => ({}));
+
+describe('<NotificationsSection />', () => {
+  const mockNotifications = [
+    {
+      entity_name: 'default.test_metric',
+      entity_type: 'node',
+      activity_type: 'update',
+      created_at: '2024-01-01T00:00:00Z',
+      user: 'test.user@example.com',
+      node_type: 'metric',
+      display_name: 'Test Metric',
+      details: { version: 'v1.0' },
+    },
+    {
+      entity_name: 'default.test_metric',
+      entity_type: 'node',
+      activity_type: 'create',
+      created_at: '2024-01-02T00:00:00Z',
+      user: 'other.user@example.com',
+      node_type: 'metric',
+      display_name: 'Test Metric',
+    },
+  ];
+
+  it('should render loading state', () => {
+    render(
+      <MemoryRouter>
+        <NotificationsSection
+          notifications={[]}
+          username="test.user@example.com"
+          loading={true}
+        />
+      </MemoryRouter>,
+    );
+
+    // Should not show content when loading
+    expect(screen.queryByText('Test Metric')).not.toBeInTheDocument();
+  });
+
+  it('should render empty state when no notifications', () => {
+    render(
+      <MemoryRouter>
+        <NotificationsSection
+          notifications={[]}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('No notifications yet.')).toBeInTheDocument();
+    expect(
+      screen.getByText('Watch nodes to get notified of changes.'),
+    ).toBeInTheDocument();
+  });
+
+  it('should render notifications list', () => {
+    render(
+      <MemoryRouter>
+        <NotificationsSection
+          notifications={mockNotifications}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText('Test Metric')).toBeInTheDocument();
+  });
+
+  it('should group notifications by node', () => {
+    render(
+      <MemoryRouter>
+        <NotificationsSection
+          notifications={mockNotifications}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    // Both notifications are for the same node, should show "2 updates"
+    // Since current user is one of them, should show "you + 1 other"
+    expect(screen.getByText(/you \+ 1 other/)).toBeInTheDocument();
+    expect(screen.getByText(/2 updates/)).toBeInTheDocument();
+  });
+
+  it('should show "you" for current user', () => {
+    const singleNotification = [
+      {
+        entity_name: 'default.test_metric',
+        entity_type: 'node',
+        activity_type: 'update',
+        created_at: '2024-01-01T00:00:00Z',
+        user: 'test.user@example.com',
+        node_type: 'metric',
+        display_name: 'Test Metric',
+      },
+    ];
+
+    render(
+      <MemoryRouter>
+        <NotificationsSection
+          notifications={singleNotification}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText(/by you/)).toBeInTheDocument();
+  });
+
+  it('should link to revision when version is available', () => {
+    const notificationWithVersion = [
+      {
+        entity_name: 'default.test_metric',
+        entity_type: 'node',
+        activity_type: 'update',
+        created_at: '2024-01-01T00:00:00Z',
+        user: 'test.user@example.com',
+        node_type: 'metric',
+        display_name: 'Test Metric',
+        details: { version: 'v2.0' },
+      },
+    ];
+
+    render(
+      <MemoryRouter>
+        <NotificationsSection
+          notifications={notificationWithVersion}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    const link = screen.getByText('Test Metric').closest('a');
+    expect(link).toHaveAttribute(
+      'href',
+      '/nodes/default.test_metric/revisions/v2.0',
+    );
+  });
+
+  it('should link to history when version is not available', () => {
+    const notificationWithoutVersion = [
+      {
+        entity_name: 'default.test_metric',
+        entity_type: 'node',
+        activity_type: 'update',
+        created_at: '2024-01-01T00:00:00Z',
+        user: 'test.user@example.com',
+        node_type: 'metric',
+        display_name: 'Test Metric',
+      },
+    ];
+
+    render(
+      <MemoryRouter>
+        <NotificationsSection
+          notifications={notificationWithoutVersion}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    const link = screen.getByText('Test Metric').closest('a');
+    expect(link).toHaveAttribute('href', '/nodes/default.test_metric/history');
+  });
+
+  it('should limit notifications to 15', () => {
+    const manyNotifications = Array.from({ length: 20 }, (_, i) => ({
+      entity_name: `default.metric_${i}`,
+      entity_type: 'node',
+      activity_type: 'update',
+      created_at: '2024-01-01T00:00:00Z',
+      user: 'test.user@example.com',
+      node_type: 'metric',
+      display_name: `Metric ${i}`,
+    }));
+
+    render(
+      <MemoryRouter>
+        <NotificationsSection
+          notifications={manyNotifications}
+          username="test.user@example.com"
+          loading={false}
+        />
+      </MemoryRouter>,
+    );
+
+    // Should only render 15 notifications
+    expect(screen.getByText('Metric 0')).toBeInTheDocument();
+    expect(screen.getByText('Metric 14')).toBeInTheDocument();
+    expect(screen.queryByText('Metric 15')).not.toBeInTheDocument();
+  });
+});