[Lens] Functional tests

x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/expression.tsx

@@ -133,6 +133,7 @@ function DatatableComponent(props: DatatableProps & { formatFactory: FormatFacto
   return (
     <EuiBasicTable
       className="lnsDataTable"
+      data-test-subj="lnsDataTable"
       columns={props.args.columns.columnIds
         .map((field, index) => {
           return {

x-pack/legacy/plugins/lens/public/drag_drop/drag_drop.tsx

@@ -56,7 +56,7 @@ interface Props {
   /**
    * The optional test subject associated with this DOM element.
    */
-  dataTestSubj?: string;
+  'data-test-subj'?: string;
 }
 
 /**
@@ -128,7 +128,7 @@ export function DragDrop(props: Props) {
 
   return (
     <div
-      data-test-subj={props.dataTestSubj || 'lnsDragDrop'}
+      data-test-subj={props['data-test-subj'] || 'lnsDragDrop'}
       className={classes}
       onDragOver={dragOver}
       onDragLeave={dragLeave}

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.tsx

@@ -236,12 +236,13 @@ export function ChartSwitch(props: Props) {
     </div>
   );
 }
+
 function getTopSuggestion(
   props: Props,
   visualizationId: string,
   newVisualization: Visualization<unknown, unknown>
 ): Suggestion | undefined {
-  return getSuggestions({
+  const suggestions = getSuggestions({
     datasourceMap: props.datasourceMap,
     datasourceStates: props.datasourceStates,
     visualizationMap: { [visualizationId]: newVisualization },
@@ -251,5 +252,14 @@ function getTopSuggestion(
     // don't use extended versions of current data table on switching between visualizations
     // to avoid confusing the user.
     return suggestion.changeType !== 'extended';
-  })[0];
+  });
+
+  // We prefer unchanged or reduced suggestions when switching
+  // charts since that allows you to switch from A to B and back
+  // to A with the greatest chance of preserving your original state.
+  return (
+    suggestions.find(s => s.changeType === 'unchanged') ||
+    suggestions.find(s => s.changeType === 'reduced') ||
+    suggestions[0]
+  );
 }

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/editor_frame.test.tsx

@@ -1257,7 +1257,10 @@ describe('editor_frame', () => {
       instance.update();
 
       act(() => {
-        instance.find('[data-test-subj="lnsDragDrop"]').simulate('drop');
+        instance
+          .find('[data-test-subj="lnsWorkspace"]')
+          .last()
+          .simulate('drop');
       });
 
       expect(mockVisualization.renderConfigPanel).toHaveBeenCalledWith(

x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.tsx

@@ -163,7 +163,12 @@ export function InnerWorkspacePanel({
   }
 
   return (
-    <DragDrop draggable={false} droppable={Boolean(suggestionForDraggedField)} onDrop={onDrop}>
+    <DragDrop
+      data-test-subj="lnsWorkspace"
+      draggable={false}
+      droppable={Boolean(suggestionForDraggedField)}
+      onDrop={onDrop}
+    >
       {renderVisualization()}
     </DragDrop>
   );

x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx

@@ -44,7 +44,7 @@ export function FieldItem({ field, indexPattern, highlight, exists }: FieldItemP
   return (
     <DragDrop
       value={{ field, indexPatternId: indexPattern.id } as DraggedField}
-      dataTestSubj="lnsFieldListPanelField"
+      data-test-subj="lnsFieldListPanelField"
       draggable
       className={`lnsFieldListPanel__field lnsFieldListPanel__field-btn-${
         field.type

x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern_suggestions.ts

@@ -15,7 +15,12 @@ import {
   IndexPatternPrivateState,
   IndexPattern,
 } from './indexpattern';
-import { buildColumn, getOperationTypesForField, operationDefinitionMap } from './operations';
+import {
+  buildColumn,
+  getOperationTypesForField,
+  operationDefinitionMap,
+  IndexPatternColumn,
+} from './operations';
 import { hasField } from './utils';
 
 function buildSuggestion({
@@ -31,21 +36,36 @@ function buildSuggestion({
   updatedLayer?: IndexPatternLayer;
   label?: string;
 }): DatasourceSuggestion<IndexPatternPrivateState> {
-  const columnOrder = (updatedLayer || state.layers[layerId]).columnOrder;
-  const columnMap = (updatedLayer || state.layers[layerId]).columns;
+  const updatedState = updatedLayer
+    ? {
+        ...state,
+        layers: {
+          ...state.layers,
+          [layerId]: updatedLayer,
+        },
+      }
+    : state;
 
+  // It's fairly easy to accidentally introduce a mismatch between
+  // columnOrder and columns, so this is a safeguard to ensure the
+  // two match up.
+  const layers = _.mapValues(updatedState.layers, layer => ({
+    ...layer,
+    columns: _.pick<Record<string, IndexPatternColumn>, Record<string, IndexPatternColumn>>(
+      layer.columns,
+      layer.columnOrder
+    ),
+  }));
+
+  const columnOrder = layers[layerId].columnOrder;
+  const columnMap = layers[layerId].columns;
   const isMultiRow = Object.values(columnMap).some(column => column.isBucketed);
 
   return {
-    state: updatedLayer
-      ? {
-          ...state,
-          layers: {
-            ...state.layers,
-            [layerId]: updatedLayer,
-          },
-        }
-      : state,
+    state: {
+      ...updatedState,
+      layers,
+    },
 
     table: {
       columns: columnOrder.map(columnId => ({
@@ -410,9 +430,11 @@ function createAlternativeMetricSuggestions(
       field,
       suggestedPriority: undefined,
     });
-    const updatedLayer = buildLayerByColumnOrder({ ...layer, columns: { [newId]: newColumn } }, [
-      newId,
-    ]);
+    const updatedLayer = {
+      ...layer,
+      columns: { [newId]: newColumn },
+      columnOrder: [newId],
+    };
     suggestions.push(
       buildSuggestion({
         state,
@@ -441,10 +463,11 @@ function createSuggestionWithDefaultDateHistogram(
     field: indexPattern.fields.find(({ name }) => name === indexPattern.timeFieldName),
     suggestedPriority: undefined,
   });
-  const updatedLayer = buildLayerByColumnOrder(
-    { ...layer, columns: { ...layer.columns, [newId]: timeColumn } },
-    [...buckets, newId, ...metrics]
-  );
+  const updatedLayer = {
+    ...layer,
+    columns: { ...layer.columns, [newId]: timeColumn },
+    columnOrder: [...buckets, newId, ...metrics],
+  };
   return buildSuggestion({
     state,
     layerId,
@@ -465,15 +488,15 @@ function createSimplifiedTableSuggestions(state: IndexPatternPrivateState, layer
     availableBucketedColumns.map((_col, index) => {
       // build suggestions with fewer buckets
       const bucketedColumns = availableBucketedColumns.slice(0, index + 1);
-      const allMetricsSuggestion = buildLayerByColumnOrder(layer, [
-        ...bucketedColumns,
-        ...availableMetricColumns,
-      ]);
+      const allMetricsSuggestion = {
+        ...layer,
+        columnOrder: [...bucketedColumns, ...availableMetricColumns],
+      };
 
       if (availableMetricColumns.length > 1) {
         return [
           allMetricsSuggestion,
-          buildLayerByColumnOrder(layer, [...bucketedColumns, availableMetricColumns[0]]),
+          { ...layer, columnOrder: [...bucketedColumns, availableMetricColumns[0]] },
         ];
       } else {
         return allMetricsSuggestion;
@@ -483,7 +506,7 @@ function createSimplifiedTableSuggestions(state: IndexPatternPrivateState, layer
     .concat(
       availableMetricColumns.map(columnId => {
         // build suggestions with only metrics
-        return buildLayerByColumnOrder(layer, [columnId]);
+        return { ...layer, columnOrder: [columnId] };
       })
     )
     .map(updatedLayer => {
@@ -516,14 +539,3 @@ function getMetricSuggestionTitle(layer: IndexPatternLayer, onlyMetric: boolean)
 function separateBucketColumns(layer: IndexPatternLayer) {
   return partition(layer.columnOrder, columnId => layer.columns[columnId].isBucketed);
 }
-
-function buildLayerByColumnOrder(
-  layer: IndexPatternLayer,
-  columnOrder: string[]
-): IndexPatternLayer {
-  return {
-    ...layer,
-    columns: _.pick(layer.columns, columnOrder),
-    columnOrder,
-  };
-}

x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.test.tsx

@@ -52,42 +52,44 @@ describe('metric_expression', () => {
 
       expect(shallow(<MetricChart data={data} args={args} formatFactory={x => x as FieldFormat} />))
         .toMatchInlineSnapshot(`
-                <div
-                  style={
-                    Object {
-                      "alignItems": "center",
-                      "display": "flex",
-                      "flexDirection": "column",
-                      "justifyContent": "center",
-                      "maxHeight": "100%",
-                      "maxWidth": "100%",
-                      "textAlign": "center",
-                    }
-                  }
-                >
-                  <AutoScale>
-                    <div
-                      style={
-                        Object {
-                          "fontSize": "60pt",
-                          "fontWeight": 600,
-                        }
-                      }
-                    >
-                      10110
-                    </div>
-                    <div
-                      style={
-                        Object {
-                          "fontSize": "24pt",
-                        }
-                      }
-                    >
-                      My fanci metric chart
-                    </div>
-                  </AutoScale>
-                </div>
-            `);
+        <div
+          style={
+            Object {
+              "alignItems": "center",
+              "display": "flex",
+              "flexDirection": "column",
+              "justifyContent": "center",
+              "maxHeight": "100%",
+              "maxWidth": "100%",
+              "textAlign": "center",
+            }
+          }
+        >
+          <AutoScale>
+            <div
+              data-test-subj="lns_metric_value"
+              style={
+                Object {
+                  "fontSize": "60pt",
+                  "fontWeight": 600,
+                }
+              }
+            >
+              10110
+            </div>
+            <div
+              data-test-subj="lns_metric_title"
+              style={
+                Object {
+                  "fontSize": "24pt",
+                }
+              }
+            >
+              My fanci metric chart
+            </div>
+          </AutoScale>
+        </div>
+      `);
     });
 
     test('it does not render title in reduced mode', () => {
@@ -115,10 +117,9 @@ describe('metric_expression', () => {
             }
           }
         >
-          <AutoScale
-            minScale={0}
-          >
+          <AutoScale>
             <div
+              data-test-subj="lns_metric_value"
               style={
                 Object {
                   "fontSize": "60pt",

x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.tsx

@@ -116,9 +116,15 @@ export function MetricChart({
         textAlign: 'center',
       }}
     >
-      <AutoScale minScale={mode === 'reduced' ? 0 : undefined}>
-        <div style={{ fontSize: '60pt', fontWeight: 600 }}>{value}</div>
-        {mode === 'full' && <div style={{ fontSize: '24pt' }}>{title}</div>}
+      <AutoScale>
+        <div data-test-subj="lns_metric_value" style={{ fontSize: '60pt', fontWeight: 600 }}>
+          {value}
+        </div>
+        {mode === 'full' && (
+          <div data-test-subj="lns_metric_title" style={{ fontSize: '24pt' }}>
+            {title}
+          </div>
+        )}
       </AutoScale>
     </div>
   );

x-pack/legacy/plugins/lens/public/register_vis_type_alias.ts

@@ -8,11 +8,9 @@ import { i18n } from '@kbn/i18n';
 import { setup } from '../../../../../src/legacy/core_plugins/visualizations/public/np_ready/public/legacy';
 import { BASE_APP_URL, getEditPath } from '../common';
 
-const NOT_INTERNATIONALIZED_PRODUCT_NAME = 'Lens Visualizations';
-
 setup.types.visTypeAliasRegistry.add({
   aliasUrl: BASE_APP_URL,
-  name: NOT_INTERNATIONALIZED_PRODUCT_NAME,
+  name: 'lens',
   title: i18n.translate('xpack.lens.visTypeAlias.title', {
     defaultMessage: 'Lens Visualizations',
   }),

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.tsx

@@ -214,6 +214,7 @@ export function XYConfigPanel(props: VisualizationProps<State>) {
           </EuiFormRow>
           <EuiFormRow
             className="lnsConfigPanel__axis"
+            data-test-subj="lnsXY_yDimensionPanel"
             label={i18n.translate('xpack.lens.xyChart.yAxisLabel', {
               defaultMessage: 'Y-axis',
             })}

x-pack/test/functional/apps/lens/index.ts

@@ -17,7 +17,7 @@ export default function({ getService, loadTestFile }: FtrProviderContext) {
       log.debug('Starting lens before method');
       browser.setWindowSize(1280, 800);
       await esArchiver.loadIfNeeded('logstash_functional');
-      await esArchiver.loadIfNeeded('visualize/default');
+      await esArchiver.loadIfNeeded('lens/basic');
     });
 
     after(async () => {
@@ -28,7 +28,7 @@ export default function({ getService, loadTestFile }: FtrProviderContext) {
     describe('', function() {
       this.tags(['ciGroup4', 'skipFirefox']);
 
-      loadTestFile(require.resolve('./indexpattern_datapanel'));
+      loadTestFile(require.resolve('./smokescreen'));
     });
   });
 }