diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/__snapshots__/index.test.tsx.snap b/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/__snapshots__/index.test.tsx.snap index af099b8be528d..3023b50ba39cf 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/__snapshots__/index.test.tsx.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/__snapshots__/index.test.tsx.snap @@ -1,46 +1,81 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AnnotationDescriptionList Initialization with annotation. 1`] = ` -", - "title": "Created by", - }, - Object { - "description": "January 2nd 2019, 08:18:17", - "title": "Last modified", - }, - Object { - "description": "", - "title": "Modified by", - }, - ] - } - type="column" -/> + data-type="column" + style="grid-template-columns: 3fr 7fr;" +> +
+ Job ID +
+
+ farequote +
+
+ Start +
+
+ February 9th 2016, 13:56:17 +
+
+ End +
+
+ February 9th 2016, 18:19:28 +
+
+ Created +
+
+ January 2nd 2019, 08:18:17 +
+
+ Created by +
+
+ <user unknown> +
+
+ Last modified +
+
+ January 2nd 2019, 08:18:17 +
+
+ Modified by +
+
+ <user unknown> +
+ `; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/index.test.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/index.test.tsx index 8c4b35d300576..bc644d79aca67 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/index.test.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/index.test.tsx @@ -9,21 +9,24 @@ import mockAnnotations from '../annotations_table/__mocks__/mock_annotations.jso import moment from 'moment-timezone'; import React from 'react'; -import { shallowWithIntl } from '@kbn/test-jest-helpers'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; import { AnnotationDescriptionList } from '.'; +import type { Annotation } from '../../../../../common/types/annotations'; describe('AnnotationDescriptionList', () => { beforeEach(() => { moment.tz.setDefault('UTC'); }); + afterEach(() => { moment.tz.setDefault('Browser'); }); test('Initialization with annotation.', () => { - // @ts-expect-error mock data is too loosely typed - const wrapper = shallowWithIntl(); - expect(wrapper).toMatchSnapshot(); + const { container } = renderWithI18n( + + ); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotations_table/__snapshots__/annotations_table.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotations_table/__snapshots__/annotations_table.test.js.snap index dbd4f3a79a8e9..ce93005bf187b 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotations_table/__snapshots__/annotations_table.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotations_table/__snapshots__/annotations_table.test.js.snap @@ -1,554 +1,44 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AnnotationsTable Initialization with annotations prop. 1`] = ` -", - "end_timestamp": 1455041968976, - "job_id": "farequote", - "modified_time": 1546417097181, - "modified_username": "", - "timestamp": 1455026177994, - "type": "annotation", - }, - ] - } - intl={ - Object { - "$t": [Function], - "defaultFormats": Object { - "date": Object { - "full": Object { - "day": "numeric", - "month": "long", - "weekday": "long", - "year": "numeric", - }, - "long": Object { - "day": "numeric", - "month": "long", - "year": "numeric", - }, - "medium": Object { - "day": "numeric", - "month": "short", - "year": "numeric", - }, - "short": Object { - "day": "numeric", - "month": "numeric", - "year": "2-digit", - }, - }, - "number": Object { - "currency": Object { - "style": "currency", - }, - "percent": Object { - "style": "percent", - }, - }, - "relative": Object { - "days": Object { - "style": "long", - }, - "hours": Object { - "style": "long", - }, - "minutes": Object { - "style": "long", - }, - "months": Object { - "style": "long", - }, - "seconds": Object { - "style": "long", - }, - "years": Object { - "style": "long", - }, - }, - "time": Object { - "full": Object { - "hour": "numeric", - "minute": "numeric", - "second": "numeric", - "timeZoneName": "short", - }, - "long": Object { - "hour": "numeric", - "minute": "numeric", - "second": "numeric", - "timeZoneName": "short", - }, - "medium": Object { - "hour": "numeric", - "minute": "numeric", - "second": "numeric", - }, - "short": Object { - "hour": "numeric", - "minute": "numeric", - }, - }, - }, - "defaultLocale": "en", - "fallbackOnEmptyString": true, - "formatDate": [Function], - "formatDateTimeRange": [Function], - "formatDateToParts": [Function], - "formatDisplayName": [Function], - "formatList": [Function], - "formatListToParts": [Function], - "formatMessage": [Function], - "formatNumber": [Function], - "formatNumberToParts": [Function], - "formatPlural": [Function], - "formatRelativeTime": [Function], - "formatTime": [Function], - "formatTimeToParts": [Function], - "formats": Object {}, - "formatters": Object { - "getDateTimeFormat": [Function], - "getDisplayNames": [Function], - "getListFormat": [Function], - "getMessageFormat": [Function], - "getNumberFormat": [Function], - "getPluralRules": [Function], - "getRelativeTimeFormat": [Function], - }, - "locale": "en", - "messages": Object {}, - "onError": [Function], - "onWarn": [Function], - "timeZone": undefined, - } - } - kibana={ - Object { - "notifications": Object { - "toasts": Object { - "danger": [Function], - "show": [Function], - "success": [Function], - "warning": [Function], - }, - }, - "overlays": Object { - "openFlyout": [Function], - "openModal": [Function], - }, - "services": Object {}, - } - } -/> +
+ Mocked table with 1 items +
`; exports[`AnnotationsTable Initialization with job config prop. 1`] = ` - +
+
+ +
+
`; exports[`AnnotationsTable Minimal initialization without props. 1`] = ` - + `; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotations_table/annotations_table.test.js b/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotations_table/annotations_table.test.js index 2a567231d3aca..48c928bfba636 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotations_table/annotations_table.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotations_table/annotations_table.test.js @@ -7,17 +7,25 @@ import jobConfig from '../../../../../common/types/__mocks__/job_config_farequote.json'; import mockAnnotations from './__mocks__/mock_annotations.json'; - -import { shallowWithIntl } from '@kbn/test-jest-helpers'; +import { AnnotationsTable } from './annotations_table'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; -import { AnnotationsTable } from './annotations_table'; +const mockAnnotationUpdatesService = { + subscribe: jest.fn(), + unsubscribe: jest.fn(), +}; -jest.mock('../../../services/job_service', () => ({ - mlJobService: { +const mockReact = React; + +jest.mock('../../../services/job_service', () => { + const mockMlJobService = { getJob: jest.fn(), - }, -})); + }; + return { + mlJobServiceFactory: jest.fn().mockReturnValue(mockMlJobService), + }; +}); jest.mock('../../../services/ml_api_service', () => { const { of } = require('rxjs'); @@ -31,19 +39,59 @@ jest.mock('../../../services/ml_api_service', () => { }; }); +jest.mock('@elastic/eui', () => { + const original = jest.requireActual('@elastic/eui'); + return { + ...original, + EuiInMemoryTable: jest.fn().mockImplementation(({ items }) => { + return mockReact.createElement( + 'div', + { 'data-test-subj': 'mockEuiInMemoryTable' }, + `Mocked table with ${items?.length || 0} items` + ); + }), + }; +}); + +const mockKibanaContext = { + services: { + mlServices: { + mlApi: {}, + }, + }, +}; + +// Mock withKibana HOC +jest.mock('@kbn/kibana-react-plugin/public', () => { + return { + withKibana: (Component) => { + const EnhancedComponent = (props) => { + return mockReact.createElement(Component, { + ...props, + kibana: mockKibanaContext, + annotationUpdatesService: mockAnnotationUpdatesService, + }); + }; + return EnhancedComponent; + }, + }; +}); + describe('AnnotationsTable', () => { test('Minimal initialization without props.', () => { - const wrapper = shallowWithIntl(); - expect(wrapper).toMatchSnapshot(); + const { container } = renderWithI18n(); + expect(container.firstChild).toMatchSnapshot(); }); test('Initialization with job config prop.', () => { - const wrapper = shallowWithIntl(); - expect(wrapper).toMatchSnapshot(); + const { container } = renderWithI18n(); + expect(container.firstChild).toMatchSnapshot(); }); test('Initialization with annotations prop.', () => { - const wrapper = shallowWithIntl(); - expect(wrapper).toMatchSnapshot(); + const { container } = renderWithI18n( + + ); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/anomaly_details.test.js b/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/anomaly_details.test.js index 193c43631013a..f93f0f3e71667 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/anomaly_details.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/anomaly_details.test.js @@ -6,7 +6,8 @@ */ import React from 'react'; -import { mountWithIntl } from '@kbn/test-jest-helpers'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; +import { screen } from '@testing-library/react'; import { AnomalyDetails } from './anomaly_details'; const props = { @@ -68,9 +69,11 @@ describe('AnomalyDetails', () => { ...props, tabIndex: 1, }; - const wrapper = mountWithIntl(); - expect(wrapper.containsMatchingElement(Details)).toBe(true); - expect(wrapper.containsMatchingElement(Category examples)).toBe(true); + renderWithI18n(); + + // Verify both tabs are displayed + expect(screen.getByText('Details')).toBeInTheDocument(); + expect(screen.getByText('Category examples')).toBeInTheDocument(); }); test('Renders with terms and regex when definition prop is not undefined', () => { @@ -83,11 +86,12 @@ describe('AnomalyDetails', () => { }, }; - const wrapper = mountWithIntl(); + renderWithI18n(); - expect(wrapper.containsMatchingElement(

Regex

)).toBe(true); - expect(wrapper.containsMatchingElement(

Terms

)).toBe(true); - expect(wrapper.contains(

Examples

)).toBe(true); + // Verify all headings are displayed + expect(screen.getByRole('heading', { name: 'Regex' })).toBeInTheDocument(); + expect(screen.getByRole('heading', { name: 'Terms' })).toBeInTheDocument(); + expect(screen.getByRole('heading', { name: 'Examples' })).toBeInTheDocument(); }); test('Renders only with examples when definition prop is undefined', () => { @@ -97,11 +101,12 @@ describe('AnomalyDetails', () => { definition: undefined, }; - const wrapper = mountWithIntl(); + renderWithI18n(); - expect(wrapper.containsMatchingElement(

Regex

)).toBe(false); - expect(wrapper.containsMatchingElement(

Terms

)).toBe(false); - expect(wrapper.contains(

Examples

)).toBe(false); + // Verify that none of the headings are displayed + expect(screen.queryByRole('heading', { name: 'Regex' })).not.toBeInTheDocument(); + expect(screen.queryByRole('heading', { name: 'Terms' })).not.toBeInTheDocument(); + expect(screen.queryByRole('heading', { name: 'Examples' })).not.toBeInTheDocument(); }); test('Renders only with terms when definition.regex is undefined', () => { @@ -113,11 +118,12 @@ describe('AnomalyDetails', () => { }, }; - const wrapper = mountWithIntl(); + renderWithI18n(); - expect(wrapper.containsMatchingElement(

Regex

)).toBe(false); - expect(wrapper.containsMatchingElement(

Terms

)).toBe(true); - expect(wrapper.contains(

Examples

)).toBe(true); + // Verify the correct headings are displayed + expect(screen.queryByRole('heading', { name: 'Regex' })).not.toBeInTheDocument(); + expect(screen.getByRole('heading', { name: 'Terms' })).toBeInTheDocument(); + expect(screen.getByRole('heading', { name: 'Examples' })).toBeInTheDocument(); }); test('Renders only with regex when definition.terms is undefined', () => { @@ -129,10 +135,11 @@ describe('AnomalyDetails', () => { }, }; - const wrapper = mountWithIntl(); + renderWithI18n(); - expect(wrapper.containsMatchingElement(

