Skip to content

Commit

Permalink
Test suggestion panel apply changes prompt
Browse files Browse the repository at this point in the history
  • Loading branch information
@drewdaemon
drewdaemon committed Feb 14, 2022
1 parent 026737c commit 4811574
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 48 deletions.
74 changes: 63 additions & 11 deletions x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,21 @@ import { getSuggestions, Suggestion } from './suggestion_helpers';
import { EuiIcon, EuiPanel, EuiToolTip, EuiAccordion } from '@elastic/eui';
import { LensIconChartDatatable } from '../../assets/chart_datatable';
import { mountWithProvider } from '../../mocks';
import { LensAppState, PreviewState, setState, setToggleFullscreen } from '../../state_management';
import {
applyChanges,
DatasourceStates,
LensAppState,
PreviewState,
setState,
setToggleFullscreen,
VisualizationState,
} from '../../state_management';

const SELECTORS = {
APPLY_CHANGES_BUTTON: 'button[data-test-subj="lnsSuggestionApplyChanges"]',
SUGGESTIONS_PANEL: '[data-test-subj="lnsSuggestionsPanel"]',
SUGGESTION_TILE_BUTTON: 'button[data-test-subj="lnsSuggestion"]',
};

jest.mock('./suggestion_helpers');

Expand Down Expand Up @@ -108,6 +122,39 @@ describe('suggestion_panel', () => {
expect(instance.find(SuggestionPanel).exists()).toBe(true);
});

it('should display apply-changes prompt when changes not applied', async () => {
const { instance, lensStore } = await mountWithProvider(<SuggestionPanel {...defaultProps} />, {
preloadedState: {
...preloadedState,
visualization: {
...preloadedState.visualization,
state: {
something: 'changed',
},
} as VisualizationState,
// including appliedState signals that auto-apply has been disabled
appliedState: {
visualization: preloadedState.visualization as VisualizationState,
datasourceStates: preloadedState.datasourceStates as DatasourceStates,
},
},
});

expect(instance.exists(SELECTORS.APPLY_CHANGES_BUTTON)).toBeTruthy();
expect(instance.exists(SELECTORS.SUGGESTION_TILE_BUTTON)).toBeFalsy();

instance.find(SELECTORS.APPLY_CHANGES_BUTTON).simulate('click');

// check changes applied
const newLensState = lensStore.getState().lens;
expect(newLensState.appliedState?.visualization).toEqual(newLensState.visualization);
expect(newLensState.appliedState?.datasourceStates).toEqual(newLensState.datasourceStates);

// check UI updated
expect(instance.exists(SELECTORS.APPLY_CHANGES_BUTTON)).toBeFalsy();
expect(instance.exists(SELECTORS.SUGGESTION_TILE_BUTTON)).toBeTruthy();
});

it('should list passed in suggestions', async () => {
const { instance } = await mountWithProvider(<SuggestionPanel {...defaultProps} />, {
preloadedState,
Expand Down Expand Up @@ -173,12 +220,12 @@ describe('suggestion_panel', () => {
preloadedState,
});
act(() => {
instance.find('[data-test-subj="lnsSuggestion"]').at(2).simulate('click');
instance.find(SELECTORS.SUGGESTION_TILE_BUTTON).at(2).simulate('click');
});

instance.update();

expect(instance.find('[data-test-subj="lnsSuggestion"]').at(2).prop('className')).toContain(
expect(instance.find(SELECTORS.SUGGESTION_TILE_BUTTON).at(2).prop('className')).toContain(
'lnsSuggestionPanel__button-isSelected'
);
});
Expand All @@ -189,20 +236,24 @@ describe('suggestion_panel', () => {
);

act(() => {
instance.find('[data-test-subj="lnsSuggestion"]').at(2).simulate('click');
instance.find(SELECTORS.SUGGESTION_TILE_BUTTON).at(2).simulate('click');
});

instance.update();

act(() => {
instance.find('[data-test-subj="lnsSuggestion"]').at(0).simulate('click');
instance.find(SELECTORS.SUGGESTION_TILE_BUTTON).at(0).simulate('click');
});

instance.update();

expect(lensStore.dispatch).toHaveBeenCalledWith({
type: 'lens/rollbackSuggestion',
});
// check that it immediately applied any state changes in case auto-apply disabled
expect(lensStore.dispatch).toHaveBeenLastCalledWith({
type: applyChanges.type,
});
});
});

Expand All @@ -212,7 +263,7 @@ describe('suggestion_panel', () => {
});

act(() => {
instance.find('button[data-test-subj="lnsSuggestion"]').at(1).simulate('click');
instance.find(SELECTORS.SUGGESTION_TILE_BUTTON).at(1).simulate('click');
});

expect(lensStore.dispatch).toHaveBeenCalledWith(
Expand All @@ -228,6 +279,7 @@ describe('suggestion_panel', () => {
},
})
);
expect(lensStore.dispatch).toHaveBeenLastCalledWith({ type: applyChanges.type });
});

