Skip to content

Commit

Permalink
[Security Solution] Adds getMockTheme function (#92840) (#94329)
Browse files Browse the repository at this point in the history 
Closes elastic/security-team#866.
  • Loading branch information
@ecezalp
ecezalp authored Mar 10, 2021
1 parent a3ee4cf commit 3af3ec6
Show file tree
Hide file tree
Showing 43 changed files with 835 additions and 1,468 deletions.
18 changes: 4 additions & 14 deletions x-pack/plugins/security_solution/public/app/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,12 @@
*/

import { History } from 'history';
import React, { memo, useMemo, FC } from 'react';
import React, { memo, FC } from 'react';
import { ApolloProvider } from 'react-apollo';
import { Store, Action } from 'redux';
import { Provider as ReduxStoreProvider } from 'react-redux';
import { ThemeProvider } from 'styled-components';

import { EuiErrorBoundary } from '@elastic/eui';
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { AppLeaveHandler } from '../../../../../src/core/public';

import { ManageUserInfo } from '../detections/components/user_info';
Expand All @@ -30,6 +27,7 @@ import { ApolloClientContext } from '../common/utils/apollo_context';
import { ManageGlobalTimeline } from '../timelines/components/manage_timeline';
import { StartServices } from '../types';
import { PageRouter } from './routes';
import { EuiThemeProvider } from '../../../../../src/plugins/kibana_react/common';

interface StartAppComponent extends AppFrontendLibs {
children: React.ReactNode;
Expand All @@ -46,15 +44,7 @@ const StartAppComponent: FC<StartAppComponent> = ({
store,
}) => {
const { i18n } = useKibana().services;

const [darkMode] = useUiSetting$<boolean>(DEFAULT_DARK_MODE);
const theme = useMemo(
() => ({
eui: darkMode ? euiDarkVars : euiLightVars,
darkMode,
}),
[darkMode]
);

return (
<EuiErrorBoundary>
Expand All @@ -64,15 +54,15 @@ const StartAppComponent: FC<StartAppComponent> = ({
<ReduxStoreProvider store={store}>
<ApolloProvider client={apolloClient}>
<ApolloClientContext.Provider value={apolloClient}>
<ThemeProvider theme={theme}>
<EuiThemeProvider darkMode={darkMode}>
<MlCapabilitiesProvider>
<ManageUserInfo>
<PageRouter history={history} onAppLeave={onAppLeave}>
{children}
</PageRouter>
</ManageUserInfo>
</MlCapabilitiesProvider>
</ThemeProvider>
</EuiThemeProvider>
<ErrorToastDispatcher />
<GlobalToaster />
</ApolloClientContext.Provider>
Expand Down
12 changes: 7 additions & 5 deletions x-pack/plugins/security_solution/public/common/components/and_or_badge/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { mount } from 'enzyme';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';

import { AndOrBadge } from './';
import { getMockTheme } from '../../lib/kibana/kibana_react.mock';

const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } });

describe('AndOrBadge', () => {
test('it renders top and bottom antenna bars when "includeAntennas" is true', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<AndOrBadge includeAntennas type="and" />
</ThemeProvider>
);
Expand All @@ -27,7 +29,7 @@ describe('AndOrBadge', () => {

test('it does not render top and bottom antenna bars when "includeAntennas" is false', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<AndOrBadge type="or" />
</ThemeProvider>
);
Expand All @@ -39,7 +41,7 @@ describe('AndOrBadge', () => {

test('it renders "and" when "type" is "and"', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<AndOrBadge type="and" />
</ThemeProvider>
);
Expand All @@ -49,7 +51,7 @@ describe('AndOrBadge', () => {

test('it renders "or" when "type" is "or"', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<AndOrBadge type="or" />
</ThemeProvider>
);
Expand Down
10 changes: 6 additions & 4 deletions ...ns/security_solution/public/common/components/and_or_badge/rounded_badge_antenna.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { mount } from 'enzyme';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';

import { RoundedBadgeAntenna } from './rounded_badge_antenna';
import { getMockTheme } from '../../lib/kibana/kibana_react.mock';

const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } });

describe('RoundedBadgeAntenna', () => {
test('it renders top and bottom antenna bars', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<RoundedBadgeAntenna type="and" />
</ThemeProvider>
);
Expand All @@ -27,7 +29,7 @@ describe('RoundedBadgeAntenna', () => {

test('it renders "and" when "type" is "and"', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<RoundedBadgeAntenna type="and" />
</ThemeProvider>
);
Expand All @@ -37,7 +39,7 @@ describe('RoundedBadgeAntenna', () => {

test('it renders "or" when "type" is "or"', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<RoundedBadgeAntenna type="or" />
</ThemeProvider>
);
Expand Down
22 changes: 11 additions & 11 deletions x-pack/plugins/security_solution/public/common/components/empty_value/empty_value.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
* 2.0.
*/

import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
import { mount, shallow } from 'enzyme';
import React from 'react';
import { ThemeProvider } from 'styled-components';
Expand All @@ -19,9 +18,10 @@ import {
getEmptyValue,
getOrEmptyTag,
} from '.';
import { getMockTheme } from '../../lib/kibana/kibana_react.mock';

describe('EmptyValue', () => {
const theme = () => ({ eui: euiDarkVars, darkMode: true });
const mockTheme = getMockTheme({ eui: { euiColorMediumShade: '#ece' } });

test('it renders against snapshot', () => {
const wrapper = shallow(<p>{getEmptyString()}</p>);
Expand All @@ -35,7 +35,7 @@ describe('EmptyValue', () => {
describe('#getEmptyString', () => {
test('should turn into an empty string place holder', () => {
const wrapper = mountWithIntl(
<ThemeProvider theme={theme}>
<ThemeProvider theme={mockTheme}>
<p>{getEmptyString()}</p>
</ThemeProvider>
);
Expand All @@ -45,7 +45,7 @@ describe('EmptyValue', () => {

describe('#getEmptyTagValue', () => {
const wrapper = mount(
<ThemeProvider theme={theme}>
<ThemeProvider theme={mockTheme}>
<p>{getEmptyTagValue()}</p>
</ThemeProvider>
);
Expand All @@ -55,7 +55,7 @@ describe('EmptyValue', () => {
describe('#getEmptyStringTag', () => {
test('should turn into an span that has length of 1', () => {
const wrapper = mountWithIntl(
<ThemeProvider theme={theme}>
<ThemeProvider theme={mockTheme}>
<p>{getEmptyStringTag()}</p>
</ThemeProvider>
);
Expand All @@ -64,7 +64,7 @@ describe('EmptyValue', () => {

test('should turn into an empty string tag place holder', () => {
const wrapper = mountWithIntl(
<ThemeProvider theme={theme}>
<ThemeProvider theme={mockTheme}>
<p>{getEmptyStringTag()}</p>
</ThemeProvider>
);
Expand All @@ -75,7 +75,7 @@ describe('EmptyValue', () => {
describe('#defaultToEmptyTag', () => {
test('should default to an empty value when a value is null', () => {
const wrapper = mount(
<ThemeProvider theme={theme}>
<ThemeProvider theme={mockTheme}>
<p>{defaultToEmptyTag(null)}</p>
</ThemeProvider>
);
Expand All @@ -84,7 +84,7 @@ describe('EmptyValue', () => {

test('should default to an empty value when a value is undefined', () => {
const wrapper = mount(
<ThemeProvider theme={theme}>
<ThemeProvider theme={mockTheme}>
<p>{defaultToEmptyTag(undefined)}</p>
</ThemeProvider>
);
Expand Down Expand Up @@ -114,7 +114,7 @@ describe('EmptyValue', () => {
},
};
const wrapper = mount(
<ThemeProvider theme={theme}>
<ThemeProvider theme={mockTheme}>
<p>{getOrEmptyTag('a.b.c', test)}</p>
</ThemeProvider>
);
Expand All @@ -130,7 +130,7 @@ describe('EmptyValue', () => {
},
};
const wrapper = mount(
<ThemeProvider theme={theme}>
<ThemeProvider theme={mockTheme}>
<p>{getOrEmptyTag('a.b.c', test)}</p>
</ThemeProvider>
);
Expand All @@ -144,7 +144,7 @@ describe('EmptyValue', () => {
},
};
const wrapper = mount(
<ThemeProvider theme={theme}>
<ThemeProvider theme={mockTheme}>
<p>{getOrEmptyTag('a.b.c', test)}</p>
</ThemeProvider>
);
Expand Down
27 changes: 19 additions & 8 deletions .../security_solution/public/common/components/exceptions/add_exception_modal/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { mount, ReactWrapper } from 'enzyme';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { waitFor } from '@testing-library/react';

import { AddExceptionModal } from './';
Expand All @@ -31,6 +30,18 @@ import {
} from '../../../../../common/detection_engine/schemas/response/rules_schema.mocks';
import { useRuleAsync } from '../../../../detections/containers/detection_engine/rules/use_rule_async';
import { AlertData } from '../types';
import { getMockTheme } from '../../../lib/kibana/kibana_react.mock';

const mockTheme = getMockTheme({
eui: {
euiBreakpoints: {
l: '1200px',
},
paddingSizes: {
m: '10px',
},
},
});

jest.mock('../../../../detections/containers/detection_engine/alerts/use_signal_index');
jest.mock('../../../../common/lib/kibana');
Expand Down Expand Up @@ -101,7 +112,7 @@ describe('When the add exception modal is opened', () => {
},
]);
wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<AddExceptionModal
ruleId={'123'}
ruleIndices={[]}
Expand All @@ -122,7 +133,7 @@ describe('When the add exception modal is opened', () => {
let wrapper: ReactWrapper;
beforeEach(async () => {
wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<AddExceptionModal
ruleId={'123'}
ruleIndices={['filebeat-*']}
Expand Down Expand Up @@ -163,7 +174,7 @@ describe('When the add exception modal is opened', () => {
file: { path: 'test/path' },
};
wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<AddExceptionModal
ruleId={'123'}
ruleIndices={['filebeat-*']}
Expand Down Expand Up @@ -220,7 +231,7 @@ describe('When the add exception modal is opened', () => {
file: { path: 'test/path' },
};
wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<AddExceptionModal
ruleId={'123'}
ruleIndices={['filebeat-*']}
Expand Down Expand Up @@ -281,7 +292,7 @@ describe('When the add exception modal is opened', () => {
file: { path: 'test/path' },
};
wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<AddExceptionModal
ruleId={'123'}
ruleIndices={['filebeat-*']}
Expand Down Expand Up @@ -355,7 +366,7 @@ describe('When the add exception modal is opened', () => {
file: { path: 'test/path' },
};
wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<AddExceptionModal
ruleId={'123'}
ruleIndices={['filebeat-*']}
Expand Down Expand Up @@ -425,7 +436,7 @@ describe('When the add exception modal is opened', () => {

test('when there are exception builder errors submit button is disabled', async () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<AddExceptionModal
ruleId={'123'}
ruleIndices={['filebeat-*']}
Expand Down
10 changes: 6 additions & 4 deletions .../plugins/security_solution/public/common/components/exceptions/builder/and_badge.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,16 @@
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { mount } from 'enzyme';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';

import { BuilderAndBadgeComponent } from './and_badge';
import { getMockTheme } from '../../../lib/kibana/kibana_react.mock';

const mockTheme = getMockTheme({ eui: { euiColorLightShade: '#ece' } });

describe('BuilderAndBadgeComponent', () => {
test('it renders exceptionItemEntryFirstRowAndBadge for very first exception item in builder', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<BuilderAndBadgeComponent entriesLength={2} exceptionItemIndex={0} />
</ThemeProvider>
);
Expand All @@ -27,7 +29,7 @@ describe('BuilderAndBadgeComponent', () => {

test('it renders exceptionItemEntryInvisibleAndBadge if "entriesLength" is 1 or less', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<BuilderAndBadgeComponent entriesLength={1} exceptionItemIndex={0} />
</ThemeProvider>
);
Expand All @@ -39,7 +41,7 @@ describe('BuilderAndBadgeComponent', () => {

test('it renders regular "and" badge if exception item is not the first one and includes more than one entry', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ThemeProvider theme={mockTheme}>
<BuilderAndBadgeComponent entriesLength={2} exceptionItemIndex={1} />
</ThemeProvider>
);
Expand Down
Loading

0 comments on commit 3af3ec6

Please sign in to comment.