github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[jest] @emotion/babel-preset-css-prop (#216489)

Browse source 
## Summary

Partially address https://github.com/elastic/kibana/issues/216459

This PR adds `@emotion/babel-preset-css-prop` to jest config to improve
jest and emotion integration. There are some tradeoffs: this is a better
setup for emotion + testing library, but there are some seemingly
regressions for enzyme. We think these are right tradeoffs to make,
since we optimize for emotion+testing library.

### Main upsides are 😄 

#### 🟢 Fixes snapshots with css prop

`You have tried to stringify object returned from \`css\` function. It
isn't supposed to be used directly (e.g. as value of the \`className\`
prop), but rather handed to emotion so it can handle it (e.g. as value
of \`css\` prop).` is replaced with proper emotion css classname.

![Screenshot 2025-04-04 at 14 57
52](https://github.com/user-attachments/assets/f4a746d6-2451-4703-ab39-57be7171b10b)

#### 🟢 We will be able to use jest style matchers for emotion
`toHaveStyleRule`

https://emotion.sh/docs/@emotion/jest#tohavestylerule

_they can be used locally now, but we plan to follow up with global
extend_

###  Considerations 🫤  

#### 🟡 jsx doesn't work inside jest.mock function 

Example: 

```
jest.mock('./components/alert_header_title', () => ({
    > 27 |   AlertHeaderTitle: jest.fn().mockReturnValue(<div></div>), 
         |                                                                           ^
      28 | }));
```

Fails with an error. `can't read jsx of undefined`. 

This is because babel compiles this into: 

```
import { jsx as ___EmotionJSX } from '@emotion/react'

jest.mock('./components/alert_header_title', () => ({
    > 27 |   AlertHeaderTitle: jest.fn().mockReturnValue(___EmotionJSX.jsx(….)), 
         |                                                                                   ^
      28 | }));
```

And, apparently, due to how jest imports work, __EmotionJSX is not yet
in the scope.

The applied workaround is to rewrite to: 

```
jest.mock('./components/alert_header_title', () => ({
  AlertHeaderTitle: jest.fn(() => <div></div>), 
     }));
```


#### 🟡 euiTheme needs to be available when euiTheme is accessed inside
`css` function

Example: 

```
DashboardGrid removes panel when removed from container
    TypeError: Cannot read properties of undefined (reading 'size')
      42 |     margin: '-2px',
      43 |     position: 'absolute',
    > 44 |     width: euiTheme.size.l,
```

The fix was to wrap failing tests with `<EuiProvider/>` 

### Drawbacks 😢 

Mostly related to Enzyme 

#### 🔴  Enzyme shallow snapshot no longer include `css` prop 

Since `css` prop is compiled away there are bunch of snapshots that
looks like a regression:

Example:

![Screenshot 2025-04-04 at 15 50
16](https://github.com/user-attachments/assets/61c1d027-1e8a-48e6-a242-1fa53f8ec9b7)

This is unfortunate. We've tried `@emotion/jest/enzyme-serializer` but
it didn't work (likely because enzyme ecosystem no longer supported?)
If it is important that the snapshot captures css, we recommend to use
mount or rtl

#### 🔴 Asserting against `css` prop with shallow render also doesn't
work

Possible solution is to use 

```
import { matchers } from '@emotion/jest';
expect.extend(matchers);
```

(We plan to add these matches globally in a follow up)

and 

```
 expect(button).toHaveStyleRule('background-color', '#FFFFFF');
```



#### 🔴 Some shallow Enzyme tests `find()` breaks because of code
transformations of emotion

Example:

```
const component = shallow(
      <MetricVisValue />
)

component.find('button') // fails because instead of <button/> there is <EmotionInternalCss/> element now 

```

Solutions:
- Use full mount or react testing library 
- Or target by data-test-subj

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Karen Grigoryan <karen.grigoryan@elastic.co>
This commit is contained in:
Anton Dosov 2025-04-14 14:29:47 +02:00 • committed by GitHub
parent 478011f3a8
commit ef0322d8d0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
180 changed files with 1827 additions and 3572 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/core/packages/chrome/browser-internal/src/ui/__snapshots__/loading_indicator.test.tsx.snap generated
View file

@ -5,9 +5,9 @@ exports[`kbnLoadingIndicator is hidden by default 1`] = `
<EmotionGlobal
styles={
Object {
".euiHeaderSectionItem .euiButtonEmpty__text": Object {
"display": "flex",
},
"name": "11nwfnw-LoadingIndicator",
"styles": ".euiHeaderSectionItem .euiButtonEmpty__text{display:flex;};label:LoadingIndicator;",
"toString": [Function],
}
}
/>
@ -25,9 +25,9 @@ exports[`kbnLoadingIndicator is visible when loadingCount is > 0 1`] = `
<EmotionGlobal
styles={
Object {
".euiHeaderSectionItem .euiButtonEmpty__text": Object {
"display": "flex",
},
"name": "11nwfnw-LoadingIndicator",
"styles": ".euiHeaderSectionItem .euiButtonEmpty__text{display:flex;};label:LoadingIndicator;",
"toString": [Function],
}
}
/>
@ -45,9 +45,9 @@ exports[`kbnLoadingIndicator shows logo image when customLogo is set 1`] = `
<EmotionGlobal
styles={
Object {
".euiHeaderSectionItem .euiButtonEmpty__text": Object {
"display": "flex",
},
"name": "11nwfnw-LoadingIndicator",
"styles": ".euiHeaderSectionItem .euiButtonEmpty__text{display:flex;};label:LoadingIndicator;",
"toString": [Function],
}
}
/>

224
src/core/packages/chrome/browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap generated
View file

@ -169,7 +169,7 @@ Array [
>
<ul
aria-label="Recently viewed links"
class="euiListGroup emotion-EuiListGroup"
class="euiListGroup emotion-euiListGroup-none-navRecentsListGroupCss"
style="max-inline-size: none;"
>
<li
@ -219,10 +219,10 @@ Array [
class="euiHorizontalRule emotion-euiHorizontalRule-full"
/>
<div
class="euiFlexItem emotion-euiFlexItem-grow-1"
class="euiFlexItem emotion-euiFlexItem-grow-1-navSolutions"
>
<div
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiAccordion-EuiCollapsibleNavGroup"
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiAccordion-euiCollapsibleNavGroup-isCollapsible-none-navSolutionGroupButton"
data-test-subj="collapsibleNavGroup-kibana"
>
<div
@ -353,7 +353,7 @@ Array [
</div>
</div>
<div
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiAccordion-EuiCollapsibleNavGroup"
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiAccordion-euiCollapsibleNavGroup-isCollapsible-none-navSolutionGroupButton"
data-test-subj="collapsibleNavGroup-observability"
>
<div
@ -467,7 +467,7 @@ Array [
</div>
</div>
<div
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiAccordion-EuiCollapsibleNavGroup"
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiAccordion-euiCollapsibleNavGroup-isCollapsible-none-navSolutionGroupButton"
data-test-subj="collapsibleNavGroup-securitySolution"
>
<div
@ -564,7 +564,7 @@ Array [
</div>
</div>
<div
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiAccordion-EuiCollapsibleNavGroup"
class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup emotion-euiAccordion-euiCollapsibleNavGroup-isCollapsible-none-navSolutionGroupButton"
data-test-subj="collapsibleNavGroup-management"
>
<div
@ -863,15 +863,7 @@ exports[`CollapsibleNav renders the default nav 1`] = `
<EuiCollapsibleNav
aria-label="Primary"
button={<button />}
css={
Object {
"map": undefined,
"name": "1pvcuvk",
"next": undefined,
"styles": "@media (max-height: 240px){overflow-y:auto;}",
"toString": [Function],
}
}
css="unknown styles"
data-test-subj="collapsibleNav"
id="collapsibe-nav"
isOpen={false}
@ -879,13 +871,97 @@ exports[`CollapsibleNav renders the default nav 1`] = `
ownFocus={false}
size={248}
>
<button
aria-controls="collapsibe-nav"
aria-expanded={false}
aria-pressed={false}
onMouseUpCapture={[Function]}
onTouchEnd={[Function]}
<Insertion
cache={
Object {
"insert": [Function],
"inserted": Object {
"1751mc5-navCss": true,
},
"key": "css",
"nonce": undefined,
"registered": Object {
"css-1751mc5-navCss": "@media (max-height: 240px){overflow-y:auto;};label:navCss;",
},
"sheet": StyleSheet {
"_alreadyInsertedOrderInsensitiveRule": true,
"_insertTag": [Function],
"before": null,
"container": <head>
<style
data-emotion="css"
data-s=""
>
.css-1751mc5-navCss{}
</style>
<style
data-emotion="css"
data-s=""
>
@media (max-height: 240px){.css-1751mc5-navCss{overflow-y:auto;}}
</style>
<style
data-styled="active"
data-styled-version="5.3.11"
/>
</head>,
"ctr": 2,
"insertionPoint": undefined,
"isSpeedy": false,
"key": "css",
"nonce": undefined,
"prepend": undefined,
"tags": Array [
<style
data-emotion="css"
data-s=""
>
.css-1751mc5-navCss{}
</style>,
<style
data-emotion="css"
data-s=""
>
@media (max-height: 240px){.css-1751mc5-navCss{overflow-y:auto;}}
</style>,
],
},
}
}
isStringTag={false}
serialized={
Object {
"map": undefined,
"name": "1751mc5-navCss",
"next": undefined,
"styles": "@media (max-height: 240px){overflow-y:auto;};label:navCss;",
"toString": [Function],
}
}
/>
<EuiCollapsibleNav
aria-label="Primary"
button={<button />}
className="css-1751mc5-navCss"
data-test-subj="collapsibleNav"
id="collapsibe-nav"
isOpen={false}
onClose={[Function]}
ownFocus={false}
size={248}
>
<button
aria-controls="collapsibe-nav"
aria-expanded={false}
aria-pressed={false}
onMouseUpCapture={[Function]}
onTouchEnd={[Function]}
/>
</EuiCollapsibleNav>
</EuiCollapsibleNav>
</CollapsibleNav>
`;
@ -1058,15 +1134,7 @@ exports[`CollapsibleNav renders the default nav 2`] = `
<EuiCollapsibleNav
aria-label="Primary"
button={<button />}
css={
Object {
"map": undefined,
"name": "1pvcuvk",
"next": undefined,
"styles": "@media (max-height: 240px){overflow-y:auto;}",
"toString": [Function],
}
}
css="unknown styles"
data-test-subj="collapsibleNav"
id="collapsibe-nav"
isOpen={false}
@ -1074,13 +1142,97 @@ exports[`CollapsibleNav renders the default nav 2`] = `
ownFocus={false}
size={248}
>
<button
aria-controls="collapsibe-nav"
aria-expanded={false}
aria-pressed={false}
onMouseUpCapture={[Function]}
onTouchEnd={[Function]}
<Insertion
cache={
Object {
"insert": [Function],
"inserted": Object {
"1751mc5-navCss": true,
},
"key": "css",
"nonce": undefined,
"registered": Object {
"css-1751mc5-navCss": "@media (max-height: 240px){overflow-y:auto;};label:navCss;",
},
"sheet": StyleSheet {
"_alreadyInsertedOrderInsensitiveRule": true,
"_insertTag": [Function],
"before": null,
"container": <head>
<style
data-emotion="css"
data-s=""
>
.css-1751mc5-navCss{}
</style>
<style
data-emotion="css"
data-s=""
>
@media (max-height: 240px){.css-1751mc5-navCss{overflow-y:auto;}}
</style>
<style
data-styled="active"
data-styled-version="5.3.11"
/>
</head>,
"ctr": 2,
"insertionPoint": undefined,
"isSpeedy": false,
"key": "css",
"nonce": undefined,
"prepend": undefined,
"tags": Array [
<style
data-emotion="css"
data-s=""
>
.css-1751mc5-navCss{}
</style>,
<style
data-emotion="css"
data-s=""
>
@media (max-height: 240px){.css-1751mc5-navCss{overflow-y:auto;}}
</style>,
],
},
}
}
isStringTag={false}
serialized={
Object {
"map": undefined,
"name": "1751mc5-navCss",
"next": undefined,
"styles": "@media (max-height: 240px){overflow-y:auto;};label:navCss;",
"toString": [Function],
}
}
/>
<EuiCollapsibleNav
aria-label="Primary"
button={<button />}
className="css-1751mc5-navCss"
data-test-subj="collapsibleNav"
id="collapsibe-nav"
isOpen={false}
onClose={[Function]}
ownFocus={false}
size={248}
>
<button
aria-controls="collapsibe-nav"
aria-expanded={false}
aria-pressed={false}
onMouseUpCapture={[Function]}
onTouchEnd={[Function]}
/>
</EuiCollapsibleNav>
</EuiCollapsibleNav>
</CollapsibleNav>
`;

6
src/core/packages/chrome/browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap generated
View file

@ -56,7 +56,7 @@ Array [
>
<a
aria-label="Elastic home"
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="css-4ghmd2-logoCss"
data-test-subj="logo"
href="/"
>
@ -69,7 +69,7 @@ Array [
<svg
aria-hidden="true"
aria-labelledby="elasticMark"
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="css-1ks1hwq-logoMarkCss"
data-test-subj="logoMark"
fill="none"
height="19"
@ -181,7 +181,7 @@ Array [
</div>
</div>
<div
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="css-2tq5q7-redirectAppLinksStyles-Header"
data-test-subj="kbnRedirectAppLink"
>
<nav

2
src/core/packages/notifications/browser-internal/src/toasts/__snapshots__/deduplicate_toasts.test.tsx.snap generated
View file

@ -5,7 +5,7 @@ exports[`TitleWithBadge component renders with string titles 1`] = `
Welcome!
<EuiNotificationBadge
className="css-1f5ny76"
className="css-721pd1-floatTopRight"
color="subdued"
size="m"
>

15
src/core/packages/overlays/browser-internal/src/banners/banners_list.test.tsx
View file

@ -10,11 +10,16 @@
import React from 'react';
import { act } from 'react-dom/test-utils';
import { mount } from 'enzyme';
import { EuiThemeProvider } from '@elastic/eui';
import { BannersList } from './banners_list';
import { BehaviorSubject } from 'rxjs';
import type { OverlayBanner } from './banners_service';
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<EuiThemeProvider>{children}</EuiThemeProvider>
);
describe('BannersList', () => {
test('renders null if no banners', () => {
expect(mount(<BannersList banners$={new BehaviorSubject([])} />).html()).toEqual(null);
@ -32,8 +37,10 @@ describe('BannersList', () => {
},
]);
expect(mount(<BannersList banners$={banners$} />).html()).toMatchInlineSnapshot(
`"<div class=\\"kbnGlobalBannerList\\"><div data-test-priority=\\"0\\" data-test-subj=\\"global-banner-item\\"><h1>Hello!</h1></div></div>"`
expect(
mount(<BannersList banners$={banners$} />, { wrappingComponent: Wrapper }).html()
).toMatchInlineSnapshot(
`"<div class=\\"kbnGlobalBannerList\\"><div data-test-priority=\\"0\\" data-test-subj=\\"global-banner-item\\" class=\\"css-rhtlbg-BannerItem\\"><h1>Hello!</h1></div></div>"`
);
});
@ -50,7 +57,7 @@ describe('BannersList', () => {
},
]);
const component = mount(<BannersList banners$={banners$} />);
const component = mount(<BannersList banners$={banners$} />, { wrappingComponent: Wrapper });
act(() => {
banners$.next([
@ -75,7 +82,7 @@ describe('BannersList', () => {
// Two new banners should be rendered
expect(component.html()).toMatchInlineSnapshot(
`"<div class=\\"kbnGlobalBannerList\\"><div data-test-priority=\\"1\\" data-test-subj=\\"global-banner-item\\"><h1>First Banner!</h1></div><div data-test-priority=\\"0\\" data-test-subj=\\"global-banner-item\\"><h1>Second banner!</h1></div></div>"`
`"<div class=\\"kbnGlobalBannerList\\"><div data-test-priority=\\"1\\" data-test-subj=\\"global-banner-item\\" class=\\"css-rhtlbg-BannerItem\\"><h1>First Banner!</h1></div><div data-test-priority=\\"0\\" data-test-subj=\\"global-banner-item\\" class=\\"css-rhtlbg-BannerItem\\"><h1>Second banner!</h1></div></div>"`
);
// Original banner should be unmounted
expect(unmount).toHaveBeenCalled();

8
src/core/packages/overlays/browser-internal/src/flyout/__snapshots__/flyout_service.test.tsx.snap generated
View file

@ -8,10 +8,10 @@ Array [
]
`;
exports[`FlyoutService openFlyout() renders a flyout to the DOM 1`] = `"[[{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"analytics\\":{\\"telemetryCounter$\\":{\\"closed\\":false,\\"currentObservers\\":null,\\"observers\\":[],\\"isStopped\\":false,\\"hasError\\":false,\\"thrownError\\":null}},\\"i18n\\":{},\\"theme\\":{\\"theme$\\":{}},\\"userProfile\\":{},\\"children\\":{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"css\\":{\\"name\\":\\"8oufzr\\",\\"styles\\":\\"display:flex;flex-direction:column;height:100%;overflow:hidden;\\"},\\"className\\":\\"kbnOverlayMountWrapper\\"},\\"_owner\\":null,\\"_store\\":{}}},\\"_owner\\":null,\\"_store\\":{}}},\\"_owner\\":null,\\"_store\\":{}},{}]]"`;
exports[`FlyoutService openFlyout() renders a flyout to the DOM 1`] = `"[[{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"analytics\\":{\\"telemetryCounter$\\":{\\"closed\\":false,\\"currentObservers\\":null,\\"observers\\":[],\\"isStopped\\":false,\\"hasError\\":false,\\"thrownError\\":null}},\\"i18n\\":{},\\"theme\\":{\\"theme$\\":{}},\\"userProfile\\":{},\\"children\\":{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":{\\"type\\":{},\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"css\\":{\\"name\\":\\"k57xps-FlyoutService\\",\\"styles\\":\\"display:flex;flex-direction:column;height:100%;overflow:hidden;label:FlyoutService;\\"},\\"className\\":\\"kbnOverlayMountWrapper\\"},\\"_owner\\":null,\\"_store\\":{}}},\\"_owner\\":null,\\"_store\\":{}}},\\"_owner\\":null,\\"_store\\":{}},{}]]"`;
exports[`FlyoutService openFlyout() renders a flyout to the DOM 2`] = `"<div data-eui=\\"EuiFlyout\\" role=\\"dialog\\"><button type=\\"button\\" data-test-subj=\\"euiFlyoutCloseButton\\" aria-label=\\"Close this dialog\\"></button><div class=\\"kbnOverlayMountWrapper\\"><span>Flyout content</span></div></div>"`;
exports[`FlyoutService openFlyout() renders a flyout to the DOM 2`] = `"<div data-eui=\\"EuiFlyout\\" role=\\"dialog\\"><button type=\\"button\\" data-test-subj=\\"euiFlyoutCloseButton\\" aria-label=\\"Close this dialog\\"></button><div class=\\"kbnOverlayMountWrapper css-k57xps-FlyoutService\\"><span>Flyout content</span></div></div>"`;
exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 1`] = `"[[{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"analytics\\":{\\"telemetryCounter$\\":{\\"closed\\":false,\\"currentObservers\\":null,\\"observers\\":[],\\"isStopped\\":false,\\"hasError\\":false,\\"thrownError\\":null}},\\"i18n\\":{},\\"theme\\":{\\"theme$\\":{}},\\"userProfile\\":{},\\"children\\":{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"css\\":{\\"name\\":\\"8oufzr\\",\\"styles\\":\\"display:flex;flex-direction:column;height:100%;overflow:hidden;\\"},\\"className\\":\\"kbnOverlayMountWrapper\\"},\\"_owner\\":null,\\"_store\\":{}}},\\"_owner\\":null,\\"_store\\":{}}},\\"_owner\\":null,\\"_store\\":{}},{}],[{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"analytics\\":{\\"telemetryCounter$\\":{\\"closed\\":false,\\"currentObservers\\":null,\\"observers\\":[],\\"isStopped\\":false,\\"hasError\\":false,\\"thrownError\\":null}},\\"i18n\\":{},\\"theme\\":{\\"theme$\\":{}},\\"userProfile\\":{},\\"children\\":{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"css\\":{\\"name\\":\\"8oufzr\\",\\"styles\\":\\"display:flex;flex-direction:column;height:100%;overflow:hidden;\\"},\\"className\\":\\"kbnOverlayMountWrapper\\"},\\"_owner\\":null,\\"_store\\":{}}},\\"_owner\\":null,\\"_store\\":{}}},\\"_owner\\":null,\\"_store\\":{}},{}]]"`;
exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 1`] = `"[[{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"analytics\\":{\\"telemetryCounter$\\":{\\"closed\\":false,\\"currentObservers\\":null,\\"observers\\":[],\\"isStopped\\":false,\\"hasError\\":false,\\"thrownError\\":null}},\\"i18n\\":{},\\"theme\\":{\\"theme$\\":{}},\\"userProfile\\":{},\\"children\\":{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":{\\"type\\":{},\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"css\\":{\\"name\\":\\"k57xps-FlyoutService\\",\\"styles\\":\\"display:flex;flex-direction:column;height:100%;overflow:hidden;label:FlyoutService;\\"},\\"className\\":\\"kbnOverlayMountWrapper\\"},\\"_owner\\":null,\\"_store\\":{}}},\\"_owner\\":null,\\"_store\\":{}}},\\"_owner\\":null,\\"_store\\":{}},{}],[{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"analytics\\":{\\"telemetryCounter$\\":{\\"closed\\":false,\\"currentObservers\\":null,\\"observers\\":[],\\"isStopped\\":false,\\"hasError\\":false,\\"thrownError\\":null}},\\"i18n\\":{},\\"theme\\":{\\"theme$\\":{}},\\"userProfile\\":{},\\"children\\":{\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"children\\":{\\"type\\":{},\\"key\\":null,\\"ref\\":null,\\"props\\":{\\"css\\":{\\"name\\":\\"k57xps-FlyoutService\\",\\"styles\\":\\"display:flex;flex-direction:column;height:100%;overflow:hidden;label:FlyoutService;\\"},\\"className\\":\\"kbnOverlayMountWrapper\\"},\\"_owner\\":null,\\"_store\\":{}}},\\"_owner\\":null,\\"_store\\":{}}},\\"_owner\\":null,\\"_store\\":{}},{}]]"`;
exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 2`] = `"<div data-eui=\\"EuiFlyout\\" role=\\"dialog\\"><button type=\\"button\\" data-test-subj=\\"euiFlyoutCloseButton\\" aria-label=\\"Close this dialog\\"></button><div class=\\"kbnOverlayMountWrapper\\"><span>Flyout content 2</span></div></div>"`;
exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 2`] = `"<div data-eui=\\"EuiFlyout\\" role=\\"dialog\\"><button type=\\"button\\" data-test-subj=\\"euiFlyoutCloseButton\\" aria-label=\\"Close this dialog\\"></button><div class=\\"kbnOverlayMountWrapper css-k57xps-FlyoutService\\"><span>Flyout content 2</span></div></div>"`;

