Skip to content

Commit

Permalink
=wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbondyra
mbondyra committed Feb 17, 2025
1 parent 28b33b3 commit 5c76252
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 119 deletions.
2 changes: 2 additions & 0 deletions packages/kbn-babel-preset/common_preset.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,8 @@ module.exports = () => ({
},
],

require.resolve('@emotion/babel-preset-css-prop'),

// need to run before the typescript preset, else the param decorators
// are stripped from the imports
{
Expand Down
195 changes: 82 additions & 113 deletions ...ared/kbn-event-annotation-components/components/annotation_editor_controls/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ import type {
import { QueryInputServices } from '@kbn/visualization-ui-components';
import moment from 'moment';
import { act } from 'react-dom/test-utils';
import { EuiButtonGroup } from '@elastic/eui';
import { EuiButtonGroup, EuiThemeProvider } from '@elastic/eui';
import { render, screen } from '@testing-library/react';

jest.mock('@kbn/unified-search-plugin/public', () => ({
QueryStringInput: () => {
Expand Down Expand Up @@ -70,18 +71,25 @@ describe('AnnotationsPanel', () => {
data: {},
} as QueryInputServices;

describe('Dimension Editor', () => {
test('shows correct options for line annotations', () => {
const component = mount(
const mountWithThemeProvider = (propsOverrides: Partial<typeof AnnotationEditorControls> = {}) => {
return mount(
<EuiThemeProvider>
<AnnotationEditorControls
annotation={customLineStaticAnnotation}
onAnnotationChange={() => {}}
dataView={{} as DataView}
dataView={mockDataView}
getDefaultRangeEnd={() => ''}
queryInputServices={mockQueryInputServices}
appName="myApp"
{...propsOverrides}
/>
);
</EuiThemeProvider>)
}

describe('Dimension Editor', () => {
test('shows correct options for line annotations', () => {

const component = mountWithThemeProvider();

expect(
component.find('EuiDatePicker[data-test-subj="lns-xyAnnotation-time"]').prop('selected')
Expand Down Expand Up @@ -124,16 +132,7 @@ describe('AnnotationsPanel', () => {
lineWidth: 3,
};

const component = mount(
<AnnotationEditorControls
annotation={rangeAnnotation}
onAnnotationChange={() => {}}
dataView={{} as DataView}
getDefaultRangeEnd={() => ''}
queryInputServices={mockQueryInputServices}
appName="myApp"
/>
);
const component = mountWithThemeProvider({annotation: rangeAnnotation});

expect(
component.find('EuiDatePicker[data-test-subj="lns-xyAnnotation-fromTime"]').prop('selected')
Expand All @@ -156,57 +155,71 @@ describe('AnnotationsPanel', () => {
expect(component.find('[data-test-subj="lns-xyAnnotation-fillStyle"]').exists()).toBeTruthy();
});

test('calculates correct endTimstamp and transparent color when switching for range annotation and back', async () => {
test.only('calculates correct endTimestamp and transparent color when switching for range annotation and back', async () => {
const onAnnotationChange = jest.fn();
const rangeEndTimestamp = new Date().toISOString();
const component = mount(

const { rerender } = render(
<EuiThemeProvider>
<AnnotationEditorControls
annotation={customLineStaticAnnotation}
onAnnotationChange={onAnnotationChange}
dataView={{} as DataView}
getDefaultRangeEnd={() => rangeEndTimestamp}
queryInputServices={mockQueryInputServices}
appName="myApp"
annotation={customLineStaticAnnotation}
onAnnotationChange={onAnnotationChange}
dataView={mockDataView}
getDefaultRangeEnd={() => rangeEndTimestamp}
queryInputServices={mockQueryInputServices}
appName="myApp"
/>
</EuiThemeProvider>
);

component.find('button[data-test-subj="lns-xyAnnotation-rangeSwitch"]').simulate('click');
act(() => {
screen.getByTestId('lns-xyAnnotation-rangeSwitch').click();
});

const expectedRangeAnnotation: RangeEventAnnotationConfig = {
color: '#FF00001A',
id: 'ann1',
isHidden: undefined,
label: 'Event range',
type: 'manual',
key: {
endTimestamp: rangeEndTimestamp,
timestamp: '2022-03-18T08:25:00.000Z',
type: 'range',
},
color: '#FF00001A',
id: 'ann1',
isHidden: undefined,
label: 'Event range',
type: 'manual',
key: {
endTimestamp: rangeEndTimestamp,
timestamp: '2022-03-18T08:25:00.000Z',
type: 'range',
},
};

expect(onAnnotationChange).toBeCalledWith<EventAnnotationConfig[]>(expectedRangeAnnotation);
expect(onAnnotationChange).toHaveBeenCalledWith(expectedRangeAnnotation);

act(() => {
component.setProps({ annotation: expectedRangeAnnotation });
});
rerender(
<EuiThemeProvider>
<AnnotationEditorControls
annotation={expectedRangeAnnotation}
onAnnotationChange={onAnnotationChange}
dataView={mockDataView}
getDefaultRangeEnd={() => rangeEndTimestamp}
queryInputServices={mockQueryInputServices}
appName="myApp"
/>
</EuiThemeProvider>
);

expect(
component.find('EuiSwitch[data-test-subj="lns-xyAnnotation-rangeSwitch"]').prop('checked')
).toEqual(true);
expect(screen.getByTestId('lns-xyAnnotation-rangeSwitch').getAttribute('aria-checked')).toBe('true');

component.find('button[data-test-subj="lns-xyAnnotation-rangeSwitch"]').simulate('click');
act(() => {
screen.getByTestId('lns-xyAnnotation-rangeSwitch').click();
});

expect(onAnnotationChange).toBeCalledWith<EventAnnotationConfig[]>({
color: '#FF0000',
id: 'ann1',
isHidden: undefined,
key: {
timestamp: '2022-03-18T08:25:00.000Z',
type: 'point_in_time',
},
label: 'Event',
type: 'manual',
expect(onAnnotationChange).toHaveBeenCalledWith({
color: '#FF0000',
id: 'ann1',
isHidden: undefined,
key: {
timestamp: '2022-03-18T08:25:00.000Z',
type: 'point_in_time',
},
label: 'Event',
type: 'manual',
});
});

Expand All @@ -227,16 +240,7 @@ describe('AnnotationsPanel', () => {
filter: { type: 'kibana_query', query: '', language: 'kuery' },
};

const component = mount(
<AnnotationEditorControls
annotation={annotation}
onAnnotationChange={() => {}}
dataView={mockDataView}
getDefaultRangeEnd={() => ''}
queryInputServices={mockQueryInputServices}
appName="myApp"
/>
);
const component = mountWithThemeProvider({ annotation });

expect(
component.find('[data-test-subj="lnsXY-annotation-query-based-field-picker"]').exists()
Expand Down Expand Up @@ -264,16 +268,10 @@ describe('AnnotationsPanel', () => {
test('should prefill timeField with the default time field when switching to query based annotations', () => {
const onAnnotationChange = jest.fn();

const component = mount(
<AnnotationEditorControls
annotation={customLineStaticAnnotation}
onAnnotationChange={onAnnotationChange}
dataView={mockDataView}
getDefaultRangeEnd={() => ''}
queryInputServices={mockQueryInputServices}
appName="myApp"
/>
);
const component = mountWithThemeProvider({
annotation: customLineStaticAnnotation,
onAnnotationChange,
});

act(() => {
component
Expand All @@ -291,16 +289,10 @@ describe('AnnotationsPanel', () => {
test('should avoid to retain specific manual configurations when switching to query based annotations', () => {
const onAnnotationChange = jest.fn();

const component = mount(
<AnnotationEditorControls
annotation={customLineStaticAnnotation}
onAnnotationChange={onAnnotationChange}
dataView={mockDataView}
getDefaultRangeEnd={() => ''}
queryInputServices={mockQueryInputServices}
appName="myApp"
/>
);
const component = mountWithThemeProvider({
annotation: customLineStaticAnnotation,
onAnnotationChange,
});

act(() => {
component
Expand Down Expand Up @@ -336,16 +328,7 @@ describe('AnnotationsPanel', () => {

const onAnnotationChange = jest.fn();

const component = mount(
<AnnotationEditorControls
annotation={annotation}
onAnnotationChange={onAnnotationChange}
dataView={mockDataView}
getDefaultRangeEnd={() => ''}
queryInputServices={mockQueryInputServices}
appName="myApp"
/>
);
const component = mountWithThemeProvider({ annotation, onAnnotationChange });

act(() => {
component
Expand Down Expand Up @@ -379,16 +362,7 @@ describe('AnnotationsPanel', () => {

const onAnnotationChange = jest.fn();

const component = mount(
<AnnotationEditorControls
annotation={annotation}
onAnnotationChange={onAnnotationChange}
dataView={mockDataView}
getDefaultRangeEnd={() => ''}
queryInputServices={mockQueryInputServices}
appName="myApp"
/>
);
const component = mountWithThemeProvider({ annotation, onAnnotationChange });

act(() => {
component
Expand All @@ -412,16 +386,11 @@ describe('AnnotationsPanel', () => {

test('should fallback to the first date field available in the dataView if not time-based', () => {
const onAnnotationChange = jest.fn();
const component = mount(
<AnnotationEditorControls
annotation={customLineStaticAnnotation}
onAnnotationChange={onAnnotationChange}
dataView={{ ...mockDataView, timeFieldName: '' } as DataView}
getDefaultRangeEnd={() => ''}
queryInputServices={mockQueryInputServices}
appName="myApp"
/>
);
const component = mountWithThemeProvider({
annotation: customLineStaticAnnotation,
onAnnotationChange,
dataView: { ...mockDataView, timeFieldName: '' } as DataView,
});

act(() => {
component
Expand Down
7 changes: 1 addition & 6 deletions src/platform/packages/shared/kbn-event-annotation-components/tsconfig.json
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
{
"extends": "../../../../../tsconfig.base.json",
"compilerOptions": {
"outDir": "target/types",
"types": [
"jest",
"node",
"@emotion/react/types/css-prop",
]
"outDir": "target/types"
},
"include": [
"**/*",
Expand Down

0 comments on commit 5c76252

Please sign in to comment.