From 5ba59ff80b4b3ec2667ebb0467ff62eb8426a0e5 Mon Sep 17 00:00:00 2001
From: dej611 <marco.liberati@elastic.co>
Date: Tue, 4 Jan 2022 17:00:44 +0100
Subject: [PATCH] :white_check_mark: Add tests for it

---
 .../data/common/exports/export_csv.test.ts    |  24 +
 .../__snapshots__/data_view.test.tsx.snap     | 687 ++++++++++++++++++
 .../components/data_view.test.tsx             |  38 +
 3 files changed, 749 insertions(+)

diff --git a/src/plugins/data/common/exports/export_csv.test.ts b/src/plugins/data/common/exports/export_csv.test.ts
index f108e69c68d56..a8567ff61a0ca 100644
--- a/src/plugins/data/common/exports/export_csv.test.ts
+++ b/src/plugins/data/common/exports/export_csv.test.ts
@@ -84,4 +84,28 @@ describe('CSV exporter', () => {
       })
     ).toMatch('columnOne\r\n"\'=1"\r\n');
   });
+
+  test('should filter out columns when there are meta information', () => {
+    const datatable = getDataTable({ multipleColumns: true });
+    // Make only the first column visible
+    datatable.columns[0].meta.dimensionName = 'First column';
+    expect(
+      datatableToCSV(datatable, {
+        ...getDefaultOptions(),
+        escapeFormulaValues: true,
+        formatFactory: () => ({ convert: (v: unknown) => v } as FieldFormat),
+      })
+    ).toMatch('columnOne\r\nvalue\r\n');
+  });
+
+  test('should not filter out columns if no meta information are found', () => {
+    const datatable = getDataTable({ multipleColumns: true });
+    expect(
+      datatableToCSV(datatable, {
+        ...getDefaultOptions(),
+        escapeFormulaValues: true,
+        formatFactory: () => ({ convert: (v: unknown) => v } as FieldFormat),
+      })
+    ).toMatch('columnOne,columnTwo\r\nvalue,5\r\n');
+  });
 });
