Unit Test of DatabaseDetailSidebar

Summary:
per title.

Also, remove `console.log`

Reviewed By: mweststrate

Differential Revision: D21829809

fbshipit-source-id: cfad4ff50e816153d7370f63052d4dc450464fd5

desktop/plugins/databases/DatabaseDetailSidebar.tsx

@@ -90,7 +90,13 @@ function buildSidebarEditableRow(
     columns: {
       col: {value: <Text>{key}</Text>},
       val: {
-        value: <EditField initialValue={value} onUpdateValue={onUpdateValue} />,
+        value: (
+          <EditField
+            key={key}
+            initialValue={value}
+            onUpdateValue={onUpdateValue}
+          />
+        ),
       },
     },
     key: key,
@@ -113,6 +119,7 @@ const EditField = React.memo(
           onUpdateValue(e.target.value);
         }}
         placeholder={value === null ? 'NULL' : undefined}
+        data-testid={'update-query-input'}
       />
     );
   },
@@ -182,7 +189,6 @@ export default React.memo(function DatabaseDetailSidebar(
                   <Button
                     disabled={!rowState.updated}
                     onClick={() => {
-                      console.log(rowState);
                       onSave(rowState.changes);
                       setEditing(false);
                     }}>

desktop/plugins/databases/__test__/DatabaseDetailSidebar.node.tsx

@@ -0,0 +1,161 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {render, fireEvent} from '@testing-library/react';
+import React from 'react';
+import reducers, {Store} from '../../../app/src/reducers';
+import configureStore from 'redux-mock-store';
+import {Provider} from 'react-redux';
+
+import {Value} from 'flipper';
+import DatabaseDetailSidebar from '../DatabaseDetailSidebar';
+
+const labels: Array<string> = [
+  '_id',
+  'db1_col0_text',
+  'db1_col1_integer',
+  'db1_col2_float',
+  'db1_col3_blob',
+  'db1_col4_null',
+  'db1_col5',
+  'db1_col6',
+  'db1_col7',
+  'db1_col8',
+  'db1_col9',
+];
+const values: Array<Value> = [
+  {value: 1, type: 'integer'},
+  {value: 'Long text data for testing resizing', type: 'string'},
+  {value: 1000, type: 'integer'},
+  {value: 1000.4650268554688, type: 'float'},
+  {value: '\u0000\u0000\u0000\u0001\u0001\u0000\u0001\u0001', type: 'blob'},
+  {value: null, type: 'null'},
+  {value: 'db_1_column5_value', type: 'string'},
+  {value: 'db_1_column6_value', type: 'string'},
+  {value: 'db_1_column7_value', type: 'string'},
+  {value: 'db_1_column8_value', type: 'string'},
+  {value: 'db_1_column9_value', type: 'string'},
+];
+
+const mockStore: Store = configureStore([])(
+  reducers(undefined, {type: 'INIT'}),
+) as Store;
+
+beforeEach(() => {
+  mockStore.dispatch({type: 'rightSidebarAvailable', value: true});
+  mockStore.dispatch({type: 'rightSidebarVisible', value: true});
+});
+
+test('render and try to see if it renders properly', () => {
+  const res = render(
+    <Provider store={mockStore}>
+      <div id="detailsSidebar">
+        <DatabaseDetailSidebar columnLabels={labels} columnValues={values} />
+      </div>
+    </Provider>,
+  );
+
+  for (const label of labels) {
+    expect(res.queryAllByText(label).length).toBeGreaterThan(0);
+  }
+  for (const value of values) {
+    if (value.type === 'blob') {
+      continue;
+    }
+    const searchValue: string =
+      value.type === 'null' ? 'NULL' : value.value.toString();
+    expect(res.queryAllByText(searchValue).length).toBeGreaterThan(0);
+  }
+  // Edit, Save, Close buttons should not be shown because no onSave is provided
+  expect(res.queryAllByText('Edit').length).toBe(0);
+  expect(res.queryAllByText('Save').length).toBe(0);
+  expect(res.queryAllByText('Close').length).toBe(0);
+});
+
+test('render edit, save, and close correctly when onSave provided', () => {
+  const res = render(
+    <Provider store={mockStore}>
+      <div id="detailsSidebar">
+        <DatabaseDetailSidebar
+          columnLabels={labels}
+          columnValues={values}
+          onSave={() => {}}
+        />
+      </div>
+    </Provider>,
+  );
+
+  // expect only Edit to show up
+  expect(res.queryAllByText('Edit').length).toBe(1);
+  expect(res.queryAllByText('Save').length).toBe(0);
+  expect(res.queryAllByText('Close').length).toBe(0);
+
+  fireEvent.click(res.getByText('Edit'));
+  // expect Save and Close to show up
+  expect(res.queryAllByText('Edit').length).toBe(0);
+  expect(res.queryAllByText('Save').length).toBe(1);
+  expect(res.queryAllByText('Close').length).toBe(1);
+
+  // unclickable because none field has changed
+  fireEvent.click(res.getByText('Save'));
+  expect(res.queryAllByText('Edit').length).toBe(0);
+  expect(res.queryAllByText('Save').length).toBe(1);
+  expect(res.queryAllByText('Close').length).toBe(1);
+
+  // Click on close to return to the previous state
+  fireEvent.click(res.getByText('Close'));
+  expect(res.queryAllByText('Edit').length).toBe(1);
+  expect(res.queryAllByText('Save').length).toBe(0);
+  expect(res.queryAllByText('Close').length).toBe(0);
+});
+
+test('editing some field after trigger Edit', async () => {
+  const mockOnSave = jest.fn((_changes) => {});
+  const res = render(
+    <Provider store={mockStore}>
+      <div id="detailsSidebar">
+        <DatabaseDetailSidebar
+          columnLabels={labels}
+          columnValues={values}
+          onSave={mockOnSave}
+        />
+      </div>
+    </Provider>,
+  );
+
+  fireEvent.click(res.getByText('Edit'));
+  // still find all values because it needs to show up
+  for (const value of values) {
+    if (value.type === 'blob') {
+      continue;
+    }
+    const searchValue: string =
+      value.type === 'null' ? 'NULL' : value.value.toString();
+    expect(res.queryAllByText(searchValue).length).toBeGreaterThan(0);
+  }
+
+  // expect the last one to contain value of 'db_1_column9_value'
+  const textFields = await res.findAllByTestId('update-query-input');
+  const lastTextField = textFields[textFields.length - 1];
+  // add '_edited' to the back
+  fireEvent.change(lastTextField, {
+    target: {value: 'db_1_column9_value_edited'},
+  });
+
+  // be able to click on Save
+  fireEvent.click(res.getByText('Save'));
+  expect(res.queryAllByText('Edit').length).toBe(1);
+  expect(res.queryAllByText('Save').length).toBe(0);
+  expect(res.queryAllByText('Close').length).toBe(0);
+
+  expect(mockOnSave.mock.calls.length).toBe(1);
+  expect(mockOnSave.mock.calls[0][0]).toEqual({
+    db1_col9: 'db_1_column9_value_edited',
+  });
+});

desktop/plugins/databases/package.json

@@ -14,7 +14,10 @@
   },
   "devDependencies": {
     "@types/dateformat": "^3.0.1",
-    "@types/sql-formatter": "^2.3.0"
+    "@types/sql-formatter": "^2.3.0",
+    "@testing-library/react": "^10.0.2",
+    "redux-mock-store": "^1.0.1",
+    "react-redux": "^7.1.1"
   },
   "bugs": {
     "email": "oncall+flipper@xmail.facebook.com",