20
src/platform/packages/private/kbn-grid-layout/grid/grid_layout.test.tsx
View file

@ -164,19 +164,25 @@ describe('GridLayout', () => {
it('panel gets active when dragged', () => {
renderGridLayout();
const panelHandle = getPanelHandle('panel1');
expect(screen.getByLabelText('panelId:panel1').closest('div')).toHaveClass('kbnGridPanel', {
exact: true,
});
expect(screen.getByLabelText('panelId:panel1').closest('div')).toHaveClass(
'kbnGridPanel css-c5ixg-initialStyles',
{
exact: true,
}
);
mouseStartDragging(panelHandle);
mouseMoveTo({ clientX: 256, clientY: 128 });
expect(screen.getByLabelText('panelId:panel1').closest('div')).toHaveClass(
'kbnGridPanel kbnGridPanel--active',
'kbnGridPanel css-c5ixg-initialStyles kbnGridPanel--active',
{ exact: true }
);
mouseDrop(panelHandle);
expect(screen.getByLabelText('panelId:panel1').closest('div')).toHaveClass('kbnGridPanel', {
exact: true,
});
expect(screen.getByLabelText('panelId:panel1').closest('div')).toHaveClass(
'kbnGridPanel css-c5ixg-initialStyles',
{
exact: true,
}
);
});
});

31
src/platform/packages/private/kbn-grid-layout/grid/grid_panel/grid_panel.test.tsx
View file

@ -8,6 +8,7 @@
*/
import React from 'react';
import { EuiThemeProvider } from '@elastic/eui';
import { render, screen } from '@testing-library/react';
import { GridPanel, type GridPanelProps } from './grid_panel';
import { getGridLayoutStateManagerMock, mockRenderPanelContents } from '../test_utils/mocks';
@ -29,9 +30,11 @@ describe('GridPanel', () => {
...(overrides?.propsOverrides ?? {}),
};
const { rerender, ...rtlRest } = render(
<GridLayoutContext.Provider value={contextValue}>
<GridPanel {...panelProps} />
</GridLayoutContext.Provider>
<EuiThemeProvider>
<GridLayoutContext.Provider value={contextValue}>
<GridPanel {...panelProps} />
</GridLayoutContext.Provider>
</EuiThemeProvider>
);
return {
@ -41,16 +44,18 @@ describe('GridPanel', () => {
contextOverrides?: Partial<GridLayoutContextType>;
}) => {
return rerender(
<GridLayoutContext.Provider
value={
{
...contextValue,
...(newOverrides?.contextOverrides ?? {}),
} as GridLayoutContextType
}
>
<GridPanel {...panelProps} {...(newOverrides?.propsOverrides ?? {})} />
</GridLayoutContext.Provider>
<EuiThemeProvider>
<GridLayoutContext.Provider
value={
{
...contextValue,
...(newOverrides?.contextOverrides ?? {}),
} as GridLayoutContextType
}
>
<GridPanel {...panelProps} {...(newOverrides?.propsOverrides ?? {})} />
</GridLayoutContext.Provider>
</EuiThemeProvider>
);
},
};

40
src/platform/packages/private/kbn-grid-layout/grid/keyboard_navigation.test.tsx
View file

@ -60,39 +60,51 @@ describe('Keyboard navigation', () => {
renderGridLayout();
const panelHandle = getPanelHandle('panel1');
panelHandle.focus();
expect(screen.getByLabelText('panelId:panel1').closest('div')).toHaveClass('kbnGridPanel', {
exact: true,
});
expect(screen.getByLabelText('panelId:panel1').closest('div')).toHaveClass(
'kbnGridPanel css-c5ixg-initialStyles',
{
exact: true,
}
);
await pressEnter();
await pressKey('[ArrowDown]');
expect(panelHandle).toHaveFocus(); // focus is not lost during interaction
expect(screen.getByLabelText('panelId:panel1').closest('div')).toHaveClass(
'kbnGridPanel kbnGridPanel--active',
'kbnGridPanel kbnGridPanel--active css-c5ixg-initialStyles',
{ exact: true }
);
await pressEnter();
expect(screen.getByLabelText('panelId:panel1').closest('div')).toHaveClass('kbnGridPanel', {
exact: true,
});
expect(screen.getByLabelText('panelId:panel1').closest('div')).toHaveClass(
'kbnGridPanel css-c5ixg-initialStyles',
{
exact: true,
}
);
});
it('should show the panel active when during interaction for resize handle', async () => {
renderGridLayout();
const panelHandle = getPanelHandle('panel5', 'resize');
panelHandle.focus();
expect(screen.getByLabelText('panelId:panel5').closest('div')).toHaveClass('kbnGridPanel', {
exact: true,
});
expect(screen.getByLabelText('panelId:panel5').closest('div')).toHaveClass(
'kbnGridPanel css-1l7q1xe-initialStyles',
{
exact: true,
}
);
await pressEnter();
await pressKey('[ArrowDown]');
expect(panelHandle).toHaveFocus(); // focus is not lost during interaction
expect(screen.getByLabelText('panelId:panel5').closest('div')).toHaveClass(
'kbnGridPanel kbnGridPanel--active',
'kbnGridPanel css-1l7q1xe-initialStyles kbnGridPanel--active',
{ exact: true }
);
await pressKey('{Escape}');
expect(screen.getByLabelText('panelId:panel5').closest('div')).toHaveClass('kbnGridPanel', {
exact: true,
});
expect(screen.getByLabelText('panelId:panel5').closest('div')).toHaveClass(
'kbnGridPanel css-1l7q1xe-initialStyles',
{
exact: true,
}
);
expect(panelHandle).toHaveFocus(); // focus is not lost during interaction
});
});

6
src/platform/packages/private/kbn-reporting/public/share/share_context_menu/__snapshots__/screen_capture_panel_content.test.tsx.snap generated
View file

