[Lens] adding some functional tests (elastic#77863) (elastic#77932)

tsullivan · Sep 18, 2020 · 7fe28c5 · 7fe28c5
1 parent ebc6705
commit 7fe28c5
Show file tree

Hide file tree

Showing 13 changed files with 213 additions and 27 deletions.
diff --git a/...ins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx b/...ins/lens/public/indexpattern_datasource/operations/definitions/filters/filter_popover.tsx
@@ -118,6 +118,7 @@ export const QueryInput = ({
 
   return (
     <QueryStringInput
+      dataTestSubj="indexPattern-filters-queryStringInput"
       size="s"
       isInvalid={isInvalid}
       bubbleSubmitEvent={false}

diff --git a/.../lens/public/indexpattern_datasource/operations/definitions/shared_components/buckets.tsx b/.../lens/public/indexpattern_datasource/operations/definitions/shared_components/buckets.tsx
@@ -20,7 +20,12 @@ import {
 } from '@elastic/eui';
 
 export const NewBucketButton = ({ label, onClick }: { label: string; onClick: () => void }) => (
-  <EuiButtonEmpty size="xs" iconType="plusInCircle" onClick={onClick}>
+  <EuiButtonEmpty
+    data-test-subj="lns-newBucket-add"
+    size="xs"
+    iconType="plusInCircle"
+    onClick={onClick}
+  >
     {label}
   </EuiButtonEmpty>
 );

diff --git a/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx b/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx
@@ -126,6 +126,7 @@ export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationStat
         })}
         type="values"
         groupPosition="left"
+        buttonDataTestSubj="lnsLabelsButton"
       >
         <EuiFormRow
           label={i18n.translate('xpack.lens.pieChart.labelPositionLabel', {

diff --git a/x-pack/plugins/lens/public/shared_components/legend_settings_popover.tsx b/x-pack/plugins/lens/public/shared_components/legend_settings_popover.tsx
@@ -93,6 +93,7 @@ export const LegendSettingsPopover: React.FunctionComponent<LegendSettingsPopove
       })}
       type="legend"
       groupPosition="right"
+      buttonDataTestSubj="lnsLegendButton"
     >
       <EuiFormRow
         display="columnCompressed"

diff --git a/x-pack/plugins/lens/public/shared_components/toolbar_button.tsx b/x-pack/plugins/lens/public/shared_components/toolbar_button.tsx
@@ -33,6 +33,7 @@ export type ToolbarButtonProps = PropsOf<typeof EuiButton> & {
    * Adjusts the borders for groupings
    */
   groupPosition?: 'none' | 'left' | 'center' | 'right';
+  dataTestSubj?: string;
 };
 
 export const ToolbarButton: React.FunctionComponent<ToolbarButtonProps> = ({
@@ -42,6 +43,7 @@ export const ToolbarButton: React.FunctionComponent<ToolbarButtonProps> = ({
   size = 'm',
   hasArrow = true,
   groupPosition = 'none',
+  dataTestSubj = '',
   ...rest
 }) => {
   const classes = classNames(
@@ -52,6 +54,7 @@ export const ToolbarButton: React.FunctionComponent<ToolbarButtonProps> = ({
   );
   return (
     <EuiButton
+      data-test-subj={dataTestSubj}
       className={classes}
       iconSide="right"
       iconType={hasArrow ? 'arrowDown' : ''}

diff --git a/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx b/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx
@@ -31,6 +31,7 @@ export interface ToolbarPopoverProps {
    * Button group position
    */
   groupPosition?: ToolbarButtonProps['groupPosition'];
+  buttonDataTestSubj?: string;
 }
 
 export const ToolbarPopover: React.FunctionComponent<ToolbarPopoverProps> = ({
@@ -39,6 +40,7 @@ export const ToolbarPopover: React.FunctionComponent<ToolbarPopoverProps> = ({
   type,
   isDisabled = false,
   groupPosition,
+  buttonDataTestSubj,
 }) => {
   const [open, setOpen] = useState(false);
 
@@ -60,6 +62,7 @@ export const ToolbarPopover: React.FunctionComponent<ToolbarPopoverProps> = ({
             hasArrow={false}
             isDisabled={isDisabled}
             groupPosition={groupPosition}
+            dataTestSubj={buttonDataTestSubj}
           >
             <EuiIcon type={iconType} />
           </ToolbarButton>

diff --git a/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.tsx b/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.tsx
@@ -73,7 +73,12 @@ export interface AxisSettingsPopoverProps {
 const popoverConfig = (
   axis: AxesSettingsConfigKeys,
   isHorizontal: boolean
-): { icon: IconType; groupPosition: ToolbarButtonProps['groupPosition']; popoverTitle: string } => {
+): {
+  icon: IconType;
+  groupPosition: ToolbarButtonProps['groupPosition'];
+  popoverTitle: string;
+  buttonDataTestSubj: string;
+} => {
   switch (axis) {
     case 'yLeft':
       return {
@@ -86,6 +91,7 @@ const popoverConfig = (
           : i18n.translate('xpack.lens.xyChart.leftAxisLabel', {
               defaultMessage: 'Left axis',
             }),
+        buttonDataTestSubj: 'lnsLeftAxisButton',
       };
     case 'yRight':
       return {
@@ -98,6 +104,7 @@ const popoverConfig = (
           : i18n.translate('xpack.lens.xyChart.rightAxisLabel', {
               defaultMessage: 'Right axis',
             }),
+        buttonDataTestSubj: 'lnsRightAxisButton',
       };
     case 'x':
     default:
@@ -111,6 +118,8 @@ const popoverConfig = (
           : i18n.translate('xpack.lens.xyChart.bottomAxisLabel', {
               defaultMessage: 'Bottom axis',
             }),
+
+        buttonDataTestSubj: 'lnsBottomAxisButton',
       };
   }
 };
@@ -143,6 +152,7 @@ export const AxisSettingsPopover: React.FunctionComponent<AxisSettingsPopoverPro
       type={config.icon}
       groupPosition={config.groupPosition}
       isDisabled={isDisabled}
+      buttonDataTestSubj={config.buttonDataTestSubj}
     >
       <EuiFlexGroup gutterSize="s" justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>

diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
@@ -208,6 +208,7 @@ export function XyToolbar(props: VisualizationToolbarProps<State>) {
               isDisabled={!hasNonBarSeries}
               type="values"
               groupPosition="left"
+              buttonDataTestSubj="lnsMissingValuesButton"
             >
               <EuiFormRow
                 display="columnCompressed"
@@ -216,6 +217,7 @@ export function XyToolbar(props: VisualizationToolbarProps<State>) {
                 })}
               >
                 <EuiSuperSelect
+                  data-test-subj="lnsMissingValuesSelect"
                   compressed
                   options={fittingFunctionDefinitions.map(({ id, title, description }) => {
                     return {
@@ -488,6 +490,7 @@ const ColorPicker = ({
 
   const colorPicker = (
     <EuiColorPicker
+      data-test-subj="indexPattern-dimension-colorPicker"
       compressed
       isClearable
       onChange={handleColor}

diff --git a/x-pack/test/functional/apps/dashboard_mode/dashboard_empty_screen.js b/x-pack/test/functional/apps/dashboard_mode/dashboard_empty_screen.js
@@ -40,18 +40,21 @@ export default function ({ getPageObjects, getService }) {
         operation: 'date_histogram',
         field: '@timestamp',
       });
+      await PageObjects.lens.closeDimensionEditor();
 
       await PageObjects.lens.configureDimension({
         dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension',
         operation: 'avg',
         field: 'bytes',
       });
+      await PageObjects.lens.closeDimensionEditor();
 
       await PageObjects.lens.configureDimension({
         dimension: 'lnsXY_splitDimensionPanel > lns-empty-dimension',
         operation: 'terms',
         field: 'ip',
       });
+      await PageObjects.lens.closeDimensionEditor();
       await PageObjects.lens.save(title, saveAsNew, redirectToOrigin);
     }
 

diff --git a/x-pack/test/functional/apps/lens/dashboard.ts b/x-pack/test/functional/apps/lens/dashboard.ts
@@ -51,7 +51,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await find.clickByButtonText('lnsXYvis');
       await dashboardAddPanel.closeAddPanel();
       await PageObjects.lens.goToTimeRange();
-      await clickInChart(5, 5); // hardcoded position of bar
+      await clickInChart(5, 5); // hardcoded position of bar, depends heavy on data and charts implementation
 
       await retry.try(async () => {
         await testSubjects.click('applyFiltersPopoverButton');
@@ -68,5 +68,23 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       const hasIpFilter = await filterBar.hasFilter('ip', '97.220.3.248');
       expect(hasIpFilter).to.be(true);
     });
+    it('should be able to add filters by clicking in pie chart', async () => {
+      await PageObjects.common.navigateToApp('dashboard');
+      await PageObjects.dashboard.clickNewDashboard();
+      await dashboardAddPanel.clickOpenAddPanel();
+      await dashboardAddPanel.filterEmbeddableNames('lnsPieVis');
+      await find.clickByButtonText('lnsPieVis');
+      await dashboardAddPanel.closeAddPanel();
+
+      await PageObjects.lens.goToTimeRange();
+      await clickInChart(5, 5); // hardcoded position of the slice, depends heavy on data and charts implementation
+
+      await PageObjects.lens.assertExactText(
+        '[data-test-subj="embeddablePanelHeading-lnsPieVis"]',
+        'lnsPieVis'
+      );
+      const hasGeoDestFilter = await filterBar.hasFilter('geo.dest', 'LS');
+      expect(hasGeoDestFilter).to.be(true);
+    });
   });
 }
diff --git a/x-pack/test/functional/apps/lens/rollup.ts b/x-pack/test/functional/apps/lens/rollup.ts
@@ -34,18 +34,21 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         operation: 'date_histogram',
         field: '@timestamp',
       });
+      await PageObjects.lens.closeDimensionEditor();
 
       await PageObjects.lens.configureDimension({
         dimension: 'lnsXY_yDimensionPanel > lns-empty-dimension',
         operation: 'sum',
         field: 'bytes',
       });
+      await PageObjects.lens.closeDimensionEditor();
 
       await PageObjects.lens.configureDimension({
         dimension: 'lnsXY_splitDimensionPanel > lns-empty-dimension',
         operation: 'terms',
         field: 'geo.src',
       });
+      await PageObjects.lens.closeDimensionEditor();
       expect(await find.allByCssSelector('.echLegendItem')).to.have.length(2);
 
       await PageObjects.lens.save('Afancilenstest');