diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx index 4f28b462a88..c4349a7db65 100644 --- a/packages/grafana-ui/src/components/Icon/Icon.tsx +++ b/packages/grafana-ui/src/components/Icon/Icon.tsx @@ -19,6 +19,7 @@ export interface IconProps extends React.HTMLAttributes { const getIconStyles = stylesFactory((theme: GrafanaTheme) => { return { container: css` + label: Icon; display: inline-block; `, icon: css` diff --git a/packages/grafana-ui/src/components/Layout/Layout.tsx b/packages/grafana-ui/src/components/Layout/Layout.tsx index 26a2510a899..ec2d6b36ff7 100644 --- a/packages/grafana-ui/src/components/Layout/Layout.tsx +++ b/packages/grafana-ui/src/components/Layout/Layout.tsx @@ -119,6 +119,7 @@ const getStyles = stylesFactory( return { layout: css` + label: HorizontalGroup; display: flex; flex-direction: ${orientation === Orientation.Vertical ? 'column' : 'row'}; flex-wrap: ${wrap ? 'wrap' : 'nowrap'}; diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx index f18ddfb4ca0..210aa877ea6 100644 --- a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx +++ b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx @@ -68,10 +68,10 @@ export const QueryOperationRow: React.FC = ({
- {title && {titleElement}} + {title &&
{titleElement}
} {headerElement}
- {actions && actionsElement} + {actions &&
{actionsElement}
} {draggable && ( )} @@ -113,7 +113,6 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => { border-radius: ${theme.border.radius.sm}; background: ${theme.colors.bg2}; min-height: ${theme.spacing.formInputHeight}px; - line-height: ${theme.spacing.sm}px; display: flex; align-items: center; justify-content: space-between; @@ -143,6 +142,7 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => { font-weight: ${theme.typography.weight.semibold}; color: ${theme.colors.textBlue}; margin-left: ${theme.spacing.sm}; + overflow: hidden; `, content: css` margin-top: ${theme.spacing.inlineFormMargin}; diff --git a/public/app/core/components/Select/TeamPicker.test.tsx b/public/app/core/components/Select/TeamPicker.test.tsx index e78acec93df..f12e8f9e280 100644 --- a/public/app/core/components/Select/TeamPicker.test.tsx +++ b/public/app/core/components/Select/TeamPicker.test.tsx @@ -1,6 +1,5 @@ import React from 'react'; -// @ts-ignore -import renderer from 'react-test-renderer'; +import { render, screen } from '@testing-library/react'; import { TeamPicker } from './TeamPicker'; jest.mock('@grafana/runtime', () => ({ @@ -18,7 +17,7 @@ describe('TeamPicker', () => { const props = { onSelected: () => {}, }; - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); + render(); + expect(screen.getByTestId('teamPicker')).toBeInTheDocument(); }); }); diff --git a/public/app/core/components/Select/TeamPicker.tsx b/public/app/core/components/Select/TeamPicker.tsx index 4535d7fc3f0..2f523f86222 100644 --- a/public/app/core/components/Select/TeamPicker.tsx +++ b/public/app/core/components/Select/TeamPicker.tsx @@ -64,7 +64,7 @@ export class TeamPicker extends Component { const { onSelected, className } = this.props; const { isLoading } = this.state; return ( -
+
({ @@ -9,7 +8,7 @@ jest.mock('@grafana/runtime', () => ({ describe('UserPicker', () => { it('renders correctly', () => { - const tree = renderer.create( {}} />).toJSON(); - expect(tree).toMatchSnapshot(); + render( {}} />); + expect(screen.getByTestId('userPicker')).toBeInTheDocument(); }); }); diff --git a/public/app/core/components/Select/UserPicker.tsx b/public/app/core/components/Select/UserPicker.tsx index 4b8db73b680..eedbc8da1b9 100644 --- a/public/app/core/components/Select/UserPicker.tsx +++ b/public/app/core/components/Select/UserPicker.tsx @@ -64,7 +64,7 @@ export class UserPicker extends Component { const { isLoading } = this.state; return ( -
+
-
-
-
-
-
- Select a team -
-
-
- -
- -
-
-
-
-
-
- - - -
-
-
-
-
-
-`; diff --git a/public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap b/public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap deleted file mode 100644 index baf205a9bdb..00000000000 --- a/public/app/core/components/Select/__snapshots__/UserPicker.test.tsx.snap +++ /dev/null @@ -1,112 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`UserPicker renders correctly 1`] = ` -
-
-
-
-
-
- Select user -
-
-
- -
- -
-
-
-
-
-
- - - -
-
-
-
-
-
-`; diff --git a/public/app/features/dashboard/panel_editor/QueryEditorRowTitle.tsx b/public/app/features/dashboard/panel_editor/QueryEditorRowTitle.tsx index 0c9f172bca7..02dff1f9529 100644 --- a/public/app/features/dashboard/panel_editor/QueryEditorRowTitle.tsx +++ b/public/app/features/dashboard/panel_editor/QueryEditorRowTitle.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { css } from 'emotion'; import { DataQuery, DataSourceApi, GrafanaTheme } from '@grafana/data'; -import { HorizontalGroup, stylesFactory, useTheme } from '@grafana/ui'; +import { stylesFactory, useTheme } from '@grafana/ui'; import { selectors } from '@grafana/e2e-selectors'; interface QueryEditorRowTitleProps { @@ -25,7 +25,7 @@ export const QueryEditorRowTitle: React.FC = ({ const styles = getQueryEditorRowTitleStyles(theme); return ( - +
{query.refId} {inMixedMode && ({datasource.name})} @@ -36,12 +36,17 @@ export const QueryEditorRowTitle: React.FC = ({ {collapsedText}
)} - +
); }; const getQueryEditorRowTitleStyles = stylesFactory((theme: GrafanaTheme) => { return { + wrapper: css` + display: flex; + align-items: center; + `, + refId: css` font-weight: ${theme.typography.weight.semibold}; color: ${theme.colors.textBlue}; @@ -53,10 +58,8 @@ const getQueryEditorRowTitleStyles = stylesFactory((theme: GrafanaTheme) => { font-weight: ${theme.typography.weight.regular}; font-size: ${theme.typography.size.sm}; color: ${theme.colors.textWeak}; - padding: 0 10px; - display: flex; + padding-left: ${theme.spacing.sm}; align-items: center; - flex-grow: 1; overflow: hidden; font-style: italic; overflow: hidden; diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Aggregations.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Aggregations.test.tsx index f2f0233a602..670f6baa81f 100644 --- a/public/app/plugins/datasource/cloud-monitoring/components/Aggregations.test.tsx +++ b/public/app/plugins/datasource/cloud-monitoring/components/Aggregations.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import renderer from 'react-test-renderer'; +import { render, screen } from '@testing-library/react'; import { shallow } from 'enzyme'; import { Segment } from '@grafana/ui'; import { Aggregations, Props } from './Aggregations'; @@ -22,8 +22,8 @@ const props: Props = { describe('Aggregations', () => { it('renders correctly', () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); + render(); + expect(screen.getByTestId('aggregations')).toBeInTheDocument(); }); describe('options', () => { diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Aggregations.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Aggregations.tsx index 4c9540cd572..e98520a106a 100644 --- a/public/app/plugins/datasource/cloud-monitoring/components/Aggregations.tsx +++ b/public/app/plugins/datasource/cloud-monitoring/components/Aggregations.tsx @@ -22,7 +22,7 @@ export const Aggregations: FC = props => { const selected = useSelectedFromOptions(aggOptions, props); return ( - <> + ); }; diff --git a/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/Aggregations.test.tsx.snap b/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/Aggregations.test.tsx.snap deleted file mode 100644 index ef8d4ae38d1..00000000000 --- a/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/Aggregations.test.tsx.snap +++ /dev/null @@ -1,55 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Aggregations renders correctly 1`] = ` -Array [ - , -
, -] -`; diff --git a/public/app/plugins/datasource/cloudwatch/components/Stats.test.tsx b/public/app/plugins/datasource/cloudwatch/components/Stats.test.tsx index a4d3b8f146b..f5cbb8a2cce 100644 --- a/public/app/plugins/datasource/cloudwatch/components/Stats.test.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/Stats.test.tsx @@ -1,21 +1,19 @@ import React from 'react'; -import renderer from 'react-test-renderer'; +import { render, screen } from '@testing-library/react'; import { Stats } from './Stats'; const toOption = (value: any) => ({ label: value, value }); describe('Stats', () => { it('should render component', () => { - const tree = renderer - .create( - {}} - stats={['Average', 'Maximum', 'Minimum', 'Sum', 'SampleCount'].map(toOption)} - /> - ) - .toJSON(); - expect(tree).toMatchSnapshot(); + render( + {}} + stats={['Average', 'Maximum', 'Minimum', 'Sum', 'SampleCount'].map(toOption)} + /> + ); + expect(screen.getByTestId('stats')).toBeInTheDocument(); }); }); diff --git a/public/app/plugins/datasource/cloudwatch/components/Stats.tsx b/public/app/plugins/datasource/cloudwatch/components/Stats.tsx index 748b19f77b6..ac430191b49 100644 --- a/public/app/plugins/datasource/cloudwatch/components/Stats.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/Stats.tsx @@ -14,7 +14,7 @@ const removeText = '-- remove stat --'; const removeOption: SelectableValue = { label: removeText, value: removeText }; export const Stats: FunctionComponent = ({ stats, values, onChange, variableOptionGroup }) => ( - <> +
{values && values.map((value, index) => ( = ({ stats, values, onChange, varia onChange={({ value }) => onChange([...values, value!])} options={[...stats.filter(({ value }) => !values.includes(value!)), variableOptionGroup]} /> - +
); diff --git a/public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap b/public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap deleted file mode 100644 index 066a5c22e50..00000000000 --- a/public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap +++ /dev/null @@ -1,51 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Stats should render component 1`] = ` -Array [ - , - , - , -] -`;