it('should render render icon if there is no preview expression', async () => {
Expand Down Expand Up @@ -264,10 +316,10 @@ describe('suggestion_panel', () => {
preloadedState,
});

expect(instance.find('[data-test-subj="lnsSuggestionsPanel"]').find(EuiIcon)).toHaveLength(1);
expect(
instance.find('[data-test-subj="lnsSuggestionsPanel"]').find(EuiIcon).prop('type')
).toEqual(LensIconChartDatatable);
expect(instance.find(SELECTORS.SUGGESTIONS_PANEL).find(EuiIcon)).toHaveLength(1);
expect(instance.find(SELECTORS.SUGGESTIONS_PANEL).find(EuiIcon).prop('type')).toEqual(
LensIconChartDatatable
);
});

it('should return no suggestion if visualization has missing index-patterns', async () => {
Expand Down Expand Up @@ -301,7 +353,7 @@ describe('suggestion_panel', () => {
instance.find(EuiAccordion).at(0).simulate('change');
});

expect(instance.find('[data-test-subj="lnsSuggestionsPanel"]')).toEqual({});
expect(instance.find(SELECTORS.SUGGESTIONS_PANEL)).toEqual({});
});

it('should render preview expression if there is one', () => {
Expand Down
11 changes: 7 additions & 4 deletions x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,7 +343,7 @@ export function SuggestionPanel({
<EuiPanel
hasBorder
hasShadow={false}
className={classNames('lnsSuggestionPanel__applyChangesPrompt')}
className="lnsSuggestionPanel__applyChangesPrompt"
paddingSize="m"
>
<EuiFlexGroup alignItems="center" justifyContent="center" gutterSize="s">
Expand All @@ -361,6 +361,7 @@ export function SuggestionPanel({
size="s"
className={DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS}
onClick={() => dispatchLens(applyChanges())}
data-test-subj="lnsSuggestionApplyChanges"
>
<FormattedMessage
id="xpack.lens.suggestions.applyChangesLabel"
Expand All @@ -373,7 +374,7 @@ export function SuggestionPanel({
);

const suggestionsUI = (
<div className="lnsSuggestionPanel__suggestions" data-test-subj="lnsSuggestionsPanel">
<>
{currentVisualization.activeId && !hideSuggestions && (
<SuggestionPreview
preview={{
Expand Down Expand Up @@ -417,7 +418,7 @@ export function SuggestionPanel({
/>
);
})}
</div>
</>
);

return (
Expand Down Expand Up @@ -461,7 +462,9 @@ export function SuggestionPanel({
)
}
>
{changesApplied ? suggestionsUI : applyChangesPrompt}
<div className="lnsSuggestionPanel__suggestions" data-test-subj="lnsSuggestionsPanel">
{changesApplied ? suggestionsUI : applyChangesPrompt}
</div>
</EuiAccordion>
</div>
);
Expand Down
88 changes: 55 additions & 33 deletions x-pack/plugins/lens/public/state_management/selectors.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,19 +29,38 @@ describe('lens selectors', () => {
);
});

it('should select changes applied', () => {
const stateWithChangesApplied = {
visualization: {
activeId: 'some-id',
state: {},
},
datasourceStates: {
indexpattern: {
isLoading: false,
describe('selecting changes applied', () => {
it('should be true when applied state matches working state', () => {
const lensState = {
visualization: {
activeId: 'some-id',
state: {},
},
},
appliedState: {
datasourceStates: {
indexpattern: {
isLoading: false,
state: {},
},
},
appliedState: {
visualization: {
activeId: 'some-id',
state: {},
},
datasourceStates: {
indexpattern: {
isLoading: false,
state: {},
},
},
},
} as Partial<LensAppState>;

expect(selectChangesApplied({ lens: lensState as LensAppState })).toBeTruthy();
});

it('should be true when no applied state (auto-apply enabled)', () => {
const lensState = {
visualization: {
activeId: 'some-id',
state: {},
Expand All @@ -52,40 +71,43 @@ describe('lens selectors', () => {
state: {},
},
},
},
} as Partial<LensAppState>;
appliedState: undefined,
} as Partial<LensAppState>;

expect(selectChangesApplied({ lens: stateWithChangesApplied as LensAppState })).toBeTruthy();
expect(selectChangesApplied({ lens: lensState as LensAppState })).toBeTruthy();
});

const stateWithChangesNOTApplied = {
visualization: {
activeId: 'some-other-id',
state: {
something: 'changed',
},
},
datasourceStates: {
indexpattern: {
isLoading: false,
it('should be false when applied state differs from working state', () => {
const lensState = {
visualization: {
activeId: 'some-other-id',
state: {
something: 'changed',
},
},
},
appliedState: {
visualization: {
activeId: 'some-id',
state: {},
},
datasourceStates: {
indexpattern: {
isLoading: false,
state: {
something: 'changed',
},
},
},
appliedState: {
visualization: {
activeId: 'some-id',
state: {},
},
datasourceStates: {
indexpattern: {
isLoading: false,
state: {},
},
},
},
},
} as unknown as LensAppState;
} as unknown as LensAppState;

expect(selectChangesApplied({ lens: stateWithChangesNOTApplied as LensAppState })).toBeFalsy();
expect(selectChangesApplied({ lens: lensState as LensAppState })).toBeFalsy();
});
});
});

0 comments on commit 4811574

Please sign in to comment.