datajunction-ui 0.0.1-a1

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

@@ -0,0 +1,132 @@
+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,
+  renderCreateNode,
+  renderEditNode,
+  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 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.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 Metric',
+    );
+    await userEvent.type(screen.getByLabelText('Query'), 'SELECT * 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_metric',
+        'Some Test Metric',
+        '',
+        'SELECT * FROM test',
+        'draft',
+        'default',
+        null,
+      );
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalled();
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
+        'default.some_test_metric',
+        undefined,
+      );
+      expect(screen.getByText(/default.some_test_metric/)).toBeInTheDocument();
+    });
+
+    // 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 node', async () => {
+    const mockDjClient = initializeMockDJClient();
+
+    mockDjClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
+    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' },
+    ]);
+
+    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');
+    await fireEvent.keyDown(selectTags.firstChild, { key: 'ArrowDown' });
+    await 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) default_DOT_num_repair_orders FROM default.repair_orders',
+        'published',
+        ['repair_order_id', 'country'],
+      );
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledTimes(1);
+      expect(mockDjClient.DataJunctionAPI.tagsNode).toBeCalledWith(
+        'default.num_repair_orders',
+        [{ display_name: 'Purpose', name: 'purpose' }],
+      );
+
+      expect(
+        await screen.getByDisplayValue('repair_order_id, country'),
+      ).toBeInTheDocument();
+      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 []`;

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

@@ -0,0 +1,180 @@
+import React from 'react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { screen, waitFor } from '@testing-library/react';
+import { render } from '../../../../setupTests';
+import fetchMock from 'jest-fetch-mock';
+import { AddEditNodePage } from '../index.jsx';
+import { mocks } from '../../../../mocks/mockNodes';
+import DJClientContext from '../../../providers/djclient';
+import userEvent from '@testing-library/user-event';
+
+fetchMock.enableMocks();
+
+export const initializeMockDJClient = () => {
+  return {
+    DataJunctionAPI: {
+      namespace: _ => {
+        return [
+          {
+            name: 'default.contractors',
+            display_name: 'Default: Contractors',
+            version: 'v1.0',
+            type: 'source',
+            status: 'valid',
+            mode: 'published',
+            updated_at: '2023-08-21T16:48:53.246914+00:00',
+          },
+          {
+            name: 'default.num_repair_orders',
+            display_name: 'Default: Num Repair Orders',
+            version: 'v1.0',
+            type: 'metric',
+            status: 'valid',
+            mode: 'published',
+            updated_at: '2023-08-21T16:48:56.841704+00:00',
+          },
+        ];
+      },
+      metrics: {},
+      namespaces: () => {
+        return [
+          {
+            namespace: 'default',
+            num_nodes: 33,
+          },
+          {
+            namespace: 'default123',
+            num_nodes: 0,
+          },
+        ];
+      },
+      createNode: jest.fn(),
+      patchNode: jest.fn(),
+      node: jest.fn(),
+      tagsNode: jest.fn(),
+      listTags: jest.fn(),
+    },
+  };
+};
+
+export const testElement = djClient => {
+  return (
+    <DJClientContext.Provider value={djClient}>
+      <AddEditNodePage />
+    </DJClientContext.Provider>
+  );
+};
+
+export const renderCreateNode = element => {
+  return render(
+    <MemoryRouter initialEntries={['/create/dimension/default']}>
+      <Routes>
+        <Route path="create/:nodeType/:initialNamespace" element={element} />
+      </Routes>
+    </MemoryRouter>,
+  );
+};
+
+export const renderEditNode = element => {
+  return render(
+    <MemoryRouter initialEntries={['/nodes/default.num_repair_orders/edit']}>
+      <Routes>
+        <Route path="nodes/:name/edit" element={element} />
+      </Routes>
+    </MemoryRouter>,
+  );
+};
+
+describe('AddEditNodePage', () => {
+  beforeEach(() => {
+    fetchMock.resetMocks();
+    jest.clearAllMocks();
+    window.scrollTo = jest.fn();
+  });
+
+  it('Create node page renders with the selected nodeType and namespace', async () => {
+    const mockDjClient = initializeMockDJClient();
+    const element = testElement(mockDjClient);
+    const { container } = renderCreateNode(element);
+
+    // The node type should be included in the page title
+    await waitFor(() => {
+      expect(
+        container.getElementsByClassName('node_type__metric'),
+      ).toMatchSnapshot();
+
+      // The namespace should be set to the one provided in params
+      expect(screen.getByText('default')).toBeInTheDocument();
+    });
+  });
+
+  it('Edit node page renders with the selected node', async () => {
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.node.mockReturnValue(mocks.mockMetricNode);
+
+    const element = testElement(mockDjClient);
+    renderEditNode(element);
+
+    await waitFor(() => {
+      // Should be an edit node page
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+
+      // The node name should be loaded onto the page
+      expect(screen.getByText('default.num_repair_orders')).toBeInTheDocument();
+
+      // The node type should be loaded onto the page
+      expect(screen.getByText('metric')).toBeInTheDocument();
+
+      // The description should be populated
+      expect(screen.getByText('Number of repair orders')).toBeInTheDocument();
+
+      // The query should be populated
+      expect(
+        screen.getByText(
+          'SELECT count(repair_order_id) default_DOT_num_repair_orders FROM default.repair_orders',
+        ),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('Verify edit page node not found', async () => {
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.node = jest.fn();
+    mockDjClient.DataJunctionAPI.node.mockReturnValue({
+      message: 'A node with name `default.num_repair_orders` does not exist.',
+      errors: [],
+      warnings: [],
+    });
+    const element = testElement(mockDjClient);
+    renderEditNode(element);
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.node).toBeCalledTimes(1);
+      expect(
+        screen.getByText('Node default.num_repair_orders does not exist!'),
+      ).toBeInTheDocument();
+    });
+  }, 60000);
+
+  it('Verify only transforms, metrics, and dimensions can be edited', async () => {
+    const mockDjClient = initializeMockDJClient();
+    mockDjClient.DataJunctionAPI.node = jest.fn();
+    mockDjClient.DataJunctionAPI.node.mockReturnValue({
+      namespace: 'default',
+      type: 'source',
+      name: 'default.repair_orders',
+      display_name: 'Default: Repair Orders',
+    });
+    const element = testElement(mockDjClient);
+    renderEditNode(element);
+
+    await waitFor(() => {
+      expect(mockDjClient.DataJunctionAPI.node).toBeCalledTimes(1);
+      expect(
+        screen.getByText(
+          'Node default.num_repair_orders is of type source and cannot be edited',
+        ),
+      ).toBeInTheDocument();
+    });
+  }, 60000);
+});