datajunction-ui 0.0.1-rc.9 → 0.0.2-0.dev1

package/src/app/pages/NodePage/__tests__/ManageDimensionLinksDialog.test.jsx

@@ -0,0 +1,390 @@
+import React from 'react';
+import {
+  render,
+  fireEvent,
+  waitFor,
+  screen,
+  act,
+} from '@testing-library/react';
+import ManageDimensionLinksDialog from '../ManageDimensionLinksDialog';
+import DJClientContext from '../../../providers/djclient';
+
+// Mock window.location.reload
+delete window.location;
+window.location = { reload: jest.fn() };
+
+// Mock window.confirm
+window.confirm = jest.fn(() => true);
+
+const mockDjClient = {
+  DataJunctionAPI: {
+    linkDimension: jest.fn(),
+    unlinkDimension: jest.fn(),
+    addReferenceDimensionLink: jest.fn(),
+    removeReferenceDimensionLink: jest.fn(),
+  },
+  node: jest.fn().mockResolvedValue({
+    name: 'default.test_dimension',
+    columns: [{ name: 'id', type: 'int' }],
+  }),
+};
+
+describe('<ManageDimensionLinksDialog />', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    window.alert = jest.fn();
+    window.confirm.mockReturnValue(true);
+  });
+
+  const defaultProps = {
+    column: { name: 'test_column', type: 'int' },
+    node: { name: 'default.node1' },
+    dimensions: [
+      { value: 'default.dim1', label: 'dim1 (5 links)' },
+      { value: 'default.dim2', label: 'dim2 (3 links)' },
+    ],
+    fkLinks: [],
+    onSubmit: jest.fn(),
+  };
+
+  it('renders the toggle button', () => {
+    const { getByLabelText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    expect(getByLabelText('ManageDimensionLinksToggle')).toBeInTheDocument();
+  });
+
+  it('opens modal when toggle button is clicked', async () => {
+    const { getByLabelText, getByRole } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      expect(
+        getByRole('dialog', { name: 'ManageDimensionLinksDialog' }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('displays column name and type in header', async () => {
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog
+          column={{ name: 'test_column', type: 'varchar' }}
+          node={defaultProps.node}
+          dimensions={defaultProps.dimensions}
+          fkLinks={[]}
+          onSubmit={defaultProps.onSubmit}
+        />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      expect(getByText('test_column')).toBeInTheDocument();
+      expect(getByText('varchar')).toBeInTheDocument();
+    });
+  });
+
+  it('shows two tabs: FK Links and Reference Links', async () => {
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      expect(getByText('FK Links')).toBeInTheDocument();
+      expect(getByText('Reference Links')).toBeInTheDocument();
+    });
+  });
+
+  it('switches to reference links tab when clicked', async () => {
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      expect(getByText('Reference Links')).toBeInTheDocument();
+    });
+
+    fireEvent.click(getByText('Reference Links'));
+
+    await waitFor(() => {
+      expect(getByText('Dimension Node *')).toBeInTheDocument();
+      expect(getByText('Dimension Column *')).toBeInTheDocument();
+    });
+  });
+
+  it('displays FK links when provided', async () => {
+    const propsWithFkLinks = {
+      ...defaultProps,
+      fkLinks: ['default.dim1', 'default.dim2'],
+    };
+
+    const { getByLabelText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...propsWithFkLinks} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      // The FK Links tab should be displayed by default
+      expect(getByLabelText('ManageDimensionLinksToggle')).toBeInTheDocument();
+    });
+  });
+
+  it('shows FK Links form with select dimensions field', async () => {
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      expect(getByText('Select Dimensions')).toBeInTheDocument();
+      expect(getByText('Save')).toBeInTheDocument();
+    });
+  });
+
+  it('displays reference link form fields', async () => {
+    const { getByLabelText, getByText, getByPlaceholderText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      expect(getByText('Reference Links')).toBeInTheDocument();
+    });
+
+    // Switch to reference link tab
+    fireEvent.click(getByText('Reference Links'));
+
+    await waitFor(() => {
+      expect(getByText('Dimension Node *')).toBeInTheDocument();
+      expect(getByText('Dimension Column *')).toBeInTheDocument();
+      expect(
+        getByPlaceholderText('e.g., birth_date, registration_date'),
+      ).toBeInTheDocument();
+      expect(getByText('Add Link')).toBeInTheDocument();
+    });
+  });
+
+  it('handles removing reference link', async () => {
+    mockDjClient.DataJunctionAPI.removeReferenceDimensionLink.mockResolvedValue(
+      {
+        status: 200,
+      },
+    );
+
+    const propsWithReferenceLink = {
+      ...defaultProps,
+      referenceLink: {
+        dimension: 'default.dim1',
+        dimension_column: 'id',
+      },
+    };
+
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...propsWithReferenceLink} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      expect(getByText('Reference Links')).toBeInTheDocument();
+    });
+
+    // Switch to reference link tab
+    fireEvent.click(getByText('Reference Links'));
+
+    await waitFor(() => {
+      expect(getByText('Remove Link')).toBeInTheDocument();
+    });
+
+    // Remove the link
+    const removeButton = getByText('Remove Link');
+    await act(async () => {
+      fireEvent.click(removeButton);
+    });
+
+    await waitFor(() => {
+      expect(window.confirm).toHaveBeenCalledWith(
+        'Are you sure you want to remove this reference link?',
+      );
+      expect(
+        mockDjClient.DataJunctionAPI.removeReferenceDimensionLink,
+      ).toHaveBeenCalledWith('default.node1', 'test_column');
+      expect(window.location.reload).toHaveBeenCalled();
+    });
+  });
+
+  it('does not remove reference link when user cancels confirm dialog', async () => {
+    window.confirm.mockReturnValueOnce(false);
+
+    const propsWithReferenceLink = {
+      ...defaultProps,
+      referenceLink: {
+        dimension: 'default.dim1',
+        dimension_column: 'id',
+      },
+    };
+
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...propsWithReferenceLink} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+    fireEvent.click(getByText('Reference Links'));
+
+    await waitFor(() => {
+      expect(getByText('Remove Link')).toBeInTheDocument();
+    });
+
+    const removeButton = getByText('Remove Link');
+    await act(async () => {
+      fireEvent.click(removeButton);
+    });
+
+    expect(
+      mockDjClient.DataJunctionAPI.removeReferenceDimensionLink,
+    ).not.toHaveBeenCalled();
+  });
+
+  it('handles failed reference link removal', async () => {
+    mockDjClient.DataJunctionAPI.removeReferenceDimensionLink.mockResolvedValue(
+      {
+        status: 500,
+        json: { message: 'Server error' },
+      },
+    );
+
+    const propsWithReferenceLink = {
+      ...defaultProps,
+      referenceLink: {
+        dimension: 'default.dim1',
+        dimension_column: 'id',
+      },
+    };
+
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...propsWithReferenceLink} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+    fireEvent.click(getByText('Reference Links'));
+
+    await waitFor(() => {
+      expect(getByText('Remove Link')).toBeInTheDocument();
+    });
+
+    const removeButton = getByText('Remove Link');
+    await act(async () => {
+      fireEvent.click(removeButton);
+    });
+
+    await waitFor(() => {
+      expect(window.alert).toHaveBeenCalled();
+      expect(window.location.reload).not.toHaveBeenCalled();
+    });
+  });
+
+  it('shows Update Link button when reference link exists', async () => {
+    const propsWithReferenceLink = {
+      ...defaultProps,
+      referenceLink: {
+        dimension: 'default.dim1',
+        dimension_column: 'user_id',
+      },
+    };
+
+    const { getByLabelText, getByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...propsWithReferenceLink} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+    fireEvent.click(getByText('Reference Links'));
+
+    await waitFor(() => {
+      expect(getByText('Update Link')).toBeInTheDocument();
+      expect(getByText('Remove Link')).toBeInTheDocument();
+    });
+  });
+
+  it('shows validation error when submitting reference link without required fields', async () => {
+    const { getByLabelText, getByText, getAllByText } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+    fireEvent.click(getByText('Reference Links'));
+
+    await waitFor(() => {
+      expect(getByText('Add Link')).toBeInTheDocument();
+    });
+
+    // Try to submit without filling required fields
+    const saveButton = getByText('Add Link');
+    await act(async () => {
+      fireEvent.click(saveButton);
+    });
+
+    await waitFor(() => {
+      const requiredErrors = getAllByText('Required');
+      expect(requiredErrors.length).toBeGreaterThan(0);
+    });
+  });
+
+  it('closes modal when clicking backdrop', async () => {
+    const { getByLabelText, getByRole, queryByRole } = render(
+      <DJClientContext.Provider value={mockDjClient}>
+        <ManageDimensionLinksDialog {...defaultProps} />
+      </DJClientContext.Provider>,
+    );
+
+    fireEvent.click(getByLabelText('ManageDimensionLinksToggle'));
+
+    await waitFor(() => {
+      expect(getByRole('dialog')).toBeInTheDocument();
+    });
+
+    // Click the backdrop
+    const backdrop = getByRole('dialog').parentElement;
+    fireEvent.click(backdrop);
+
+    await waitFor(() => {
+      expect(queryByRole('dialog')).not.toBeInTheDocument();
+    });
+  });
+});

