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

package/src/app/pages/AddEditNodePage/__tests__/AddEditNodePageFormSuccess.test.jsx

@@ -0,0 +1,291 @@
+import React from 'react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
+import fetchMock from 'jest-fetch-mock';
+import userEvent from '@testing-library/user-event';
+import {
+  initializeMockDJClient,
+  renderCreateMetric,
+  renderCreateNode,
+  renderEditNode,
+  renderEditTransformNode,
+  testElement,
+} from './index.test';
+import { mocks } from '../../../../mocks/mockNodes';
+import { render } from '../../../../setupTests';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import DJClientContext from '../../../providers/djclient';
+import { AddEditNodePage } from '../index';
+
+describe('AddEditNodePage submission succeeded', () => {
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+  });
+
+  it('for creating a dimension/transform node', async () => {
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.createNode.mockReturnValue({
+      status: 200,
+      json: { name: 'default.some_test_dim' },
+    });
+
+    mockDjClient.DataJunctionAPI.tagsNode.mockReturnValue({
+      status: 200,
+      json: { message: 'Success' },
+    });
+
+    mockDjClient.DataJunctionAPI.listTags.mockReturnValue([
+      { name: 'purpose', display_name: 'Purpose' },
+      { name: 'intent', display_name: 'Intent' },
+    ]);
+
+    const element = testElement(mockDjClient);
+    const { container } = renderCreateNode(element);
+
+    await userEvent.type(
+      screen.getByLabelText('Display Name *'),
+      'Some Test Dim',
+    );
+    await userEvent.type(
+      screen.getByLabelText('Query *'),
+      'SELECT a, b, c FROM test',
+    );
+    await userEvent.click(screen.getByText('Create dimension'));
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.createNode).toBeCalled();
+      expect(mockDjClient.DataJunctionAPI.createNode).toBeCalledWith(
+        'dimension',
+        'default.some_test_dim',
+        'Some Test Dim',
+        '',
+        'SELECT a, b, c FROM test',
+        'published',
+        'default',
+        null,
+        undefined,
+        undefined,
+        undefined,
+        null,
+      );
+      expect(screen.getByText(/default.some_test_dim/)).toBeInTheDocument();
+    });
+
+    // After successful creation, it should return a success message
+    expect(screen.getByTestId('success')).toHaveTextContent(
+      'Successfully created node default.some_test_dim',
+    );
+  }, 60000);
+
+  it('for creating a metric node', async () => {
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.createNode.mockReturnValue({
+      status: 200,
+      json: { name: 'default.some_test_metric' },
+    });
+
+    mockDjClient.DataJunctionAPI.tagsNode.mockReturnValue({
+      status: 200,
+      json: { message: 'Success' },
+    });
+
+    mockDjClient.DataJunctionAPI.nodesWithType
+      .mockReturnValueOnce(['default.test1'])
+      .mockReturnValueOnce(['default.test2'])
+      .mockReturnValueOnce([]);
+
+    mockDjClient.DataJunctionAPI.listTags.mockReturnValue([
+      { name: 'purpose', display_name: 'Purpose' },
+      { name: 'intent', display_name: 'Intent' },
+    ]);
+
+    mockDjClient.DataJunctionAPI.listMetricMetadata.mockReturnValue(
+      mocks.metricMetadata,
+    );
+
+    mockDjClient.DataJunctionAPI.whoami.mockReturnValue({
+      id: 123,
+      username: 'test_user',
+    });
+
+    const element = testElement(mockDjClient);
+    const { container } = renderCreateMetric(element);
+
+    await userEvent.type(
+      screen.getByLabelText('Display Name *'),
+      'Some Test Metric',
+    );
+    const selectUpstream = screen.getByTestId('select-upstream-node');
+    fireEvent.keyDown(selectUpstream.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('default.repair_orders'));
+
+    await userEvent.type(
+      screen.getByLabelText('Aggregate Expression *'),
+      'SUM(a)',
+    );
+    await userEvent.click(screen.getByText('Create metric'));
+
+    await waitFor(
+      () => {
+        expect(mockDjClient.DataJunctionAPI.createNode).toBeCalled();
+        expect(mockDjClient.DataJunctionAPI.createNode).toBeCalledWith(
+          'metric',
+          'default.some_test_metric',
+          'Some Test Metric',
+          '',
+          'SELECT SUM(a) \n FROM default.repair_orders',
+          'published',
+          'default',
+          null,
+          undefined,
+          undefined,
+          undefined,
+          null,
+        );
+        expect(
+          screen.getByText(/default.some_test_metric/),
+        ).toBeInTheDocument();
+      },
+      { timeout: 10000 },
+    );
+
+    // After successful creation, it should return a success message
+    expect(screen.getByTestId('success')).toHaveTextContent(
+      'Successfully created node default.some_test_metric',
+    );
+  }, 60000);
+
+  it('for editing a transform or dimension node', async () => {
+    const mockDjClient = initializeMockDJClient();
+
+    mockDjClient.DataJunctionAPI.getNodeForEditing.mockReturnValue(
+      mocks.mockGetTransformNode,
+    );
+    mockDjClient.DataJunctionAPI.patchNode = jest.fn();
+    mockDjClient.DataJunctionAPI.patchNode.mockReturnValue({
+      status: 201,
+      json: { name: 'default.repair_order_transform', type: 'transform' },
+    });
+
+    mockDjClient.DataJunctionAPI.tagsNode.mockReturnValue({
+      status: 200,
+      json: { message: 'Success' },
+    });
+
+    mockDjClient.DataJunctionAPI.listTags.mockReturnValue([
+      { name: 'purpose', display_name: 'Purpose' },
+      { name: 'intent', display_name: 'Intent' },
+    ]);
+
+    const element = testElement(mockDjClient);
+    const { getByTestId } = renderEditTransformNode(element);
+
+    await userEvent.type(screen.getByLabelText('Display Name *'), '!!!');
+    await userEvent.type(screen.getByLabelText('Description'), '!!!');
+    await userEvent.click(screen.getByText('Save'));
+
+    const selectTags = getByTestId('select-tags');
+    fireEvent.keyDown(selectTags.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Purpose'));
+
+    await waitFor(async () => {
+      expect(mockDjClient.DataJunctionAPI.patchNode).toBeCalledTimes(1);
+      expect(mockDjClient.DataJunctionAPI.patchNode).toBeCalledWith(
+        'default.repair_order_transform',
+        'Default: Repair Order Transform!!!',
+        'Repair order dimension!!!',
+        'SELECT repair_order_id, municipality_id, hard_hat_id, dispatcher_id FROM default.repair_orders',
+        'published',
+        [],
+        '',
+        '',
+        '',
+        undefined,
+        ['dj'],
+        null,
+      );
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledTimes(1);
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
+        'default.repair_order_transform',
+        [],
+      );
+
+      expect(mockDjClient.DataJunctionAPI.listMetricMetadata).toBeCalledTimes(
+        0,
+      );
+      expect(
+        await screen.getByText(/Successfully updated transform node/),
+      ).toBeInTheDocument();
+    });
+  }, 1000000);
+
+  it('for editing a metric node', async () => {
+    const mockDjClient = initializeMockDJClient();
+
+    mockDjClient.DataJunctionAPI.getNodeForEditing.mockReturnValue(
+      mocks.mockGetMetricNode,
+    );
+    mockDjClient.DataJunctionAPI.patchNode = jest.fn();
+    mockDjClient.DataJunctionAPI.patchNode.mockReturnValue({
+      status: 201,
+      json: { name: 'default.num_repair_orders', type: 'metric' },
+    });
+
+    mockDjClient.DataJunctionAPI.tagsNode.mockReturnValue({
+      status: 200,
+      json: { message: 'Success' },
+    });
+
+    mockDjClient.DataJunctionAPI.listTags.mockReturnValue([
+      { name: 'purpose', display_name: 'Purpose' },
+      { name: 'intent', display_name: 'Intent' },
+    ]);
+
+    mockDjClient.DataJunctionAPI.whoami.mockReturnValue({
+      id: 123,
+      username: 'test_user',
+    });
+
+    const element = testElement(mockDjClient);
+    const { getByTestId } = renderEditNode(element);
+
+    await userEvent.type(screen.getByLabelText('Display Name *'), '!!!');
+    await userEvent.type(screen.getByLabelText('Description'), '!!!');
+    await userEvent.click(screen.getByText('Save'));
+
+    const selectTags = getByTestId('select-tags');
+    fireEvent.keyDown(selectTags.firstChild, { key: 'ArrowDown' });
+    fireEvent.click(screen.getByText('Purpose'));
+
+    await waitFor(async () => {
+      expect(mockDjClient.DataJunctionAPI.patchNode).toBeCalledTimes(1);
+      expect(mockDjClient.DataJunctionAPI.patchNode).toBeCalledWith(
+        'default.num_repair_orders',
+        'Default: Num Repair Orders!!!',
+        'Number of repair orders!!!',
+        'SELECT count(repair_order_id) \n FROM default.repair_orders',
+        'published',
+        ['repair_order_id', 'country'],
+        'neutral',
+        'unitless',
+        5,
+        undefined,
+        ['dj'],
+        { key1: 'value1', key2: 'value2' },
+      );
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledTimes(1);
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
+        'default.num_repair_orders',
+        ['purpose'],
+      );
+
+      expect(mockDjClient.DataJunctionAPI.listMetricMetadata).toBeCalledTimes(
+        1,
+      );
+      expect(
+        await screen.getByText(/Successfully updated metric node/),
+      ).toBeInTheDocument();
+    });
+  }, 1000000);
+});