@ -2,7 +2,7 @@
exports[`ScreenCapturePanelContent properly renders a view with "canvas" layout option 1`] = `
<div
class="euiForm css-19midj6"
class="euiForm css-rr4sop-ReportingPanelContentUi"
data-test-subj="shareReportingForm"
>
<div
@ -185,7 +185,7 @@ exports[`ScreenCapturePanelContent properly renders a view with "canvas" layout
exports[`ScreenCapturePanelContent properly renders a view with "print" layout option 1`] = `
<div
class="euiForm css-19midj6"
class="euiForm css-rr4sop-ReportingPanelContentUi"
data-test-subj="shareReportingForm"
>
<div
@ -368,7 +368,7 @@ exports[`ScreenCapturePanelContent properly renders a view with "print" layout o
exports[`ScreenCapturePanelContent renders the default view properly 1`] = `
<div
class="euiForm css-19midj6"
class="euiForm css-rr4sop-ReportingPanelContentUi"
data-test-subj="shareReportingForm"
>
<div

15
src/platform/packages/shared/kbn-test/src/jest/transforms/babel/transformer_config.js
View file

@ -20,4 +20,19 @@ module.exports = {
},
],
],
overrides: [
{
exclude: require('@kbn/babel-preset/styled_components_files').USES_STYLED_COMPONENTS,
presets: [
[
require.resolve('@emotion/babel-preset-css-prop'),
{
autoLabel: 'always',
labelFormat: '[local]',
sourceMap: false,
},
],
],
},
],
};

1
src/platform/packages/shared/kbn-test/tsconfig.json
View file

@ -40,5 +40,6 @@
"@kbn/scout-reporting",
"@kbn/scout-info",
"@kbn/react-mute-legacy-root-warning",
"@kbn/babel-preset",
]
}

4
src/platform/packages/shared/kbn-unified-data-table/src/components/compare_documents/compare_documents.test.tsx
View file

@ -92,11 +92,11 @@ describe('CompareDocuments', () => {
renderCompareDocuments();
expect(mockDataGridProps).toBeDefined();
expect(mockDataGridProps?.columns).toBeDefined();
expect(mockDataGridProps?.css).toBeDefined();
expect(omit(mockDataGridProps, 'columns', 'css')).toMatchInlineSnapshot(`
expect(omit(mockDataGridProps, 'columns')).toMatchInlineSnapshot(`
Object {
"aria-describedby": "test",
"aria-labelledby": "test",
"className": "css-h7dgtn-useComparisonCss-useComparisonCss",
"columnVisibility": Object {
"setVisibleColumns": [Function],
"visibleColumns": Array [

418
src/platform/packages/shared/kbn-unified-data-table/src/components/compare_documents/hooks/__snapshots__/use_comparison_css.test.ts.snap generated
View file

@ -3,59 +3,9 @@
exports[`useComparisonCss should render with basic diff mode and diff decorations 1`] = `
Object {
"map": undefined,
"name": "1g4i0o",
"name": "h7dgtn-useComparisonCss-useComparisonCss",
"next": undefined,
"styles": "
.unifiedDataTable__cellValue {
white-space: pre-wrap;
}
.unifiedDataTable__comparisonFieldName {
font-weight: 500;
}
.unifiedDataTable__comparisonBaseDocCell {
background-color: #F6F9FC;
}
.unifiedDataTable__comparisonMatchCell {
.unifiedDataTable__cellValue {
&,
& * {
color: #09724D !important;
}
}
}
.unifiedDataTable__comparisonDiffCell {
.unifiedDataTable__cellValue {
&,
& * {
color: #A71627 !important;
}
}
}
;
.unifiedDataTable__comparisonSegment {
position: relative;
}
.unifiedDataTable__comparisonAddedSegment {
background-color: #E2F8F0;
color: #09724D;
}
.unifiedDataTable__comparisonRemovedSegment {
background-color: #FFE8E5;
color: #A71627;
}
",
"styles": ".unifiedDataTable__cellValue{white-space:pre-wrap;}.unifiedDataTable__comparisonFieldName{font-weight:500;}.unifiedDataTable__comparisonBaseDocCell{background-color:#F6F9FC;}.unifiedDataTable__comparisonMatchCell{.unifiedDataTable__cellValue{&,& *{color:#09724D!important;}}}.unifiedDataTable__comparisonDiffCell{.unifiedDataTable__cellValue{&,& *{color:#A71627!important;}}};label:useComparisonCss;; .unifiedDataTable__comparisonSegment{position:relative;}.unifiedDataTable__comparisonAddedSegment{background-color:#E2F8F0;color:#09724D;}.unifiedDataTable__comparisonRemovedSegment{background-color:#FFE8E5;color:#A71627;} ;;label:useComparisonCss;",
"toString": [Function],
}
`;
@ -63,59 +13,9 @@ Object {
exports[`useComparisonCss should render with basic diff mode and no diff decorations 1`] = `
Object {
"map": undefined,
"name": "1g4i0o",
"name": "h7dgtn-useComparisonCss-useComparisonCss",
"next": undefined,
"styles": "
.unifiedDataTable__cellValue {
white-space: pre-wrap;
}
.unifiedDataTable__comparisonFieldName {
font-weight: 500;
}
.unifiedDataTable__comparisonBaseDocCell {
background-color: #F6F9FC;
}
.unifiedDataTable__comparisonMatchCell {
.unifiedDataTable__cellValue {
&,
& * {
color: #09724D !important;
}
}
}
.unifiedDataTable__comparisonDiffCell {
.unifiedDataTable__cellValue {
&,
& * {
color: #A71627 !important;
}
}
}
;
.unifiedDataTable__comparisonSegment {
position: relative;
}
.unifiedDataTable__comparisonAddedSegment {
background-color: #E2F8F0;
color: #09724D;
}
.unifiedDataTable__comparisonRemovedSegment {
background-color: #FFE8E5;
color: #A71627;
}
",
"styles": ".unifiedDataTable__cellValue{white-space:pre-wrap;}.unifiedDataTable__comparisonFieldName{font-weight:500;}.unifiedDataTable__comparisonBaseDocCell{background-color:#F6F9FC;}.unifiedDataTable__comparisonMatchCell{.unifiedDataTable__cellValue{&,& *{color:#09724D!important;}}}.unifiedDataTable__comparisonDiffCell{.unifiedDataTable__cellValue{&,& *{color:#A71627!important;}}};label:useComparisonCss;; .unifiedDataTable__comparisonSegment{position:relative;}.unifiedDataTable__comparisonAddedSegment{background-color:#E2F8F0;color:#09724D;}.unifiedDataTable__comparisonRemovedSegment{background-color:#FFE8E5;color:#A71627;} ;;label:useComparisonCss;",
"toString": [Function],
}
`;
@ -123,49 +23,9 @@ Object {
exports[`useComparisonCss should render with chars diff mode and diff decorations 1`] = `
Object {
"map": undefined,
"name": "13ke1tw",
"name": "18ri905-useComparisonCss-useComparisonCss",
"next": undefined,
"styles": "
.unifiedDataTable__cellValue {
white-space: pre-wrap;
}
.unifiedDataTable__comparisonFieldName {
font-weight: 500;
}
.unifiedDataTable__comparisonBaseDocCell {
background-color: #F6F9FC;
}
.unifiedDataTable__comparisonSegment {
position: relative;
}
.unifiedDataTable__comparisonAddedSegment {
background-color: #E2F8F0;
color: #09724D;
}
.unifiedDataTable__comparisonRemovedSegment {
background-color: #FFE8E5;
color: #A71627;
}
.unifiedDataTable__comparisonAddedSegment {
text-decoration: underline;
}
.unifiedDataTable__comparisonRemovedSegment {
text-decoration: line-through;
}
;
",
"styles": ".unifiedDataTable__cellValue{white-space:pre-wrap;}.unifiedDataTable__comparisonFieldName{font-weight:500;}.unifiedDataTable__comparisonBaseDocCell{background-color:#F6F9FC;} .unifiedDataTable__comparisonSegment{position:relative;}.unifiedDataTable__comparisonAddedSegment{background-color:#E2F8F0;color:#09724D;}.unifiedDataTable__comparisonRemovedSegment{background-color:#FFE8E5;color:#A71627;}.unifiedDataTable__comparisonAddedSegment{text-decoration:underline;}.unifiedDataTable__comparisonRemovedSegment{text-decoration:line-through;};label:useComparisonCss;; ;;label:useComparisonCss;",
"toString": [Function],
}
`;
@ -173,41 +33,9 @@ Object {
exports[`useComparisonCss should render with chars diff mode and no diff decorations 1`] = `
Object {
"map": undefined,
"name": "1r8kn6z",
"name": "5yaxff-useComparisonCss",
"next": undefined,
"styles": "
.unifiedDataTable__cellValue {
white-space: pre-wrap;
}
.unifiedDataTable__comparisonFieldName {
font-weight: 500;
}
.unifiedDataTable__comparisonBaseDocCell {
background-color: #F6F9FC;
}
.unifiedDataTable__comparisonSegment {
position: relative;
}
.unifiedDataTable__comparisonAddedSegment {
background-color: #E2F8F0;
color: #09724D;
}
.unifiedDataTable__comparisonRemovedSegment {
background-color: #FFE8E5;
color: #A71627;
}
",
"styles": ".unifiedDataTable__cellValue{white-space:pre-wrap;}.unifiedDataTable__comparisonFieldName{font-weight:500;}.unifiedDataTable__comparisonBaseDocCell{background-color:#F6F9FC;} .unifiedDataTable__comparisonSegment{position:relative;}.unifiedDataTable__comparisonAddedSegment{background-color:#E2F8F0;color:#09724D;}.unifiedDataTable__comparisonRemovedSegment{background-color:#FFE8E5;color:#A71627;} ;;label:useComparisonCss;",
"toString": [Function],
}
`;
@ -215,77 +43,9 @@ Object {
exports[`useComparisonCss should render with lines diff mode and diff decorations 1`] = `
Object {
"map": undefined,
"name": "i4wm23",
"name": "rjjcn9-indicatorCss-indicatorCss-useComparisonCss-useComparisonCss-useComparisonCss",
"next": undefined,
"styles": "
.unifiedDataTable__cellValue {
white-space: pre-wrap;
}
.unifiedDataTable__comparisonFieldName {
font-weight: 500;
}
.unifiedDataTable__comparisonBaseDocCell {
background-color: #F6F9FC;
}
.unifiedDataTable__comparisonSegment {
position: relative;
}
.unifiedDataTable__comparisonAddedSegment {
background-color: #E2F8F0;
color: #09724D;
}
.unifiedDataTable__comparisonRemovedSegment {
background-color: #FFE8E5;
color: #A71627;
}
.unifiedDataTable__comparisonSegment {
padding-left: calc(4px / 2);
}
.unifiedDataTable__comparisonAddedSegment:before {
content: '+';
position: absolute;
width: 8px;
height: 100%;
margin-left: calc(-8px - calc(4px / 2));
text-align: center;
line-height: 1;
font-weight: 450;
;
background-color: #008A5E;
color: #ECF1F9;
}
.unifiedDataTable__comparisonRemovedSegment:before {
content: '-';
position: absolute;
width: 8px;
height: 100%;
margin-left: calc(-8px - calc(4px / 2));
text-align: center;
line-height: 1;
font-weight: 450;
;
background-color: #C61E25;
color: #ECF1F9;
}
;
;
",
"styles": ".unifiedDataTable__cellValue{white-space:pre-wrap;}.unifiedDataTable__comparisonFieldName{font-weight:500;}.unifiedDataTable__comparisonBaseDocCell{background-color:#F6F9FC;} .unifiedDataTable__comparisonSegment{position:relative;}.unifiedDataTable__comparisonAddedSegment{background-color:#E2F8F0;color:#09724D;}.unifiedDataTable__comparisonRemovedSegment{background-color:#FFE8E5;color:#A71627;} .unifiedDataTable__comparisonSegment{padding-left:calc(4px / 2);}.unifiedDataTable__comparisonAddedSegment:before{content:'+';position:absolute;width:8px;height:100%;margin-left:calc(-8px - calc(4px / 2));text-align:center;line-height:1;font-weight:450;;label:indicatorCss;; background-color:#008A5E;color:#ECF1F9;}.unifiedDataTable__comparisonRemovedSegment:before{content:'-';position:absolute;width:8px;height:100%;margin-left:calc(-8px - calc(4px / 2));text-align:center;line-height:1;font-weight:450;;label:indicatorCss;; background-color:#C61E25;color:#ECF1F9;};label:useComparisonCss;;;;label:useComparisonCss;;;;label:useComparisonCss;",
"toString": [Function],
}
`;
@ -293,47 +53,9 @@ Object {
exports[`useComparisonCss should render with lines diff mode and no diff decorations 1`] = `
Object {
"map": undefined,
"name": "tb1gdy",
"name": "1dyja13-useComparisonCss-useComparisonCss",
"next": undefined,
"styles": "
.unifiedDataTable__cellValue {
white-space: pre-wrap;
}
.unifiedDataTable__comparisonFieldName {
font-weight: 500;
}
.unifiedDataTable__comparisonBaseDocCell {
background-color: #F6F9FC;
}
.unifiedDataTable__comparisonSegment {
position: relative;
}
.unifiedDataTable__comparisonAddedSegment {
background-color: #E2F8F0;
color: #09724D;
}
.unifiedDataTable__comparisonRemovedSegment {
background-color: #FFE8E5;
color: #A71627;
}
.unifiedDataTable__comparisonSegment {
padding-left: calc(4px / 2);
}
;
",
"styles": ".unifiedDataTable__cellValue{white-space:pre-wrap;}.unifiedDataTable__comparisonFieldName{font-weight:500;}.unifiedDataTable__comparisonBaseDocCell{background-color:#F6F9FC;} .unifiedDataTable__comparisonSegment{position:relative;}.unifiedDataTable__comparisonAddedSegment{background-color:#E2F8F0;color:#09724D;}.unifiedDataTable__comparisonRemovedSegment{background-color:#FFE8E5;color:#A71627;} .unifiedDataTable__comparisonSegment{padding-left:calc(4px / 2);};;label:useComparisonCss;;;;label:useComparisonCss;",
"toString": [Function],
}
`;
@ -341,41 +63,9 @@ Object {
exports[`useComparisonCss should render with no diff mode and no diff decorations 1`] = `
Object {
"map": undefined,
"name": "1r8kn6z",
"name": "5yaxff-useComparisonCss",
"next": undefined,
"styles": "
.unifiedDataTable__cellValue {
white-space: pre-wrap;
}
.unifiedDataTable__comparisonFieldName {
font-weight: 500;
}
.unifiedDataTable__comparisonBaseDocCell {
background-color: #F6F9FC;
}
.unifiedDataTable__comparisonSegment {
position: relative;
}
.unifiedDataTable__comparisonAddedSegment {
background-color: #E2F8F0;
color: #09724D;
}
.unifiedDataTable__comparisonRemovedSegment {
background-color: #FFE8E5;
color: #A71627;
}
",
"styles": ".unifiedDataTable__cellValue{white-space:pre-wrap;}.unifiedDataTable__comparisonFieldName{font-weight:500;}.unifiedDataTable__comparisonBaseDocCell{background-color:#F6F9FC;} .unifiedDataTable__comparisonSegment{position:relative;}.unifiedDataTable__comparisonAddedSegment{background-color:#E2F8F0;color:#09724D;}.unifiedDataTable__comparisonRemovedSegment{background-color:#FFE8E5;color:#A71627;} ;;label:useComparisonCss;",
"toString": [Function],
}
`;
@ -383,49 +73,9 @@ Object {
exports[`useComparisonCss should render with words diff mode and diff decorations 1`] = `
Object {
"map": undefined,
"name": "13ke1tw",
"name": "18ri905-useComparisonCss-useComparisonCss",
"next": undefined,
"styles": "
.unifiedDataTable__cellValue {
white-space: pre-wrap;
}
.unifiedDataTable__comparisonFieldName {
font-weight: 500;
}
.unifiedDataTable__comparisonBaseDocCell {
background-color: #F6F9FC;
}
.unifiedDataTable__comparisonSegment {
position: relative;
}
.unifiedDataTable__comparisonAddedSegment {
background-color: #E2F8F0;
color: #09724D;
}
.unifiedDataTable__comparisonRemovedSegment {
background-color: #FFE8E5;
color: #A71627;
}
.unifiedDataTable__comparisonAddedSegment {
text-decoration: underline;
}
.unifiedDataTable__comparisonRemovedSegment {
text-decoration: line-through;
}
;
",
"styles": ".unifiedDataTable__cellValue{white-space:pre-wrap;}.unifiedDataTable__comparisonFieldName{font-weight:500;}.unifiedDataTable__comparisonBaseDocCell{background-color:#F6F9FC;} .unifiedDataTable__comparisonSegment{position:relative;}.unifiedDataTable__comparisonAddedSegment{background-color:#E2F8F0;color:#09724D;}.unifiedDataTable__comparisonRemovedSegment{background-color:#FFE8E5;color:#A71627;}.unifiedDataTable__comparisonAddedSegment{text-decoration:underline;}.unifiedDataTable__comparisonRemovedSegment{text-decoration:line-through;};label:useComparisonCss;; ;;label:useComparisonCss;",
"toString": [Function],
}
`;
@ -433,41 +83,9 @@ Object {
exports[`useComparisonCss should render with words diff mode and no diff decorations 1`] = `
Object {
"map": undefined,
"name": "1r8kn6z",
"name": "5yaxff-useComparisonCss",
"next": undefined,
"styles": "
.unifiedDataTable__cellValue {
white-space: pre-wrap;
}
.unifiedDataTable__comparisonFieldName {
font-weight: 500;
}
.unifiedDataTable__comparisonBaseDocCell {
background-color: #F6F9FC;
}
.unifiedDataTable__comparisonSegment {
position: relative;
}
.unifiedDataTable__comparisonAddedSegment {
background-color: #E2F8F0;
color: #09724D;
}
.unifiedDataTable__comparisonRemovedSegment {
background-color: #FFE8E5;
color: #A71627;
}
",
"styles": ".unifiedDataTable__cellValue{white-space:pre-wrap;}.unifiedDataTable__comparisonFieldName{font-weight:500;}.unifiedDataTable__comparisonBaseDocCell{background-color:#F6F9FC;} .unifiedDataTable__comparisonSegment{position:relative;}.unifiedDataTable__comparisonAddedSegment{background-color:#E2F8F0;color:#09724D;}.unifiedDataTable__comparisonRemovedSegment{background-color:#FFE8E5;color:#A71627;} ;;label:useComparisonCss;",
"toString": [Function],
}
`;

5
src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_filters/field_type_filter.test.tsx
View file

@ -35,7 +35,10 @@ describe('UnifiedFieldList <FieldTypeFilter />', () => {
async function toggleType(wrapper: ReactWrapper, fieldType: string) {
act(() => {
wrapper.find(`[data-test-subj="typeFilter-${fieldType}"]`).first().simulate('click');
wrapper
.find(`EuiContextMenuItem[data-test-subj="typeFilter-${fieldType}"]`)
.first()
.simulate('click');
});
await wrapper.update();

2
src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_grouped/field_list_grouped.test.tsx
View file

@ -372,7 +372,7 @@ describe('UnifiedFieldList FieldListGrouped + useGroupedFields()', () => {
});
await act(async () => {
await wrapper.find('[data-test-subj="typeFilter-date"]').first().simulate('click');
await wrapper.find('button[data-test-subj="typeFilter-date"]').first().simulate('click');
await wrapper.update();
});

84
src/platform/packages/shared/kbn-unified-field-list/src/components/field_list_grouped/no_fields_callout.test.tsx
View file

@ -17,17 +17,7 @@ describe('UnifiedFieldList <NoFieldCallout />', () => {
expect(component).toMatchInlineSnapshot(`
<EuiText
color="subdued"
css={
Object {
"map": undefined,
"name": "1qdt3rt",
"next": undefined,
"styles": "
padding: 8px;
",
"toString": [Function],
}
}
css="unknown styles"
data-test-subj="noFieldsCallout-noFieldsExist"
size="s"
>
@ -42,17 +32,7 @@ describe('UnifiedFieldList <NoFieldCallout />', () => {
expect(component).toMatchInlineSnapshot(`
<EuiText
color="subdued"
css={
Object {
"map": undefined,
"name": "wd14gj",
"next": undefined,
"styles": "
padding: 8px;
",
"toString": [Function],
}
}
css="unknown styles"
data-test-subj="noFieldsCallout-noFieldsMatch"
size="s"
>
@ -69,17 +49,7 @@ describe('UnifiedFieldList <NoFieldCallout />', () => {
expect(component).toMatchInlineSnapshot(`
<EuiText
color="subdued"
css={
Object {
"map": undefined,
"name": "wd14gj",
"next": undefined,
"styles": "
padding: 8px;
",
"toString": [Function],
}
}
css="unknown styles"
data-test-subj="noFieldsCallout-noFieldsMatch"
size="s"
>
@ -97,17 +67,7 @@ describe('UnifiedFieldList <NoFieldCallout />', () => {
expect(component).toMatchInlineSnapshot(`
<EuiText
color="subdued"
css={
Object {
"map": undefined,
"name": "wd14gj",
"next": undefined,
"styles": "
padding: 8px;
",
"toString": [Function],
}
}
css="unknown styles"
data-test-subj="noFieldsCallout-noFieldsMatch"
size="s"
>
@ -138,17 +98,7 @@ describe('UnifiedFieldList <NoFieldCallout />', () => {
expect(component).toMatchInlineSnapshot(`
<EuiText
color="subdued"
css={
Object {
"map": undefined,
"name": "wd14gj",
"next": undefined,
"styles": "
padding: 8px;
",
"toString": [Function],
}
}
css="unknown styles"
data-test-subj="noFieldsCallout-noFieldsMatch"
size="s"
>
@ -182,17 +132,7 @@ describe('UnifiedFieldList <NoFieldCallout />', () => {
expect(component).toMatchInlineSnapshot(`
<EuiText
color="subdued"
css={
Object {
"map": undefined,
"name": "wd14gj",
"next": undefined,
"styles": "
padding: 8px;
",
"toString": [Function],
}
}
css="unknown styles"
data-test-subj="noFieldsCallout-noFieldsMatch"
size="s"
>
@ -227,17 +167,7 @@ describe('UnifiedFieldList <NoFieldCallout />', () => {
expect(component).toMatchInlineSnapshot(`
<EuiText
color="subdued"
css={
Object {
"map": undefined,
"name": "wd14gj",
"next": undefined,
"styles": "
padding: 8px;
",
"toString": [Function],
}
}
css="unknown styles"
data-test-subj="noFieldsCallout-noFieldsMatch"
size="s"
>

14
src/platform/packages/shared/kbn-unified-field-list/src/components/field_popover/field_popover.test.tsx
View file

@ -8,7 +8,13 @@
*/
import React from 'react';
import { EuiButton, EuiText, EuiPopoverTitle, EuiPopoverFooter } from '@elastic/eui';
import {
EuiButton,
EuiText,
EuiPopoverTitle,
EuiPopoverFooter,
EuiThemeProvider,
} from '@elastic/eui';
import { mountWithIntl } from '@kbn/test-jest-helpers';
import { stubLogstashDataView as dataView } from '@kbn/data-views-plugin/common/data_view.stub';
import { FieldPopover } from './field_popover';
@ -38,7 +44,8 @@ describe('UnifiedFieldList <FieldPopover />', () => {
button={<EuiButton title="test" />}
renderHeader={() => <EuiText>{'header'}</EuiText>}
renderContent={() => <EuiText>{'content'}</EuiText>}
/>
/>,
{ wrappingComponent: EuiThemeProvider }
);
expect(wrapper.find(EuiText).first().text()).toBe('header');
@ -78,7 +85,8 @@ describe('UnifiedFieldList <FieldPopover />', () => {
/>
)}
renderContent={() => <EuiText>{'content'}</EuiText>}
/>
/>,
{ wrappingComponent: EuiThemeProvider }
);
expect(wrapper.find(EuiPopoverTitle).text()).toBe(fieldName);

8
src/platform/packages/shared/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.test.tsx
View file

@ -8,7 +8,7 @@
*/
import { act } from 'react-dom/test-utils';
import { EuiButtonIcon, EuiPopover, EuiProgress } from '@elastic/eui';
import { EuiButtonIcon, EuiPopover, EuiProgress, EuiThemeProvider } from '@elastic/eui';
import React from 'react';
import { findTestSubject } from '@elastic/eui/lib/test';
import { mountWithIntl } from '@kbn/test-jest-helpers';
@ -89,7 +89,11 @@ async function getComponent({
size: 'xs',
workspaceSelectedFieldNames: [],
};
const comp = await mountWithIntl(<UnifiedFieldListItem {...props} />);
const comp = await mountWithIntl(
<EuiThemeProvider>
<UnifiedFieldListItem {...props} />
</EuiThemeProvider>
);
// wait for lazy modules
await new Promise((resolve) => setTimeout(resolve, 0));
await comp.update();

2
src/platform/packages/shared/response-ops/alerts-table/components/cell_popover_host.test.tsx
View file

@ -18,7 +18,7 @@ import { mockRenderContext } from '../mocks/context.mock';
const props = createPartialObjectMock<EuiDataGridCellPopoverElementProps>({
rowIndex: 0,
DefaultCellPopover: jest.fn().mockReturnValue(<div data-test-subj="defaultCellPopover" />),
DefaultCellPopover: jest.fn(() => <div data-test-subj="defaultCellPopover" />),
});
describe('CellPopoverHost', () => {

36
src/platform/packages/shared/shared-ux/avatar/solution/src/__snapshots__/solution_avatar.test.tsx.snap generated
View file

@ -3,23 +3,7 @@
exports[`KibanaSolutionAvatar renders 1`] = `
<EuiAvatar
color="plain"
css={
Array [
Object {
"map": undefined,
"name": "ym1nj7",
"next": undefined,
"styles": "
box-shadow:
0 .7px 1.4px rgba(0,0,0,0.07),
0 1.9px 4px rgba(0,0,0,0.05),
0 4.5px 10px rgba(0,0,0,0.05);
",
"toString": [Function],
},
false,
]
}
css="unknown styles"
iconType="logoElastic"
name="Solution"
/>
@ -28,23 +12,7 @@ box-shadow:
exports[`KibanaSolutionAvatar renders 2`] = `
<EuiAvatar
color="plain"
css={
Array [
Object {
"map": undefined,
"name": "ym1nj7",
"next": undefined,
"styles": "
box-shadow:
0 .7px 1.4px rgba(0,0,0,0.07),
0 1.9px 4px rgba(0,0,0,0.05),
0 4.5px 10px rgba(0,0,0,0.05);
",
"toString": [Function],
},
false,
]
}
css="unknown styles"
iconType="logoElasticStack"
name="Elastic Stack"
/>

27
src/platform/packages/shared/shared-ux/button/exit_full_screen/src/__snapshots__/exit_full_screen_button.test.tsx.snap generated
View file

@ -9,14 +9,7 @@ exports[`<ExitFullScreenButton /> with kibana services is rendered 1`] = `
In full screen mode, press ESC to exit.
</p>
<button
class="exitFullScreenButton"
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,
box-shadow:
0 1px 5px rgba(0,0,0,0.1),
0 3.6px 13px rgba(0,0,0,0.07),
0 8.4px 23px rgba(0,0,0,0.06),
0 23px 35px rgba(0,0,0,0.05);
,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="exitFullScreenButton emotion-euiButtonDisplay-buttonCSS-buttonCSS"
data-test-subj="exitFullScreenModeButton"
>
<span
@ -56,14 +49,7 @@ exports[`<ExitFullScreenButton /> with kibana services renders custom logo 1`] =
In full screen mode, press ESC to exit.
</p>
<button
class="exitFullScreenButton"
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,
box-shadow:
0 1px 5px rgba(0,0,0,0.1),
0 3.6px 13px rgba(0,0,0,0.07),
0 8.4px 23px rgba(0,0,0,0.06),
0 23px 35px rgba(0,0,0,0.05);
,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="exitFullScreenButton emotion-euiButtonDisplay-buttonCSS-buttonCSS"
data-test-subj="exitFullScreenModeButton"
>
<span
@ -110,14 +96,7 @@ exports[`<ExitFullScreenButton /> with manual services is rendered 1`] = `
In full screen mode, press ESC to exit.
</p>
<button
class="exitFullScreenButton"
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,
box-shadow:
0 1px 5px rgba(0,0,0,0.1),
0 3.6px 13px rgba(0,0,0,0.07),
0 8.4px 23px rgba(0,0,0,0.06),
0 23px 35px rgba(0,0,0,0.05);
,You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="exitFullScreenButton emotion-euiButtonDisplay-buttonCSS-buttonCSS"
data-test-subj="exitFullScreenModeButton"
>
<span

2
src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/add_from_library/__snapshots__/add_from_library.test.tsx.snap generated
View file

@ -2,7 +2,7 @@
exports[`<AddFromLibraryButton /> is rendered 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-EuiButton"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-text-ToolbarStandardButton"
intl="[object Object]"
type="button"
>

2
src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/icon_button_group/__snapshots__/icon_button_group.test.tsx.snap generated
View file

@ -2,7 +2,7 @@
exports[`<IconButtonGroup /> is rendered 1`] = `
<fieldset
class="euiButtonGroup emotion-EuiButtonGroup"
class="euiButtonGroup emotion-euiButtonGroup-IconButtonGroup"
>
<legend
class="emotion-euiScreenReaderOnly"

8
src/platform/packages/shared/shared-ux/button_toolbar/src/buttons/toolbar_button/__snapshots__/toolbar_button.test.tsx.snap generated
View file

@ -3,7 +3,7 @@
exports[`<ToolbarButton /> iconButton is rendered - default 1`] = `
<button
as="iconButton"
class="euiButtonIcon emotion-EuiButtonIcon"
class="euiButtonIcon emotion-euiButtonIcon-m-base-text-ToolbarIconButton"
intl="[object Object]"
type="button"
>
@ -18,7 +18,7 @@ exports[`<ToolbarButton /> iconButton is rendered - default 1`] = `
exports[`<ToolbarButton /> standard is rendered - default 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-EuiButton"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-text-ToolbarStandardButton"
intl="[object Object]"
type="button"
>
@ -40,7 +40,7 @@ exports[`<ToolbarButton /> standard is rendered - default 1`] = `
exports[`<ToolbarButton /> standard is rendered - primary 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-EuiButton"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-fill-primary-ToolbarStandardButton"
intl="[object Object]"
type="button"
>
@ -62,7 +62,7 @@ exports[`<ToolbarButton /> standard is rendered - primary 1`] = `
exports[`<ToolbarButton /> standard is rendered - text wth icon 1`] = `
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-EuiButton"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-fill-primary-ToolbarStandardButton"
intl="[object Object]"
type="button"
>

2
src/platform/packages/shared/shared-ux/button_toolbar/src/popover/__snapshots__/popover.test.tsx.snap generated
View file

@ -6,7 +6,7 @@ exports[`<ToolbarPopover /> is rendered 1`] = `
intl="[object Object]"
>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-EuiButton"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-text-ToolbarStandardButton"
type="button"
>
<span

11
src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.test.tsx
View file

@ -9,6 +9,8 @@
import React from 'react';
import { mountWithIntl } from '@kbn/test-jest-helpers';
import { matchers } from '@emotion/jest';
expect.extend(matchers);
import { ToolbarPopover } from './popover';
@ -35,12 +37,9 @@ describe('<ToolbarPopover />', () => {
const isOpen = true;
const component = mountWithIntl(<ToolbarPopover label="test" children={() => !isOpen} />);
const button = component.find('EuiButton');
expect(button.prop('color')).toBe('text');
expect(button.prop('css')).toMatchObject({
backgroundColor: '#FFFFFF',
border: '1px solid #E3E8F2',
color: '#1D2A3E',
});
expect(button).toHaveStyleRule('background-color', '#FFFFFF');
expect(button).toHaveStyleRule('border', '1px solid #E3E8F2');
expect(button).toHaveStyleRule('color', '#1D2A3E');
});
test('accepts a button type', () => {

2
src/platform/packages/shared/shared-ux/button_toolbar/src/toolbar/__snapshots__/toolbar.test.tsx.snap generated
View file

@ -8,7 +8,7 @@ exports[`<Toolbar /> is rendered 1`] = `
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<button
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-EuiButton"
class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-fill-primary-ToolbarStandardButton"
type="button"
>
<span

28
src/platform/packages/shared/shared-ux/card/no_data/impl/src/__snapshots__/no_data_card.component.test.tsx.snap generated
View file

@ -2,12 +2,7 @@
exports[`NoDataCardComponent props button 1`] = `
<EuiCard
css={
Object {
"marginInline": "auto",
"maxWidth": 400,
}
}
css="unknown styles"
description="Use Elastic Agent for a simple, unified way to collect data from your machines."
footer={
<EuiButton
@ -32,12 +27,7 @@ exports[`NoDataCardComponent props button 1`] = `
exports[`NoDataCardComponent props href 1`] = `
<EuiCard
css={
Object {
"marginInline": "auto",
"maxWidth": 400,
}
}
css="unknown styles"
description="Use Elastic Agent for a simple, unified way to collect data from your machines."
footer={
<EuiButton
@ -64,12 +54,7 @@ exports[`NoDataCardComponent props href 1`] = `
exports[`NoDataCardComponent renders 1`] = `
<EuiCard
css={
Object {
"marginInline": "auto",
"maxWidth": 400,
}
}
css="unknown styles"
description="Use Elastic Agent for a simple, unified way to collect data from your machines."
footer={
<EuiButton
@ -94,12 +79,7 @@ exports[`NoDataCardComponent renders 1`] = `
exports[`NoDataCardComponent renders with canAccessFleet false 1`] = `
<EuiCard
css={
Object {
"marginInline": "auto",
"maxWidth": 400,
}
}
css="unknown styles"
description={
<EuiTextColor
color="default"

20
src/platform/packages/shared/shared-ux/card/no_data/impl/src/__snapshots__/no_data_card.test.tsx.snap generated
View file

@ -2,11 +2,11 @@
exports[`NoDataCard props button 1`] = `
<div
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="css-qvyf25-redirectAppLinksStyles"
data-test-subj="kbnRedirectAppLink"
>
<div
class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard emotion-euiPanel-grow-m-l-plain-hasShadow-isClickable-EuiCard"
class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard emotion-euiPanel-grow-m-l-plain-hasShadow-isClickable-euiCard-center-NoDataCard"
>
<div
class="euiCard__main emotion-euiCard__main-vertical"
@ -85,11 +85,11 @@ exports[`NoDataCard props button 1`] = `
exports[`NoDataCard props extends EuiCardProps 1`] = `
<div
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="css-qvyf25-redirectAppLinksStyles"
data-test-subj="kbnRedirectAppLink"
>
<div
class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard custom_class emotion-euiPanel-grow-m-l-plain-hasShadow-isClickable-EuiCard"
class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard custom_class emotion-euiPanel-grow-m-l-plain-hasShadow-isClickable-euiCard-center-NoDataCard"
>
<div
class="euiCard__main emotion-euiCard__main-vertical"
@ -168,11 +168,11 @@ exports[`NoDataCard props extends EuiCardProps 1`] = `
exports[`NoDataCard props href 1`] = `
<div
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="css-qvyf25-redirectAppLinksStyles"
data-test-subj="kbnRedirectAppLink"
>
<div
class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard emotion-euiPanel-grow-m-l-plain-hasShadow-isClickable-EuiCard"
class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard emotion-euiPanel-grow-m-l-plain-hasShadow-isClickable-euiCard-center-NoDataCard"
>
<div
class="euiCard__main emotion-euiCard__main-vertical"
@ -251,11 +251,11 @@ exports[`NoDataCard props href 1`] = `
exports[`NoDataCard props no access to Fleet 1`] = `
<div
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="css-qvyf25-redirectAppLinksStyles"
data-test-subj="kbnRedirectAppLink"
>
<div
class="euiPanel euiPanel--subdued euiPanel--paddingLarge euiCard emotion-euiPanel-grow-m-l-subdued-EuiCard"
class="euiPanel euiPanel--subdued euiPanel--paddingLarge euiCard emotion-euiPanel-grow-m-l-subdued-euiCard-center-disabled-NoDataCard"
>
<div
class="euiCard__main emotion-euiCard__main-vertical"
@ -317,11 +317,11 @@ exports[`NoDataCard props no access to Fleet 1`] = `
exports[`NoDataCard renders 1`] = `
<div
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="css-qvyf25-redirectAppLinksStyles"
data-test-subj="kbnRedirectAppLink"
>
<div
class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard emotion-euiPanel-grow-m-l-plain-hasShadow-isClickable-EuiCard"
class="euiPanel euiPanel--plain euiPanel--paddingLarge euiCard emotion-euiPanel-grow-m-l-plain-hasShadow-isClickable-euiCard-center-NoDataCard"
>
<div
class="euiCard__main emotion-euiCard__main-vertical"

386
src/platform/packages/shared/shared-ux/code_editor/impl/__snapshots__/code_editor.test.tsx.snap generated
View file

@ -3,394 +3,10 @@
exports[`<CodeEditor /> hint element should be tabable 1`] = `
<div
aria-label="Code Editor, activate edit mode"
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).,false"
class="css-139h7n7-keyboardHint-renderPrompt"
data-test-subj="codeEditorHint codeEditorHint--active"
id="1234"
role="button"
tabindex="0"
/>
`;
exports[`<CodeEditor /> is rendered 1`] = `
<CodeEditor
height={250}
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,
}
}
languageId="loglang"
onChange={[Function]}
value="
[Sun Mar 7 20:54:27 2004] [notice] [client xx.xx.xx.xx] This is a notice!
[Sun Mar 7 20:58:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed
[Sun Mar 7 21:16:17 2004] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome
"
>
<div
className="kibanaCodeEditor"
data-test-subj="kibanaCodeEditor"
onKeyDown={[Function]}
>
<EuiToolTip
content={
<React.Fragment>
<p>
<Memo(MemoizedFormattedMessage)
defaultMessage="Press {key} to start editing."
id="sharedUXPackages.codeEditor.startEditing"
values={
Object {
"key": <strong>
Enter
</strong>,
}
}
/>
</p>
<p>
<Memo(MemoizedFormattedMessage)
defaultMessage="Press {key} to stop editing."
id="sharedUXPackages.codeEditor.stopEditing"
values={
Object {
"key": <strong>
Esc
</strong>,
}
}
/>
</p>
</React.Fragment>
}
data-test-subj="codeEditorAccessibilityOverlay"
delay="regular"
disableScreenReaderOutput={false}
display="block"
position="top"
>
<EuiToolTipAnchor
display="block"
id="generated-id"
isVisible={false}
onBlur={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
<span
css="unknown styles"
onKeyDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
<Insertion
cache={
Object {
"insert": [Function],
"inserted": Object {
"uuw4g3-euiToolTipAnchor-block": true,
},
"key": "css",
"nonce": undefined,
"registered": Object {},
"sheet": StyleSheet {
"_alreadyInsertedOrderInsensitiveRule": true,
"_insertTag": [Function],
"before": null,
"container": <head>
<style
data-emotion="css"
data-s=""
>
.emotion-euiToolTipAnchor-block{display:block;}
</style>
<style
data-emotion="css"
data-s=""
>
.emotion-euiToolTipAnchor-block *[disabled]{pointer-events:none;}
</style>
<style
data-styled="active"
data-styled-version="5.3.11"
/>
</head>,
"ctr": 2,
"insertionPoint": undefined,
"isSpeedy": false,
"key": "css",
"nonce": undefined,
"prepend": undefined,
"tags": Array [
<style
data-emotion="css"
data-s=""
>
.emotion-euiToolTipAnchor-block{display:block;}
</style>,
<style
data-emotion="css"
data-s=""
>
.emotion-euiToolTipAnchor-block *[disabled]{pointer-events:none;}
</style>,
],
},
}
}
isStringTag={true}
serialized={
Object {
"map": undefined,
"name": "uuw4g3-euiToolTipAnchor-block",
"next": undefined,
"styles": "*[disabled]{pointer-events:none;};label:euiToolTipAnchor;;;display:block;label:block;;;",
"toString": [Function],
}
}
/>
<span
className="euiToolTipAnchor emotion-euiToolTipAnchor-block"
onKeyDown={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
>
<div
aria-label="Code Editor, activate edit mode"
css={
Array [
Object {
"map": undefined,
"name": "jym74u",
"next": undefined,
"styles": "
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
&:focus {
z-index: 6000;
}
",
"toString": [Function],
},
false,
]
}
data-test-subj="codeEditorHint codeEditorHint--active"
id="1234"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
role="button"
tabIndex={0}
/>
</span>
</span>
</EuiToolTipAnchor>
</EuiToolTip>
<Component>
<UseBug177756ReBroadcastMouseDown>
<div
style={
Object {
"display": "contents",
}
}
>
<MockedMonacoEditor
editorDidMount={[Function]}
editorWillMount={[Function]}
editorWillUnmount={[Function]}
height={250}
language="loglang"
onChange={[Function]}
options={
Object {
"bracketPairColorization.enabled": false,
"fontFamily": "Roboto Mono",
"fontSize": 12,
"lineHeight": 21,
"matchBrackets": "never",
"minimap": Object {
"enabled": false,
},
"padding": Object {},
"renderLineHighlight": "none",
"scrollBeyondLastLine": false,
"scrollbar": Object {
"alwaysConsumeMouseWheel": false,
"useShadows": false,
},
"wordBasedSuggestions": false,
"wordWrap": "on",
"wrappingIndent": "indent",
}
}
theme="codeEditorDefaultTheme"
value="
[Sun Mar 7 20:54:27 2004] [notice] [client xx.xx.xx.xx] This is a notice!
[Sun Mar 7 20:58:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed
[Sun Mar 7 21:16:17 2004] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome
"
>
<div>
<div />
<textarea
data-test-subj="monacoEditorTextarea"
editorWillUnmount={[Function]}
height={250}
language="loglang"
onChange={[Function]}
onKeyDown={[Function]}
options={
Object {
"bracketPairColorization.enabled": false,
"fontFamily": "Roboto Mono",
"fontSize": 12,
"lineHeight": 21,
"matchBrackets": "never",
"minimap": Object {
"enabled": false,
},
"padding": Object {},
"renderLineHighlight": "none",
"scrollBeyondLastLine": false,
"scrollbar": Object {
"alwaysConsumeMouseWheel": false,
"useShadows": false,
},
"wordBasedSuggestions": false,
"wordWrap": "on",
"wrappingIndent": "indent",
}
}
theme="codeEditorDefaultTheme"
value="
[Sun Mar 7 20:54:27 2004] [notice] [client xx.xx.xx.xx] This is a notice!
[Sun Mar 7 20:58:27 2004] [info] [client xx.xx.xx.xx] (104)Connection reset by peer: client stopped connection before send body completed
[Sun Mar 7 21:16:17 2004] [error] [client xx.xx.xx.xx] File does not exist: /home/httpd/twiki/view/Main/WebHome
"
/>
</div>
</MockedMonacoEditor>
</div>
</UseBug177756ReBroadcastMouseDown>
</Component>
</div>
</CodeEditor>
`;

8
src/platform/packages/shared/shared-ux/code_editor/impl/code_editor.test.tsx
View file

@ -72,14 +72,6 @@ describe('<CodeEditor />', () => {
monaco.languages.setMonarchTokensProvider('loglang', simpleLogLang);
});
test('is rendered', () => {
const component = mountWithIntl(
<CodeEditor languageId="loglang" height={250} value={logs} onChange={() => {}} />
);
expect(component).toMatchSnapshot();
});
test('editor mount setup', () => {
const suggestionProvider = {
provideCompletionItems: (model: monaco.editor.ITextModel, position: monaco.Position) => ({

206
src/platform/packages/shared/shared-ux/page/solution_nav/src/__snapshots__/solution_nav.test.tsx.snap generated
View file

@ -4,24 +4,13 @@ exports[`SolutionNav accepts EuiSideNavProps 1`] = `
<Fragment>
<EuiCollapsibleNavGroup
background="none"
className="kbnSolutionNav kbnSolutionNav--hidden"
css="unknown styles"
initialIsOpen={false}
isCollapsible={true}
paddingSize="none"
title={
<EuiTitle
css={
Object {
"map": undefined,
"name": "y6v9s0",
"next": undefined,
"styles": "
display: inline-flex;
align-items: center;
",
"toString": [Function],
}
}
css="unknown styles"
id="SolutionNav_generated-id_heading"
size="xs"
>
@ -110,21 +99,10 @@ exports[`SolutionNav accepts EuiSideNavProps 1`] = `
</EuiPanel>
</EuiCollapsibleNavGroup>
<div
className="kbnSolutionNav kbnSolutionNav--hidden"
css="unknown styles"
>
<EuiTitle
css={
Object {
"map": undefined,
"name": "y6v9s0",
"next": undefined,
"styles": "
display: inline-flex;
align-items: center;
",
"toString": [Function],
}
}
css="unknown styles"
id="SolutionNav_generated-id_heading"
size="xs"
>
@ -217,24 +195,13 @@ exports[`SolutionNav accepts canBeCollapsed prop 1`] = `
<Fragment>
<EuiCollapsibleNavGroup
background="none"
className="kbnSolutionNav kbnSolutionNav--hidden"
css="unknown styles"
initialIsOpen={false}
isCollapsible={true}
paddingSize="none"
title={
<EuiTitle
css={
Object {
"map": undefined,
"name": "y6v9s0",
"next": undefined,
"styles": "
display: inline-flex;
align-items: center;
",
"toString": [Function],
}
}
css="unknown styles"
id="SolutionNav_generated-id_heading"
size="xs"
>
@ -322,21 +289,10 @@ exports[`SolutionNav accepts canBeCollapsed prop 1`] = `
</EuiPanel>
</EuiCollapsibleNavGroup>
<div
className="kbnSolutionNav kbnSolutionNav--hidden"
css="unknown styles"
>
<EuiTitle
css={
Object {
"map": undefined,
"name": "y6v9s0",
"next": undefined,
"styles": "
display: inline-flex;
align-items: center;
",
"toString": [Function],
}
}
css="unknown styles"
id="SolutionNav_generated-id_heading"
size="xs"
>
@ -428,24 +384,13 @@ exports[`SolutionNav accepts canBeCollapsed prop 2`] = `
<Fragment>
<EuiCollapsibleNavGroup
background="none"
className="kbnSolutionNav"
css="unknown styles"
initialIsOpen={false}
isCollapsible={false}
paddingSize="none"
title={
<EuiTitle
css={
Object {
"map": undefined,
"name": "y6v9s0",
"next": undefined,
"styles": "
display: inline-flex;
align-items: center;
",
"toString": [Function],
}
}
css="unknown styles"
id="SolutionNav_generated-id_heading"
size="xs"
>
@ -533,21 +478,10 @@ exports[`SolutionNav accepts canBeCollapsed prop 2`] = `
</EuiPanel>
</EuiCollapsibleNavGroup>
<div
className="kbnSolutionNav"
css="unknown styles"
>
<EuiTitle
css={
Object {
"map": undefined,
"name": "y6v9s0",
"next": undefined,
"styles": "
display: inline-flex;
align-items: center;
",
"toString": [Function],
}
}
css="unknown styles"
id="SolutionNav_generated-id_heading"
size="xs"
>
@ -636,24 +570,13 @@ exports[`SolutionNav heading accepts more headingProps 1`] = `
<Fragment>
<EuiCollapsibleNavGroup
background="none"
className="kbnSolutionNav kbnSolutionNav--hidden"
css="unknown styles"
initialIsOpen={false}
isCollapsible={true}
paddingSize="none"
title={
<EuiTitle
css={
Object {
"map": undefined,
"name": "y6v9s0",
"next": undefined,
"styles": "
display: inline-flex;
align-items: center;
",
"toString": [Function],
}
}
css="unknown styles"
id="testID"
size="xs"
>
@ -681,21 +604,10 @@ exports[`SolutionNav heading accepts more headingProps 1`] = `
/>
</EuiCollapsibleNavGroup>
<div
className="kbnSolutionNav kbnSolutionNav--hidden"
css="unknown styles"
>
<EuiTitle
css={
Object {
"map": undefined,
"name": "y6v9s0",
"next": undefined,
"styles": "
display: inline-flex;
align-items: center;
",
"toString": [Function],
}
}
css="unknown styles"
id="testID"
size="xs"
>
@ -728,24 +640,13 @@ exports[`SolutionNav renders 1`] = `
<Fragment>
<EuiCollapsibleNavGroup
background="none"
className="kbnSolutionNav kbnSolutionNav--hidden"
css="unknown styles"
initialIsOpen={false}
isCollapsible={true}
paddingSize="none"
title={
<EuiTitle
css={
Object {
"map": undefined,
"name": "y6v9s0",
"next": undefined,
"styles": "
display: inline-flex;
align-items: center;
",
"toString": [Function],
}
}
css="unknown styles"
id="SolutionNav_generated-id_heading"
size="xs"
>
@ -833,21 +734,10 @@ exports[`SolutionNav renders 1`] = `
</EuiPanel>
</EuiCollapsibleNavGroup>
<div
className="kbnSolutionNav kbnSolutionNav--hidden"
css="unknown styles"
>
<EuiTitle
css={
Object {
"map": undefined,
"name": "y6v9s0",
"next": undefined,
"styles": "
display: inline-flex;
align-items: center;
",
"toString": [Function],
}
}
css="unknown styles"
id="SolutionNav_generated-id_heading"
size="xs"
>
@ -939,41 +829,19 @@ exports[`SolutionNav renders with icon 1`] = `
<Fragment>
<EuiCollapsibleNavGroup
background="none"
className="kbnSolutionNav kbnSolutionNav--hidden"
css="unknown styles"
initialIsOpen={false}
isCollapsible={true}
paddingSize="none"
title={
<EuiTitle
css={
Object {
"map": undefined,
"name": "y6v9s0",
"next": undefined,
"styles": "
display: inline-flex;
align-items: center;
",
"toString": [Function],
}
}
css="unknown styles"
id="SolutionNav_generated-id_heading"
size="xs"
>
<h2>
<KibanaSolutionAvatar
css={
Object {
"map": undefined,
"name": "cmwv0a",
"next": undefined,
"styles": "
margin-right: 12px;
align-self: flex-start;
",
"toString": [Function],
}
}
css="unknown styles"
iconType="logoElastic"
name="Solution"
/>
@ -1060,38 +928,16 @@ exports[`SolutionNav renders with icon 1`] = `
</EuiPanel>
</EuiCollapsibleNavGroup>
<div
className="kbnSolutionNav kbnSolutionNav--hidden"
css="unknown styles"
>
<EuiTitle
css={
Object {
"map": undefined,
"name": "y6v9s0",
"next": undefined,
"styles": "
display: inline-flex;
align-items: center;
",
"toString": [Function],
}
}
css="unknown styles"
id="SolutionNav_generated-id_heading"
size="xs"
>
<h2>
<KibanaSolutionAvatar
css={
Object {
"map": undefined,
"name": "cmwv0a",
"next": undefined,
"styles": "
margin-right: 12px;
align-self: flex-start;
",
"toString": [Function],
}
}
css="unknown styles"
iconType="logoElastic"
name="Solution"
/>

4
src/platform/packages/shared/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap generated
View file

@ -52,7 +52,7 @@ exports[`WithSolutionNav renders wrapped component 1`] = `
}
pageSideBarProps={
Object {
"className": "kbnSolutionNav__sidebar css-c34ez9",
"className": "kbnSolutionNav__sidebar css-ausb9j-WithSolutionNavStyles",
"hasEmbellish": true,
"minWidth": undefined,
"paddingSize": "none",
@ -113,7 +113,7 @@ exports[`WithSolutionNav with children 1`] = `
}
pageSideBarProps={
Object {
"className": "kbnSolutionNav__sidebar css-c34ez9",
"className": "kbnSolutionNav__sidebar css-ausb9j-WithSolutionNavStyles",
"hasEmbellish": true,
"minWidth": undefined,
"paddingSize": "none",

40
src/platform/plugins/private/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.tsx.snap generated
View file

@ -2,20 +2,16 @@
exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
<div
className="eui-scrollBar"
css="unknown styles"
>
<div
css={[Function]}
css="unknown styles"
>
<EuiFlexGroup
wrap={true}
>
<EuiFlexItem
css={
Object {
"minWidth": "250px",
}
}
css="unknown styles"
data-test-subj="inputControlItem"
key="mock-list-control"
>
@ -90,20 +86,16 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
exports[`Clear btns enabled when there are values 1`] = `
<div
className="eui-scrollBar"
css="unknown styles"
>
<div
css={[Function]}
css="unknown styles"
>
<EuiFlexGroup
wrap={true}
>
<EuiFlexItem
css={
Object {
"minWidth": "250px",
}
}
css="unknown styles"
data-test-subj="inputControlItem"
key="mock-list-control"
>
@ -178,20 +170,16 @@ exports[`Clear btns enabled when there are values 1`] = `
exports[`Renders list control 1`] = `
<div
className="eui-scrollBar"
css="unknown styles"
>
<div
css={[Function]}
css="unknown styles"
>
<EuiFlexGroup
wrap={true}
>
<EuiFlexItem
css={
Object {
"minWidth": "250px",
}
}
css="unknown styles"
data-test-subj="inputControlItem"
key="mock-list-control"
>
@ -266,20 +254,16 @@ exports[`Renders list control 1`] = `
exports[`Renders range control 1`] = `
<div
className="eui-scrollBar"
css="unknown styles"
>
<div
css={[Function]}
css="unknown styles"
>
<EuiFlexGroup
wrap={true}
>
<EuiFlexItem
css={
Object {
"minWidth": "250px",
}
}
css="unknown styles"
data-test-subj="inputControlItem"
key="mock-range-control"
>

103
src/platform/plugins/private/input_control_vis/public/components/vis/input_control_vis.test.tsx
View file

@ -12,6 +12,7 @@ import sinon from 'sinon';
import { shallow } from 'enzyme';
import { mountWithIntl } from '@kbn/test-jest-helpers';
import { findTestSubject } from '@elastic/eui/lib/test';
import { EuiThemeProvider } from '@elastic/eui';
import { InputControlVis } from './input_control_vis';
import { ListControl } from '../../control/list_control_factory';
@ -52,6 +53,12 @@ const updateFiltersOnChange = false;
const refreshControlMock = () => Promise.resolve();
const Wrapper = ({ children }: { children: React.ReactNode }) => (
<EuiThemeProvider>
<div>{children}</div>
</EuiThemeProvider>
);
let stageFilter: sinon.SinonSpy;
let submitFilters: sinon.SinonSpy;
let resetControls: sinon.SinonSpy;
@ -150,21 +157,23 @@ test('Clear btns enabled when there are values', () => {
test('clearControls', () => {
const component = mountWithIntl(
<InputControlVis
stageFilter={stageFilter}
submitFilters={submitFilters}
resetControls={resetControls}
clearControls={clearControls}
controls={[mockListControl]}
updateFiltersOnChange={updateFiltersOnChange}
hasChanges={() => {
return true;
}}
hasValues={() => {
return true;
}}
refreshControl={refreshControlMock}
/>
<Wrapper>
<InputControlVis
stageFilter={stageFilter}
submitFilters={submitFilters}
resetControls={resetControls}
clearControls={clearControls}
controls={[mockListControl]}
updateFiltersOnChange={updateFiltersOnChange}
hasChanges={() => {
return true;
}}
hasValues={() => {
return true;
}}
refreshControl={refreshControlMock}
/>
</Wrapper>
);
findTestSubject(component, 'inputControlClearBtn').simulate('click');
sinon.assert.calledOnce(clearControls);
@ -175,21 +184,23 @@ test('clearControls', () => {
test('submitFilters', () => {
const component = mountWithIntl(
<InputControlVis
stageFilter={stageFilter}
submitFilters={submitFilters}
resetControls={resetControls}
clearControls={clearControls}
controls={[mockListControl]}
updateFiltersOnChange={updateFiltersOnChange}
hasChanges={() => {
return true;
}}
hasValues={() => {
return true;
}}
refreshControl={refreshControlMock}
/>
<Wrapper>
<InputControlVis
stageFilter={stageFilter}
submitFilters={submitFilters}
resetControls={resetControls}
clearControls={clearControls}
controls={[mockListControl]}
updateFiltersOnChange={updateFiltersOnChange}
hasChanges={() => {
return true;
}}
hasValues={() => {
return true;
}}
refreshControl={refreshControlMock}
/>
</Wrapper>
);
findTestSubject(component, 'inputControlSubmitBtn').simulate('click');
sinon.assert.calledOnce(submitFilters);
@ -200,21 +211,23 @@ test('submitFilters', () => {
test('resetControls', () => {
const component = mountWithIntl(
<InputControlVis
stageFilter={stageFilter}
submitFilters={submitFilters}
resetControls={resetControls}
clearControls={clearControls}
controls={[mockListControl]}
updateFiltersOnChange={updateFiltersOnChange}
hasChanges={() => {
return true;
}}
hasValues={() => {
return true;
}}
refreshControl={refreshControlMock}
/>
<Wrapper>
<InputControlVis
stageFilter={stageFilter}
submitFilters={submitFilters}
resetControls={resetControls}
clearControls={clearControls}
controls={[mockListControl]}
updateFiltersOnChange={updateFiltersOnChange}
hasChanges={() => {
return true;
}}
hasValues={() => {
return true;
}}
refreshControl={refreshControlMock}
/>
</Wrapper>
);
findTestSubject(component, 'inputControlCancelBtn').simulate('click');
sinon.assert.calledOnce(resetControls);

131
src/platform/plugins/private/vis_type_markdown/public/__snapshots__/markdown_options.test.tsx.snap generated
View file

@ -1,88 +1,63 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MarkdownOptions should match snapshot 1`] = `
<EuiPanel
css={
Object {
"map": undefined,
"name": "18sw4aj",
"next": undefined,
"styles": "
flex-grow: 1 !important;
.visEditor--markdown__textarea {
flex-grow: 1;
}
.mkdEditor,
.euiFormControlLayout__childrenWrapper,
.euiFormControlLayout--euiTextArea,
.visEditor--markdown__textarea {
height: 100%;
}
",
"toString": [Function],
}
}
paddingSize="s"
<EuiFlexGroup
className="mkdEditor"
direction="column"
gutterSize="m"
>
<EuiFlexGroup
className="mkdEditor"
direction="column"
gutterSize="m"
<EuiFlexItem
grow={false}
>
<EuiFlexItem
grow={false}
<EuiFlexGroup
alignItems="baseline"
gutterSize="none"
justifyContent="spaceBetween"
>
<EuiFlexGroup
alignItems="baseline"
gutterSize="none"
justifyContent="spaceBetween"
<EuiFlexItem
grow={false}
>
<EuiFlexItem
grow={false}
<EuiTitle
size="xs"
>
<EuiTitle
size="xs"
>
<h2>
<label
htmlFor="markdownVisInput"
>
Markdown
</label>
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem
grow={false}
>
<EuiText
size="xs"
>
<EuiLink
href="https://docs.github.com/en/get-started/writing-on-github/"
target="_blank"
<h2>
<label
htmlFor="markdownVisInput"
>
<MemoizedFormattedMessage
defaultMessage="Help"
id="visTypeMarkdown.params.helpLinkLabel"
/>
</EuiLink>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiTextArea
className="visEditor--markdown__textarea"
data-test-subj="markdownTextarea"
fullWidth={true}
id="markdownVisInput"
onChange={[Function]}
resize="none"
value="hello from 2020 🥳"
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
Markdown
</label>
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem
grow={false}
>
<EuiText
size="xs"
>
<EuiLink
href="https://docs.github.com/en/get-started/writing-on-github/"
target="_blank"
>
<MemoizedFormattedMessage
defaultMessage="Help"
id="visTypeMarkdown.params.helpLinkLabel"
/>
</EuiLink>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiTextArea
className="visEditor--markdown__textarea"
data-test-subj="markdownTextarea"
fullWidth={true}
id="markdownVisInput"
onChange={[Function]}
resize="none"
value="hello from 2020 🥳"
/>
</EuiFlexItem>
</EuiFlexGroup>
`;

17
src/platform/plugins/private/vis_types/table/public/components/table_visualization.test.tsx
View file

@ -22,13 +22,16 @@ jest.mock('../utils', () => ({
}));
import React from 'react';
import { mount, shallow } from 'enzyme';
import { shallow } from 'enzyme';
import { render } from '@testing-library/react';
import { IInterpreterRenderHandlers } from '@kbn/expressions-plugin/common';
import { coreMock } from '@kbn/core/public/mocks';
import { matchers } from '@emotion/jest';
import { FormattedColumns, TableVisConfig, TableVisData } from '../types';
import TableVisualizationComponent from './table_visualization';
import { useUiState } from '../utils';
import { TableVisSplit } from './table_vis_split';
expect.extend(matchers);
describe('TableVisualizationComponent', () => {
const coreStartMock = coreMock.createStart();
@ -82,7 +85,7 @@ describe('TableVisualizationComponent', () => {
});
it('should render split table and set minWidth for column split', () => {
const comp = mount(
const { container } = render(
<TableVisualizationComponent
core={coreStartMock}
handlers={handlers}
@ -127,12 +130,12 @@ describe('TableVisualizationComponent', () => {
renderComplete={renderComplete}
/>
);
const splits = comp.find(TableVisSplit).find('.tbvChart__split');
const splits = container.querySelectorAll('.tbvChart__split');
expect(splits.length).toBe(2);
splits.forEach((split) => {
expect((split.prop('css') as { minWidth: string }).minWidth).toEqual(
`calc(${77 + 22 + 25}px + 2 * 8px)`
);
expect(split).toHaveStyleRule('min-width', `calc(${77 + 22 + 25}px + 2 * 8px)`);
});
});
});

86
src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/__snapshots__/with_auto_scale.test.tsx.snap generated
View file

@ -3,28 +3,80 @@
exports[`AutoScale withAutoScale renders 1`] = `
<Component>
<div
css={
Object {
"map": undefined,
"name": "1l2vzaf",
"next": undefined,
"styles": "display:flex;justify-content:center;align-items:center;max-width:100%;max-height:100%;overflow:hidden;line-height:1.5;",
"toString": [Function],
}
}
css="unknown styles"
>
<div
style={
<Insertion
cache={
Object {
"transform": "scale(0)",
"insert": [Function],
"inserted": Object {
"4vd3s2-autoScaleWrapperStyle": true,
},
"key": "css",
"nonce": undefined,
"registered": Object {},
"sheet": StyleSheet {
"_alreadyInsertedOrderInsensitiveRule": true,
"_insertTag": [Function],
"before": null,
"container": <head>
<style
data-emotion="css"
data-s=""
>
.css-4vd3s2-autoScaleWrapperStyle{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;max-height:100%;overflow:hidden;line-height:1.5;}
</style>
<style
data-styled="active"
data-styled-version="5.3.11"
/>
</head>,
"ctr": 1,
"insertionPoint": undefined,
"isSpeedy": false,
"key": "css",
"nonce": undefined,
"prepend": undefined,
"tags": Array [
<style
data-emotion="css"
data-s=""
>
.css-4vd3s2-autoScaleWrapperStyle{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;max-height:100%;overflow:hidden;line-height:1.5;}
</style>,
],
},
}
}
isStringTag={true}
serialized={
Object {
"map": undefined,
"name": "4vd3s2-autoScaleWrapperStyle",
"next": undefined,
"styles": "display:flex;justify-content:center;align-items:center;max-width:100%;max-height:100%;overflow:hidden;line-height:1.5;;label:autoScaleWrapperStyle;",
"toString": [Function],
}
}
/>
<div
className="css-4vd3s2-autoScaleWrapperStyle"
>
<Component>
<h1>
Hoi!
</h1>
</Component>
<div
style={
Object {
"transform": "scale(0)",
}
}
>
<Component>
<h1>
Hoi!
</h1>
</Component>
</div>
</div>
</div>
</Component>

3
src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_component.test.tsx
View file

@ -9,6 +9,7 @@
import React from 'react';
import { shallow, mount } from 'enzyme';
import { EuiProvider } from '@elastic/eui';
import { Datatable } from '@kbn/expressions-plugin/common';
import MetricVisComponent, { MetricVisComponentProps } from './metric_component';
import { LabelPosition } from '../../common/constants';
@ -139,7 +140,7 @@ describe('MetricVisComponent', function () {
},
});
mount(component);
mount(<EuiProvider>{component}</EuiProvider>);
expect(renderComplete).toHaveBeenCalledTimes(1);
});

3
src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.test.tsx
View file

@ -49,7 +49,8 @@ describe('MetricVisValue', () => {
labelConfig={labelConfig}
/>
);
expect(component.find('button').exists()).toBe(true);
expect(component.find('[data-test-subj="metric_value_button"]').exists()).toBe(true);
});
it('should not be wrapped in button without having a click listener', () => {

1
src/platform/plugins/shared/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx
View file

@ -79,6 +79,7 @@ export const MetricVisValue = (props: MetricVisValueProps) => {
if (onFilter) {
return (
<button
data-test-subj="metric_value_button"
css={{ display: 'block' }}
onClick={() => onFilter()}
title={i18n.translate('expressionLegacyMetricVis.filterTitle', {

198
src/platform/plugins/shared/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap generated
View file

@ -2,40 +2,11 @@
exports[`PartitionVisComponent should render correct structure for donut 1`] = `
<div
css={
Object {
"map": undefined,
"name": "13h2mjc",
"next": undefined,
"styles": "
min-height: 0;
min-width: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
;
inset: 0;
position: absolute;
padding: 8px;
",
"toString": [Function],
}
}
css="unknown styles"
data-test-subj="partitionVisChart"
>
<div
css={
Object {
"map": undefined,
"name": "19k4zle",
"next": undefined,
"styles": "display:flex;flex:1 1 auto;min-height:0;min-width:0;width:100%;height:100%;",
"toString": [Function],
}
}
css="unknown styles"
>
<ContextProvider
value={
@ -915,40 +886,11 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = `
exports[`PartitionVisComponent should render correct structure for mosaic 1`] = `
<div
css={
Object {
"map": undefined,
"name": "13h2mjc",
"next": undefined,
"styles": "
min-height: 0;
min-width: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
;
inset: 0;
position: absolute;
padding: 8px;
",
"toString": [Function],
}
}
css="unknown styles"
data-test-subj="partitionVisChart"
>
<div
css={
Object {
"map": undefined,
"name": "19k4zle",
"next": undefined,
"styles": "display:flex;flex:1 1 auto;min-height:0;min-width:0;width:100%;height:100%;",
"toString": [Function],
}
}
css="unknown styles"
>
<ContextProvider
value={
@ -1829,40 +1771,11 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] =
exports[`PartitionVisComponent should render correct structure for multi-metric pie 1`] = `
<div
css={
Object {
"map": undefined,
"name": "13h2mjc",
"next": undefined,
"styles": "
min-height: 0;
min-width: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
;
inset: 0;
position: absolute;
padding: 8px;
",
"toString": [Function],
}
}
css="unknown styles"
data-test-subj="partitionVisChart"
>
<div
css={
Object {
"map": undefined,
"name": "19k4zle",
"next": undefined,
"styles": "display:flex;flex:1 1 auto;min-height:0;min-width:0;width:100%;height:100%;",
"toString": [Function],
}
}
css="unknown styles"
>
<ContextProvider
value={
@ -2863,40 +2776,11 @@ exports[`PartitionVisComponent should render correct structure for multi-metric
exports[`PartitionVisComponent should render correct structure for pie 1`] = `
<div
css={
Object {
"map": undefined,
"name": "13h2mjc",
"next": undefined,
"styles": "
min-height: 0;
min-width: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
;
inset: 0;
position: absolute;
padding: 8px;
",
"toString": [Function],
}
}
css="unknown styles"
data-test-subj="partitionVisChart"
>
<div
css={
Object {
"map": undefined,
"name": "19k4zle",
"next": undefined,
"styles": "display:flex;flex:1 1 auto;min-height:0;min-width:0;width:100%;height:100%;",
"toString": [Function],
}
}
css="unknown styles"
>
<ContextProvider
value={
@ -3776,40 +3660,11 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = `
exports[`PartitionVisComponent should render correct structure for treemap 1`] = `
<div
css={
Object {
"map": undefined,
"name": "13h2mjc",
"next": undefined,
"styles": "
min-height: 0;
min-width: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
;
inset: 0;
position: absolute;
padding: 8px;
",
"toString": [Function],
}
}
css="unknown styles"
data-test-subj="partitionVisChart"
>
<div
css={
Object {
"map": undefined,
"name": "19k4zle",
"next": undefined,
"styles": "display:flex;flex:1 1 auto;min-height:0;min-width:0;width:100%;height:100%;",
"toString": [Function],
}
}
css="unknown styles"
>
<ContextProvider
value={
@ -4687,40 +4542,11 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] =
exports[`PartitionVisComponent should render correct structure for waffle 1`] = `
<div
css={
Object {
"map": undefined,
"name": "13h2mjc",
"next": undefined,
"styles": "
min-height: 0;
min-width: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
;
inset: 0;
position: absolute;
padding: 8px;
",
"toString": [Function],
}
}
css="unknown styles"
data-test-subj="partitionVisChart"
>
<div
css={
Object {
"map": undefined,
"name": "19k4zle",
"next": undefined,
"styles": "display:flex;flex:1 1 auto;min-height:0;min-width:0;width:100%;height:100%;",
"toString": [Function],
}
}
css="unknown styles"
>
<ContextProvider
value={

38
src/platform/plugins/shared/chart_expressions/expression_tagcloud/public/components/tagcloud_component.test.tsx
View file

@ -8,6 +8,7 @@
*/
import React from 'react';
import { EuiProvider } from '@elastic/eui';
import { Wordcloud, Settings, WordcloudSpec, Chart } from '@elastic/charts';
import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
import type { Datatable } from '@kbn/expressions-plugin/public';
@ -98,6 +99,10 @@ describe('TagCloudChart', function () {
let wrapperPropsWithIndexes: TagCloudChartProps;
let wrapperPropsWithColumnNames: TagCloudChartProps;
const WrappingComponent = ({ children }: { children: React.ReactNode }) => (
<EuiProvider>{children}</EuiProvider>
);
beforeAll(() => {
wrapperPropsWithIndexes = {
visData,
@ -143,12 +148,16 @@ describe('TagCloudChart', function () {
});
it('renders the Wordcloud component with', async () => {
const component = mount(<TagCloudChart {...wrapperPropsWithIndexes} />);
const component = mount(<TagCloudChart {...wrapperPropsWithIndexes} />, {
wrappingComponent: WrappingComponent,
});
expect(component.find(Wordcloud).length).toBe(1);
});
it('renders the label correctly', async () => {
const component = mount(<TagCloudChart {...wrapperPropsWithIndexes} />);
const component = mount(<TagCloudChart {...wrapperPropsWithIndexes} />, {
wrappingComponent: WrappingComponent,
});
const label = findTestSubject(component, 'tagCloudLabel');
expect(label.text()).toEqual('geo.dest: Descending - Count');
});
@ -156,18 +165,24 @@ describe('TagCloudChart', function () {
it('not renders the label if showLabel setting is off', async () => {
const newVisParams = { ...visParams, showLabel: false };
const newProps = { ...wrapperPropsWithIndexes, visParams: newVisParams };
const component = mount(<TagCloudChart {...newProps} />);
const component = mount(<TagCloudChart {...newProps} />, {
wrappingComponent: WrappingComponent,
});
const label = findTestSubject(component, 'tagCloudLabel');
expect(label.length).toBe(0);
});
it('receives the data in the correct format for bucket and metric accessors of type number', () => {
const component = mount(<TagCloudChart {...wrapperPropsWithIndexes} />);
const component = mount(<TagCloudChart {...wrapperPropsWithIndexes} />, {
wrappingComponent: WrappingComponent,
});
expect(component.find(Wordcloud).prop('data')).toStrictEqual(formattedData);
});
it('receives the data in the correct format for bucket and metric accessors of type DatatableColumn', () => {
const component = mount(<TagCloudChart {...wrapperPropsWithColumnNames} />);
const component = mount(<TagCloudChart {...wrapperPropsWithColumnNames} />, {
wrappingComponent: WrappingComponent,
});
expect(component.find(Wordcloud).prop('data')).toStrictEqual(formattedData);
});
@ -177,13 +192,17 @@ describe('TagCloudChart', function () {
orientation: Orientation.RIGHT_ANGLED,
};
const newProps = { ...wrapperPropsWithIndexes, visParams: newVisParams };
const component = mount(<TagCloudChart {...newProps} />);
const component = mount(<TagCloudChart {...newProps} />, {
wrappingComponent: WrappingComponent,
});
expect(component.find(Wordcloud).prop('endAngle')).toBe(90);
expect(component.find(Wordcloud).prop('angleCount')).toBe(2);
});
it('calls filter callback', () => {
const component = mount(<TagCloudChart {...wrapperPropsWithIndexes} />);
const component = mount(<TagCloudChart {...wrapperPropsWithIndexes} />, {
wrappingComponent: WrappingComponent,
});
component.find(Settings).prop('onElementClick')!([
[
{
@ -205,7 +224,10 @@ describe('TagCloudChart', function () {
<TagCloudChart
{...wrapperPropsWithIndexes}
overrides={{ settings: { rotation: -90 }, chart: { title: 'Hello' } }}
/>
/>,
{
wrappingComponent: WrappingComponent,
}
);
expect(component.find(Chart).props().title).toBe('Hello');
expect(component.find(Settings).props().rotation).toBe(-90);

200
src/platform/plugins/shared/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap generated
View file

@ -277,15 +277,7 @@ exports[`XYChart component it renders area 1`] = `
<Fragment>
<GlobalXYChartStyles />
<div
css={
Object {
"map": undefined,
"name": "2lyuno",
"next": undefined,
"styles": "width:100%;height:100%;overflow-x:hidden;position:relative;",
"toString": [Function],
}
}
css="unknown styles"
>
<ContextProvider
value={
@ -1109,15 +1101,7 @@ exports[`XYChart component it renders area 1`] = `
locale="en"
noResults={
<EmptyPlaceholder
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
css="unknown styles"
icon={[Function]}
renderComplete={[Function]}
/>
@ -1833,15 +1817,7 @@ exports[`XYChart component it renders bar 1`] = `
<Fragment>
<GlobalXYChartStyles />
<div
css={
Object {
"map": undefined,
"name": "2lyuno",
"next": undefined,
"styles": "width:100%;height:100%;overflow-x:hidden;position:relative;",
"toString": [Function],
}
}
css="unknown styles"
>
<ContextProvider
value={
@ -2665,15 +2641,7 @@ exports[`XYChart component it renders bar 1`] = `
locale="en"
noResults={
<EmptyPlaceholder
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
css="unknown styles"
icon={[Function]}
renderComplete={[Function]}
/>
@ -3389,15 +3357,7 @@ exports[`XYChart component it renders horizontal bar 1`] = `
<Fragment>
<GlobalXYChartStyles />
<div
css={
Object {
"map": undefined,
"name": "2lyuno",
"next": undefined,
"styles": "width:100%;height:100%;overflow-x:hidden;position:relative;",
"toString": [Function],
}
}
css="unknown styles"
>
<ContextProvider
value={
@ -4221,15 +4181,7 @@ exports[`XYChart component it renders horizontal bar 1`] = `
locale="en"
noResults={
<EmptyPlaceholder
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
css="unknown styles"
icon={[Function]}
renderComplete={[Function]}
/>
@ -4945,15 +4897,7 @@ exports[`XYChart component it renders line 1`] = `
<Fragment>
<GlobalXYChartStyles />
<div
css={
Object {
"map": undefined,
"name": "2lyuno",
"next": undefined,
"styles": "width:100%;height:100%;overflow-x:hidden;position:relative;",
"toString": [Function],
}
}
css="unknown styles"
>
<ContextProvider
value={
@ -5777,15 +5721,7 @@ exports[`XYChart component it renders line 1`] = `
locale="en"
noResults={
<EmptyPlaceholder
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
css="unknown styles"
icon={[Function]}
renderComplete={[Function]}
/>
@ -6501,15 +6437,7 @@ exports[`XYChart component it renders stacked area 1`] = `
<Fragment>
<GlobalXYChartStyles />
<div
css={
Object {
"map": undefined,
"name": "2lyuno",
"next": undefined,
"styles": "width:100%;height:100%;overflow-x:hidden;position:relative;",
"toString": [Function],
}
}
css="unknown styles"
>
<ContextProvider
value={
@ -7333,15 +7261,7 @@ exports[`XYChart component it renders stacked area 1`] = `
locale="en"
noResults={
<EmptyPlaceholder
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
css="unknown styles"
icon={[Function]}
renderComplete={[Function]}
/>
@ -8057,15 +7977,7 @@ exports[`XYChart component it renders stacked bar 1`] = `
<Fragment>
<GlobalXYChartStyles />
<div
css={
Object {
"map": undefined,
"name": "2lyuno",
"next": undefined,
"styles": "width:100%;height:100%;overflow-x:hidden;position:relative;",
"toString": [Function],
}
}
css="unknown styles"
>
<ContextProvider
value={
@ -8889,15 +8801,7 @@ exports[`XYChart component it renders stacked bar 1`] = `
locale="en"
noResults={
<EmptyPlaceholder
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
css="unknown styles"
icon={[Function]}
renderComplete={[Function]}
/>
@ -9613,15 +9517,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
<Fragment>
<GlobalXYChartStyles />
<div
css={
Object {
"map": undefined,
"name": "2lyuno",
"next": undefined,
"styles": "width:100%;height:100%;overflow-x:hidden;position:relative;",
"toString": [Function],
}
}
css="unknown styles"
>
<ContextProvider
value={
@ -10445,15 +10341,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
locale="en"
noResults={
<EmptyPlaceholder
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
css="unknown styles"
icon={[Function]}
renderComplete={[Function]}
/>
@ -11169,15 +11057,7 @@ exports[`XYChart component split chart should render split chart if both, splitR
<Fragment>
<GlobalXYChartStyles />
<div
css={
Object {
"map": undefined,
"name": "2lyuno",
"next": undefined,
"styles": "width:100%;height:100%;overflow-x:hidden;position:relative;",
"toString": [Function],
}
}
css="unknown styles"
>
<ContextProvider
value={
@ -12031,15 +11911,7 @@ exports[`XYChart component split chart should render split chart if both, splitR
locale="en"
noResults={
<EmptyPlaceholder
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
css="unknown styles"
icon={[Function]}
renderComplete={[Function]}
/>
@ -12969,15 +12841,7 @@ exports[`XYChart component split chart should render split chart if splitColumnA
<Fragment>
<GlobalXYChartStyles />
<div
css={
Object {
"map": undefined,
"name": "2lyuno",
"next": undefined,
"styles": "width:100%;height:100%;overflow-x:hidden;position:relative;",
"toString": [Function],
}
}
css="unknown styles"
>
<ContextProvider
value={
@ -13825,15 +13689,7 @@ exports[`XYChart component split chart should render split chart if splitColumnA
locale="en"
noResults={
<EmptyPlaceholder
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
css="unknown styles"
icon={[Function]}
renderComplete={[Function]}
/>
@ -14756,15 +14612,7 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
<Fragment>
<GlobalXYChartStyles />
<div
css={
Object {
"map": undefined,
"name": "2lyuno",
"next": undefined,
"styles": "width:100%;height:100%;overflow-x:hidden;position:relative;",
"toString": [Function],
}
}
css="unknown styles"
>
<ContextProvider
value={
@ -15612,15 +15460,7 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
locale="en"
noResults={
<EmptyPlaceholder
css={
Object {
"map": undefined,
"name": "16rwds4",
"next": undefined,
"styles": "height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;",
"toString": [Function],
}
}
css="unknown styles"
icon={[Function]}
renderComplete={[Function]}
/>

4
src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/endzone_tooltip_header.test.tsx.snap generated
View file

@ -4,7 +4,7 @@ exports[`EndzoneTooltipHeader should render endzone tooltip with value, if it is
<Fragment>
<EuiFlexGroup
alignItems="center"
css={[Function]}
css="unknown styles"
gutterSize="xs"
responsive={false}
>
@ -32,7 +32,7 @@ exports[`EndzoneTooltipHeader should render endzone tooltip without value, if it
<Fragment>
<EuiFlexGroup
alignItems="center"
css={[Function]}
css="unknown styles"
gutterSize="xs"
responsive={false}
>

24
src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/tooltip.test.tsx.snap generated
View file

@ -2,7 +2,7 @@
exports[`Tooltip should render plain tooltip 1`] = `
<div
css={[Function]}
css="unknown styles"
>
<table>
<tbody>
@ -38,10 +38,10 @@ exports[`Tooltip should render plain tooltip 1`] = `
exports[`Tooltip should render tooltip with partial buckets 1`] = `
<div
css={[Function]}
css="unknown styles"
>
<div
css={[Function]}
css="unknown styles"
>
<EndzoneTooltipHeader />
</div>
@ -79,10 +79,10 @@ exports[`Tooltip should render tooltip with partial buckets 1`] = `
exports[`Tooltip should render tooltip with partial buckets 2`] = `
<div
css={[Function]}
css="unknown styles"
>
<div
css={[Function]}
css="unknown styles"
>
<EndzoneTooltipHeader />
</div>
@ -120,7 +120,7 @@ exports[`Tooltip should render tooltip with partial buckets 2`] = `
exports[`Tooltip should render tooltip with xDomain 1`] = `
<div
css={[Function]}
css="unknown styles"
>
<table>
<tbody>
@ -156,7 +156,7 @@ exports[`Tooltip should render tooltip with xDomain 1`] = `
exports[`Tooltip should render tooltip without split-column-values 1`] = `
<div
css={[Function]}
css="unknown styles"
>
<table>
<tbody>
@ -187,7 +187,7 @@ exports[`Tooltip should render tooltip without split-column-values 1`] = `
exports[`Tooltip should render tooltip without split-row-values 1`] = `
<div
css={[Function]}
css="unknown styles"
>
<table>
<tbody>
@ -218,7 +218,7 @@ exports[`Tooltip should render tooltip without split-row-values 1`] = `
exports[`Tooltip should render tooltip without splitAccessors-values 1`] = `
<div
css={[Function]}
css="unknown styles"
>
<table>
<tbody>
@ -249,7 +249,7 @@ exports[`Tooltip should render tooltip without splitAccessors-values 1`] = `
exports[`Tooltip should render tooltip without x-value 1`] = `
<div
css={[Function]}
css="unknown styles"
>
<table>
<tbody>
@ -280,7 +280,7 @@ exports[`Tooltip should render tooltip without x-value 1`] = `
exports[`Tooltip should render tooltip without x-value 2`] = `
<div
css={[Function]}
css="unknown styles"
>
<table>
<tbody>
@ -311,7 +311,7 @@ exports[`Tooltip should render tooltip without x-value 2`] = `
exports[`Tooltip should render tooltip without y-value 1`] = `
<div
css={[Function]}
css="unknown styles"
>
<table>
<tbody>

16
src/platform/plugins/shared/chart_expressions/expression_xy/public/components/tooltip/__snapshots__/tooltip_row.test.tsx.snap generated
View file

@ -3,27 +3,17 @@
exports[`TooltipRow should render label and value if both are specified 1`] = `
<tr>
<td
css={[Function]}
css="unknown styles"
>
<div
css={[Function]}
css="unknown styles"
>
tooltip
</div>
</td>
<td>
<div
css={
Object {
"map": undefined,
"name": "us16fb",
"next": undefined,
"styles": "
overflow-wrap: break-word;
",
"toString": [Function],
}
}
css="unknown styles"
>
0
</div>

6
src/platform/plugins/shared/chart_expressions/expression_xy/public/components/xy_chart.test.tsx
View file

@ -966,7 +966,7 @@ describe('XYChart component', () => {
test('it renders regular bar empty placeholder for no results', () => {
const { data, args } = sampleArgs();
const component = shallow(
const component = mountWithIntl(
<XYChart
{...defaultProps}
args={{
@ -989,7 +989,7 @@ describe('XYChart component', () => {
return layer;
}
});
const component = shallow(
const component = mountWithIntl(
<XYChart
{...defaultProps}
args={{
@ -1585,7 +1585,7 @@ describe('XYChart component', () => {
test('it renders stacked bar empty placeholder for no results', () => {
const { args } = sampleArgs();
const component = shallow(
const component = mountWithIntl(
<XYChart
{...defaultProps}
args={{

13
src/platform/plugins/shared/dashboard/public/dashboard_renderer/grid/dashboard_grid.test.tsx
View file

@ -8,6 +8,7 @@
*/
import React from 'react';
import { EuiThemeProvider } from '@elastic/eui';
import { useBatchedPublishingSubjects as mockUseBatchedPublishingSubjects } from '@kbn/presentation-publishing';
import { DashboardPanelMap } from '../../../common';
@ -85,11 +86,13 @@ const createAndMountDashboardGrid = async (panels: DashboardPanelMap = PANELS) =
},
});
const component = render(
<DashboardContext.Provider value={api}>
<DashboardInternalContext.Provider value={internalApi}>
<DashboardGrid />
</DashboardInternalContext.Provider>
</DashboardContext.Provider>
<EuiThemeProvider>
<DashboardContext.Provider value={api}>
<DashboardInternalContext.Provider value={internalApi}>
<DashboardGrid />
</DashboardInternalContext.Provider>
</DashboardContext.Provider>
</EuiThemeProvider>
);
// wait for first render

4
src/platform/plugins/shared/data/public/search/session/session_indicator/connected_search_session_indicator/connected_search_session_indicator.test.tsx
View file

@ -81,7 +81,7 @@ test("shouldn't show indicator in case no active search session", async () => {
expect(container).toMatchInlineSnapshot(`
<div>
<div
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="css-qvyf25-redirectAppLinksStyles"
data-test-subj="kbnRedirectAppLink"
/>
</div>
@ -111,7 +111,7 @@ test("shouldn't show indicator in case app hasn't opt-in", async () => {
expect(container).toMatchInlineSnapshot(`
<div>
<div
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="css-qvyf25-redirectAppLinksStyles"
data-test-subj="kbnRedirectAppLink"
/>
</div>

7
src/platform/plugins/shared/data/public/search/session/sessions_mgmt/lib/get_columns.test.tsx
View file

@ -184,10 +184,9 @@ describe('Search Sessions Management table column factory', () => {
...mockSession,
...partialSession,
};
const node = mount(
nameColumn.render!(session.name, session) as ReactElement
).getDOMNode();
return !!node.querySelector('[data-test-subj="versionIncompatibleWarningTestSubj"]');
const node = mount(nameColumn.render!(session.name, session) as ReactElement);
return node.find('[data-test-subj="versionIncompatibleWarningTestSubj"]').exists();
};
});

4
src/platform/plugins/shared/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap generated
View file

@ -207,7 +207,7 @@ Array [
class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
/>,
<div
class="euiBasicTable insDataTableFormat__table eui-xScroll css-1f59z3t"
class="euiBasicTable insDataTableFormat__table eui-xScroll css-bhtp2o-DataTableFormatClass"
data-test-subj="inspectorTable"
>
<table
@ -488,7 +488,7 @@ Array [
class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
/>,
<div
class="euiBasicTable insDataTableFormat__table eui-xScroll css-1f59z3t"
class="euiBasicTable insDataTableFormat__table eui-xScroll css-bhtp2o-DataTableFormatClass"
data-test-subj="inspectorTable"
>
<table

14
src/platform/plugins/shared/data_view_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap generated
View file

@ -5,12 +5,7 @@ exports[`FieldFormatEditor should render normally 1`] = `
<Suspense
fallback={
<div
css={
Object {
"marginTop": 8,
"minHeight": 430,
}
}
css="unknown styles"
>
<EuiDelayRender
delay={500}
@ -38,12 +33,7 @@ exports[`FieldFormatEditor should render nothing if there is no editor for the f
<Suspense
fallback={
<div
css={
Object {
"marginTop": 8,
"minHeight": 430,
}
}
css="unknown styles"
>
<EuiDelayRender
delay={500}

26
src/platform/plugins/shared/data_view_field_editor/public/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.tsx.snap generated
View file

@ -40,11 +40,7 @@ exports[`StaticLookupFormatEditor should render multiple lookup entries and unkn
},
]
}
css={
Object {
"maxWidth": "400px",
}
}
css="unknown styles"
items={
Array [
Object {
@ -58,13 +54,6 @@ exports[`StaticLookupFormatEditor should render multiple lookup entries and unkn
},
]
}
noItemsMessage={
<EuiI18n
default="No items found"
token="euiBasicTable.noItemsMessage"
/>
}
tableLayout="fixed"
/>
<EuiSpacer
size="m"
@ -144,11 +133,7 @@ exports[`StaticLookupFormatEditor should render normally 1`] = `
},
]
}
css={
Object {
"maxWidth": "400px",
}
}
css="unknown styles"
items={
Array [
Object {
@ -156,13 +141,6 @@ exports[`StaticLookupFormatEditor should render normally 1`] = `
},
]
}
noItemsMessage={
<EuiI18n
default="No items found"
token="euiBasicTable.noItemsMessage"
/>
}
tableLayout="fixed"
/>
<EuiSpacer
size="m"

2
src/platform/plugins/shared/data_view_management/public/components/empty_index_list_prompt/__snapshots__/empty_index_list_prompt.test.tsx.snap generated
View file

@ -2,8 +2,8 @@
exports[`EmptyIndexListPrompt should render normally 1`] = `
<EuiPanel
className="inpEmptyState"
color="subdued"
css="unknown styles"
data-test-subj="indexPatternEmptyState"
hasShadow={false}
paddingSize="xl"

14
src/platform/plugins/shared/data_view_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap generated
View file

@ -5,12 +5,7 @@ exports[`FieldFormatEditor should render normally 1`] = `
<Suspense
fallback={
<div
css={
Object {
"marginTop": 8,
"minHeight": 430,
}
}
css="unknown styles"
>
<EuiDelayRender
delay={500}
@ -38,12 +33,7 @@ exports[`FieldFormatEditor should render nothing if there is no editor for the f
<Suspense
fallback={
<div
css={
Object {
"marginTop": 8,
"minHeight": 430,
}
}
css="unknown styles"
>
<EuiDelayRender
delay={500}

7
src/platform/plugins/shared/discover/public/application/main/components/loading_spinner/loading_spinner.test.tsx
View file

@ -8,6 +8,7 @@
*/
import React from 'react';
import { EuiProvider } from '@elastic/eui';
import { mountWithIntl } from '@kbn/test-jest-helpers';
import type { ReactWrapper } from 'enzyme';
import { LoadingSpinner } from './loading_spinner';
@ -17,7 +18,11 @@ describe('loading spinner', function () {
let component: ReactWrapper;
it('LoadingSpinner renders a Searching text and a spinner', () => {
component = mountWithIntl(<LoadingSpinner />);
component = mountWithIntl(
<EuiProvider>
<LoadingSpinner />
</EuiProvider>
);
expect(findTestSubject(component, 'loadingSpinnerText').text()).toBe('Searching');
expect(findTestSubject(component, 'loadingSpinner').length).toBe(1);
});

25
src/platform/plugins/shared/discover/public/application/main/components/session_view/main_app.test.tsx
View file

@ -8,6 +8,7 @@
*/
import React from 'react';
import { EuiProvider } from '@elastic/eui';
import { act } from 'react-dom/test-utils';
import { mountWithIntl } from '@kbn/test-jest-helpers';
import type { DataViewListItem } from '@kbn/data-views-plugin/public';
@ -48,17 +49,19 @@ describe('DiscoverMainApp', () => {
await act(async () => {
const component = mountWithIntl(
<Router history={history}>
<KibanaContextProvider services={discoverServiceMock}>
<CurrentTabProvider currentTabId={stateContainer.getCurrentTab().id}>
<DiscoverMainProvider value={stateContainer}>
<RuntimeStateProvider currentDataView={dataViewMock} adHocDataViews={[]}>
<DiscoverMainApp {...props} />
</RuntimeStateProvider>
</DiscoverMainProvider>
</CurrentTabProvider>
</KibanaContextProvider>
</Router>
<EuiProvider>
<Router history={history}>
<KibanaContextProvider services={discoverServiceMock}>
<CurrentTabProvider currentTabId={stateContainer.getCurrentTab().id}>
<DiscoverMainProvider value={stateContainer}>
<RuntimeStateProvider currentDataView={dataViewMock} adHocDataViews={[]}>
<DiscoverMainApp {...props} />
</RuntimeStateProvider>
</DiscoverMainProvider>
</CurrentTabProvider>
</KibanaContextProvider>
</Router>
</EuiProvider>
);
// wait for lazy modules

18
src/platform/plugins/shared/discover/public/application/main/components/sidebar/discover_sidebar_responsive.test.tsx
View file

@ -10,7 +10,7 @@
import { BehaviorSubject } from 'rxjs';
import type { ReactWrapper } from 'enzyme';
import { findTestSubject } from '@elastic/eui/lib/test';
import { EuiProgress } from '@elastic/eui';
import { EuiProgress, EuiProvider } from '@elastic/eui';
import { getDataTableRecords, realHits } from '../../../../__fixtures__/real_hits';
import { act } from 'react-dom/test-utils';
import { mountWithIntl } from '@kbn/test-jest-helpers';
@ -208,13 +208,15 @@ async function mountComponent(
await act(async () => {
comp = mountWithIntl(
<KibanaContextProvider services={mockedServices}>
<DiscoverMainProvider value={stateContainer}>
<RuntimeStateProvider currentDataView={props.selectedDataView!} adHocDataViews={[]}>
<DiscoverSidebarResponsive {...props} />{' '}
</RuntimeStateProvider>
</DiscoverMainProvider>
</KibanaContextProvider>
<EuiProvider>
<KibanaContextProvider services={mockedServices}>
<DiscoverMainProvider value={stateContainer}>
<RuntimeStateProvider currentDataView={props.selectedDataView!} adHocDataViews={[]}>
<DiscoverSidebarResponsive {...props} />{' '}
</RuntimeStateProvider>
</DiscoverMainProvider>
</KibanaContextProvider>
</EuiProvider>
);
// wait for lazy modules
await new Promise((resolve) => setTimeout(resolve, 0));

2
src/platform/plugins/shared/discover/public/application/main/discover_main_route.test.tsx
View file

@ -37,7 +37,7 @@ jest.mock('../../customizations', () => {
jest.mock('./components/session_view/main_app', () => {
return {
DiscoverMainApp: jest.fn().mockReturnValue(<></>),
DiscoverMainApp: jest.fn(() => <></>),
};
});

4
src/platform/plugins/shared/expressions/public/react_expression_renderer/react_expression_renderer.test.tsx
View file

@ -336,9 +336,7 @@ describe('ExpressionRenderer', () => {
});
const instance = mount(<ReactExpressionRenderer className="myClassName" expression="" />);
// Counte is 2 because the class is applied to ReactExpressionRenderer + internal component
expect(instance.find('.myClassName').length).toBe(2);
instance.unmount();
expect(instance.find('div.myClassName').length).toBe(1);
});
});

4
src/platform/plugins/shared/home/public/application/components/home.test.tsx
View file

@ -42,8 +42,8 @@ jest.mock('../kibana_services', () => ({
jest.mock('@kbn/kibana-react-plugin/public', () => ({
overviewPageActions: jest.fn().mockReturnValue([]),
OverviewPageFooter: jest.fn().mockReturnValue(<></>),
KibanaPageTemplate: jest.fn().mockReturnValue(<></>),
OverviewPageFooter: jest.fn(() => <></>),
KibanaPageTemplate: jest.fn(() => <></>),
}));
describe('home', () => {

16
src/platform/plugins/shared/home/public/application/components/manage_data/__snapshots__/manage_data.test.tsx.snap generated
View file

@ -30,7 +30,7 @@ exports[`ManageData hide dev tools and stack management links if unavailable 1`]
<EuiSpacer />
<EuiFlexGroup>
<EuiFlexItem
css={[Function]}
css="unknown styles"
key="security"
>
<Synopsis
@ -43,7 +43,7 @@ exports[`ManageData hide dev tools and stack management links if unavailable 1`]
/>
</EuiFlexItem>
<EuiFlexItem
css={[Function]}
css="unknown styles"
key="monitoring"
>
<Synopsis
@ -56,7 +56,7 @@ exports[`ManageData hide dev tools and stack management links if unavailable 1`]
/>
</EuiFlexItem>
<EuiFlexItem
css={[Function]}
css="unknown styles"
key="snapshot_restore"
>
<Synopsis
@ -69,7 +69,7 @@ exports[`ManageData hide dev tools and stack management links if unavailable 1`]
/>
</EuiFlexItem>
<EuiFlexItem
css={[Function]}
css="unknown styles"
key="index_lifecycle_management"
>
<Synopsis
@ -185,7 +185,7 @@ exports[`ManageData render 1`] = `
<EuiSpacer />
<EuiFlexGroup>
<EuiFlexItem
css={[Function]}
css="unknown styles"
key="security"
>
<Synopsis
@ -198,7 +198,7 @@ exports[`ManageData render 1`] = `
/>
</EuiFlexItem>
<EuiFlexItem
css={[Function]}
css="unknown styles"
key="monitoring"
>
<Synopsis
@ -211,7 +211,7 @@ exports[`ManageData render 1`] = `
/>
</EuiFlexItem>
<EuiFlexItem
css={[Function]}
css="unknown styles"
key="snapshot_restore"
>
<Synopsis
@ -224,7 +224,7 @@ exports[`ManageData render 1`] = `
/>
</EuiFlexItem>
<EuiFlexItem
css={[Function]}
css="unknown styles"
key="index_lifecycle_management"
>
<Synopsis

37
src/platform/plugins/shared/home/public/application/components/solutions_section/__snapshots__/solution_panel.test.tsx.snap generated
View file

@ -1,25 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SolutionPanel renders the solution panel for the given solution 1`] = `
<EuiFlexItem
css={[Function]}
data-test-subj="homeSolutionPanel homeSolutionPanel_kibana"
>
<EuiCard
className="homeSolutionPanel homeSolutionPanel--kibana"
description="Explore and analyze your data"
href="kibana_landing_page"
icon={
<KibanaPageTemplateSolutionNavAvatar
iconType="logoKibana"
name="Kibana"
size="xl"
/>
}
image="/plugins/kibanaReact/assets/solutions_kibana.svg"
onClick={[Function]}
title="Kibana"
titleElement="h2"
/>
</EuiFlexItem>
<EuiCard
className="homeSolutionPanel homeSolutionPanel--kibana"
description="Explore and analyze your data"
href="kibana_landing_page"
icon={
<KibanaPageTemplateSolutionNavAvatar
iconType="logoKibana"
name="Kibana"
size="xl"
/>
}
image="/plugins/kibanaReact/assets/solutions_kibana.svg"
onClick={[Function]}
title="Kibana"
titleElement="h2"
/>
`;

2
src/platform/plugins/shared/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap generated
View file

@ -48,7 +48,7 @@ Array [
</div>
</div>,
<div
class="euiFlyoutBody emotion-EuiFlyoutBody"
class="euiFlyoutBody emotion-euiFlyoutBody-InspectorPanel"
>
<div
class="euiFlyoutBody__overflow emotion-euiFlyoutBody__overflow-noBanner"

30
src/platform/plugins/shared/inspector/public/views/requests/components/details/clusters_view/clusters_table/__snapshots__/cluster_view.test.tsx.snap generated
View file

@ -2,11 +2,7 @@
exports[`render partial should display callout when request timed out 1`] = `
<EuiText
css={
Object {
"width": "100%",
}
}
css="unknown styles"
data-test-subj="inspectorRequestClustersDetails"
size="xs"
>
@ -32,11 +28,7 @@ exports[`render partial should display callout when request timed out 1`] = `
exports[`render partial should show view shard failure button when there are shard failures 1`] = `
<EuiText
css={
Object {
"width": "100%",
}
}
css="unknown styles"
data-test-subj="inspectorRequestClustersDetails"
size="xs"
>
@ -74,11 +66,7 @@ exports[`render partial should show view shard failure button when there are sha
exports[`render should display success 1`] = `
<EuiText
css={
Object {
"width": "100%",
}
}
css="unknown styles"
data-test-subj="inspectorRequestClustersDetails"
size="xs"
>
@ -98,11 +86,7 @@ exports[`render should display success 1`] = `
exports[`render skipped or failed should display callout when cluster is unavailable 1`] = `
<EuiText
css={
Object {
"width": "100%",
}
}
css="unknown styles"
data-test-subj="inspectorRequestClustersDetails"
size="xs"
>
@ -124,11 +108,7 @@ exports[`render skipped or failed should display callout when cluster is unavail
exports[`render skipped or failed should display callout with view failed shards button when all shards fail 1`] = `
<EuiText
css={
Object {
"width": "100%",
}
}
css="unknown styles"
data-test-subj="inspectorRequestClustersDetails"
size="xs"
>

10
src/platform/plugins/shared/kibana_react/public/markdown/__snapshots__/markdown.test.tsx.snap generated
View file

@ -2,7 +2,7 @@
exports[`props markdown 1`] = `
<div
className="kbnMarkdown__body"
css="unknown styles"
dangerouslySetInnerHTML={
Object {
"__html": "<p>I am <em>some</em> <a href=\\"https://en.wikipedia.org/wiki/Content\\">content</a> with <code>markdown</code></p>
@ -14,7 +14,7 @@ exports[`props markdown 1`] = `
exports[`props openLinksInNewTab 1`] = `
<div
className="kbnMarkdown__body"
css="unknown styles"
dangerouslySetInnerHTML={
Object {
"__html": "<p>I am <em>some</em> <a href=\\"https://en.wikipedia.org/wiki/Content\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">content</a> with <code>markdown</code></p>
@ -26,7 +26,7 @@ exports[`props openLinksInNewTab 1`] = `
exports[`props whiteListedRules 1`] = `
<div
className="kbnMarkdown__body"
css="unknown styles"
dangerouslySetInnerHTML={
Object {
"__html": "<p>I am <em>some</em> [content](https://en.wikipedia.org/wiki/Content) with <code>markdown</code></p>
@ -38,7 +38,7 @@ exports[`props whiteListedRules 1`] = `
exports[`render 1`] = `
<div
className="kbnMarkdown__body"
css="unknown styles"
dangerouslySetInnerHTML={
Object {
"__html": "",
@ -49,7 +49,7 @@ exports[`render 1`] = `
exports[`should never render html tags 1`] = `
<div
className="kbnMarkdown__body"
css="unknown styles"
dangerouslySetInnerHTML={
Object {
"__html": "<p>&lt;div&gt;I may be dangerous if rendered as html&lt;/div&gt;</p>

45
src/platform/plugins/shared/kibana_react/public/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap generated
View file

@ -27,14 +27,7 @@ exports[`ElasticAgentCard props button 1`] = `
image={
<EuiImage
alt=""
css={
Object {
"background": "aliceblue",
"height": 240,
"objectFit": "cover",
"width": "max(100%, 360px)",
}
}
css="unknown styles"
size="fullWidth"
url="/plugins/kibanaReact/assets/elastic_agent_card.svg"
/>
@ -78,14 +71,7 @@ exports[`ElasticAgentCard props category 1`] = `
image={
<EuiImage
alt=""
css={
Object {
"background": "aliceblue",
"height": 240,
"objectFit": "cover",
"width": "max(100%, 360px)",
}
}
css="unknown styles"
size="fullWidth"
url="/plugins/kibanaReact/assets/elastic_agent_card.svg"
/>
@ -129,14 +115,7 @@ exports[`ElasticAgentCard props href 1`] = `
image={
<EuiImage
alt=""
css={
Object {
"background": "aliceblue",
"height": 240,
"objectFit": "cover",
"width": "max(100%, 360px)",
}
}
css="unknown styles"
size="fullWidth"
url="/plugins/kibanaReact/assets/elastic_agent_card.svg"
/>
@ -185,14 +164,7 @@ exports[`ElasticAgentCard props recommended 1`] = `
image={
<EuiImage
alt=""
css={
Object {
"background": "aliceblue",
"height": 240,
"objectFit": "cover",
"width": "max(100%, 360px)",
}
}
css="unknown styles"
size="fullWidth"
url="/plugins/kibanaReact/assets/elastic_agent_card.svg"
/>
@ -236,14 +208,7 @@ exports[`ElasticAgentCard renders 1`] = `
image={
<EuiImage
alt=""
css={
Object {
"background": "aliceblue",
"height": 240,
"objectFit": "cover",
"width": "max(100%, 360px)",
}
}
css="unknown styles"
size="fullWidth"
url="/plugins/kibanaReact/assets/elastic_agent_card.svg"
/>

18
src/platform/plugins/shared/kibana_react/public/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap generated
View file

@ -3,23 +3,7 @@
exports[`KibanaPageTemplateSolutionNavAvatar renders 1`] = `
<EuiAvatar
color="plain"
css={
Array [
Object {
"map": undefined,
"name": "ym1nj7",
"next": undefined,
"styles": "
box-shadow:
0 .7px 1.4px rgba(0,0,0,0.07),
0 1.9px 4px rgba(0,0,0,0.05),
0 4.5px 10px rgba(0,0,0,0.05);
",
"toString": [Function],
},
false,
]
}
css="unknown styles"
iconType="logoElastic"
name="Solution"
/>

2
src/platform/plugins/shared/navigation/public/top_nav_menu/__snapshots__/top_nav_menu.test.tsx.snap generated
View file

@ -2,7 +2,7 @@
exports[`TopNavMenu when setMenuMountPoint is provided should render badges and search bar 1`] = `
<div
class="euiBadgeGroup css-1dtftja"
class="euiBadgeGroup emotion-euiBadgeGroup-xs-TopNavMenuBadges"
data-test-subj="kbn-top-nav-menu-badge-group"
>
<span

2
src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu.test.tsx
View file

@ -19,7 +19,7 @@ import type { TopNavMenuBadgeProps } from './top_nav_menu_badges';
import { unifiedSearchMock } from '../mocks';
describe('TopNavMenu', () => {
const WRAPPER_SELECTOR = '[data-test-subj="kbn-top-nav-menu-wrapper"]';
const WRAPPER_SELECTOR = 'TopNavMenuItems[data-test-subj="kbn-top-nav-menu-wrapper"]';
const BADGES_GROUP_SELECTOR = '[data-test-subj="kbn-top-nav-menu-badge-group"]';
const TOP_NAV_ITEM_SELECTOR = 'TopNavMenuItem';
const SEARCH_BAR_SELECTOR = 'AggregateQuerySearchBar';

25
src/platform/plugins/shared/saved_objects/public/save_modal/saved_object_save_modal.test.tsx
View file

@ -13,6 +13,7 @@ import { SavedObjectSaveModal } from './saved_object_save_modal';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { I18nProvider } from '@kbn/i18n-react';
import { EuiProvider } from '@elastic/eui';
jest.mock('@elastic/eui', () => {
const actualEui = jest.requireActual('@elastic/eui');
@ -126,17 +127,19 @@ describe('SavedObjectSaveModal', () => {
const onSave = jest.fn();
render(
<I18nProvider>
<SavedObjectSaveModal
onSave={onSave}
onClose={() => void 0}
title={'Saved Object title'}
objectType="visualization"
showDescription={true}
showCopyOnSave={true}
mustCopyOnSaveMessage="You must save a copy of the object."
/>
</I18nProvider>
<EuiProvider>
<I18nProvider>
<SavedObjectSaveModal
onSave={onSave}
onClose={() => void 0}
title={'Saved Object title'}
objectType="visualization"
showDescription={true}
showCopyOnSave={true}
mustCopyOnSaveMessage="You must save a copy of the object."
/>
</I18nProvider>
</EuiProvider>
);
expect(onSave).not.toHaveBeenCalled();

72
src/platform/plugins/shared/unified_histogram/public/chart/hooks/use_time_range.test.tsx
View file

@ -87,17 +87,7 @@ describe('useTimeRange', () => {
);
expect(result.current.timeRangeDisplay).toMatchInlineSnapshot(`
<EuiText
css={
Object {
"map": undefined,
"name": "1vgo99t",
"next": undefined,
"styles": "
padding: 0 8px 0 8px;
",
"toString": [Function],
}
}
css="unknown styles"
size="xs"
textAlign="center"
>
@ -122,17 +112,7 @@ describe('useTimeRange', () => {
expect(result.current.timeRangeDisplay).toMatchInlineSnapshot(`
<EuiFlexGroup
alignItems="baseline"
css={
Object {
"map": undefined,
"name": "1ly21re",
"next": undefined,
"styles": "
flex-grow: 0;
",
"toString": [Function],
}
}
css="unknown styles"
gutterSize="none"
justifyContent="center"
responsive={false}
@ -141,17 +121,7 @@ describe('useTimeRange', () => {
grow={false}
>
<EuiText
css={
Object {
"map": undefined,
"name": "1vgo99t",
"next": undefined,
"styles": "
padding: 0 8px 0 8px;
",
"toString": [Function],
}
}
css="unknown styles"
size="xs"
textAlign="center"
>
@ -188,17 +158,7 @@ describe('useTimeRange', () => {
expect(result.current.timeRangeDisplay).toMatchInlineSnapshot(`
<EuiFlexGroup
alignItems="baseline"
css={
Object {
"map": undefined,
"name": "1ly21re",
"next": undefined,
"styles": "
flex-grow: 0;
",
"toString": [Function],
}
}
css="unknown styles"
gutterSize="none"
justifyContent="center"
responsive={false}
@ -207,17 +167,7 @@ describe('useTimeRange', () => {
grow={false}
>
<EuiText
css={
Object {
"map": undefined,
"name": "1vgo99t",
"next": undefined,
"styles": "
padding: 0 8px 0 8px;
",
"toString": [Function],
}
}
css="unknown styles"
size="xs"
textAlign="center"
>
@ -251,17 +201,7 @@ describe('useTimeRange', () => {
);
expect(result.current.timeRangeDisplay).toMatchInlineSnapshot(`
<EuiText
css={
Object {
"map": undefined,
"name": "1vgo99t",
"next": undefined,
"styles": "
padding: 0 8px 0 8px;
",
"toString": [Function],
}
}
css="unknown styles"
size="xs"
textAlign="center"
>

4
x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_context_menu.test.tsx
View file

@ -11,10 +11,10 @@ import { ChatContextMenu } from './chat_context_menu';
import { useConfirmModal } from '../hooks';
jest.mock('../hooks/use_confirm_modal', () => ({
useConfirmModal: jest.fn().mockReturnValue({
useConfirmModal: jest.fn(() => ({
element: <div data-test-subj="confirmModal" />,
confirm: jest.fn(() => Promise.resolve(true)),
}),
})),
}));
describe('ChatContextMenu', () => {

4
x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/conversation_list.test.tsx
View file

@ -20,10 +20,10 @@ jest.mock('../hooks/use_conversations_by_date', () => ({
}));
jest.mock('../hooks/use_confirm_modal', () => ({
useConfirmModal: jest.fn().mockReturnValue({
useConfirmModal: jest.fn(() => ({
element: <div data-test-subj="confirmModal" />,
confirm: jest.fn(() => Promise.resolve(true)),
}),
})),
}));
jest.mock('../hooks/use_conversation_context_menu', () => ({

4
x-pack/platform/packages/shared/kbn-event-stacktrace/src/components/stacktrace/cause_stacktrace.test.tsx
View file

@ -43,9 +43,7 @@ describe('CauseStacktrace', () => {
stackframes: [{ filename: 'testFilename', line: { number: 1 } }],
};
expect(
shallow(<CauseStacktrace {...props} />).find('Styled(EuiAccordionClass)')
).toHaveLength(1);
expect(shallow(<CauseStacktrace {...props} />).find('Accordion')).toHaveLength(1);
});
});
});

172
x-pack/platform/plugins/private/canvas/public/components/export_app/__snapshots__/export_app.test.tsx.snap generated
View file

@ -47,18 +47,86 @@ exports[`<ExportApp /> renders as expected 1`] = `
</RoutingLink>
</div>
<div
className="canvasExport__stageContent"
css="unknown styles"
data-shared-items-count={3}
>
<WorkpadPage
isSelected={true}
registerLayout={[Function]}
unregisterLayout={[Function]}
<Insertion
cache={
Object {
"insert": [Function],
"inserted": Object {
"17hzfsv-ExportApp": true,
},
"key": "css",
"nonce": undefined,
"registered": Object {},
"sheet": StyleSheet {
"_alreadyInsertedOrderInsensitiveRule": true,
"_insertTag": [Function],
"before": null,
"container": <head>
<style
data-emotion="css"
data-s=""
>
.css-721pd1-floatTopRight{position:absolute;top:-8px;right:-8px;}
</style>
<style
data-emotion="css"
data-s=""
>
.css-17hzfsv-ExportApp{}
</style>
<style
data-styled="active"
data-styled-version="5.3.11"
/>
</head>,
"ctr": 1,
"insertionPoint": undefined,
"isSpeedy": false,
"key": "css",
"nonce": undefined,
"prepend": undefined,
"tags": Array [
<style
data-emotion="css"
data-s=""
>
.css-17hzfsv-ExportApp{}
</style>,
],
},
}
}
isStringTag={true}
serialized={
Object {
"map": undefined,
"name": "17hzfsv-ExportApp",
"next": undefined,
"styles": ";label:ExportApp;",
"toString": [Function],
}
}
/>
<div
className="canvasExport__stageContent css-17hzfsv-ExportApp"
data-shared-items-count={3}
>
<div>
Page
</div>
</WorkpadPage>
<WorkpadPage
isSelected={true}
registerLayout={[Function]}
unregisterLayout={[Function]}
>
<div>
Page
</div>
</WorkpadPage>
</div>
</div>
</div>
</div>
@ -112,18 +180,86 @@ exports[`<ExportApp /> renders as expected 2`] = `
</RoutingLink>
</div>
<div
className="canvasExport__stageContent"
css="unknown styles"
data-shared-items-count={4}
>
<WorkpadPage
isSelected={true}
registerLayout={[Function]}
unregisterLayout={[Function]}
<Insertion
cache={
Object {
"insert": [Function],
"inserted": Object {
"17hzfsv-ExportApp": true,
},
"key": "css",
"nonce": undefined,
"registered": Object {},
"sheet": StyleSheet {
"_alreadyInsertedOrderInsensitiveRule": true,
"_insertTag": [Function],
"before": null,
"container": <head>
<style
data-emotion="css"
data-s=""
>
.css-721pd1-floatTopRight{position:absolute;top:-8px;right:-8px;}
</style>
<style
data-emotion="css"
data-s=""
>
.css-17hzfsv-ExportApp{}
</style>
<style
data-styled="active"
data-styled-version="5.3.11"
/>
</head>,
"ctr": 1,
"insertionPoint": undefined,
"isSpeedy": false,
"key": "css",
"nonce": undefined,
"prepend": undefined,
"tags": Array [
<style
data-emotion="css"
data-s=""
>
.css-17hzfsv-ExportApp{}
</style>,
],
},
}
}
isStringTag={true}
serialized={
Object {
"map": undefined,
"name": "17hzfsv-ExportApp",
"next": undefined,
"styles": ";label:ExportApp;",
"toString": [Function],
}
}
/>
<div
className="canvasExport__stageContent css-17hzfsv-ExportApp"
data-shared-items-count={4}
>
<div>
Page
</div>
</WorkpadPage>
<WorkpadPage
isSelected={true}
registerLayout={[Function]}
unregisterLayout={[Function]}
>
<div>
Page
</div>
</WorkpadPage>
</div>
</div>
</div>
</div>

30
x-pack/platform/plugins/private/canvas/shareable_runtime/api/__snapshots__/shareable.test.tsx.snap generated
View file

@ -36,8 +36,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with default propertie
class="root"
>
<div
class="container"
css="css-159kt7d"
class="container css-13pzju3"
style="overflow: hidden;"
>
<div
@ -93,8 +92,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with default propertie
class="root"
>
<div
class="container"
css="css-159kt7d"
class="container css-13pzju3"
style="overflow: hidden;"
>
<div
@ -163,8 +161,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with height specified
class="root"
>
<div
class="container"
css="css-159kt7d"
class="container css-13pzju3"
style="overflow: hidden;"
>
<div
@ -220,8 +217,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with height specified
class="root"
>
<div
class="container"
css="css-159kt7d"
class="container css-13pzju3"
style="overflow: hidden;"
>
<div
@ -290,8 +286,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with page specified 2`
class="root"
>
<div
class="container"
css="css-159kt7d"
class="container css-13pzju3"
style="overflow: hidden;"
>
<div
@ -347,8 +342,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with page specified 2`
class="root"
>
<div
class="container"
css="css-159kt7d"
class="container css-13pzju3"
style="overflow: hidden;"
>
<div
@ -418,8 +412,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with width and height
class="root"
>
<div
class="container"
css="css-159kt7d"
class="container css-13pzju3"
style="overflow: hidden;"
>
<div
@ -475,8 +468,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with width and height
class="root"
>
<div
class="container"
css="css-159kt7d"
class="container css-13pzju3"
style="overflow: hidden;"
>
<div
@ -545,8 +537,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with width specified 2
class="root"
>
<div
class="container"
css="css-159kt7d"
class="container css-13pzju3"
style="overflow: hidden;"
>
<div
@ -602,8 +593,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with width specified 2
class="root"
>
<div
class="container"
css="css-159kt7d"
class="container css-13pzju3"
style="overflow: hidden;"
>
<div

2
x-pack/platform/plugins/private/canvas/shareable_runtime/components/__snapshots__/app.test.tsx.snap generated
View file

File diff suppressed because one or more lines are too long

22
x-pack/platform/plugins/private/graph/public/components/field_manager/field_manager.test.tsx
View file

@ -6,7 +6,13 @@
*/
import React, { ReactElement, MouseEvent } from 'react';
import { EuiColorPicker, EuiSelectable, EuiContextMenu, EuiButton } from '@elastic/eui';
import {
EuiColorPicker,
EuiSelectable,
EuiContextMenu,
EuiButton,
EuiProvider,
} from '@elastic/eui';
import { FieldPicker } from './field_picker';
import { FieldEditor } from './field_editor';
import { GraphStore, loadFields } from '../../state_management';
@ -72,9 +78,11 @@ describe('field_manager', () => {
instance = shallow(
// https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
<Provider store={store}>
<FieldManager pickerOpen={true} setPickerOpen={() => {}} store={store} />
</Provider>
<EuiProvider>
<Provider store={store}>
<FieldManager pickerOpen={true} setPickerOpen={() => {}} store={store} />
</Provider>
</EuiProvider>
);
getInstance = () => instance.find(FieldManager).dive().dive().dive();
@ -215,7 +223,11 @@ describe('field_manager', () => {
const fieldEditor = getInstance().find(FieldEditor).at(1).dive();
const getDisplayForm = () =>
shallow(fieldEditor.find(EuiContextMenu).prop('panels')![1].content as ReactElement);
shallow(
<EuiProvider>
{fieldEditor.find(EuiContextMenu).prop('panels')![1].content as ReactElement}
</EuiProvider>
);
act(() => {
getDisplayForm().find(EuiColorPicker).prop('onChange')!('#aaa', {

292
x-pack/platform/plugins/private/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap generated
View file

@ -2,7 +2,7 @@
exports[`graph_visualization should render to svg elements 1`] = `
<svg
className="gphGraph"
css="unknown styles"
height="100%"
id="graphSvg"
pointerEvents="all"
@ -11,271 +11,73 @@ exports[`graph_visualization should render to svg elements 1`] = `
>
<g>
<g>
<g
css={
<EmotionCssPropInternal
__EMOTION_TYPE_PLEASE_DO_NOT_USE__="line"
className="gphEdge gphEdge--clickable"
onClick={[Function]}
style={
Object {
"map": undefined,
"name": "qqu03v",
"next": undefined,
"styles": "&:hover{.gphEdge{stroke-opacity:0.95;cursor:pointer;}}",
"toString": [Function],
"strokeWidth": 15,
}
}
key="A..1-B..2"
>
<line
className="gphEdge"
strokeLinecap="round"
style={
Object {
"strokeWidth": 2,
}
}
x1={5}
x2={7}
y1={5}
y2={9}
/>
<line
className="gphEdge gphEdge--clickable"
onClick={[Function]}
style={
Object {
"strokeWidth": 15,
}
}
x1={5}
x2={7}
y1={5}
y2={9}
/>
</g>
<g
css={
x1={5}
x2={7}
y1={5}
y2={9}
/>
<EmotionCssPropInternal
__EMOTION_TYPE_PLEASE_DO_NOT_USE__="line"
className="gphEdge gphEdge--clickable"
onClick={[Function]}
style={
Object {
"map": undefined,
"name": "qqu03v",
"next": undefined,
"styles": "&:hover{.gphEdge{stroke-opacity:0.95;cursor:pointer;}}",
"toString": [Function],
"strokeWidth": 15,
}
}
key="B..2-C..3"
>
<line
className="gphEdge"
strokeLinecap="round"
style={
Object {
"strokeWidth": 2.2,
}
}
x1={7}
x2={12}
y1={9}
y2={2}
/>
<line
className="gphEdge gphEdge--clickable"
onClick={[Function]}
style={
Object {
"strokeWidth": 15,
}
}
x1={7}
x2={12}
y1={9}
y2={2}
/>
</g>
x1={7}
x2={12}
y1={9}
y2={2}
/>
</g>
<g
className="gphNode"
key="A..1"
onClick={[Function]}
onMouseDown={[Function]}
>
<g>
<circle
css={
Array [
Object {
"map": undefined,
"name": "8r5wwo",
"next": undefined,
"styles": "
fill: black;
",
"toString": [Function],
},
Object {
"map": undefined,
"name": "1tbq19o",
"next": undefined,
"styles": "
stroke-width: 4px;
stroke: #BFDBFF;
paint-order: stroke;
",
"toString": [Function],
},
]
}
css="unknown styles"
cx={5}
cy={5}
r={10}
/>
<IconRenderer
color="black"
icon={
Object {
"id": "a",
"label": "",
"package": "eui",
"prevName": "",
}
}
x={-2.5}
y={-3.5}
r="5"
transform="translate(10,10)"
/>
<text
className="gphNode__label"
css="unknown styles"
textAnchor="middle"
transform="translate(0,22)"
transform="translate(10,12)"
x={5}
y={5}
>
1
</text>
<g>
<circle
css={[Function]}
cx={5}
cy={5}
r="5"
transform="translate(10,10)"
/>
<text
css={
Array [
[Function],
Object {
"map": undefined,
"name": "u1rg7h",
"next": undefined,
"styles": "
font-size: calc(8px - 2px);
fill: #FFFFFF;
",
"toString": [Function],
},
]
}
textAnchor="middle"
transform="translate(10,12)"
x={5}
y={5}
>
1
</text>
</g>
</g>
<g
className="gphNode"
key="B..2"
onClick={[Function]}
onMouseDown={[Function]}
<EmotionCssPropInternal
__EMOTION_TYPE_PLEASE_DO_NOT_USE__="text"
className="gphNode__label"
textAnchor="middle"
transform="translate(0,22)"
x={7}
y={9}
>
<circle
css={
Array [
Object {
"map": undefined,
"name": "1cbm3l8",
"next": undefined,
"styles": "
fill: red;
",
"toString": [Function],
},
false,
]
}
cx={7}
cy={9}
r={10}
/>
<IconRenderer
color="red"
icon={
Object {
"id": "b",
"label": "",
"package": "eui",
"prevName": "",
}
}
x={-0.5}
y={0.5}
/>
<text
className="gphNode__label"
textAnchor="middle"
transform="translate(0,22)"
x={7}
y={9}
>
2
</text>
</g>
<g
className="gphNode"
key="C..3"
onClick={[Function]}
onMouseDown={[Function]}
2
</EmotionCssPropInternal>
<EmotionCssPropInternal
__EMOTION_TYPE_PLEASE_DO_NOT_USE__="text"
className="gphNode__label"
textAnchor="middle"
transform="translate(0,22)"
x={12}
y={2}
>
<circle
css={
Array [
Object {
"map": undefined,
"name": "1yit9pb",
"next": undefined,
"styles": "
fill: yellow;
",
"toString": [Function],
},
false,
]
}
cx={12}
cy={2}
r={10}
/>
<IconRenderer
color="yellow"
icon={
Object {
"id": "c",
"label": "",
"package": "eui",
"prevName": "",
}
}
x={4.5}
y={-6.5}
/>
<text
className="gphNode__label"
textAnchor="middle"
transform="translate(0,22)"
x={12}
y={2}
>
3
</text>
</g>
3
</EmotionCssPropInternal>
</g>
</svg>
`;

2
x-pack/platform/plugins/private/graph/public/components/graph_visualization/graph_visualization.test.tsx
View file

@ -135,7 +135,7 @@ describe('graph_visualization', () => {
)
).toMatchInlineSnapshot(`
<svg
className="gphGraph"
css="unknown styles"
height="100%"
id="graphSvg"
pointerEvents="all"

8
x-pack/platform/plugins/private/graph/public/components/venn_diagram/venn_diagram.test.tsx
View file

@ -23,13 +23,13 @@ describe('venn_diagram', () => {
>
<g>
<circle
className="gphVennDiagram__left"
css="unknown styles"
cx={5.284377114585398}
cy={4.370193722368317}
r={3.0901936161855166}
/>
<circle
className="gphVennDiagram__right"
css="unknown styles"
cx={10.91639766870507}
cy={4.370193722368317}
r={4.370193722368317}
@ -52,13 +52,13 @@ describe('venn_diagram', () => {
>
<g>
<circle
className="gphVennDiagram__left"
css="unknown styles"
cx={167.10667697398674}
cy={138.1976597885342}
r={97.720502380584}
/>
<circle
className="gphVennDiagram__right"
css="unknown styles"
cx={345.20680477219986}
cy={138.1976597885342}
r={138.1976597885342}

16
x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap generated
View file

@ -108,7 +108,7 @@ exports[`extend index management ilm summary extension should render a phase def
class="euiFlexGroup emotion-euiFlexGroup-responsive-wrap-l-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-grow-1"
class="euiFlexItem emotion-euiFlexItem-grow-1-IndexLifecycleSummary"
>
<div
class="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain-hasBorder"
@ -231,7 +231,7 @@ exports[`extend index management ilm summary extension should render a phase def
</div>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-grow-3"
class="euiFlexItem emotion-euiFlexItem-grow-3-IndexLifecycleSummary"
>
<div
class="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain-hasBorder"
@ -278,7 +278,7 @@ exports[`extend index management ilm summary extension should render a step info
class="euiFlexGroup emotion-euiFlexGroup-responsive-wrap-l-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-grow-1"
class="euiFlexItem emotion-euiFlexItem-grow-1-IndexLifecycleSummary"
>
<div
class="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain-hasBorder"
@ -401,7 +401,7 @@ exports[`extend index management ilm summary extension should render a step info
</div>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-grow-3"
class="euiFlexItem emotion-euiFlexItem-grow-3-IndexLifecycleSummary"
>
<div
class="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain-hasBorder"
@ -444,7 +444,7 @@ exports[`extend index management ilm summary extension should render an error pa
class="euiFlexGroup emotion-euiFlexGroup-responsive-wrap-l-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-grow-1"
class="euiFlexItem emotion-euiFlexItem-grow-1-IndexLifecycleSummary"
>
<div
class="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain-hasBorder"
@ -567,7 +567,7 @@ exports[`extend index management ilm summary extension should render an error pa
</div>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-grow-3"
class="euiFlexItem emotion-euiFlexItem-grow-3-IndexLifecycleSummary"
>
<div
class="euiPanel euiPanel--danger euiPanel--paddingMedium emotion-euiPanel-m-m-danger"
@ -611,7 +611,7 @@ exports[`extend index management ilm summary extension should render the tab whe
class="euiFlexGroup emotion-euiFlexGroup-responsive-wrap-l-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-grow-1"
class="euiFlexItem emotion-euiFlexItem-grow-1-IndexLifecycleSummary"
>
<div
class="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain-hasBorder"
@ -733,7 +733,7 @@ exports[`extend index management ilm summary extension should render the tab whe
</div>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-grow-3"
class="euiFlexItem emotion-euiFlexItem-grow-3-IndexLifecycleSummary"
/>
</div>
`;

18
x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap generated
View file

@ -62,7 +62,7 @@ exports[`View policy flyout shows all phases 1`] = `
data-test-subj="ilmTimelinePhase-hot"
>
<div
class="ilmTimeline__colorBar css-1ppjwir"
class="ilmTimeline__colorBar css-byktt6-Timeline"
/>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
@ -88,7 +88,7 @@ exports[`View policy flyout shows all phases 1`] = `
data-test-subj="ilmTimelinePhase-warm"
>
<div
class="ilmTimeline__colorBar css-1rqi1ak"
class="ilmTimeline__colorBar css-poez4h-Timeline"
/>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
@ -114,7 +114,7 @@ exports[`View policy flyout shows all phases 1`] = `
data-test-subj="ilmTimelinePhase-cold"
>
<div
class="ilmTimeline__colorBar css-vpsh6t"
class="ilmTimeline__colorBar css-11sinye-Timeline"
/>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
@ -140,7 +140,7 @@ exports[`View policy flyout shows all phases 1`] = `
data-test-subj="ilmTimelinePhase-frozen"
>
<div
class="ilmTimeline__colorBar css-1gluxhr"
class="ilmTimeline__colorBar css-m1mba1-Timeline"
/>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
@ -196,7 +196,7 @@ exports[`View policy flyout shows all phases 1`] = `
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="css-ntslzu-PhaseIndicator"
/>
</div>
<div
@ -405,7 +405,7 @@ exports[`View policy flyout shows all phases 1`] = `
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="css-1jfvtnj-PhaseIndicator"
/>
</div>
<div
@ -624,7 +624,7 @@ exports[`View policy flyout shows all phases 1`] = `
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="css-ywp2b5-PhaseIndicator"
/>
</div>
<div
@ -798,7 +798,7 @@ exports[`View policy flyout shows all phases 1`] = `
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="css-58wjyp-PhaseIndicator"
/>
</div>
<div
@ -872,7 +872,7 @@ exports[`View policy flyout shows all phases 1`] = `
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
class="css-1w2gcyy-PhaseIndicator"
/>
</div>
<div

16
x-pack/platform/plugins/private/monitoring/public/components/elasticsearch/ccr/__snapshots__/ccr.test.js.snap generated
View file

@ -56,19 +56,7 @@ exports[`Ccr that it renders normally 1`] = `
},
]
}
css={
Object {
"map": undefined,
"name": "f6xtqm",
"next": undefined,
"styles": "
.euiTableRow-isExpandedRow > .euiTableRowCell > .euiTableCellContent {
padding: 0;
}
",
"toString": [Function],
}
}
css="unknown styles"
executeQueryOptions={
Object {
"defaultFields": Array [
@ -138,7 +126,6 @@ exports[`Ccr that it renders normally 1`] = `
]
}
pagination={false}
searchFormat="eql"
sorting={
Object {
"sort": Object {
@ -147,7 +134,6 @@ exports[`Ccr that it renders normally 1`] = `
},
}
}
tableLayout="fixed"
/>
</EuiPanel>
</EuiPageBody>

4
x-pack/platform/plugins/private/monitoring/public/components/elasticsearch/nodes/__snapshots__/cells.test.js.snap generated
View file

@ -1,7 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Node Listing Metric Cell should format N/A as the metric for an offline node 1`] = `
<div>
<div
class="css-m7x7w3-offlineStyle"
>
N/A
</div>
`;

9
x-pack/platform/plugins/private/monitoring/public/components/elasticsearch/nodes/cells.test.js
View file

@ -7,6 +7,7 @@
import React from 'react';
import { renderWithIntl } from '@kbn/test-jest-helpers';
import { EuiThemeProvider } from '@elastic/eui';
import { MetricCell } from './cells';
describe('Node Listing Metric Cell', () => {
@ -63,6 +64,12 @@ describe('Node Listing Metric Cell', () => {
it('should format N/A as the metric for an offline node', () => {
const props = { isOnline: false };
expect(renderWithIntl(<MetricCell {...props} />)).toMatchSnapshot();
expect(
renderWithIntl(
<EuiThemeProvider>
<MetricCell {...props} />
</EuiThemeProvider>
)
).toMatchSnapshot();
});
});

12
x-pack/platform/plugins/private/monitoring/public/components/elasticsearch/shard_allocation/components/__snapshots__/shard.test.js.snap generated
View file

@ -2,7 +2,7 @@
exports[`Shard should show for assigned primary shards 1`] = `
<div
className="shard monShard primary started master"
css="unknown styles"
data-shard-classification="shard monShard primary started master 0"
data-shard-tooltip="Started"
data-test-subj="shardIcon"
@ -19,7 +19,7 @@ exports[`Shard should show for assigned primary shards 1`] = `
exports[`Shard should show for assigned replica shards 1`] = `
<div
className="shard monShard replica started master"
css="unknown styles"
data-shard-classification="shard monShard replica started master 0"
data-shard-tooltip="Started"
data-test-subj="shardIcon"
@ -36,7 +36,7 @@ exports[`Shard should show for assigned replica shards 1`] = `
exports[`Shard should show for initializing shards 1`] = `
<div
className="shard monShard primary initializing master"
css="unknown styles"
data-shard-classification="shard monShard primary initializing master 0"
data-shard-tooltip="Initializing"
data-test-subj="shardIcon"
@ -53,7 +53,7 @@ exports[`Shard should show for initializing shards 1`] = `
exports[`Shard should show for relocating shards 1`] = `
<div
className="shard monShard primary relocating master"
css="unknown styles"
data-shard-classification="shard monShard primary relocating master 0"
data-shard-tooltip="Relocating"
data-test-subj="shardIcon"
@ -70,7 +70,7 @@ exports[`Shard should show for relocating shards 1`] = `
exports[`Shard should show unassigned primary shards 1`] = `
<div
className="shard monShard primary unassigned emergency master"
css="unknown styles"
data-shard-classification="shard monShard primary unassigned emergency master 0"
data-shard-tooltip="Unassigned"
data-test-subj="shardIcon"
@ -87,7 +87,7 @@ exports[`Shard should show unassigned primary shards 1`] = `
exports[`Shard should show unassigned replica shards 1`] = `
<div
className="shard monShard replica unassigned"
css="unknown styles"
data-shard-classification="shard monShard replica unassigned 0"
data-shard-tooltip="Unassigned"
data-test-subj="shardIcon"

2
x-pack/platform/plugins/private/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/collapsible_statement.test.js.snap generated
View file

@ -3,7 +3,7 @@
exports[`CollapsibleStatement component renders child components 1`] = `
<EuiFlexGroup
alignItems="center"
css={[Function]}
css="unknown styles"
gutterSize="none"
responsive={false}
>

96
x-pack/platform/plugins/private/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/detail_drawer.test.js.snap generated
View file

@ -110,17 +110,7 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
</EuiTableRowCell>
<EuiTableRowCell>
<div
css={
Object {
"map": undefined,
"name": "b37u90",
"next": undefined,
"styles": "
width: 7vw;
",
"toString": [Function],
}
}
css="unknown styles"
>
<Sparkline
options={
@ -168,17 +158,7 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
</EuiTableRowCell>
<EuiTableRowCell>
<div
css={
Object {
"map": undefined,
"name": "b37u90",
"next": undefined,
"styles": "
width: 7vw;
",
"toString": [Function],
}
}
css="unknown styles"
>
<Sparkline
options={
@ -226,17 +206,7 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
</EuiTableRowCell>
<EuiTableRowCell>
<div
css={
Object {
"map": undefined,
"name": "b37u90",
"next": undefined,
"styles": "
width: 7vw;
",
"toString": [Function],
}
}
css="unknown styles"
>
<Sparkline
options={
@ -284,17 +254,7 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
</EuiTableRowCell>
<EuiTableRowCell>
<div
css={
Object {
"map": undefined,
"name": "b37u90",
"next": undefined,
"styles": "
width: 7vw;
",
"toString": [Function],
}
}
css="unknown styles"
>
<Sparkline
options={
@ -391,17 +351,7 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
</EuiTableRowCell>
<EuiTableRowCell>
<div
css={
Object {
"map": undefined,
"name": "b37u90",
"next": undefined,
"styles": "
width: 7vw;
",
"toString": [Function],
}
}
css="unknown styles"
>
<Sparkline
options={
@ -449,17 +399,7 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
</EuiTableRowCell>
<EuiTableRowCell>
<div
css={
Object {
"map": undefined,
"name": "b37u90",
"next": undefined,
"styles": "
width: 7vw;
",
"toString": [Function],
}
}
css="unknown styles"
>
<Sparkline
options={
@ -507,17 +447,7 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
</EuiTableRowCell>
<EuiTableRowCell>
<div
css={
Object {
"map": undefined,
"name": "b37u90",
"next": undefined,
"styles": "
width: 7vw;
",
"toString": [Function],
}
}
css="unknown styles"
>
<Sparkline
options={
@ -565,17 +495,7 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
</EuiTableRowCell>
<EuiTableRowCell>
<div
css={
Object {
"map": undefined,
"name": "b37u90",
"next": undefined,
"styles": "
width: 7vw;
",
"toString": [Function],
}
}
css="unknown styles"
>
<Sparkline
options={

6
x-pack/platform/plugins/private/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/metric.test.js.snap generated
View file

@ -2,12 +2,12 @@
exports[`Metric component does not render warning badge when no warning present 1`] = `
<EuiFlexItem
css={[Function]}
css="unknown styles"
grow={false}
>
<EuiText
color="subdued"
css={[Function]}
css="unknown styles"
size="s"
>
<span>
@ -19,7 +19,7 @@ exports[`Metric component does not render warning badge when no warning present
exports[`Metric component renders warning badge 1`] = `
<EuiFlexItem
css={[Function]}
css="unknown styles"
grow={false}
>
<EuiBadge

29
x-pack/platform/plugins/private/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/plugin_statement.test.js.snap generated
View file

@ -3,7 +3,7 @@
exports[`PluginStatement component adds warning highlight for cpu time 1`] = `
<EuiFlexGroup
alignItems="center"
css={[Function]}
css="unknown styles"
gutterSize="none"
justifyContent="spaceBetween"
>
@ -21,7 +21,8 @@ exports[`PluginStatement component adds warning highlight for cpu time 1`] = `
<EuiButtonEmpty
aria-label="mutate"
color="primary"
css={[Function]}
css="unknown styles"
data-test-subj="pluginStatement-filter-mutate-EmptyButton"
flush="left"
iconType="dot"
onClick={[Function]}
@ -36,6 +37,7 @@ exports[`PluginStatement component adds warning highlight for cpu time 1`] = `
grow={false}
>
<EuiBadge
data-test-subj="pluginStatement-filter-mutate-Badge"
onClick={[Function]}
onClickAriaLabel="View details"
>
@ -75,7 +77,7 @@ exports[`PluginStatement component adds warning highlight for cpu time 1`] = `
exports[`PluginStatement component adds warning highlight for event millis 1`] = `
<EuiFlexGroup
alignItems="center"
css={[Function]}
css="unknown styles"
gutterSize="none"
justifyContent="spaceBetween"
>
@ -93,7 +95,8 @@ exports[`PluginStatement component adds warning highlight for event millis 1`] =
<EuiButtonEmpty
aria-label="mutate"
color="primary"
css={[Function]}
css="unknown styles"
data-test-subj="pluginStatement-filter-mutate-EmptyButton"
flush="left"
iconType="dot"
onClick={[Function]}
@ -108,6 +111,7 @@ exports[`PluginStatement component adds warning highlight for event millis 1`] =
grow={false}
>
<EuiBadge
data-test-subj="pluginStatement-filter-mutate-Badge"
onClick={[Function]}
onClickAriaLabel="View details"
>
@ -147,7 +151,7 @@ exports[`PluginStatement component adds warning highlight for event millis 1`] =
exports[`PluginStatement component does not render explicit id field if no id is specified 1`] = `
<EuiFlexGroup
alignItems="center"
css={[Function]}
css="unknown styles"
gutterSize="none"
justifyContent="spaceBetween"
>
@ -165,7 +169,8 @@ exports[`PluginStatement component does not render explicit id field if no id is
<EuiButtonEmpty
aria-label="stdin"
color="primary"
css={[Function]}
css="unknown styles"
data-test-subj="pluginStatement-input-stdin-EmptyButton"
flush="left"
iconType="dot"
onClick={[Function]}
@ -197,7 +202,7 @@ exports[`PluginStatement component does not render explicit id field if no id is
exports[`PluginStatement component renders input metrics and explicit id fields 1`] = `
<EuiFlexGroup
alignItems="center"
css={[Function]}
css="unknown styles"
gutterSize="none"
justifyContent="spaceBetween"
>
@ -215,7 +220,8 @@ exports[`PluginStatement component renders input metrics and explicit id fields
<EuiButtonEmpty
aria-label="stdin"
color="primary"
css={[Function]}
css="unknown styles"
data-test-subj="pluginStatement-input-stdin-EmptyButton"
flush="left"
iconType="dot"
onClick={[Function]}
@ -230,6 +236,7 @@ exports[`PluginStatement component renders input metrics and explicit id fields
grow={false}
>
<EuiBadge
data-test-subj="pluginStatement-input-stdin-Badge"
onClick={[Function]}
onClickAriaLabel="View details"
>
@ -257,7 +264,7 @@ exports[`PluginStatement component renders input metrics and explicit id fields
exports[`PluginStatement component renders processor statement metrics 1`] = `
<EuiFlexGroup
alignItems="center"
css={[Function]}
css="unknown styles"
gutterSize="none"
justifyContent="spaceBetween"
>
@ -275,7 +282,8 @@ exports[`PluginStatement component renders processor statement metrics 1`] = `
<EuiButtonEmpty
aria-label="mutate"
color="primary"
css={[Function]}
css="unknown styles"
data-test-subj="pluginStatement-filter-mutate-EmptyButton"
flush="left"
iconType="dot"
onClick={[Function]}
@ -290,6 +298,7 @@ exports[`PluginStatement component renders processor statement metrics 1`] = `
grow={false}
>
<EuiBadge
data-test-subj="pluginStatement-filter-mutate-Badge"
onClick={[Function]}
onClickAriaLabel="View details"
>

2
x-pack/platform/plugins/private/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/queue.test.js.snap generated
View file

@ -10,7 +10,7 @@ exports[`Queue component renders default elements 1`] = `
size="s"
/>
<EuiText
css={[Function]}
css="unknown styles"
>
<MemoizedFormattedMessage
defaultMessage="Queue metrics not available"

26
x-pack/platform/plugins/private/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/statement.test.js.snap generated
View file

@ -2,10 +2,10 @@
exports[`Statement component renders a CollapsibleStatement with else body for non-IfElement 1`] = `
<li
className="monPipelineViewer__listItem"
css="unknown styles"
>
<div
css={[Function]}
css="unknown styles"
/>
<CollapsibleStatement
collapse={[MockFunction]}
@ -25,7 +25,7 @@ exports[`Statement component renders a CollapsibleStatement with else body for n
size="xs"
>
<span
css={[Function]}
css="unknown styles"
>
else
</span>
@ -37,10 +37,10 @@ exports[`Statement component renders a CollapsibleStatement with else body for n
exports[`Statement component renders a CollapsibleStatement with if body for branch model 1`] = `
<li
className="monPipelineViewer__listItem"
css="unknown styles"
>
<div
css={[Function]}
css="unknown styles"
/>
<CollapsibleStatement
collapse={[MockFunction]}
@ -60,7 +60,7 @@ exports[`Statement component renders a CollapsibleStatement with if body for bra
size="xs"
>
<span
css={[Function]}
css="unknown styles"
>
if
</span>
@ -82,10 +82,10 @@ exports[`Statement component renders a CollapsibleStatement with if body for bra
exports[`Statement component renders a PluginStatement component for plugin model 1`] = `
<li
className="monPipelineViewer__listItem"
css="unknown styles"
>
<div
css={[Function]}
css="unknown styles"
/>
<PluginStatement
onShowVertexDetails={[MockFunction]}
@ -114,17 +114,17 @@ exports[`Statement component renders a PluginStatement component for plugin mode
exports[`Statement component renders spacers for element with depth > 0 1`] = `
<li
className="monPipelineViewer__listItem"
css="unknown styles"
>
<div
css={[Function]}
css="unknown styles"
>
<div
css={[Function]}
css="unknown styles"
key="spacer_0"
/>
<div
css={[Function]}
css="unknown styles"
key="spacer_1"
/>
</div>
@ -146,7 +146,7 @@ exports[`Statement component renders spacers for element with depth > 0 1`] = `
size="xs"
>
<span
css={[Function]}
css="unknown styles"
>
else
</span>

14
x-pack/platform/plugins/private/monitoring/public/components/logstash/pipeline_viewer/views/plugin_statement.test.js
View file

@ -9,8 +9,6 @@ import React from 'react';
import { PluginStatement } from './plugin_statement';
import { shallow } from 'enzyme';
import { EuiButtonEmpty, EuiBadge } from '@elastic/eui';
describe('PluginStatement component', () => {
let props;
let onShowVertexDetails;
@ -82,18 +80,22 @@ describe('PluginStatement component', () => {
});
it('handles name button click', () => {
const { vertex } = props.statement;
const { vertex, pluginType, name } = props.statement;
const wrapper = render(props);
wrapper.find(EuiButtonEmpty).simulate('click');
wrapper
.find(`[data-test-subj="pluginStatement-${pluginType}-${name}-EmptyButton"]`)
.simulate('click');
expect(onShowVertexDetails).toHaveBeenCalledTimes(1);
expect(onShowVertexDetails).toHaveBeenCalledWith(vertex);
});
it('handles id badge click', () => {
const { vertex } = props.statement;
const { vertex, pluginType, name } = props.statement;
const wrapper = render(props);
wrapper.find(EuiBadge).simulate('click');
wrapper
.find(`[data-test-subj="pluginStatement-${pluginType}-${name}-Badge"]`)
.simulate('click');
expect(onShowVertexDetails).toHaveBeenCalledTimes(1);
expect(onShowVertexDetails).toHaveBeenCalledWith(vertex);

2
x-pack/platform/plugins/private/monitoring/public/components/logstash/pipeline_viewer/views/plugin_statement.tsx
View file

@ -107,6 +107,7 @@ export function PluginStatement({
<EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
data-test-subj={`pluginStatement-${pluginType}-${name}-EmptyButton`}
aria-label={name}
color="primary"
css={pluginStyle}
@ -121,6 +122,7 @@ export function PluginStatement({
{hasExplicitId && (
<EuiFlexItem grow={false}>
<EuiBadge
data-test-subj={`pluginStatement-${pluginType}-${name}-Badge`}
onClick={onNameButtonClick}
onClickAriaLabel={i18n.translate(
'xpack.monitoring.logstash.pipelineStatement.viewDetailsAriaLabel',

64
x-pack/platform/plugins/private/monitoring/public/components/sparkline/__snapshots__/index.test.js.snap generated
View file

@ -3,70 +3,24 @@
exports[`Sparkline component does not show tooltip initially 1`] = `
<div>
<div
css={
Object {
"height": "2em",
}
}
className="css-9ufo15-Sparkline"
/>
</div>
`;
exports[`Sparkline component shows tooltip on hover 1`] = `
exports[`Sparkline component with EuiProvider shows tooltip on hover 1`] = `
<div>
<div
css={
css="unknown styles"
/>
<EmotionCssPropInternal
__EMOTION_TYPE_PLEASE_DO_NOT_USE__="i"
className="fa fa-caret-right"
style={
Object {
"height": "2em",
"width": 6,
}
}
/>
<div
className="monSparklineTooltip__container"
style={
Object {
"left": 210,
"top": 17,
}
}
>
<i
className="fa fa-caret-left"
style={
Object {
"display": "block",
"width": 6,
}
}
/>
<div
css={[Function]}
style={
Object {
"height": 56,
"width": 220,
}
}
>
<div
css={[Function]}
>
1513814914
</div>
<div
css={[Function]}
>
25
</div>
</div>
<i
className="fa fa-caret-right"
style={
Object {
"width": 6,
}
}
/>
</div>
</div>
`;

96
x-pack/platform/plugins/private/monitoring/public/components/sparkline/index.test.js
View file

@ -7,6 +7,7 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { EuiThemeProvider } from '@elastic/eui';
import { shallow } from 'enzyme';
import { Sparkline } from '.';
@ -14,60 +15,47 @@ jest.mock('./sparkline_flot_chart', () => ({
SparklineFlotChart: () => 'SparklineFlotChart',
}));
const getComponent = () => (
<Sparkline
series={[
[1513814814, 20],
[1513814914, 25],
[1513815114, 10],
]}
tooltip={{
enabled: true,
xValueFormatter: (x) => x,
yValueFormatter: (y) => y,
}}
options={{
xaxis: {
min: 1513814800,
max: 1513815200,
},
}}
/>
);
const mockDataPoint = {
xValue: 25,
yValue: 1513814914,
xPosition: 200,
yPosition: 45,
plotTop: 40,
plotLeft: 150,
plotHeight: 30,
plotWidth: 100,
};
describe('Sparkline component', () => {
let component;
let renderedComponent;
let mockDataPoint;
beforeEach(() => {
component = (
<Sparkline
series={[
[1513814814, 20],
[1513814914, 25],
[1513815114, 10],
]}
tooltip={{
enabled: true,
xValueFormatter: (x) => x,
yValueFormatter: (y) => y,
}}
options={{
xaxis: {
min: 1513814800,
max: 1513815200,
},
}}
/>
);
renderedComponent = renderer.create(component);
mockDataPoint = {
xValue: 25,
yValue: 1513814914,
xPosition: 200,
yPosition: 45,
plotTop: 40,
plotLeft: 150,
plotHeight: 30,
plotWidth: 100,
};
});
test('does not show tooltip initially', () => {
const tree = renderedComponent.toJSON();
expect(tree).toMatchSnapshot();
});
test('shows tooltip on hover', () => {
const sparkline = renderedComponent.getInstance();
sparkline.onHover(mockDataPoint);
const renderedComponent = renderer.create(getComponent());
const tree = renderedComponent.toJSON();
expect(tree).toMatchSnapshot();
});
test('removes tooltip when tooltip.enabled prop is changed to false', () => {
const wrapper = shallow(component);
const wrapper = shallow(getComponent());
expect(wrapper.find('.monSparklineTooltip__container')).toHaveLength(0);
wrapper.setState({ tooltip: mockDataPoint });
@ -77,3 +65,17 @@ describe('Sparkline component', () => {
expect(wrapper.find('.monSparklineTooltip__container')).toHaveLength(0);
});
});
describe('Sparkline component with EuiProvider', () => {
test('shows tooltip on hover', () => {
const wrapper = shallow(getComponent(), {
wrappingComponent: EuiThemeProvider,
});
wrapper.instance().onHover(mockDataPoint);
wrapper.update();
expect(wrapper).toMatchSnapshot();
});
});

Some files were not shown because too many files have changed in this diff Show more