diff --git a/src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap b/src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap
index 4db3f780fdebe..00b6f21dd1a84 100644
--- a/src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap
+++ b/src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap
@@ -1,5 +1,692 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Inspector Data View component should filter out hidden column if only part of the columns have meta information 1`] = `
+<Component
+  adapters={
+    Object {
+      "tables": TablesAdapter {
+        "_events": Object {
+          "change": [Function],
+        },
+        "_eventsCount": 1,
+        "_maxListeners": undefined,
+        "_tables": Object {
+          "table1": Object {
+            "columns": Array [
+              Object {
+                "id": "1",
+                "meta": Object {
+                  "dimensionName": "accessor",
+                  "type": "number",
+                },
+                "name": "column1",
+              },
+              Object {
+                "id": "2",
+                "meta": Object {
+                  "type": "number",
+                },
+                "name": "column2",
+              },
+            ],
+            "rows": Array [
+              Object {
+                "1": 123,
+                "2": 5,
+              },
+            ],
+            "type": "datatable",
+          },
+        },
+        Symbol(kCapture): false,
+      },
+    }
+  }
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {
+        "date": Object {
+          "full": Object {
+            "day": "numeric",
+            "month": "long",
+            "weekday": "long",
+            "year": "numeric",
+          },
+          "long": Object {
+            "day": "numeric",
+            "month": "long",
+            "year": "numeric",
+          },
+          "medium": Object {
+            "day": "numeric",
+            "month": "short",
+            "year": "numeric",
+          },
+          "short": Object {
+            "day": "numeric",
+            "month": "numeric",
+            "year": "2-digit",
+          },
+        },
+        "number": Object {
+          "currency": Object {
+            "style": "currency",
+          },
+          "percent": Object {
+            "style": "percent",
+          },
+        },
+        "relative": Object {
+          "days": Object {
+            "units": "day",
+          },
+          "hours": Object {
+            "units": "hour",
+          },
+          "minutes": Object {
+            "units": "minute",
+          },
+          "months": Object {
+            "units": "month",
+          },
+          "seconds": Object {
+            "units": "second",
+          },
+          "years": Object {
+            "units": "year",
+          },
+        },
+        "time": Object {
+          "full": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+            "second": "numeric",
+            "timeZoneName": "short",
+          },
+          "long": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+            "second": "numeric",
+            "timeZoneName": "short",
+          },
+          "medium": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+            "second": "numeric",
+          },
+          "short": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+          },
+        },
+      },
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "now": [Function],
+      "onError": [Function],
+      "textComponent": Symbol(react.fragment),
+      "timeZone": null,
+    }
+  }
+  title="Test Data"
+>
+  <DataViewComponent
+    adapters={
+      Object {
+        "tables": TablesAdapter {
+          "_events": Object {
+            "change": [Function],
+          },
+          "_eventsCount": 1,
+          "_maxListeners": undefined,
+          "_tables": Object {
+            "table1": Object {
+              "columns": Array [
+                Object {
+                  "id": "1",
+                  "meta": Object {
+                    "dimensionName": "accessor",
+                    "type": "number",
+                  },
+                  "name": "column1",
+                },
+                Object {
+                  "id": "2",
+                  "meta": Object {
+                    "type": "number",
+                  },
+                  "name": "column2",
+                },
+              ],
+              "rows": Array [
+                Object {
+                  "1": 123,
+                  "2": 5,
+                },
+              ],
+              "type": "datatable",
+            },
+          },
+          Symbol(kCapture): false,
+        },
+      }
+    }
+    fieldFormats={
+      Object {
+        "deserialize": [MockFunction] {
+          "calls": Array [
+            Array [
+              Object {
+                "id": "string",
+              },
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": Object {
+                "convert": [Function],
+              },
+            },
+          ],
+        },
+      }
+    }
+    isFilterable={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Object {
+              "id": "1",
+              "meta": Object {
+                "dimensionName": "accessor",
+                "type": "number",
+              },
+              "name": "column1",
+            },
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    title="Test Data"
+    uiActions={Object {}}
+    uiSettings={
+      Object {
+        "get": [Function],
+      }
+    }
+  >
+    <EuiEmptyPrompt
+      body={
+        <React.Fragment>
+          <p>
+            <FormattedMessage
+              defaultMessage="The element did not provide any data."
+              id="data.inspector.table.noDataAvailableDescription"
+              values={Object {}}
+            />
+          </p>
+        </React.Fragment>
+      }
+      title={
+        <h2>
+          <FormattedMessage
+            defaultMessage="No data available"
+            id="data.inspector.table.noDataAvailableTitle"
+            values={Object {}}
+          />
+        </h2>
+      }
+    >
+      <EuiPanel
+        className="euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
+        color="transparent"
+        paddingSize="none"
+      >
+        <div
+          className="euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
+        >
+          <div
+            className="euiEmptyPrompt__main"
+          >
+            <div
+              className="euiEmptyPrompt__content"
+            >
+              <div
+                className="euiEmptyPrompt__contentInner"
+              >
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
+                  >
+                    <FormattedMessage
+                      defaultMessage="No data available"
+                      id="data.inspector.table.noDataAvailableTitle"
+                      values={Object {}}
+                    >
+                      No data available
+                    </FormattedMessage>
+                  </h2>
+                </EuiTitle>
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                    style={Object {}}
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                    <EuiText>
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <p>
+                          <FormattedMessage
+                            defaultMessage="The element did not provide any data."
+                            id="data.inspector.table.noDataAvailableDescription"
+                            values={Object {}}
+                          >
+                            The element did not provide any data.
+                          </FormattedMessage>
+                        </p>
+                      </div>
+                    </EuiText>
+                  </span>
+                </EuiTextColor>
+              </div>
+            </div>
+          </div>
+        </div>
+      </EuiPanel>
+    </EuiEmptyPrompt>
+  </DataViewComponent>
+</Component>
+`;
+
+exports[`Inspector Data View component should render all column if no column has meta information 1`] = `
+<Component
+  adapters={
+    Object {
+      "tables": TablesAdapter {
+        "_events": Object {
+          "change": [Function],
+        },
+        "_eventsCount": 1,
+        "_maxListeners": undefined,
+        "_tables": Object {
+          "table1": Object {
+            "columns": Array [
+              Object {
+                "id": "1",
+                "meta": Object {
+                  "type": "number",
+                },
+                "name": "column1",
+              },
+              Object {
+                "id": "2",
+                "meta": Object {
+                  "type": "number",
+                },
+                "name": "column2",
+              },
+            ],
+            "rows": Array [
+              Object {
+                "1": 123,
+                "2": 5,
+              },
+            ],
+            "type": "datatable",
+          },
+        },
+        Symbol(kCapture): false,
+      },
+    }
+  }
+  intl={
+    Object {
+      "defaultFormats": Object {},
+      "defaultLocale": "en",
+      "formatDate": [Function],
+      "formatHTMLMessage": [Function],
+      "formatMessage": [Function],
+      "formatNumber": [Function],
+      "formatPlural": [Function],
+      "formatRelative": [Function],
+      "formatTime": [Function],
+      "formats": Object {
+        "date": Object {
+          "full": Object {
+            "day": "numeric",
+            "month": "long",
+            "weekday": "long",
+            "year": "numeric",
+          },
+          "long": Object {
+            "day": "numeric",
+            "month": "long",
+            "year": "numeric",
+          },
+          "medium": Object {
+            "day": "numeric",
+            "month": "short",
+            "year": "numeric",
+          },
+          "short": Object {
+            "day": "numeric",
+            "month": "numeric",
+            "year": "2-digit",
+          },
+        },
+        "number": Object {
+          "currency": Object {
+            "style": "currency",
+          },
+          "percent": Object {
+            "style": "percent",
+          },
+        },
+        "relative": Object {
+          "days": Object {
+            "units": "day",
+          },
+          "hours": Object {
+            "units": "hour",
+          },
+          "minutes": Object {
+            "units": "minute",
+          },
+          "months": Object {
+            "units": "month",
+          },
+          "seconds": Object {
+            "units": "second",
+          },
+          "years": Object {
+            "units": "year",
+          },
+        },
+        "time": Object {
+          "full": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+            "second": "numeric",
+            "timeZoneName": "short",
+          },
+          "long": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+            "second": "numeric",
+            "timeZoneName": "short",
+          },
+          "medium": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+            "second": "numeric",
+          },
+          "short": Object {
+            "hour": "numeric",
+            "minute": "numeric",
+          },
+        },
+      },
+      "formatters": Object {
+        "getDateTimeFormat": [Function],
+        "getMessageFormat": [Function],
+        "getNumberFormat": [Function],
+        "getPluralFormat": [Function],
+        "getRelativeFormat": [Function],
+      },
+      "locale": "en",
+      "messages": Object {},
+      "now": [Function],
+      "onError": [Function],
+      "textComponent": Symbol(react.fragment),
+      "timeZone": null,
+    }
+  }
+  title="Test Data"
+>
+  <DataViewComponent
+    adapters={
+      Object {
+        "tables": TablesAdapter {
+          "_events": Object {
+            "change": [Function],
+          },
+          "_eventsCount": 1,
+          "_maxListeners": undefined,
+          "_tables": Object {
+            "table1": Object {
+              "columns": Array [
+                Object {
+                  "id": "1",
+                  "meta": Object {
+                    "type": "number",
+                  },
+                  "name": "column1",
+                },
+                Object {
+                  "id": "2",
+                  "meta": Object {
+                    "type": "number",
+                  },
+                  "name": "column2",
+                },
+              ],
+              "rows": Array [
+                Object {
+                  "1": 123,
+                  "2": 5,
+                },
+              ],
+              "type": "datatable",
+            },
+          },
+          Symbol(kCapture): false,
+        },
+      }
+    }
+    fieldFormats={
+      Object {
+        "deserialize": [MockFunction] {
+          "calls": Array [
+            Array [
+              Object {
+                "id": "string",
+              },
+            ],
+            Array [
+              Object {
+                "id": "string",
+              },
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": Object {
+                "convert": [Function],
+              },
+            },
+            Object {
+              "type": "return",
+              "value": Object {
+                "convert": [Function],
+              },
+            },
+          ],
+        },
+      }
+    }
+    isFilterable={
+      [MockFunction] {
+        "calls": Array [
+          Array [
+            Object {
+              "id": "1",
+              "meta": Object {
+                "type": "number",
+              },
+              "name": "column1",
+            },
+          ],
+          Array [
+            Object {
+              "id": "2",
+              "meta": Object {
+                "type": "number",
+              },
+              "name": "column2",
+            },
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    }
+    title="Test Data"
+    uiActions={Object {}}
+    uiSettings={
+      Object {
+        "get": [Function],
+      }
+    }
+  >
+    <EuiEmptyPrompt
+      body={
+        <React.Fragment>
+          <p>
+            <FormattedMessage
+              defaultMessage="The element did not provide any data."
+              id="data.inspector.table.noDataAvailableDescription"
+              values={Object {}}
+            />
+          </p>
+        </React.Fragment>
+      }
+      title={
+        <h2>
+          <FormattedMessage
+            defaultMessage="No data available"
+            id="data.inspector.table.noDataAvailableTitle"
+            values={Object {}}
+          />
+        </h2>
+      }
+    >
+      <EuiPanel
+        className="euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
+        color="transparent"
+        paddingSize="none"
+      >
+        <div
+          className="euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
+        >
+          <div
+            className="euiEmptyPrompt__main"
+          >
+            <div
+              className="euiEmptyPrompt__content"
+            >
+              <div
+                className="euiEmptyPrompt__contentInner"
+              >
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
+                  >
+                    <FormattedMessage
+                      defaultMessage="No data available"
+                      id="data.inspector.table.noDataAvailableTitle"
+                      values={Object {}}
+                    >
+                      No data available
+                    </FormattedMessage>
+                  </h2>
+                </EuiTitle>
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                    style={Object {}}
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                    <EuiText>
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <p>
+                          <FormattedMessage
+                            defaultMessage="The element did not provide any data."
+                            id="data.inspector.table.noDataAvailableDescription"
+                            values={Object {}}
+                          >
+                            The element did not provide any data.
+                          </FormattedMessage>
+                        </p>
+                      </div>
+                    </EuiText>
+                  </span>
+                </EuiTextColor>
+              </div>
+            </div>
+          </div>
+        </div>
+      </EuiPanel>
+    </EuiEmptyPrompt>
+  </DataViewComponent>
+</Component>
+`;
+
 exports[`Inspector Data View component should render empty state 1`] = `
 <Component
   adapters={
diff --git a/src/plugins/data/public/utils/table_inspector_view/components/data_view.test.tsx b/src/plugins/data/public/utils/table_inspector_view/components/data_view.test.tsx
index e6b40bcb5936c..759c3ecd1552e 100644
--- a/src/plugins/data/public/utils/table_inspector_view/components/data_view.test.tsx
+++ b/src/plugins/data/public/utils/table_inspector_view/components/data_view.test.tsx
@@ -106,5 +106,43 @@ describe('Inspector Data View', () => {
 
       expect(component).toMatchSnapshot();
     });
+
+    it('should filter out hidden column if only part of the columns have meta information', () => {
+      const multitableAdapter = { tables: new TablesAdapter() };
+
+      const component = mountWithIntl(
+        // eslint-disable-next-line react/jsx-pascal-case
+        <DataView.component title="Test Data" adapters={multitableAdapter} />
+      );
+      multitableAdapter.tables.logDatatable('table1', {
+        columns: [
+          { id: '1', name: 'column1', meta: { type: 'number', dimensionName: 'accessor' } },
+          { id: '2', name: 'column2', meta: { type: 'number' } },
+        ],
+        rows: [{ '1': 123, '2': 5 }],
+        type: 'datatable',
+      });
+
+      expect(component).toMatchSnapshot();
+    });
+
+    it('should render all column if no column has meta information', () => {
+      const multitableAdapter = { tables: new TablesAdapter() };
+
+      const component = mountWithIntl(
+        // eslint-disable-next-line react/jsx-pascal-case
+        <DataView.component title="Test Data" adapters={multitableAdapter} />
+      );
+      multitableAdapter.tables.logDatatable('table1', {
+        columns: [
+          { id: '1', name: 'column1', meta: { type: 'number' } },
+          { id: '2', name: 'column2', meta: { type: 'number' } },
+        ],
+        rows: [{ '1': 123, '2': 5 }],
+        type: 'datatable',
+      });
+
+      expect(component).toMatchSnapshot();
+    });
   });
 });