package/src/app/pages/NodePage/__tests__/NodeColumnTab.test.jsx

@@ -0,0 +1,166 @@
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+import NodeColumnTab from '../NodeColumnTab';
+
+describe('<NodeColumnTab />', () => {
+  const mockDjClient = {
+    node: jest.fn(),
+    columns: jest.fn(),
+    attributes: jest.fn(),
+    dimensions: jest.fn(),
+  };
+
+  const mockNodeColumns = [
+    {
+      name: 'repair_order_id',
+      display_name: 'Repair Order Id',
+      type: 'int',
+      attributes: [],
+      dimension: null,
+    },
+    {
+      name: 'municipality_id',
+      display_name: 'Municipality Id',
+      type: 'string',
+      attributes: [],
+      dimension: null,
+    },
+    {
+      name: 'hard_hat_id',
+      display_name: 'Hard Hat Id',
+      type: 'int',
+      attributes: [],
+      dimension: null,
+    },
+    {
+      name: 'order_date',
+      display_name: 'Order Date',
+      type: 'date',
+      attributes: [],
+      dimension: null,
+    },
+    {
+      name: 'required_date',
+      display_name: 'Required Date',
+      type: 'date',
+      attributes: [],
+      dimension: null,
+    },
+    {
+      name: 'dispatched_date',
+      display_name: 'Dispatched Date',
+      type: 'date',
+      attributes: [],
+      dimension: null,
+    },
+    {
+      name: 'dispatcher_id',
+      display_name: 'Dispatcher Id',
+      type: 'int',
+      attributes: [],
+      dimension: null,
+    },
+  ];
+
+  const mockNode = {
+    node_revision_id: 1,
+    node_id: 1,
+    type: 'source',
+    name: 'default.repair_orders',
+    display_name: 'Default: Repair Orders',
+    version: 'v1.0',
+    status: 'valid',
+    mode: 'published',
+    catalog: {
+      id: 1,
+      uuid: '0fc18295-e1a2-4c3c-b72a-894725c12488',
+      created_at: '2023-08-21T16:48:51.146121+00:00',
+      updated_at: '2023-08-21T16:48:51.146122+00:00',
+      extra_params: {},
+      name: 'warehouse',
+    },
+    schema_: 'roads',
+    table: 'repair_orders',
+    description: 'Repair orders',
+    query: null,
+    availability: null,
+    columns: mockNodeColumns,
+    updated_at: '2023-08-21T16:48:52.880498+00:00',
+    materializations: [],
+    parents: [],
+    dimension_links: [
+      {
+        dimension: {
+          name: 'default.contractor',
+        },
+        join_type: 'left',
+        join_sql:
+          'default.contractor.contractor_id = default.repair_orders.contractor_id',
+        join_cardinality: 'one_to_one',
+        role: 'contractor',
+        foreign_keys: {
+          'default.repair_orders.contractor_id':
+            'default.contractor.contractor_id',
+        },
+      },
+    ],
+  };
+
+  const mockAttributes = [
+    {
+      uniqueness_scope: [],
+      namespace: 'system',
+      name: 'primary_key',
+      description:
+        'Points to a column which is part of the primary key of the node',
+      allowed_node_types: ['source', 'transform', 'dimension'],
+      id: 1,
+    },
+    {
+      uniqueness_scope: [],
+      namespace: 'system',
+      name: 'dimension',
+      description: 'Points to a dimension attribute column',
+      allowed_node_types: ['source', 'transform'],
+      id: 2,
+    },
+  ];
+
+  const mockDimensions = ['default.contractor', 'default.hard_hat'];
+
+  beforeEach(() => {
+    // Reset the mocks before each test
+    mockDjClient.node.mockReset();
+    mockDjClient.columns.mockReset();
+    mockDjClient.attributes.mockReset();
+    mockDjClient.dimensions.mockReset();
+  });
+
+  it('renders node columns and dimension links', async () => {
+    mockDjClient.node.mockReturnValue(mockNode);
+    mockDjClient.columns.mockReturnValue(mockNodeColumns);
+    mockDjClient.attributes.mockReturnValue(mockAttributes);
+    mockDjClient.dimensions.mockReturnValue(mockDimensions);
+
+    render(<NodeColumnTab node={mockNode} djClient={mockDjClient} />);
+
+    await waitFor(() => {
+      // Displays the columns
+      for (const column of mockNode.columns) {
+        expect(screen.getByText(column.name)).toBeInTheDocument();
+        expect(screen.getByText(column.display_name)).toBeInTheDocument();
+      }
+
+      // Displays the dimension links
+      for (const dimensionLink of mockNode.dimension_links) {
+        const link = screen
+          .getByText(dimensionLink.dimension.name)
+          .closest('a');
+        expect(link).toHaveAttribute(
+          'href',
+          `/nodes/${dimensionLink.dimension.name}`,
+        );
+      }
+    });
+  });
+});

