[Lens] Display legend inside chart (#105571)

* [Lens] Legend inside chart * Apply design feedback * Add unit tests * Update snapshot * Add disabled state and unit tests * revert css change * Address PR comments * Reduce the max columns to 5 * Address last comments * minor * Add a comment Co-authored-by: Kibana Machine <[email protected]>
elastic · Jul 21, 2021 · 1bfdc72 · 1bfdc72
1 parent f1539dd
commit 1bfdc72
Show file tree

Hide file tree

Showing 12 changed files with 704 additions and 103 deletions.
diff --git a/x-pack/plugins/lens/public/shared_components/legend_location_settings.test.tsx b/x-pack/plugins/lens/public/shared_components/legend_location_settings.test.tsx
@@ -0,0 +1,132 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { Position } from '@elastic/charts';
+import { shallowWithIntl as shallow, mountWithIntl as mount } from '@kbn/test/jest';
+import { LegendLocationSettings, LegendLocationSettingsProps } from './legend_location_settings';
+
+describe('Legend Location Settings', () => {
+  let props: LegendLocationSettingsProps;
+  beforeEach(() => {
+    props = {
+      onLocationChange: jest.fn(),
+      onPositionChange: jest.fn(),
+    };
+  });
+
+  it('should have default the Position to right when no position is given', () => {
+    const component = shallow(<LegendLocationSettings {...props} />);
+    expect(
+      component.find('[data-test-subj="lens-legend-position-btn"]').prop('idSelected')
+    ).toEqual(Position.Right);
+  });
+
+  it('should have called the onPositionChange function on ButtonGroup change', () => {
+    const component = shallow(<LegendLocationSettings {...props} />);
+    component.find('[data-test-subj="lens-legend-position-btn"]').simulate('change');
+    expect(props.onPositionChange).toHaveBeenCalled();
+  });
+
+  it('should disable the position group if isDisabled prop is true', () => {
+    const component = shallow(<LegendLocationSettings {...props} isDisabled />);
+    expect(
+      component.find('[data-test-subj="lens-legend-position-btn"]').prop('isDisabled')
+    ).toEqual(true);
+  });
+
+  it('should hide the position button group if location inside is given', () => {
+    const newProps = {
+      ...props,
+      location: 'inside',
+    } as LegendLocationSettingsProps;
+    const component = shallow(<LegendLocationSettings {...newProps} />);
+    expect(component.find('[data-test-subj="lens-legend-position-btn"]').length).toEqual(0);
+  });
+
+  it('should render the location settings if location inside is given', () => {
+    const newProps = {
+      ...props,
+      location: 'inside',
+    } as LegendLocationSettingsProps;
+    const component = shallow(<LegendLocationSettings {...newProps} />);
+    expect(component.find('[data-test-subj="lens-legend-location-btn"]').length).toEqual(1);
+  });
+
+  it('should have selected the given location', () => {
+    const newProps = {
+      ...props,
+      location: 'inside',
+    } as LegendLocationSettingsProps;
+    const component = shallow(<LegendLocationSettings {...newProps} />);
+    expect(
+      component.find('[data-test-subj="lens-legend-location-btn"]').prop('idSelected')
+    ).toEqual('xy_location_inside');
+  });
+
+  it('should have called the onLocationChange function on ButtonGroup change', () => {
+    const newProps = {
+      ...props,
+      location: 'inside',
+    } as LegendLocationSettingsProps;
+    const component = shallow(<LegendLocationSettings {...newProps} />);
+    component
+      .find('[data-test-subj="lens-legend-location-btn"]')
+      .simulate('change', 'xy_location_outside');
+    expect(props.onLocationChange).toHaveBeenCalled();
+  });
+
+  it('should default the alignment to top right when no value is given', () => {
+    const newProps = {
+      ...props,
+      location: 'inside',
+    } as LegendLocationSettingsProps;
+    const component = shallow(<LegendLocationSettings {...newProps} />);
+    expect(
+      component.find('[data-test-subj="lens-legend-inside-alignment-btn"]').prop('idSelected')
+    ).toEqual('xy_location_alignment_top_right');
+  });
+
+  it('should have called the onAlignmentChange function on ButtonGroup change', () => {
+    const newProps = {
+      ...props,
+      onAlignmentChange: jest.fn(),
+      location: 'inside',
+    } as LegendLocationSettingsProps;
+    const component = shallow(<LegendLocationSettings {...newProps} />);
+    component
+      .find('[data-test-subj="lens-legend-inside-alignment-btn"]')
+      .simulate('change', 'xy_location_alignment_top_left');
+    expect(newProps.onAlignmentChange).toHaveBeenCalled();
+  });
+
+  it('should have default the columns input to 1 when no value is given', () => {
+    const newProps = {
+      ...props,
+      location: 'inside',
+    } as LegendLocationSettingsProps;
+    const component = mount(<LegendLocationSettings {...newProps} />);
+    expect(
+      component.find('[data-test-subj="lens-legend-location-columns-input"]').at(0).prop('value')
+    ).toEqual(1);
+  });
+
+  it('should disable the components when is Disabled is true', () => {
+    const newProps = {
+      ...props,
+      location: 'inside',
+      isDisabled: true,
+    } as LegendLocationSettingsProps;
+    const component = shallow(<LegendLocationSettings {...newProps} />);
+    expect(
+      component.find('[data-test-subj="lens-legend-location-btn"]').prop('isDisabled')
+    ).toEqual(true);
+    expect(
+      component.find('[data-test-subj="lens-legend-inside-alignment-btn"]').prop('isDisabled')
+    ).toEqual(true);
+  });
+});