Regex

)).toBe(true); - expect(wrapper.containsMatchingElement(

Terms

)).toBe(false); - expect(wrapper.contains(

Examples

)).toBe(true); + // Verify the correct headings are displayed + expect(screen.getByRole('heading', { name: 'Regex' })).toBeInTheDocument(); + expect(screen.queryByRole('heading', { name: 'Terms' })).not.toBeInTheDocument(); + expect(screen.getByRole('heading', { name: 'Examples' })).toBeInTheDocument(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.test.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.test.tsx index d726356624b35..606e45cfcb526 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.test.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.test.tsx @@ -6,7 +6,8 @@ */ import React from 'react'; -import { mountWithIntl } from '@kbn/test-jest-helpers'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; +import { screen } from '@testing-library/react'; import { EntityCell } from './entity_cell'; const defaultProps = { @@ -18,17 +19,33 @@ const defaultProps = { describe('EntityCell', () => { test('Icons are displayed when filter, entityName, and entityValue are defined', () => { - const wrapper = mountWithIntl(); - const icons = wrapper.find('EuiButtonIcon'); + renderWithI18n(); - expect(icons.length).toBe(2); + // Test for the presence of both add and remove filter buttons + const addFilterButton = screen.getByTestId( + `mlAnomaliesTableEntityCellAddFilterButton-${defaultProps.entityValue}` + ); + const removeFilterButton = screen.getByTestId( + `mlAnomaliesTableEntityCellRemoveFilterButton-${defaultProps.entityValue}` + ); + + expect(addFilterButton).toBeInTheDocument(); + expect(removeFilterButton).toBeInTheDocument(); }); test('Icons are not displayed when filter, entityName, or entityValue are undefined', () => { const propsUndefinedFilter = { ...defaultProps, filter: undefined }; - const wrapper = mountWithIntl(); - const icons = wrapper.find('EuiButtonIcon'); + renderWithI18n(); + + // Test that filter buttons are not present + const addFilterButton = screen.queryByTestId( + `mlAnomaliesTableEntityCellAddFilterButton-${defaultProps.entityValue}` + ); + const removeFilterButton = screen.queryByTestId( + `mlAnomaliesTableEntityCellRemoveFilterButton-${defaultProps.entityValue}` + ); - expect(icons.length).toBe(0); + expect(addFilterButton).not.toBeInTheDocument(); + expect(removeFilterButton).not.toBeInTheDocument(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/actions_section.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/actions_section.test.js.snap index fec3fa9121d13..10a6657c81bb9 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/actions_section.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/actions_section.test.js.snap @@ -1,268 +1,328 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ActionsSection renders with no actions selected 1`] = ` - - +
+

- + Choose the actions to take when the job rule matches an anomaly.

- - +
- - - +
+ - } - onChange={[MockFunction]} - /> - - - - } - position="right" - size="s" - /> - - - + +
+
+
+ + + Info + + +
+
+
- - - +
+ - } - onChange={[MockFunction]} - /> - - - - } - position="right" - size="s" - /> - - - +
+ +
+
+
+ + + Info + + +
+ + `; exports[`ActionsSection renders with skip_result and skip_model_update selected 1`] = ` - - +
+

- + Choose the actions to take when the job rule matches an anomaly.

- - +
- - - +
+ - } - onChange={[Function]} - /> - - - - } - position="right" - size="s" - /> - - - + +
+
+
+ + + Info + + +
+
+
- - - +
+ - } - onChange={[Function]} - /> - - - - } - position="right" - size="s" - /> - - - +
+ +
+
+
+ + + Info + + +
+ + `; exports[`ActionsSection renders with skip_result selected 1`] = ` - - +
+

- + Choose the actions to take when the job rule matches an anomaly.