package/src/app/pages/AddEditNodePage/__tests__/FormikSelect.test.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Formik, Form } from 'formik';
+import { FormikSelect } from '../FormikSelect';
+
+describe('FormikSelect', () => {
+  const namespaces = [
+    { value: 'default', label: 'default' },
+    { value: 'basic', label: 'basic' },
+    { value: 'basic.one', label: 'basic.one' },
+    { value: 'basic.two', label: 'basic.two' },
+  ];
+
+  const singleSelect = () => {
+    const utils = render(
+      <Formik initialValues={{ selectedOption: '' }} onSubmit={jest.fn()}>
+        <Form>
+          <FormikSelect
+            selectOptions={namespaces}
+            formikFieldName="namespace"
+            placeholder="Choose Namespace"
+            defaultValue={{
+              value: 'basic.one',
+              label: 'basic.one',
+            }}
+          />
+        </Form>
+      </Formik>,
+    );
+
+    const selectInput = screen.getByRole('combobox');
+    return {
+      ...utils,
+      selectInput,
+    };
+  };
+
+  const multiSelect = () => {
+    const utils = render(
+      <Formik initialValues={{ selectedOption: '' }} onSubmit={jest.fn()}>
+        <Form>
+          <FormikSelect
+            selectOptions={namespaces}
+            formikFieldName="namespace"
+            placeholder="Choose Namespace"
+            defaultValue={{
+              value: 'basic.one',
+              label: 'basic.one',
+            }}
+            isMulti={true}
+          />
+        </Form>
+      </Formik>,
+    );
+
+    const selectInput = screen.getByRole('combobox');
+    return {
+      ...utils,
+      selectInput,
+    };
+  };
+
+  it('renders the single select component with provided options', () => {
+    singleSelect();
+    userEvent.click(screen.getByRole('combobox')); // to open the dropdown
+    expect(screen.getByText('basic.one')).toBeInTheDocument();
+  });
+
+  it('renders the multi-select component with provided options', () => {
+    multiSelect();
+    userEvent.click(screen.getByRole('combobox')); // to open the dropdown
+    expect(screen.getByText('basic.one')).toBeInTheDocument();
+  });
+});