package/src/app/pages/NodePage/__tests__/NodeDependenciesTab.test.jsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import { render, waitFor, screen } from '@testing-library/react';
+import NodeDependenciesTab from '../NodeDependenciesTab';
+
+describe('<NodeDependenciesTab />', () => {
+  const mockDjClient = {
+    node: jest.fn(),
+    nodeDimensions: jest.fn(),
+    upstreams: jest.fn(),
+    downstreams: jest.fn(),
+  };
+
+  const mockNode = {
+    node_revision_id: 1,
+    node_id: 1,
+    type: 'source',
+    name: 'default.repair_orders',
+    display_name: 'Default: Repair Orders',
+    version: 'v1.0',
+    status: 'valid',
+    mode: 'published',
+    catalog: {
+      id: 1,
+      uuid: '0fc18295-e1a2-4c3c-b72a-894725c12488',
+      created_at: '2023-08-21T16:48:51.146121+00:00',
+      updated_at: '2023-08-21T16:48:51.146122+00:00',
+      extra_params: {},
+      name: 'warehouse',
+    },
+    schema_: 'roads',
+    table: 'repair_orders',
+    description: 'Repair orders',
+    query: null,
+    availability: null,
+    columns: [
+      {
+        name: 'repair_order_id',
+        type: 'int',
+        attributes: [],
+        dimension: null,
+      },
+      {
+        name: 'municipality_id',
+        type: 'string',
+        attributes: [],
+        dimension: null,
+      },
+      {
+        name: 'hard_hat_id',
+        type: 'int',
+        attributes: [],
+        dimension: null,
+      },
+      {
+        name: 'order_date',
+        type: 'date',
+        attributes: [],
+        dimension: null,
+      },
+      {
+        name: 'required_date',
+        type: 'date',
+        attributes: [],
+        dimension: null,
+      },
+      {
+        name: 'dispatched_date',
+        type: 'date',
+        attributes: [],
+        dimension: null,
+      },
+      {
+        name: 'dispatcher_id',
+        type: 'int',
+        attributes: [],
+        dimension: null,
+      },
+    ],
+    updated_at: '2023-08-21T16:48:52.880498+00:00',
+    materializations: [],
+    parents: [],
+    dimension_links: [
+      {
+        dimension: {
+          name: 'default.contractor',
+        },
+        join_type: 'left',
+        join_sql:
+          'default.contractor.contractor_id = default.repair_orders.contractor_id',
+        join_cardinality: 'one_to_one',
+        role: 'contractor',
+      },
+    ],
+  };
+
+  const mockDimensions = [
+    {
+      properties: [],
+      name: 'default.dispatcher.company_name',
+      node_display_name: 'Default: Dispatcher',
+      node_name: 'default.dispatcher',
+      path: ['default.repair_orders_fact.dispatcher_id'],
+      type: 'string',
+    },
+    {
+      properties: ['primary_key'],
+      name: 'default.dispatcher.dispatcher_id',
+      node_display_name: 'Default: Dispatcher',
+      node_name: 'default.dispatcher',
+      path: ['default.repair_orders_fact.dispatcher_id'],
+      type: 'int',
+    },
+    {
+      properties: [],
+      name: 'default.hard_hat.city',
+      node_display_name: 'Default: Hard Hat',
+      node_name: 'default.hard_hat',
+      path: ['default.repair_orders_fact.hard_hat_id'],
+      type: 'string',
+    },
+    {
+      properties: ['primary_key'],
+      name: 'default.hard_hat.hard_hat_id',
+      node_display_name: 'Default: Hard Hat',
+      node_name: 'default.hard_hat',
+      path: ['default.repair_orders_fact.hard_hat_id'],
+      type: 'int',
+    },
+  ];
+
+  beforeEach(() => {
+    // Reset the mocks before each test
+    mockDjClient.nodeDimensions.mockReset();
+    mockDjClient.upstreams.mockReset();
+    mockDjClient.downstreams.mockReset();
+  });
+
+  it('renders nodes with dimensions', async () => {
+    mockDjClient.nodeDimensions.mockReturnValue(mockDimensions);
+    mockDjClient.upstreams.mockReturnValue([mockNode]);
+    mockDjClient.downstreams.mockReturnValue([mockNode]);
+    render(<NodeDependenciesTab node={mockNode} djClient={mockDjClient} />);
+    await waitFor(() => {
+      for (const dimension of mockDimensions) {
+        const link = screen.getByText(dimension.node_display_name).closest('a');
+        expect(link).toHaveAttribute('href', `/nodes/${dimension.node_name}`);
+        expect(screen.getByText(dimension.name)).toBeInTheDocument();
+      }
+    });
+  });
+});