- - +
- - - +
+ - } - onChange={[MockFunction]} - /> - - - - } - position="right" - size="s" - /> - - - + +
+
+
+ + + Info + + +
+
+
- - - +
+ - } - onChange={[MockFunction]} - /> - - - - } - position="right" - size="s" - /> - - - +
+ +
+
+
+ + + Info + + +
+ + `; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/condition_expression.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/condition_expression.test.js.snap index 8e53daa6cf1f7..4cfaa8e0e9e7a 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/condition_expression.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/condition_expression.test.js.snap @@ -1,369 +1,138 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ConditionExpression renders with appliesTo, operator and value supplied 1`] = ` - - - - } - isActive={false} - onClick={[Function]} - value="diff from typical" - /> - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} +
-
- - - -
+ - -
-
- - - + + + diff from typical + + +
+ +
- - } - isActive={false} - onClick={[Function]} - value="123" - /> - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} +
-
- - - -
+ + is greater than + + + - - - - - - - - -
-
- - - + +
+
+
- - - + class="euiButtonIcon emotion-euiButtonIcon-s-empty-danger" + type="button" + > +
+ `; exports[`ConditionExpression renders with only value supplied 1`] = ` - - - - } - isActive={false} - onClick={[Function]} - value="" - /> - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} +
-
- - - -
+ - -
-
- - - + + +
+ +
- - } - isActive={false} - onClick={[Function]} - value="123" - /> - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} +
-
- - - -
+ - - - - - - - - -
-
- - - + + + 123 + + +
+
+
- - - + class="euiButtonIcon emotion-euiButtonIcon-s-empty-danger" + type="button" + > +
+ `; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/conditions_section.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/conditions_section.test.js.snap index 2a468884ee029..efdd3d56203f1 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/conditions_section.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/conditions_section.test.js.snap @@ -1,96 +1,297 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ConditionsSectionExpression don't render when not enabled with conditions 1`] = `""`; +exports[`ConditionsSectionExpression don't render when not enabled with conditions 1`] = `
`; -exports[`ConditionsSectionExpression don't render when the section is not enabled 1`] = `""`; +exports[`ConditionsSectionExpression don't render when the section is not enabled 1`] = `
`; exports[`ConditionsSectionExpression renders when enabled with empty conditions supplied 1`] = ` - - +
- - - - + + + Add new condition + + + +
`; exports[`ConditionsSectionExpression renders when enabled with no conditions supplied 1`] = ` - - +
- - - - + + + Add new condition + + + +
`; exports[`ConditionsSectionExpression renders when enabled with one condition 1`] = ` - - - +
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
- - - - + + + Add new condition + + + +
`; exports[`ConditionsSectionExpression renders when enabled with two conditions 1`] = ` - - - - +
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
- - - - + + + Add new condition + + + +
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap index a4a648d02e1ab..a34841fd4f18b 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap @@ -1,810 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`RuleEditorFlyout don't render after closing the flyout 1`] = `""`; - -exports[`RuleEditorFlyout don't render when not opened 1`] = `""`; - -exports[`RuleEditorFlyout renders the flyout after adding a condition to a rule 1`] = ` - - - - -

- -

- - - - - - -

- - - , - } - } - /> -

- - - -

- -

- - - - -

- -

- - - - - - - - - } - > -

- -

-

- -

- - - - - - - - - - - - - - - - - - -`; - -exports[`RuleEditorFlyout renders the flyout after setting the rule to edit 1`] = ` - - - - -

- -

- - - - - - -

- - - , - } - } - /> -

- - - -

- -

- - - - -

- -

- - - - - - - - - } - > -

- -

-

- -

- - - - - - - - - - - - - - - - - - -`; - -exports[`RuleEditorFlyout renders the flyout for creating a rule with conditions only 1`] = ` - - - - -

- -

- - - - - - -

- - - , - } - } - /> -

- - - -

- -

- - - - -

- -

- - - - - - - - - } - > -

- -

-

- -

- - - - - - - - - - - - - - - - - - -`; - -exports[`RuleEditorFlyout renders the select action component for a detector with a rule 1`] = ` - - - - -

- -

- - - - - - - - - - - - - - - - -`; +exports[`RuleEditorFlyout don't render when not opened 1`] = `null`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/scope_expression.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/scope_expression.test.js.snap index 1a4de7cdcaafc..69fae39bcfeca 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/scope_expression.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/scope_expression.test.js.snap @@ -1,455 +1,259 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ScopeExpression renders when empty list of filter IDs is supplied 1`] = ` - - - - - - +
+ - } - isActive={false} - onClick={[Function]} - value="domain" - /> - - + +
+
+
+
+ +
+ `; exports[`ScopeExpression renders when enabled set to false 1`] = ` - - - - - - +
+ - } - isActive={false} - onClick={[Function]} - value="domain" - /> - - - - } - isActive={false} - onClick={[Function]} - value="safe_domains" + - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} +
+ + +
+ +
+
+
-
- - - -
+ - - - - - - - - -
-
- - - + is in + + + + safe_domains + + +
+
+ `; exports[`ScopeExpression renders when filter ID and type supplied 1`] = ` - - - - - - +
+ - } - isActive={false} - onClick={[Function]} - value="domain" - /> - - - - } - isActive={false} - onClick={[Function]} - value="safe_domains" + - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} +
+ + +
+ +
+
+
-
- - - -
+ - - - - - - - - -
-
- - - + is in + + + + safe_domains + + +
+
+ `; exports[`ScopeExpression renders when no filter ID or type supplied 1`] = ` - - - - - - +
+ - } - isActive={false} - onClick={[Function]} - value="domain" - /> - - - - } - isActive={false} - onClick={[Function]} - value="" + - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} +
+ + +
+ +
+
+
-
- - - -
+ - - - - - - - - -
-
- - - + is + + + +
+
+ `; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/scope_section.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/scope_section.test.js.snap index 110530cd03e97..a88924a2f12c3 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/scope_section.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/__snapshots__/scope_section.test.js.snap @@ -1,200 +1,401 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ScopeSection don't render when no partitioning fields 1`] = `""`; +exports[`ScopeSection don't render when no partitioning fields 1`] = `
`; exports[`ScopeSection false canGetFilters privilege show NoPermissionCallOut when no filter list IDs 1`] = ` - - -

- -

- - +

+ Scope +

+
- +
+ - } - onChange={[MockFunction]} - /> - +
+ +
+
- - +

+

+
+
- +
`; exports[`ScopeSection renders when enabled with no scope supplied 1`] = ` - - -

- -

- - +

+ Scope +

+
- +
+ - } - onChange={[MockFunction]} - /> - - +
+ +
+
- +
+
+
+ + +
+
+
+
+ +
+
+
+ +
+
+
+
- +
`; exports[`ScopeSection renders when enabled with scope supplied 1`] = ` - - -

- -

- - +

+ Scope +

+
- +
+ - } - onChange={[MockFunction]} - /> - - +
+ +
+
- +
+
+
+ + +
+
+
+
+ +
+
+
+ +
+
+
+
- +
`; exports[`ScopeSection renders when not enabled 1`] = ` - - -

- -

- - +

+ Scope +

+
- +
+ - } - onChange={[MockFunction]} - /> - +
+ +
+
- - +
`; exports[`ScopeSection show NoFilterListsCallOut when no filter list IDs 1`] = ` - - -

- -

- - +

+ Scope +

+
- +
+ - } - onChange={[MockFunction]} - /> - +
+ +
+
- - +

+

+
+
+

+ To configure scope, you must first use the  + + settings page to create the list of values you want to include or exclude in the job rule. +

+
+
+
- +
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/actions_section.test.js b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/actions_section.test.js index b99a0066600f6..b5c005d7abd17 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/actions_section.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/actions_section.test.js @@ -6,15 +6,14 @@ */ import React from 'react'; - -import { shallowWithIntl } from '@kbn/test-jest-helpers'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; import { ML_DETECTOR_RULE_ACTION } from '@kbn/ml-anomaly-utils'; import { ActionsSection } from './actions_section'; describe('ActionsSection', () => { - const onSkipResultChange = jest.fn(() => {}); - const onSkipModelUpdateChange = jest.fn(() => {}); + const onSkipResultChange = jest.fn(); + const onSkipModelUpdateChange = jest.fn(); const requiredProps = { onSkipResultChange, @@ -27,9 +26,9 @@ describe('ActionsSection', () => { actions: [], }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); test('renders with skip_result selected', () => { @@ -38,13 +37,13 @@ describe('ActionsSection', () => { actions: [ML_DETECTOR_RULE_ACTION.SKIP_RESULT], }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); test('renders with skip_result and skip_model_update selected', () => { - const component = shallowWithIntl( + const { container } = renderWithI18n( {}} @@ -52,6 +51,6 @@ describe('ActionsSection', () => { /> ); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/__snapshots__/detector_description_list.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/__snapshots__/detector_description_list.test.js.snap index e115a3a9b28b4..3af1b43dd7aba 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/__snapshots__/detector_description_list.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/__snapshots__/detector_description_list.test.js.snap @@ -1,117 +1,80 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DetectorDescriptionList render for detector with anomaly values 1`] = ` -, - }, - Object { - "description": "mean response time", - "title": , - }, - Object { - "description": , - "typical": , - } - } - />, - "title": , - }, - ] - } - type="column" -/> +
+
+ Job ID +
+
+ responsetimes +
+
+ Detector +
+
+ mean response time +
+
+ Selected anomaly +
+
+ actual + + 50 + + , typical + + 1.23 + +
+
`; exports[`DetectorDescriptionList render for population detector with no anomaly values 1`] = ` -, - }, - Object { - "description": "count by status over clientip", - "title": , - }, - ] - } - type="column" -/> +
+
+ Job ID +
+
+ population +
+
+ Detector +
+
+ count by status over clientip +
+
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/detector_description_list.test.js b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/detector_description_list.test.js index 1c979525ca9eb..0c4cff19292a0 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/detector_description_list.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/detector_description_list.test.js @@ -5,8 +5,20 @@ * 2.0. */ -import { shallowWithIntl } from '@kbn/test-jest-helpers'; +jest.mock('../../../anomalies_table/anomaly_value_display', () => ({ + AnomalyValueDisplay: jest.fn().mockImplementation(({ value }) => { + const React = jest.requireActual('react'); + const displayValue = Array.isArray(value) ? value[0] : value; + return React.createElement( + 'span', + { 'data-test-subj': 'mockAnomalyValueDisplay' }, + `${displayValue}` + ); + }), +})); + import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; import { DetectorDescriptionList } from './detector_description_list'; @@ -26,9 +38,9 @@ describe('DetectorDescriptionList', () => { }, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); test('render for population detector with no anomaly values', () => { @@ -54,8 +66,8 @@ describe('DetectorDescriptionList', () => { }, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/condition_expression.js b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/condition_expression.js index 3857a97c3c9e7..578e2db19534f 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/condition_expression.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/condition_expression.js @@ -228,7 +228,6 @@ export class ConditionExpression extends Component { closePopover={this.closeOperatorValue} panelPaddingSize="s" ownFocus - withTitle anchorPosition="downLeft" > {this.renderOperatorValuePopover()} diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/condition_expression.test.js b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/condition_expression.test.js index a0f9eedddf5d6..21712b7690cce 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/condition_expression.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/condition_expression.test.js @@ -8,16 +8,16 @@ // Mock the mlJobService that is imported for saving rules. jest.mock('../../services/job_service', () => 'mlJobService'); -import { shallowWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; import { ML_DETECTOR_RULE_APPLIES_TO, ML_DETECTOR_RULE_OPERATOR } from '@kbn/ml-anomaly-utils'; import { ConditionExpression } from './condition_expression'; describe('ConditionExpression', () => { - const updateCondition = jest.fn(() => {}); - const deleteCondition = jest.fn(() => {}); + const updateCondition = jest.fn(); + const deleteCondition = jest.fn(); const requiredProps = { index: 0, @@ -31,9 +31,9 @@ describe('ConditionExpression', () => { value: 123, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); test('renders with appliesTo, operator and value supplied', () => { @@ -44,8 +44,8 @@ describe('ConditionExpression', () => { value: 123, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/conditions_section.test.js b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/conditions_section.test.js index 01cf0a035e9d3..7c5cfeeb18475 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/conditions_section.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/conditions_section.test.js @@ -8,8 +8,8 @@ // Mock the mlJobService that is imported for saving rules. jest.mock('../../services/job_service', () => 'mlJobService'); -import { shallowWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; import { ML_DETECTOR_RULE_APPLIES_TO, ML_DETECTOR_RULE_OPERATOR } from '@kbn/ml-anomaly-utils'; @@ -17,9 +17,9 @@ import { ConditionsSection } from './conditions_section'; import { getNewConditionDefaults } from './utils'; describe('ConditionsSectionExpression', () => { - const addCondition = jest.fn(() => {}); - const updateCondition = jest.fn(() => {}); - const deleteCondition = jest.fn(() => {}); + const addCondition = jest.fn(); + const updateCondition = jest.fn(); + const deleteCondition = jest.fn(); const testCondition = { applies_to: ML_DETECTOR_RULE_APPLIES_TO.TYPICAL, @@ -39,9 +39,9 @@ describe('ConditionsSectionExpression', () => { isEnabled: false, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); test('renders when enabled with no conditions supplied', () => { @@ -50,9 +50,9 @@ describe('ConditionsSectionExpression', () => { isEnabled: true, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); test('renders when enabled with empty conditions supplied', () => { @@ -62,9 +62,9 @@ describe('ConditionsSectionExpression', () => { conditions: [], }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); test('renders when enabled with one condition', () => { @@ -74,9 +74,9 @@ describe('ConditionsSectionExpression', () => { conditions: [getNewConditionDefaults()], }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); test('renders when enabled with two conditions', () => { @@ -86,9 +86,9 @@ describe('ConditionsSectionExpression', () => { conditions: [getNewConditionDefaults(), testCondition], }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); test(`don't render when not enabled with conditions`, () => { @@ -98,8 +98,8 @@ describe('ConditionsSectionExpression', () => { conditions: [getNewConditionDefaults(), testCondition], }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/rule_editor_flyout.test.js b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/rule_editor_flyout.test.js index a711774b0a21d..18ceabec0eb65 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/rule_editor_flyout.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/rule_editor_flyout.test.js @@ -55,34 +55,27 @@ jest.mock('@kbn/kibana-react-plugin/public', () => ({ }, })); -import { shallowWithIntl } from '@kbn/test-jest-helpers'; +jest.mock('./select_rule_action', () => ({ + SelectRuleAction: jest.fn().mockImplementation(({ job, anomaly }) => { + const React = jest.requireActual('react'); + return React.createElement( + 'div', + { 'data-testid': 'mock-select-rule-action' }, + `Mock SelectRuleAction for job ${job?.job_id} and detector ${anomaly?.detectorIndex}` + ); + }), +})); + import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; import { RuleEditorFlyout } from './rule_editor_flyout'; -const NO_RULE_ANOMALY = { - jobId: 'farequote_no_by', - detectorIndex: 0, - source: { - function: 'mean', - }, -}; - -const RULE_ANOMALY = { - jobId: 'farequote_no_by', - detectorIndex: 1, - source: { - function: 'max', - }, -}; - -function prepareTest() { - const setShowFunction = jest.fn(() => {}); - const unsetShowFunction = jest.fn(() => {}); - - const requiredProps = { - setShowFunction, - unsetShowFunction, +describe('RuleEditorFlyout', () => { + // Common props used across all tests + const getRequiredProps = () => ({ + setShowFunction: jest.fn(), + unsetShowFunction: jest.fn(), kibana: { services: { docLinks: { @@ -95,66 +88,15 @@ function prepareTest() { mlServices: { mlApi: {} }, notifications: { toasts: { - addDanger: () => {}, + addDanger: jest.fn(), }, }, }, }, - }; - - const component = ; - - const wrapper = shallowWithIntl(component); - - return { wrapper }; -} - -describe('RuleEditorFlyout', () => { - test(`don't render when not opened`, () => { - const test1 = prepareTest(); - expect(test1.wrapper).toMatchSnapshot(); - }); - - test('renders the flyout for creating a rule with conditions only', () => { - const test2 = prepareTest(); - test2.wrapper.instance().showFlyout(NO_RULE_ANOMALY); - test2.wrapper.update(); - expect(test2.wrapper).toMatchSnapshot(); - }); - - test('renders the flyout after adding a condition to a rule', () => { - const test3 = prepareTest(); - const instance = test3.wrapper.instance(); - instance.showFlyout(NO_RULE_ANOMALY); - instance.addCondition(); - test3.wrapper.update(); - expect(test3.wrapper).toMatchSnapshot(); - }); - - test('renders the select action component for a detector with a rule', () => { - const test4 = prepareTest(); - const instance = test4.wrapper.instance(); - instance.showFlyout(RULE_ANOMALY); - test4.wrapper.update(); - expect(test4.wrapper).toMatchSnapshot(); }); - test('renders the flyout after setting the rule to edit', () => { - const test5 = prepareTest(); - const instance = test5.wrapper.instance(); - instance.showFlyout(RULE_ANOMALY); - instance.setEditRuleIndex(0); - test5.wrapper.update(); - expect(test5.wrapper).toMatchSnapshot(); - }); - - test(`don't render after closing the flyout`, () => { - const test6 = prepareTest(); - const instance = test6.wrapper.instance(); - instance.showFlyout(RULE_ANOMALY); - instance.setEditRuleIndex(0); - instance.closeFlyout(); - test6.wrapper.update(); - expect(test6.wrapper).toMatchSnapshot(); + test(`don't render when not opened`, () => { + const { container } = renderWithI18n(); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/scope_expression.test.js b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/scope_expression.test.js index 99212675829bb..f5eea814d48fb 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/scope_expression.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/scope_expression.test.js @@ -9,15 +9,14 @@ jest.mock('../../services/job_service', () => 'mlJobService'); import React from 'react'; - -import { shallowWithIntl } from '@kbn/test-jest-helpers'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; import { ML_DETECTOR_RULE_FILTER_TYPE } from '@kbn/ml-anomaly-utils'; import { ScopeExpression } from './scope_expression'; describe('ScopeExpression', () => { const testFilterListIds = ['web_domains', 'safe_domains', 'uk_domains']; - const updateScope = jest.fn(() => {}); + const updateScope = jest.fn(); const requiredProps = { fieldName: 'domain', @@ -31,9 +30,9 @@ describe('ScopeExpression', () => { enabled: true, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); test('renders when empty list of filter IDs is supplied', () => { @@ -43,9 +42,9 @@ describe('ScopeExpression', () => { enabled: true, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); test('renders when filter ID and type supplied', () => { @@ -57,9 +56,9 @@ describe('ScopeExpression', () => { enabled: true, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); test('renders when enabled set to false', () => { @@ -71,8 +70,8 @@ describe('ScopeExpression', () => { enabled: false, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/scope_section.test.js b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/scope_section.test.js index 05d480291185b..1cc08c4510aa2 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/scope_section.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/scope_section.test.js @@ -16,9 +16,12 @@ jest.mock('../../capabilities/check_capabilities', () => ({ checkPermission: (privilege) => mockCheckPermission(privilege), })); -import React from 'react'; +jest.mock('../../contexts/kibana', () => ({ + useCreateAndNavigateToManagementMlLink: jest.fn().mockReturnValue(jest.fn()), +})); -import { shallowWithIntl } from '@kbn/test-jest-helpers'; +import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; import { ML_DETECTOR_RULE_FILTER_TYPE } from '@kbn/ml-anomaly-utils'; import { ScopeSection } from './scope_section'; @@ -34,8 +37,8 @@ describe('ScopeSection', () => { }, }; - const onEnabledChange = jest.fn(() => {}); - const updateScope = jest.fn(() => {}); + const onEnabledChange = jest.fn(); + const updateScope = jest.fn(); const requiredProps = { filterListIds: testFilterListIds, @@ -50,9 +53,9 @@ describe('ScopeSection', () => { isEnabled: false, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); test(`don't render when no partitioning fields`, () => { @@ -62,9 +65,9 @@ describe('ScopeSection', () => { isEnabled: false, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); test('show NoFilterListsCallOut when no filter list IDs', () => { @@ -75,9 +78,9 @@ describe('ScopeSection', () => { isEnabled: true, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); test('renders when enabled with no scope supplied', () => { @@ -87,9 +90,9 @@ describe('ScopeSection', () => { isEnabled: true, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); test('renders when enabled with scope supplied', () => { @@ -100,9 +103,9 @@ describe('ScopeSection', () => { isEnabled: true, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); }); @@ -111,8 +114,8 @@ describe('ScopeSection false canGetFilters privilege', () => { jest.resetModules(); }); - const onEnabledChange = jest.fn(() => {}); - const updateScope = jest.fn(() => {}); + const onEnabledChange = jest.fn(); + const updateScope = jest.fn(); const requiredProps = { onEnabledChange, @@ -131,8 +134,8 @@ describe('ScopeSection false canGetFilters privilege', () => { isEnabled: true, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/add_to_filter_list_link.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/add_to_filter_list_link.test.js.snap index c2c7493960bf4..61f90657b10e6 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/add_to_filter_list_link.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/add_to_filter_list_link.test.js.snap @@ -1,18 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AddToFilterListLink renders the add to filter list link for a value 1`] = ` - - - + Add elastic.co to safe_domains + `; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/delete_rule_modal.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/delete_rule_modal.test.js.snap index 995c5e043d324..1a2ca1aba5e7c 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/delete_rule_modal.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/delete_rule_modal.test.js.snap @@ -1,52 +1,31 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DeleteRuleModal renders as delete button after opening and closing modal 1`] = ` - - - - - + `; exports[`DeleteRuleModal renders as delete button when not visible 1`] = ` - - - - - + `; exports[`DeleteRuleModal renders modal after clicking delete rule link 1`] = ` - - - - - - + `; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/edit_condition_link.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/edit_condition_link.test.js.snap index e3add7cfbb44e..2b4a0bcc1bc22 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/edit_condition_link.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/__snapshots__/edit_condition_link.test.js.snap @@ -1,148 +1,139 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EditConditionLink renders for a condition using actual 1`] = ` - - - - - - - +
+
- - - +
+ +
+
+
+
- - - - - + Update + +
+ `; exports[`EditConditionLink renders for a condition using diff from typical 1`] = ` - - - - - - - + +
- - - +
+ +
+
+ +
- - - - - + Update + +
+ `; exports[`EditConditionLink renders for a condition using typical 1`] = ` - - - - - - - + +
- - - +
+ +
+
+ +
- - - - - + Update + +
+ `; diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/add_to_filter_list_link.js b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/add_to_filter_list_link.js index ceaaceb2cca6b..fc60aef6cdfd8 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/add_to_filter_list_link.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/add_to_filter_list_link.js @@ -18,7 +18,10 @@ import { FormattedMessage } from '@kbn/i18n-react'; export function AddToFilterListLink({ fieldValue, filterId, addItemToFilterList }) { return ( - addItemToFilterList(fieldValue, filterId, true)}> + addItemToFilterList(fieldValue, filterId, true)} + data-test-subj="mlAddToFilterListLink" + > { test(`renders the add to filter list link for a value`, () => { - const addItemToFilterList = jest.fn(() => {}); + const addItemToFilterList = jest.fn(); - const wrapper = shallowWithIntl( + const { container, getByTestId } = renderWithI18n( { /> ); - expect(wrapper).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); - wrapper.find('EuiLink').simulate('click'); - wrapper.update(); - expect(addItemToFilterList).toHaveBeenCalled(); + fireEvent.click(getByTestId('mlAddToFilterListLink')); + + expect(addItemToFilterList).toHaveBeenCalledWith('elastic.co', 'safe_domains', true); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/delete_rule_modal.js b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/delete_rule_modal.js index 68221bbe58791..1dbe6f741477e 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/delete_rule_modal.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/delete_rule_modal.js @@ -66,7 +66,11 @@ export class DeleteRuleModal extends Component { return ( - this.showModal()}> + this.showModal()} + data-test-subj="deleteRuleModalLink" + > { - const deleteRuleAtIndex = jest.fn(() => {}); + const deleteRuleAtIndex = jest.fn(); const requiredProps = { ruleIndex: 0, @@ -19,36 +20,49 @@ describe('DeleteRuleModal', () => { }; test('renders as delete button when not visible', () => { - const props = { - ...requiredProps, - }; + const { container } = renderWithI18n(); - const component = shallowWithIntl(); - - expect(component).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); test('renders modal after clicking delete rule link', () => { - const props = { - ...requiredProps, - }; - - const wrapper = shallowWithIntl(); - wrapper.find('EuiLink').simulate('click'); - wrapper.update(); - expect(wrapper).toMatchSnapshot(); + const { container } = renderWithI18n(); + + // Find and click the delete link + const deleteLink = screen.getByTestId('deleteRuleModalLink'); + fireEvent.click(deleteLink); + + // Modal should be visible now + expect(container.firstChild).toMatchSnapshot(); }); test('renders as delete button after opening and closing modal', () => { - const props = { - ...requiredProps, - }; - - const wrapper = shallowWithIntl(); - wrapper.find('EuiLink').simulate('click'); - const instance = wrapper.instance(); - instance.closeModal(); - wrapper.update(); - expect(wrapper).toMatchSnapshot(); + const { container } = renderWithI18n(); + + // Open the modal + const deleteLink = screen.getByTestId('deleteRuleModalLink'); + fireEvent.click(deleteLink); + + // Find and click the cancel button + const cancelButton = screen.getByTestId('confirmModalCancelButton'); + fireEvent.click(cancelButton); + + // Modal should be closed now + expect(container.firstChild).toMatchSnapshot(); + }); + + test('calls deleteRuleAtIndex when confirm button is clicked', () => { + renderWithI18n(); + + // Open the modal + const deleteLink = screen.getByTestId('deleteRuleModalLink'); + fireEvent.click(deleteLink); + + // Find and click the delete button + const deleteButton = screen.getByTestId('confirmModalConfirmButton'); + fireEvent.click(deleteButton); + + // Verify the function was called with the correct index + expect(deleteRuleAtIndex).toHaveBeenCalledWith(0); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/edit_condition_link.test.js b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/edit_condition_link.test.js index ddcffadcacbb3..49d3b8de22ad9 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/edit_condition_link.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/edit_condition_link.test.js @@ -8,62 +8,62 @@ jest.mock('../../../services/job_service', () => 'mlJobService'); import React from 'react'; - -import { shallowWithIntl } from '@kbn/test-jest-helpers'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; +import { fireEvent } from '@testing-library/react'; import { ML_DETECTOR_RULE_APPLIES_TO } from '@kbn/ml-anomaly-utils'; import { EditConditionLink } from './edit_condition_link'; -function prepareTest(updateConditionValueFn, appliesTo) { - const anomaly = { - actual: [210], - typical: [1.23], - detectorIndex: 0, - source: { - function: 'mean', - airline: ['AAL'], - }, - }; +// Common test data +const testAnomaly = { + actual: [210], + typical: [1.23], + detectorIndex: 0, + source: { + function: 'mean', + airline: ['AAL'], + }, +}; + +describe('EditConditionLink', () => { + const updateConditionValue = jest.fn(); - const props = { + // Helper function to get common props + const getProps = (appliesTo) => ({ conditionIndex: 0, conditionValue: 5, appliesTo, - anomaly, - updateConditionValue: updateConditionValueFn, - }; - - const wrapper = shallowWithIntl(); - - return wrapper; -} - -describe('EditConditionLink', () => { - const updateConditionValue = jest.fn(() => {}); + anomaly: testAnomaly, + updateConditionValue, + }); test(`renders for a condition using actual`, () => { - const wrapper = prepareTest(updateConditionValue, ML_DETECTOR_RULE_APPLIES_TO.ACTUAL); - expect(wrapper).toMatchSnapshot(); + const props = getProps(ML_DETECTOR_RULE_APPLIES_TO.ACTUAL); + const { container } = renderWithI18n(); + expect(container.firstChild).toMatchSnapshot(); }); test(`renders for a condition using typical`, () => { - const wrapper = prepareTest(updateConditionValue, ML_DETECTOR_RULE_APPLIES_TO.TYPICAL); - expect(wrapper).toMatchSnapshot(); + const props = getProps(ML_DETECTOR_RULE_APPLIES_TO.TYPICAL); + const { container } = renderWithI18n(); + expect(container.firstChild).toMatchSnapshot(); }); test(`renders for a condition using diff from typical`, () => { - const wrapper = prepareTest( - updateConditionValue, - ML_DETECTOR_RULE_APPLIES_TO.DIFF_FROM_TYPICAL - ); - expect(wrapper).toMatchSnapshot(); + const props = getProps(ML_DETECTOR_RULE_APPLIES_TO.DIFF_FROM_TYPICAL); + const { container } = renderWithI18n(); + expect(container.firstChild).toMatchSnapshot(); }); test('calls updateConditionValue on clicking update link', () => { - const wrapper = prepareTest(updateConditionValue, ML_DETECTOR_RULE_APPLIES_TO.ACTUAL); - const instance = wrapper.instance(); - instance.onUpdateClick(); - wrapper.update(); + const props = getProps(ML_DETECTOR_RULE_APPLIES_TO.ACTUAL); + const { getByRole } = renderWithI18n(); + + // Find and click the update button + const updateButton = getByRole('button', { name: 'Update' }); + fireEvent.click(updateButton); + + // Verify the function was called with the correct arguments expect(updateConditionValue).toHaveBeenCalledWith(0, 210); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/use_create_analytics_form.test.tsx b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/use_create_analytics_form.test.tsx index 863383ee33669..54e588dafb4b6 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/use_create_analytics_form.test.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/use_create_analytics_form.test.tsx @@ -6,25 +6,24 @@ */ import React from 'react'; -import { mountHook } from '@kbn/test-jest-helpers'; +import { renderHook } from '@testing-library/react'; import { useCreateAnalyticsForm } from './use_create_analytics_form'; import { kibanaContextMock } from '../../../../../contexts/kibana/__mocks__/kibana_context'; import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; -const getMountedHook = () => - mountHook( - () => useCreateAnalyticsForm(), - ({ children }) => ( +const getRenderHook = () => + renderHook(() => useCreateAnalyticsForm(), { + wrapper: ({ children }: { children: React.ReactNode }) => ( {children} - ) - ); + ), + }); describe('useCreateAnalyticsForm()', () => { test('initialization', () => { - const { getLastHookValue } = getMountedHook(); - const { actions } = getLastHookValue(); + const { result } = getRenderHook(); + const { actions } = result.current; expect(typeof actions.createAnalyticsJob).toBe('function'); expect(typeof actions.startAnalyticsJob).toBe('function'); diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/__snapshots__/explorer_chart_info_tooltip.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/__snapshots__/explorer_chart_info_tooltip.test.js.snap index 70f8e7e29a1ff..1df9c21837a7e 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/__snapshots__/explorer_chart_info_tooltip.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/__snapshots__/explorer_chart_info_tooltip.test.js.snap @@ -2,29 +2,51 @@ exports[`ExplorerChartTooltip Render tooltip based on infoTooltip data. 1`] = `
- +
+
+ job ID +
+
+ mock-job-id +
+
+ aggregation interval +
+
+ 15m +
+
+ chart function +
+
+ avg responsetime +
+
+ airline +
+
+ JAL +
+
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_chart_info_tooltip.test.js b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_chart_info_tooltip.test.js index c2149097c8733..25d7ccb509129 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_chart_info_tooltip.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/explorer_chart_info_tooltip.test.js @@ -5,8 +5,8 @@ * 2.0. */ -import { shallowWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; import { ExplorerChartInfoTooltip } from './explorer_chart_info_tooltip'; @@ -24,7 +24,7 @@ describe('ExplorerChartTooltip', () => { jobId: 'mock-job-id', }; - const wrapper = shallowWithIntl(); - expect(wrapper).toMatchSnapshot(); + const { container } = renderWithI18n(); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap index e70c43b383f98..6a54d7b887330 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap @@ -1,146 +1,818 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`CalendarForm CalendarId shown as title when editing 1`] = `null`; +exports[`CalendarForm CalendarId shown as title when editing 1`] = ` +
+
+

+ test description +

+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+ +
+
+
+ + No items found + +
+
+
+
+
+
+
+
+ +
+
+ +
+
+
+`; exports[`CalendarForm Renders calendar form 1`] = ` - - - - - - } +
- - - + +
+
+
+
+ +
+
+
+ Use lowercase alphanumerics (a-z and 0-9), hyphens or underscores; must start and end with an alphanumeric character +
+
+
+
- - - } +
- - - - } +
+ +
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
- - - + +
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
- - } +
- - - + +
+
+
+
+ + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+ +
+
+
+ + No items found + +
+
+
+
+
+
- - - - - - - - + +
+
+ +
+
+
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/calendar_form/calendar_form.test.js b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/calendar_form/calendar_form.test.js index 2283c0b1e7db7..f42869978e754 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/calendar_form/calendar_form.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/calendar_form/calendar_form.test.js @@ -5,8 +5,9 @@ * 2.0. */ -import { shallowWithIntl, mountWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; + import { CalendarForm } from './calendar_form'; jest.mock('../../../../contexts/kibana/use_create_url', () => ({ @@ -44,9 +45,9 @@ const testProps = { describe('CalendarForm', () => { test('Renders calendar form', () => { - const wrapper = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(wrapper).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); test('CalendarId shown as title when editing', () => { @@ -56,9 +57,12 @@ describe('CalendarForm', () => { calendarId: 'test-calendar', description: 'test description', }; - const wrapper = mountWithIntl(); - const calendarId = wrapper.find('EuiTitle'); - expect(calendarId).toMatchSnapshot(); + const { getByTestId } = renderWithI18n(); + + const calendarForm = getByTestId('mlCalendarFormEdit'); + expect(calendarForm).toBeInTheDocument(); + + expect(calendarForm).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/events_table/__snapshots__/events_table.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/events_table/__snapshots__/events_table.test.js.snap index cf5d3a492c7b2..bb3fea4ef5cb4 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/events_table/__snapshots__/events_table.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/events_table/__snapshots__/events_table.test.js.snap @@ -1,185 +1,718 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EventsTable Renders events table with no search bar 1`] = ` - - +
- - Start - , - "render": [Function], - "sortable": true, - }, - Object { - "field": "end_time", - "name": - End - , - "render": [Function], - "sortable": true, - }, - Object { - "field": "", - "name": "", - "render": [Function], - }, - ] - } +
- + > + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+ +
+
+
+ + test description + +
+ 		+
+ 2017-02-09 11:10:00 +
+ 		+
+ 2017-02-09 11:30:00 +
+ 		+
+ +
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
`; exports[`EventsTable Renders events table with search bar 1`] = ` - - +
- - Start - , - "render": [Function], - "sortable": true, - }, - Object { - "field": "end_time", - "name": - End - , - "render": [Function], - "sortable": true, - }, - Object { - "field": "", - "name": "", - "render": [Function], - }, - ] - } - data-test-subj="mlCalendarEventsTable" - itemId="event_id" - items={ - Array [ - Object { - "calendar_id": "test-calendar", - "description": "test description", - "end_time": 1486657800000, - "event_id": "test-event-one", - "start_time": 1486656600000, - }, - ] - } - pagination={ - Object { - "initialPageSize": 5, - "pageSizeOptions": Array [ - 5, - 10, - ], - } - } - rowProps={[Function]} - search={ - Object { - "box": Object { - "incremental": true, - }, - "filters": Array [], - "toolsRight": Array [ - - +
+
+
+
+
+ + +
+ - , - - +
+
+
+
+
+
+ +
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+ +
+
+
+ + test description + +
+ 		+
+ 2017-02-09 11:10:00 +
+ 		+
+ 2017-02-09 11:30:00 +
+ 		+
+ +
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/events_table/events_table.test.js b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/events_table/events_table.test.js index 25961e266c3bc..8d04555d751db 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/events_table/events_table.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/events_table/events_table.test.js @@ -5,8 +5,10 @@ * 2.0. */ -import { shallowWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; +import { fireEvent } from '@testing-library/react'; + import { EventsTable } from './events_table'; jest.mock('../../../../capabilities/check_capabilities', () => ({ @@ -32,9 +34,9 @@ const testProps = { describe('EventsTable', () => { test('Renders events table with no search bar', () => { - const wrapper = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(wrapper).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); test('Renders events table with search bar', () => { @@ -43,8 +45,22 @@ describe('EventsTable', () => { showSearchBar: true, }; - const wrapper = shallowWithIntl(); + const { container } = renderWithI18n(); + + expect(container).toMatchSnapshot(); + }); + + test('Calls onDeleteClick when delete button is clicked', () => { + const onDeleteClick = jest.fn(); + + const { getByTestId } = renderWithI18n( + + ); + + const deleteButton = getByTestId('mlCalendarEventDeleteButton'); + + fireEvent.click(deleteButton); - expect(wrapper).toMatchSnapshot(); + expect(onDeleteClick).toHaveBeenCalledWith('test-event-one'); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/import_modal/__snapshots__/import_modal.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/import_modal/__snapshots__/import_modal.test.js.snap index 747e801a278a7..a68de8f2957af 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/import_modal/__snapshots__/import_modal.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/import_modal/__snapshots__/import_modal.test.js.snap @@ -1,74 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ImportModal Renders import modal 1`] = ` - - - - - - - - - - -

- -

- - - - - - - - - - - - - - - - - - - - -`; +exports[`ImportModal Renders import modal 1`] = `null`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/import_modal/import_modal.test.js b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/import_modal/import_modal.test.js index ceccb4f2ba11e..6a9586e0a021c 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/import_modal/import_modal.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/import_modal/import_modal.test.js @@ -5,8 +5,9 @@ * 2.0. */ -import { shallowWithIntl, mountWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; + import { ImportModal } from './import_modal'; jest.mock('../../../../capabilities/check_capabilities', () => ({ @@ -19,47 +20,10 @@ const testProps = { canCreateCalendar: true, }; -const events = [ - { - description: 'Downtime feb 9 2017 10:10 to 10:30', - start_time: 1486656600000, - end_time: 1486657800000, - calendar_id: 'farequote-calendar', - event_id: 'Ee-YgGcBxHgQWEhCO_xj', - }, - { - description: 'New event!', - start_time: 1544076000000, - end_time: 1544162400000, - calendar_id: 'this-is-a-new-calendar', - event_id: 'ehWKhGcBqHkXuWNrIrSV', - }, -]; - describe('ImportModal', () => { test('Renders import modal', () => { - const wrapper = shallowWithIntl(); - - expect(wrapper).toMatchSnapshot(); - }); - - test('Deletes selected event from event table', () => { - const wrapper = mountWithIntl(); - - const testState = { - allImportedEvents: events, - selectedEvents: events, - }; - - const instance = wrapper.instance(); - - instance.setState(testState); - wrapper.update(); - expect(wrapper.state('selectedEvents').length).toBe(2); - const deleteButton = wrapper.find('[data-test-subj="mlCalendarEventDeleteButton"]'); - const button = deleteButton.find('EuiButtonEmpty').first(); - button.simulate('click'); + const { container } = renderWithI18n(); - expect(wrapper.state('selectedEvents').length).toBe(1); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/imported_events/__snapshots__/imported_events.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/imported_events/__snapshots__/imported_events.test.js.snap index cae4e2d7b9f70..01189e6ede9d2 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/imported_events/__snapshots__/imported_events.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/imported_events/__snapshots__/imported_events.test.js.snap @@ -1,60 +1,364 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ImportedEvents Renders imported events 1`] = ` - - +
- - +
+

- + Events to import: 1

- - - +
+
- - - + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + +
+ +
+
+
+ + test description + +
+ 		+
+ 2017-02-09 11:10:00 +
+ 		+
+ 2017-02-09 11:30:00 +
+ 		+
+ +
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+
- - +
+ - } - onChange={[MockFunction]} - /> - - + +
+ +
+
+
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/imported_events/imported_events.test.js b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/imported_events/imported_events.test.js index 8762cb4603807..46899dcf1e3b3 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/imported_events/imported_events.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/imported_events/imported_events.test.js @@ -5,10 +5,13 @@ * 2.0. */ -import { shallowWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; + import { ImportedEvents } from './imported_events'; +jest.mock('../../../../capabilities/check_capabilities'); + const testProps = { events: [ { @@ -28,8 +31,8 @@ const testProps = { describe('ImportedEvents', () => { test('Renders imported events', () => { - const wrapper = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(wrapper).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js index 8a6c2623fd52b..9a16761adcb59 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.js @@ -178,6 +178,7 @@ export class NewEventModal extends Component { onChange={this.handleTimeStartChange} placeholder={TIME_FORMAT} value={startDateString} + data-test-subj="mlCalendarEventStartDateInput" /> @@ -196,6 +197,7 @@ export class NewEventModal extends Component { onChange={this.handleTimeEndChange} placeholder={TIME_FORMAT} value={endDateString} + data-test-subj="mlCalendarEventEndDateInput" /> diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.test.js b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.test.js index 0aa91a44458e7..61935599685fa 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/edit/new_event_modal/new_event_modal.test.js @@ -5,67 +5,78 @@ * 2.0. */ -import { shallowWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; +import { fireEvent } from '@testing-library/react'; + import { NewEventModal } from './new_event_modal'; -import moment from 'moment'; const testProps = { closeModal: jest.fn(), addEvent: jest.fn(), }; -const stateTimestamps = { - startDate: 1544508000000, - endDate: 1544594400000, -}; - describe('NewEventModal', () => { it('Add button disabled if description empty', () => { - const wrapper = shallowWithIntl(); + // Render the component + const { getByTestId } = renderWithI18n(); + + // Find the Add button by its role + const addButton = getByTestId('mlCalendarAddEventButton'); - const addButton = wrapper.find('EuiButton').first(); - expect(addButton.prop('disabled')).toBe(true); + // Verify it's disabled when description is empty + expect(addButton).toBeDisabled(); + + // Enter a description + const descriptionField = getByTestId('mlCalendarEventDescriptionInput'); + fireEvent.change(descriptionField, { target: { value: 'Test event' } }); + + // Verify button is now enabled + expect(addButton).not.toBeDisabled(); }); - it('if endDate is less than startDate should set startDate one day before endDate', () => { - const wrapper = shallowWithIntl(); - const instance = wrapper.instance(); - instance.setState({ - startDate: moment(stateTimestamps.startDate), - endDate: moment(stateTimestamps.endDate), - }); - // set to Dec 11, 2018 and Dec 12, 2018 - const startMoment = moment(stateTimestamps.startDate); - const endMoment = moment(stateTimestamps.endDate); - // make startMoment greater than current end Date - startMoment.startOf('day').add(3, 'days'); - // trigger handleChangeStart directly with startMoment - instance.handleChangeStart(startMoment); - // add 3 days to endMoment as it will be adjusted to be one day after startDate - const expected = endMoment.startOf('day').add(3, 'days').format(); - - expect(wrapper.state('endDate').format()).toBe(expected); + it('enables adding event when description is provided', () => { + // Render the component + const { getByTestId } = renderWithI18n(); + + // Find the Add button by its role and verify it's initially disabled + const addButton = getByTestId('mlCalendarAddEventButton'); + expect(addButton).toBeDisabled(); + + // Enter a description + const descriptionField = getByTestId('mlCalendarEventDescriptionInput'); + fireEvent.change(descriptionField, { target: { value: 'Test event' } }); + + // Verify button is now enabled + expect(addButton).not.toBeDisabled(); + + // Click the Add button + fireEvent.click(addButton); + + // Verify the addEvent prop was called + expect(testProps.addEvent).toHaveBeenCalled(); }); - it('if startDate is greater than endDate should set endDate one day after startDate', () => { - const wrapper = shallowWithIntl(); - const instance = wrapper.instance(); - instance.setState({ - startDate: moment(stateTimestamps.startDate), - endDate: moment(stateTimestamps.endDate), - }); - - // set to Dec 11, 2018 and Dec 12, 2018 - const startMoment = moment(stateTimestamps.startDate); - const endMoment = moment(stateTimestamps.endDate); - // make endMoment less than current start Date - endMoment.startOf('day').subtract(3, 'days'); - // trigger handleChangeStart directly with endMoment - instance.handleChangeStart(endMoment); - // subtract 3 days from startDate as it will be adjusted to be one day before endDate - const expected = startMoment.startOf('day').subtract(2, 'days').format(); - - expect(wrapper.state('startDate').format()).toBe(expected); + it('updates date fields when text inputs are changed', () => { + // Render the component + const { getByTestId } = renderWithI18n(); + + // Get the initial date inputs + const startDateInput = getByTestId('mlCalendarEventStartDateInput'); + const endDateInput = getByTestId('mlCalendarEventEndDateInput'); + + // Change the start date to a specific value + const newStartDateString = '2023-01-15 00:00:00'; + fireEvent.change(startDateInput, { target: { value: newStartDateString } }); + + // Verify the input value was updated + expect(startDateInput.value).toBe(newStartDateString); + + // Change the end date to a specific value + const newEndDateString = '2023-01-20 00:00:00'; + fireEvent.change(endDateInput, { target: { value: newEndDateString } }); + + // Verify the input value was updated + expect(endDateInput.value).toBe(newEndDateString); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/list/__snapshots__/header.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/list/__snapshots__/header.test.js.snap index de3e3fe60315d..6b88d328b9842 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/list/__snapshots__/header.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/list/__snapshots__/header.test.js.snap @@ -1,103 +1,96 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CalendarListsHeader renders header 1`] = ` - - - - - +
- - - -

- + 3 in total

- - - - - +
+
+
+
- - - - - - - - - - + + + Refresh + + + +
+
+
+
+
- +

- - , - "learnMoreLink": - - , - } - } - /> - + Calendars contain a list of scheduled events for which you do not want to generate anomalies, such as planned system outages or public holidays. The same calendar can be assigned to multiple jobs. +
+ + Learn more + + + (external, opens in a new tab or window) + + +

- - +
- +
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/list/header.test.js b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/list/header.test.js index e1c42d5068592..53fe576da38b0 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/list/header.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/list/header.test.js @@ -5,8 +5,8 @@ * 2.0. */ -import { shallowWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; import { CalendarsListHeader } from './header'; @@ -21,7 +21,11 @@ jest.mock('../../../capabilities/check_capabilities', () => ({ jest.mock('../../../contexts/kibana/kibana_context', () => ({ useMlKibana: () => ({ services: { - docLinks: { links: { ml: { calendars: jest.fn() } } }, + docLinks: { + links: { + ml: { calendars: 'calendars link' }, + }, + }, }, }), })); @@ -50,8 +54,8 @@ describe('CalendarListsHeader', () => { ...requiredProps, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/list/table/__snapshots__/table.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/list/table/__snapshots__/table.test.js.snap index d73588698e351..b303a97a1f82a 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/list/table/__snapshots__/table.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/list/table/__snapshots__/table.test.js.snap @@ -4,116 +4,498 @@ exports[`CalendarsListTable renders the table with all calendars 1`] = `
- +
+
+
+
- + + +
+ - , - +
+
+
+
+
+
+ +
+
+ +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + +
+
+
+ 		+ + + + + + + + + + + +
+
+
+
+ + +
+
+
+ 		+
+ + + farequote-calendar + + +
+ 		+
+ +
+ 		+
+ NaN events +
+
+
+
+
+ + +
+
+
+ 		+
+ + + this-is-a-new-calendar + + +
+ 		+
+ +
+ 		+
+ NaN events +
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/list/table/table.test.js b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/list/table/table.test.js index 3faf0260e4bec..7011ec10791d9 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/list/table/table.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/calendars/list/table/table.test.js @@ -5,11 +5,12 @@ * 2.0. */ -import { shallowWithIntl, mountWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; +import { screen } from '@testing-library/react'; +import { MemoryRouter } from 'react-router-dom'; import { CalendarsListTable } from './table'; -import { MemoryRouter } from 'react-router-dom'; jest.mock('../../../../contexts/kibana/use_create_url', () => ({ useCreateAndNavigateToManagementMlLink: jest.fn(), @@ -43,21 +44,24 @@ const props = { describe('CalendarsListTable', () => { test('renders the table with all calendars', () => { - const wrapper = shallowWithIntl(); - expect(wrapper).toMatchSnapshot(); + const { container } = renderWithI18n( + + + + ); + expect(container.firstChild).toMatchSnapshot(); }); test('New button enabled if permission available', () => { - const wrapper = mountWithIntl( + renderWithI18n( ); - const buttons = wrapper.find('[data-test-subj="mlCalendarButtonCreate"]'); - const button = buttons.find('EuiButton'); + const createButton = screen.getByTestId('mlCalendarButtonCreate'); - expect(button.prop('isDisabled')).toEqual(false); + expect(createButton).not.toBeDisabled(); }); test('New button disabled if no permission available', () => { @@ -66,16 +70,15 @@ describe('CalendarsListTable', () => { canCreateCalendar: false, }; - const wrapper = mountWithIntl( + renderWithI18n( ); - const buttons = wrapper.find('[data-test-subj="mlCalendarButtonCreate"]'); - const button = buttons.find('EuiButton'); + const createButton = screen.getByTestId('mlCalendarButtonCreate'); - expect(button.prop('isDisabled')).toEqual(true); + expect(createButton).toBeDisabled(); }); test('New button disabled if no ML nodes available', () => { @@ -84,15 +87,14 @@ describe('CalendarsListTable', () => { mlNodesAvailable: false, }; - const wrapper = mountWithIntl( + renderWithI18n( ); - const buttons = wrapper.find('[data-test-subj="mlCalendarButtonCreate"]'); - const button = buttons.find('EuiButton'); + const createButton = screen.getByTestId('mlCalendarButtonCreate'); - expect(button.prop('isDisabled')).toEqual(true); + expect(createButton).toBeDisabled(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/add_item_popover/__snapshots__/add_item_popover.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/add_item_popover/__snapshots__/add_item_popover.test.js.snap index c070741b74700..e6b07d6382e6e 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/add_item_popover/__snapshots__/add_item_popover.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/add_item_popover/__snapshots__/add_item_popover.test.js.snap @@ -1,250 +1,26 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`AddItemPopover calls addItems with multiple items on clicking Add button 1`] = ` -
- - - - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} - id="add_item_popover" - initialFocus="#filter_list_add_item_input_row" - isOpen={false} - ownFocus={true} - panelClassName="ml-add-filter-item-popover" - panelPaddingSize="m" - repositionToCrossAxis={true} - > - - - } - > - - - - - - - - - - - - - - - -
-`; - -exports[`AddItemPopover opens the popover onButtonClick 1`] = ` -
- - - - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} - id="add_item_popover" - initialFocus="#filter_list_add_item_input_row" - isOpen={true} - ownFocus={true} - panelClassName="ml-add-filter-item-popover" - panelPaddingSize="m" - repositionToCrossAxis={true} - > - - - } - > - - - - - - - - - - - - - - - -
-`; - exports[`AddItemPopover renders the popover 1`] = `
- - - - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} +
- - - } - > - + + Add item + - - - - - - - - - - - - - - + + +
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/add_item_popover/add_item_popover.test.js b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/add_item_popover/add_item_popover.test.js index 0bbb3f443f1ae..8915ba92eaeef 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/add_item_popover/add_item_popover.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/add_item_popover/add_item_popover.test.js @@ -5,56 +5,116 @@ * 2.0. */ -import { shallowWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; +import { screen, fireEvent, waitFor } from '@testing-library/react'; import { AddItemPopover } from './add_item_popover'; -function prepareTest(addItemsFn) { +function renderPopover(addItemsFn, canCreateFilter = true) { const props = { addItems: addItemsFn, - canCreateFilter: true, + canCreateFilter, }; - const wrapper = shallowWithIntl(); - - return wrapper; + return renderWithI18n(); } describe('AddItemPopover', () => { test('renders the popover', () => { - const addItems = jest.fn(() => {}); - const wrapper = prepareTest(addItems); - expect(wrapper).toMatchSnapshot(); + const addItems = jest.fn(); + const { container } = renderPopover(addItems); + expect(container.firstChild).toMatchSnapshot(); + }); + + test('opens the popover when clicking the button', async () => { + const addItems = jest.fn(); + renderPopover(addItems); + + // Find and click the button to open the popover + const button = screen.getByTestId('mlFilterListOpenNewItemsPopoverButton'); + fireEvent.click(button); + + // Wait for and verify the popover content is now visible + await waitFor(() => { + expect(screen.getByTestId('mlFilterListAddItemTextArea')).toBeInTheDocument(); + }); }); - test('opens the popover onButtonClick', () => { - const addItems = jest.fn(() => {}); - const wrapper = prepareTest(addItems); - const instance = wrapper.instance(); - instance.onButtonClick(); - wrapper.update(); - expect(wrapper).toMatchSnapshot(); + test('calls addItems with one item on clicking Add button', async () => { + const addItems = jest.fn(); + renderPopover(addItems); + + // Open the popover + const openButton = screen.getByTestId('mlFilterListOpenNewItemsPopoverButton'); + fireEvent.click(openButton); + + // Wait for the textarea to be visible + await waitFor(() => { + expect(screen.getByTestId('mlFilterListAddItemTextArea')).toBeInTheDocument(); + }); + + // Enter text in the textarea + const textarea = screen.getByTestId('mlFilterListAddItemTextArea'); + fireEvent.change(textarea, { target: { value: 'google.com' } }); + + // Wait for the Add button to be enabled + let addButton; + await waitFor(() => { + addButton = screen.getByTestId('mlFilterListAddItemsButton'); + expect(addButton).not.toBeDisabled(); + }); + + // Click the Add button + fireEvent.click(addButton); + + // Verify addItems was called with the correct value + await waitFor(() => { + expect(addItems).toHaveBeenCalledWith(['google.com']); + }); }); - test('calls addItems with one item on clicking Add button', () => { - const addItems = jest.fn(() => {}); - const wrapper = prepareTest(addItems); - wrapper.find('EuiTextArea').simulate('change', { target: { value: 'google.com' } }); - const instance = wrapper.instance(); - instance.onAddButtonClick(); - wrapper.update(); - expect(addItems).toHaveBeenCalledWith(['google.com']); + test('calls addItems with multiple items on clicking Add button', async () => { + const addItems = jest.fn(); + renderPopover(addItems); + + // Open the popover + const openButton = screen.getByTestId('mlFilterListOpenNewItemsPopoverButton'); + fireEvent.click(openButton); + + // Wait for the textarea to be visible + await waitFor(() => { + expect(screen.getByTestId('mlFilterListAddItemTextArea')).toBeInTheDocument(); + }); + + // Enter multiple items in the textarea (one per line) + const textarea = screen.getByTestId('mlFilterListAddItemTextArea'); + fireEvent.change(textarea, { target: { value: 'google.com\nelastic.co' } }); + + // Wait for the Add button to be enabled + let addButton; + await waitFor(() => { + addButton = screen.getByTestId('mlFilterListAddItemsButton'); + expect(addButton).not.toBeDisabled(); + }); + + // Click the Add button + fireEvent.click(addButton); + + // Verify addItems was called with both items + await waitFor(() => { + expect(addItems).toHaveBeenCalledWith(['google.com', 'elastic.co']); + }); }); - test('calls addItems with multiple items on clicking Add button', () => { - const addItems = jest.fn(() => {}); - const wrapper = prepareTest(addItems); - wrapper.find('EuiTextArea').simulate('change', { target: { value: 'google.com\nelastic.co' } }); - const instance = wrapper.instance(); - instance.onAddButtonClick(); - wrapper.update(); - expect(addItems).toHaveBeenCalledWith(['google.com', 'elastic.co']); - expect(wrapper).toMatchSnapshot(); + test('button is disabled when canCreateFilter is false', async () => { + const addItems = jest.fn(); + renderPopover(addItems, false); + + // Find the button and verify it's disabled + await waitFor(() => { + const button = screen.getByTestId('mlFilterListOpenNewItemsPopoverButton'); + expect(button).toBeDisabled(); + }); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/__snapshots__/delete_filter_list_modal.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/__snapshots__/delete_filter_list_modal.test.js.snap index 31847768ac0c1..8b0e9b4088a47 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/__snapshots__/delete_filter_list_modal.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/__snapshots__/delete_filter_list_modal.test.js.snap @@ -2,101 +2,62 @@ exports[`DeleteFilterListModal false canDeleteFilter privilege renders as disabled delete button 1`] = `
- - - -
-`; - -exports[`DeleteFilterListModal renders as delete button after opening and closing modal 1`] = ` -
- - - + + + Delete + +
`; exports[`DeleteFilterListModal renders as disabled delete button when no lists selected 1`] = `
- - - + + + Delete + +
`; exports[`DeleteFilterListModal renders as enabled delete button when a list is selected 1`] = `
- - - -
-`; - -exports[`DeleteFilterListModal renders modal after clicking delete button 1`] = ` -
- - - - + + + Delete + +
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/delete_filter_list_modal.test.js b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/delete_filter_list_modal.test.js index d46de282c59d9..be287c576aaec 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/delete_filter_list_modal.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/delete_filter_list_modal/delete_filter_list_modal.test.js @@ -14,8 +14,9 @@ jest.mock('../../../../capabilities/check_capabilities', () => ({ })); jest.mock('../../../../services/ml_api_service', () => 'ml'); -import { shallowWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; +import { screen, fireEvent, waitFor } from '@testing-library/react'; import { DeleteFilterListModal } from './delete_filter_list_modal'; @@ -27,32 +28,76 @@ const testProps = { }; describe('DeleteFilterListModal', () => { - test('renders as disabled delete button when no lists selected', () => { - const component = shallowWithIntl(); + test('renders as disabled delete button when no lists selected', async () => { + const emptyListsProps = { + ...testProps, + selectedFilterLists: [], + }; - expect(component).toMatchSnapshot(); + const { container } = renderWithI18n(); + + // Find the delete button + const deleteButton = screen.getByTestId('mlFilterListsDeleteButton'); + + // Verify it's disabled + expect(deleteButton).toBeDisabled(); + + // Take a snapshot of the rendered component + expect(container.firstChild).toMatchSnapshot(); }); - test('renders as enabled delete button when a list is selected', () => { - const component = shallowWithIntl(); + test('renders as enabled delete button when a list is selected', async () => { + const { container } = renderWithI18n(); + + // Find the delete button + const deleteButton = screen.getByTestId('mlFilterListsDeleteButton'); + + // Verify it's enabled + expect(deleteButton).not.toBeDisabled(); - expect(component).toMatchSnapshot(); + // Take a snapshot of the rendered component + expect(container.firstChild).toMatchSnapshot(); }); - test('renders modal after clicking delete button', () => { - const wrapper = shallowWithIntl(); - wrapper.find('EuiButton').simulate('click'); - wrapper.update(); - expect(wrapper).toMatchSnapshot(); + test('renders modal after clicking delete button', async () => { + renderWithI18n(); + + // Find and click the delete button + const deleteButton = screen.getByTestId('mlFilterListsDeleteButton'); + fireEvent.click(deleteButton); + + // Wait for the modal to appear + await waitFor(() => { + expect(screen.getByTestId('mlFilterListDeleteConfirmation')).toBeInTheDocument(); + }); + + // Verify the modal content + expect(screen.getByText('Delete 2 filter lists?')).toBeInTheDocument(); }); - test('renders as delete button after opening and closing modal', () => { - const wrapper = shallowWithIntl(); - wrapper.find('EuiButton').simulate('click'); - const instance = wrapper.instance(); - instance.closeModal(); - wrapper.update(); - expect(wrapper).toMatchSnapshot(); + test('renders as delete button after opening and closing modal', async () => { + renderWithI18n(); + + // Find and click the delete button to open the modal + const deleteButton = screen.getByTestId('mlFilterListsDeleteButton'); + fireEvent.click(deleteButton); + + // Wait for the modal to appear + await waitFor(() => { + expect(screen.getByTestId('mlFilterListDeleteConfirmation')).toBeInTheDocument(); + }); + + // Find and click the cancel button to close the modal + const cancelButton = screen.getByText('Cancel'); + fireEvent.click(cancelButton); + + // Wait for the modal to disappear + await waitFor(() => { + expect(screen.queryByTestId('mlFilterListDeleteConfirmation')).not.toBeInTheDocument(); + }); + + // Verify the delete button is visible again + expect(screen.getByTestId('mlFilterListsDeleteButton')).toBeInTheDocument(); }); }); @@ -61,13 +106,20 @@ describe('DeleteFilterListModal false canDeleteFilter privilege', () => { jest.resetModules(); }); - test('renders as disabled delete button', () => { - mockCheckPermission.mockImplementationOnce(() => { - return false; - }); + test('renders as disabled delete button', async () => { + mockCheckPermission.mockImplementationOnce(() => false); + + const { container } = renderWithI18n( + + ); + + // Find the delete button + const deleteButton = screen.getByTestId('mlFilterListsDeleteButton'); - const component = shallowWithIntl(); + // Verify it's disabled + expect(deleteButton).toBeDisabled(); - expect(component).toMatchSnapshot(); + // Take a snapshot of the rendered component + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/edit_description_popover/__snapshots__/edit_description_popover.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/edit_description_popover/__snapshots__/edit_description_popover.test.js.snap index 1a8b962c1f146..79bb2eab0333b 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/edit_description_popover/__snapshots__/edit_description_popover.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/edit_description_popover/__snapshots__/edit_description_popover.test.js.snap @@ -1,165 +1,47 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`FilterListUsagePopover opens the popover onButtonClick 1`] = ` -
- - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} - id="filter_list_description_popover" - initialFocus="#filter_list_edit_description_row" - isOpen={true} - ownFocus={true} - panelPaddingSize="m" - repositionToCrossAxis={true} - > -
- - - } - > - - - -
- -
-`; - exports[`FilterListUsagePopover renders the popover with a description 1`] = `
- - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} +
-
- - - } - > - - - -
- +
`; exports[`FilterListUsagePopover renders the popover with no description 1`] = `
- - } - closePopover={[Function]} - display="inline-block" - hasArrow={true} +
-
- - - } - > - - - -
- +
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/edit_description_popover/edit_description_popover.test.js b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/edit_description_popover/edit_description_popover.test.js index ed6ae3764fd2a..836f835c8ae4c 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/edit_description_popover/edit_description_popover.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/components/edit_description_popover/edit_description_popover.test.js @@ -5,59 +5,89 @@ * 2.0. */ -import { shallowWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; +import { screen, fireEvent, waitFor } from '@testing-library/react'; import { EditDescriptionPopover } from './edit_description_popover'; -function prepareTest(updateDescriptionFn) { - const props = { - description: 'A list of known safe domains', - updateDescription: updateDescriptionFn, - canCreateFilter: true, - }; - - const wrapper = shallowWithIntl(); - - return wrapper; -} - describe('FilterListUsagePopover', () => { + const defaultDescription = 'A list of known safe domains'; test('renders the popover with no description', () => { - const updateDescription = jest.fn(() => {}); - + const updateDescription = jest.fn(); const props = { updateDescription, canCreateFilter: true, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); test('renders the popover with a description', () => { - const updateDescription = jest.fn(() => {}); - const wrapper = prepareTest(updateDescription); - expect(wrapper).toMatchSnapshot(); + const updateDescription = jest.fn(); + const props = { + description: defaultDescription, + updateDescription, + canCreateFilter: true, + }; + + const { container } = renderWithI18n(); + + expect(container.firstChild).toMatchSnapshot(); }); - test('opens the popover onButtonClick', () => { - const updateDescription = jest.fn(() => {}); - const wrapper = prepareTest(updateDescription); - const instance = wrapper.instance(); - instance.onButtonClick(); - wrapper.update(); - expect(wrapper).toMatchSnapshot(); + test('opens the popover when clicking the button', async () => { + const updateDescription = jest.fn(); + const props = { + description: defaultDescription, + updateDescription, + canCreateFilter: true, + }; + + renderWithI18n(); + + const editButton = screen.getByTestId('mlFilterListEditDescriptionButton'); + fireEvent.click(editButton); + + await waitFor(() => { + expect(screen.getByTestId('mlFilterListDescriptionInput')).toBeInTheDocument(); + }); + + // Verify the input has the correct initial value + const input = screen.getByTestId('mlFilterListDescriptionInput'); + expect(input.value).toBe(defaultDescription); }); - test('calls updateDescription on closing', () => { - const updateDescription = jest.fn(() => {}); - const wrapper = prepareTest(updateDescription); - const instance = wrapper.instance(); - instance.onButtonClick(); - instance.closePopover(); - wrapper.update(); - expect(updateDescription).toHaveBeenCalled(); + test('calls updateDescription when closing the popover', async () => { + const updateDescription = jest.fn(); + const props = { + description: defaultDescription, + updateDescription, + canCreateFilter: true, + }; + + renderWithI18n(); + + const editButton = screen.getByTestId('mlFilterListEditDescriptionButton'); + fireEvent.click(editButton); + + await waitFor(() => { + expect(screen.getByTestId('mlFilterListDescriptionInput')).toBeInTheDocument(); + }); + + // Change the description + const input = screen.getByTestId('mlFilterListDescriptionInput'); + fireEvent.change(input, { target: { value: 'Updated description' } }); + + // Click outside to close the popover (simulated by calling EuiPopover's closePopover prop) + // In RTL, we can't easily click outside, so we'll click the button again to close it + fireEvent.click(editButton); + + // Verify updateDescription was called with the new value + await waitFor(() => { + expect(updateDescription).toHaveBeenCalledWith('Updated description'); + }); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/edit/__snapshots__/header.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/edit/__snapshots__/header.test.js.snap index 87ac86f5c9178..6bfd20dcef3fe 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/edit/__snapshots__/header.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/edit/__snapshots__/header.test.js.snap @@ -1,409 +1,467 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EditFilterListHeader renders the header when creating a new filter list with ID, description and items set 1`] = ` - - - - - +
- - - -

- + 15 items in total

- - - - - - +
+
+
+
+
- - } +
- - - + +
+
+
+
+ +
+
+
+ Use lowercase alphanumerics (a-z and 0-9), hyphens or underscores; must start and end with an alphanumeric character +
+
+
+
- -

A test filter list

- - - +
+
- - - - +
+ +
+
+
+
+
- +
`; exports[`EditFilterListHeader renders the header when creating a new filter list with the ID not set 1`] = ` - - - - - +
- - - -

- + 0 items in total

- - - - - - +
+
+ + +
- - } - > - - - - - - + Filter list ID + +
+
+
+
- - - - - + +
+
+
+
+ Use lowercase alphanumerics (a-z and 0-9), hyphens or underscores; must start and end with an alphanumeric character +
+ + +
+
- - - - + + Add a description + +
+
+
+
+
+ +
+
+
+ +
- +
`; exports[`EditFilterListHeader renders the header when editing an existing unused filter list with no description or items 1`] = ` - - - - - +
- - - -

- + 0 items in total

- - - - - - +
+ + + +
- - - - + - - - - - +
+ +
- - - - +
+ +
+
+ + +
- +

- + This filter list is not used by any jobs.

- - +
- +
`; exports[`EditFilterListHeader renders the header when editing an existing used filter list with description and items set 1`] = ` - - - - - +
- - - -

- + 15 items in total

- - - - - - +
+
+
+ +
- - -

A test filter list

- - - +
+
- - - - +
+ +
+
+ + +
- - - - - - - - +
+ This filter list is used in +
+
+
+ +
+
+
+ across +
+
+
+ +
+
- - +
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/edit/__snapshots__/toolbar.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/edit/__snapshots__/toolbar.test.js.snap index beaafd979ed8d..3a634f43d16f6 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/edit/__snapshots__/toolbar.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/edit/__snapshots__/toolbar.test.js.snap @@ -1,73 +1,194 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EditFilterListToolbar renders the toolbar with no items selected 1`] = ` - - +
- - , - +
+
+
+
- - , - ] - } - /> - - - + + +
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+ `; exports[`EditFilterListToolbar renders the toolbar with one item selected 1`] = ` - - +
- - , - +
+
+
+
+ + +
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+ `; diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/edit/header.test.js b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/edit/header.test.js index 039acc0bef1eb..9c07da5408706 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/edit/header.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/edit/header.test.js @@ -5,8 +5,8 @@ * 2.0. */ -import { shallowWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; import { EditFilterListHeader } from './header'; @@ -29,9 +29,9 @@ describe('EditFilterListHeader', () => { totalItemCount: 0, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); test('renders the header when creating a new filter list with ID, description and items set', () => { @@ -43,9 +43,9 @@ describe('EditFilterListHeader', () => { totalItemCount: 15, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); test('renders the header when editing an existing unused filter list with no description or items', () => { @@ -55,9 +55,9 @@ describe('EditFilterListHeader', () => { totalItemCount: 0, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); test('renders the header when editing an existing used filter list with description and items set', () => { @@ -72,8 +72,8 @@ describe('EditFilterListHeader', () => { }, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/edit/toolbar.test.js b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/edit/toolbar.test.js index 7935b7dce3185..780188b8443b2 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/edit/toolbar.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/edit/toolbar.test.js @@ -5,8 +5,8 @@ * 2.0. */ -import { shallowWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; import { EditFilterListToolbar } from './toolbar'; @@ -29,9 +29,9 @@ describe('EditFilterListToolbar', () => { selectedItemCount: 0, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); test('renders the toolbar with one item selected', () => { @@ -40,8 +40,8 @@ describe('EditFilterListToolbar', () => { selectedItemCount: 1, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/list/__snapshots__/header.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/list/__snapshots__/header.test.js.snap index 4687f71e007fd..3f33fd2669ae9 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/list/__snapshots__/header.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/list/__snapshots__/header.test.js.snap @@ -1,136 +1,97 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Filter Lists Header renders header 1`] = ` - +
+
+
+
+
+ +

+ 3 in total +

+ +
+
+
+
+
+
+ +
+
+
+
+
+
+

+ + Filter lists contain values that you can use to include or exclude events from the machine learning analysis. +You can use the same filter list in multiple jobs. +
+ + Learn more + + + (external, opens in a new tab or window) + + + +

+
+
+
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/list/__snapshots__/table.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/list/__snapshots__/table.test.js.snap index 9ac0bcd5ce5bd..575c15735c86b 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/list/__snapshots__/table.test.js.snap +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/list/__snapshots__/table.test.js.snap @@ -1,221 +1,1136 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Filter Lists Table renders with filter lists and selection supplied 1`] = ` - -
- , - , - ], - } - } - searchFormat="eql" - selection={ - Object { - "onSelectionChange": [Function], - "selectable": [Function], - "selectableMessage": [Function], - } - } - sorting={ - Object { - "sort": Object { - "direction": "asc", - "field": "filter_id", - }, - } - } - tableLayout="fixed" +
+
+
+
+
+
+
+ + +
+ +
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + +
+
+
+ 		+ + + + + + + + + + + + + + + +
+
+
+
+ + +
+
+
+ 		+
+ + safe_domains + +
+ 		+
+ + List of known safe domains + +
+ 		+
+ + 500 + +
+ 		+
+ + In use + +
+
+
+
+
+ + +
+
+
+ 		+
+ + us_east_instances + +
+ 		+
+ + US East AWS instances + +
+ 		+
+ + 20 + +
+ 		+
+ + Not in use + +
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
- +
`; exports[`Filter Lists Table renders with filter lists supplied 1`] = ` - -
- , - , - ], - } - } - searchFormat="eql" - selection={ - Object { - "onSelectionChange": [Function], - "selectable": [Function], - "selectableMessage": [Function], - } - } - sorting={ - Object { - "sort": Object { - "direction": "asc", - "field": "filter_id", - }, - } - } - tableLayout="fixed" +
+
+
+
+
+
+
+ + +
+ +
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+ + +
+
+
+ 		+ + + + + + + + + + + + + + + +
+
+
+
+ + +
+
+
+ 		+
+ + safe_domains + +
+ 		+
+ + List of known safe domains + +
+ 		+
+ + 500 + +
+ 		+
+ + In use + +
+
+
+
+
+ + +
+
+
+ 		+
+ + us_east_instances + +
+ 		+
+ + US East AWS instances + +
+ 		+
+ + 20 + +
+ 		+
+ + Not in use + +
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
- +
`; diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/list/header.test.js b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/list/header.test.js index 4357dad093dad..bec233b38b490 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/list/header.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/list/header.test.js @@ -5,13 +5,35 @@ * 2.0. */ -import { shallowWithIntl } from '@kbn/test-jest-helpers'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; import React from 'react'; +// Mock the Kibana context +jest.mock('@kbn/kibana-react-plugin/public', () => ({ + withKibana: (Component) => { + const MockedComponent = (props) => { + const kibana = { + services: { + docLinks: { + links: { + ml: { + customRules: + 'https://www.elastic.co/guide/en/machine-learning/current/ml-rules.html', + }, + }, + }, + }, + }; + return ; + }; + return MockedComponent; + }, +})); + import { FilterListsHeader } from './header'; describe('Filter Lists Header', () => { - const refreshFilterLists = jest.fn(() => {}); + const refreshFilterLists = jest.fn(); const requiredProps = { totalCount: 3, @@ -23,8 +45,8 @@ describe('Filter Lists Header', () => { ...requiredProps, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/list/table.test.js b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/list/table.test.js index add92b804ee39..e0a09a958dc82 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/list/table.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/filter_lists/list/table.test.js @@ -12,8 +12,18 @@ jest.mock('../../../capabilities/check_capabilities', () => ({ })); jest.mock('../../../services/ml_api_service', () => 'ml'); -import { shallowWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; + +// Mock the react-router-dom Link component +jest.mock('react-router-dom', () => ({ + Link: ({ to, children }) => {children}, +})); + +// Mock the useCreateAndNavigateToManagementMlLink hook +jest.mock('../../../contexts/kibana/use_create_url', () => ({ + useCreateAndNavigateToManagementMlLink: () => jest.fn(), +})); import { FilterListsTable } from './table'; @@ -49,9 +59,9 @@ describe('Filter Lists Table', () => { filterLists: testFilterLists, }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); test('renders with filter lists and selection supplied', () => { @@ -61,8 +71,8 @@ describe('Filter Lists Table', () => { selectedFilterLists: [testFilterLists[0]], }; - const component = shallowWithIntl(); + const { container } = renderWithI18n(); - expect(component).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); }); diff --git a/x-pack/platform/plugins/shared/ml/public/application/settings/settings.test.tsx b/x-pack/platform/plugins/shared/ml/public/application/settings/settings.test.tsx index afd3fb1a3142d..acd09ab51b917 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/settings/settings.test.tsx +++ b/x-pack/platform/plugins/shared/ml/public/application/settings/settings.test.tsx @@ -5,8 +5,9 @@ * 2.0. */ -import { mountWithIntl } from '@kbn/test-jest-helpers'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; +import { screen } from '@testing-library/react'; import { Settings } from './settings'; @@ -38,27 +39,23 @@ describe('Settings', () => { isCalendarsMngDisabled: boolean, isCalendarCreateDisabled: boolean ) { - const wrapper = mountWithIntl(); + renderWithI18n(); - const filterMngButton = wrapper - .find('[data-test-subj="mlFilterListsMngButton"]') - .find('EuiButtonEmpty'); - expect(filterMngButton.prop('isDisabled')).toBe(isFilterListsMngDisabled); + // Check filter lists manage button + const filterMngButton = screen.getByTestId('mlFilterListsMngButton'); + expect(filterMngButton.hasAttribute('disabled')).toBe(isFilterListsMngDisabled); - const filterCreateButton = wrapper - .find('[data-test-subj="mlFilterListsCreateButton"]') - .find('EuiButtonEmpty'); - expect(filterCreateButton.prop('isDisabled')).toBe(isFilterListCreateDisabled); + // Check filter lists create button + const filterCreateButton = screen.getByTestId('mlFilterListsCreateButton'); + expect(filterCreateButton.hasAttribute('disabled')).toBe(isFilterListCreateDisabled); - const calendarMngButton = wrapper - .find('[data-test-subj="mlCalendarsMngButton"]') - .find('EuiButtonEmpty'); - expect(calendarMngButton.prop('isDisabled')).toBe(isCalendarsMngDisabled); + // Check calendars manage button + const calendarMngButton = screen.getByTestId('mlCalendarsMngButton'); + expect(calendarMngButton.hasAttribute('disabled')).toBe(isCalendarsMngDisabled); - const calendarCreateButton = wrapper - .find('[data-test-subj="mlCalendarsCreateButton"]') - .find('EuiButtonEmpty'); - expect(calendarCreateButton.prop('isDisabled')).toBe(isCalendarCreateDisabled); + // Check calendars create button + const calendarCreateButton = screen.getByTestId('mlCalendarsCreateButton'); + expect(calendarCreateButton.hasAttribute('disabled')).toBe(isCalendarCreateDisabled); } test('should render settings page with all buttons enabled when full user capabilities', () => { diff --git a/x-pack/platform/plugins/shared/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.test.js b/x-pack/platform/plugins/shared/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.test.js index d9ec6dea88497..bf66ab5c13dec 100644 --- a/x-pack/platform/plugins/shared/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.test.js +++ b/x-pack/platform/plugins/shared/ml/public/application/timeseriesexplorer/components/timeseries_chart/timeseries_chart.test.js @@ -6,9 +6,9 @@ */ import moment from 'moment-timezone'; -import { mountWithIntl } from '@kbn/test-jest-helpers'; -import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public'; import React from 'react'; +import { renderWithI18n } from '@kbn/test-jest-helpers'; +import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public'; import { TimeseriesChart } from './timeseries_chart'; @@ -74,12 +74,14 @@ describe('TimeseriesChart', () => { test('Minimal initialization', () => { const props = getTimeseriesChartPropsMock(); - const wrapper = mountWithIntl( + const { container } = renderWithI18n( ); - expect(wrapper.html()).toBe('
'); + // Verify the chart container is rendered with the correct class + expect(container.querySelector('.ml-timeseries-chart-react')).toBeInTheDocument(); + expect(container.innerHTML).toBe('
'); }); });