package/src/app/pages/AddEditNodePage/__tests__/FullNameField.test.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { Formik, Form } from 'formik';
+import { FullNameField } from '../FullNameField';
+
+describe('FullNameField', () => {
+  const setup = initialValues => {
+    return render(
+      <Formik initialValues={initialValues} onSubmit={jest.fn()}>
+        <Form>
+          <FullNameField name="full_name" />
+        </Form>
+      </Formik>,
+    );
+  };
+
+  it('generates the full name based on namespace and display name', () => {
+    setup({ namespace: 'cats', display_name: 'Jasper the Cat' });
+    const fullNameInput = screen.getByRole('textbox');
+    waitFor(() => {
+      expect(fullNameInput.value).toBe('cats.jasper_the_cat');
+    });
+  });
+
+  it('does not set the full name if namespace or display name is missing', () => {
+    setup({ namespace: '', display_name: '' });
+
+    const fullNameInput = screen.getByRole('textbox');
+    expect(fullNameInput.value).toBe('');
+  });
+});

package/src/app/pages/AddEditNodePage/__tests__/NodeQueryField.test.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Formik, Form } from 'formik';
+import { NodeQueryField } from '../NodeQueryField';
+
+describe('NodeQueryField', () => {
+  const mockDjClient = {
+    nodes: jest.fn(),
+    node: jest.fn(),
+  };
+  const renderWithFormik = (djClient = mockDjClient) => {
+    return render(
+      <Formik initialValues={{ query: '' }} onSubmit={jest.fn()}>
+        <Form>
+          <NodeQueryField djClient={djClient} />
+        </Form>
+      </Formik>,
+    );
+  };
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders without crashing', () => {
+    renderWithFormik();
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+});

