Skip to content

Commit

Permalink
[Lens] Trigger a filter action on click in datatable visualization (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
Wylie Conlon authored May 1, 2020
1 parent 35ba965 commit dd54453
Show file tree
Hide file tree
Showing 7 changed files with 373 additions and 29 deletions.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
@@ -1,3 +1,13 @@
.lnsDataTable {
align-self: flex-start;
}

.lnsDataTable__filter {
opacity: 0;
transition: opacity $euiAnimSpeedNormal ease-in-out;
}

.lnsDataTable__cell:hover .lnsDataTable__filter,
.lnsDataTable__filter:focus-within {
opacity: 1;
}
156 changes: 156 additions & 0 deletions x-pack/plugins/lens/public/datatable_visualization/expression.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { shallow } from 'enzyme';
import { mountWithIntl } from 'test_utils/enzyme_helpers';
import { datatable, DatatableComponent } from './expression';
import { LensMultiTable } from '../types';
import { DatatableProps } from './expression';
import { createMockExecutionContext } from '../../../../../src/plugins/expressions/common/mocks';
import { IFieldFormat } from '../../../../../src/plugins/data/public';
import { IAggType } from 'src/plugins/data/public';
const executeTriggerActions = jest.fn();

function sampleArgs() {
const data: LensMultiTable = {
type: 'lens_multitable',
tables: {
l1: {
type: 'kibana_datatable',
columns: [
{ id: 'a', name: 'a', meta: { type: 'count' } },
{ id: 'b', name: 'b', meta: { type: 'date_histogram', aggConfigParams: { field: 'b' } } },
{ id: 'c', name: 'c', meta: { type: 'cardinality' } },
],
rows: [{ a: 10110, b: 1588024800000, c: 3 }],
},
},
};

const args: DatatableProps['args'] = {
title: 'My fanci metric chart',
columns: {
columnIds: ['a', 'b', 'c'],
type: 'lens_datatable_columns',
},
};

return { data, args };
}

describe('datatable_expression', () => {
describe('datatable renders', () => {
test('it renders with the specified data and args', () => {
const { data, args } = sampleArgs();
const result = datatable.fn(data, args, createMockExecutionContext());

expect(result).toEqual({
type: 'render',
as: 'lens_datatable_renderer',
value: { data, args },
});
});
});

describe('DatatableComponent', () => {
test('it renders the title and value', () => {
const { data, args } = sampleArgs();

expect(
shallow(
<DatatableComponent
data={data}
args={args}
formatFactory={x => x as IFieldFormat}
executeTriggerActions={executeTriggerActions}
getType={jest.fn()}
/>
)
).toMatchSnapshot();
});

test('it invokes executeTriggerActions with correct context on click on top value', () => {
const { args, data } = sampleArgs();

const wrapper = mountWithIntl(
<DatatableComponent
data={{
...data,
dateRange: {
fromDate: new Date('2020-04-20T05:00:00.000Z'),
toDate: new Date('2020-05-03T05:00:00.000Z'),
},
}}
args={args}
formatFactory={x => x as IFieldFormat}
executeTriggerActions={executeTriggerActions}
getType={jest.fn(() => ({ type: 'buckets' } as IAggType))}
/>
);

wrapper
.find('[data-test-subj="lensDatatableFilterOut"]')
.first()
.simulate('click');

expect(executeTriggerActions).toHaveBeenCalledWith('VALUE_CLICK_TRIGGER', {
data: {
data: [
{
column: 0,
row: 0,
table: data.tables.l1,
value: 10110,
},
],
negate: true,
},
timeFieldName: undefined,
});
});

test('it invokes executeTriggerActions with correct context on click on timefield', () => {
const { args, data } = sampleArgs();

const wrapper = mountWithIntl(
<DatatableComponent
data={{
...data,
dateRange: {
fromDate: new Date('2020-04-20T05:00:00.000Z'),
toDate: new Date('2020-05-03T05:00:00.000Z'),
},
}}
args={args}
formatFactory={x => x as IFieldFormat}
executeTriggerActions={executeTriggerActions}
getType={jest.fn(() => ({ type: 'buckets' } as IAggType))}
/>
);

wrapper
.find('[data-test-subj="lensDatatableFilterFor"]')
.at(3)
.simulate('click');

expect(executeTriggerActions).toHaveBeenCalledWith('VALUE_CLICK_TRIGGER', {
data: {
data: [
{
column: 1,
row: 0,
table: data.tables.l1,
value: 1588024800000,
},
],
negate: false,
},
timeFieldName: 'b',
});
});
});
});
Loading

0 comments on commit dd54453

Please sign in to comment.