package/src/app/pages/AddEditNodePage/__tests__/__snapshots__/AddEditNodePageFormFailed.test.jsx.snap

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddEditNodePage Create node page renders with the selected nodeType and namespace 1`] = `HTMLCollection []`;
+
+exports[`AddEditNodePage submission failed for creating a node 1`] = `
+HTMLCollection [
+  <div
+    class="message alert"
+    data-testid="failure"
+  >
+    <svg
+      height="2em"
+      version="1.1"
+      viewBox="0 0 24 24"
+      width="2em"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <title>
+        alert_fill
+      </title>
+      <g
+        fill="none"
+        fill-rule="evenodd"
+        id="page-1"
+        stroke="none"
+        stroke-width="1"
+      >
+        <g
+          fill-rule="nonzero"
+          id="System"
+          transform="translate(-48.000000, -48.000000)"
+        >
+          <g
+            id="alert_fill"
+            transform="translate(48.000000, 48.000000)"
+          >
+            <path
+              d="M24,0 L24,24 L0,24 L0,0 L24,0 Z M12.5934901,23.257841 L12.5819402,23.2595131 L12.5108777,23.2950439 L12.4918791,23.2987469 L12.4918791,23.2987469 L12.4767152,23.2950439 L12.4056548,23.2595131 C12.3958229,23.2563662 12.3870493,23.2590235 12.3821421,23.2649074 L12.3780323,23.275831 L12.360941,23.7031097 L12.3658947,23.7234994 L12.3769048,23.7357139 L12.4804777,23.8096931 L12.4953491,23.8136134 L12.4953491,23.8136134 L12.5071152,23.8096931 L12.6106902,23.7357139 L12.6232938,23.7196733 L12.6232938,23.7196733 L12.6266527,23.7031097 L12.609561,23.275831 C12.6075724,23.2657013 12.6010112,23.2592993 12.5934901,23.257841 L12.5934901,23.257841 Z M12.8583906,23.1452862 L12.8445485,23.1473072 L12.6598443,23.2396597 L12.6498822,23.2499052 L12.6498822,23.2499052 L12.6471943,23.2611114 L12.6650943,23.6906389 L12.6699349,23.7034178 L12.6699349,23.7034178 L12.678386,23.7104931 L12.8793402,23.8032389 C12.8914285,23.8068999 12.9022333,23.8029875 12.9078286,23.7952264 L12.9118235,23.7811639 L12.8776777,23.1665331 C12.8752882,23.1545897 12.8674102,23.1470016 12.8583906,23.1452862 L12.8583906,23.1452862 Z M12.1430473,23.1473072 C12.1332178,23.1423925 12.1221763,23.1452606 12.1156365,23.1525954 L12.1099173,23.1665331 L12.0757714,23.7811639 C12.0751323,23.7926639 12.0828099,23.8018602 12.0926481,23.8045676 L12.108256,23.8032389 L12.3092106,23.7104931 L12.3186497,23.7024347 L12.3186497,23.7024347 L12.3225043,23.6906389 L12.340401,23.2611114 L12.337245,23.2485176 L12.337245,23.2485176 L12.3277531,23.2396597 L12.1430473,23.1473072 Z"
+              fill-rule="nonzero"
+              id="MingCute"
+            />
+            <path
+              d="M13.299,3.1477 L21.933,18.1022 C22.5103,19.1022 21.7887,20.3522 20.634,20.3522 L3.36601,20.3522 C2.21131,20.3522 1.48962,19.1022 2.06697,18.1022 L10.7009,3.14771 C11.2783,2.14771 12.7217,2.1477 13.299,3.1477 Z M12,15 C11.4477,15 11,15.4477 11,16 C11,16.5523 11.4477,17 12,17 C12.5523,17 13,16.5523 13,16 C13,15.4477 12.5523,15 12,15 Z M12,8 C11.48715,8 11.0644908,8.38604429 11.0067275,8.88337975 L11,9 L11,13 C11,13.5523 11.4477,14 12,14 C12.51285,14 12.9355092,13.613973 12.9932725,13.1166239 L13,13 L13,9 C13,8.44772 12.5523,8 12,8 Z"
+              fill="#09244B"
+              id="shape"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+    Some columns in the primary key [] were not found
+  </div>,
+]
+`;

package/src/app/pages/AddEditNodePage/__tests__/__snapshots__/AddEditNodePageFormSuccess.test.jsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddEditNodePage Create node page renders with the selected nodeType and namespace 1`] = `HTMLCollection []`;

package/src/app/pages/AddEditNodePage/__tests__/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AddEditNodePage Create node page renders with the selected nodeType and namespace 1`] = `HTMLCollection []`;