diff --git a/.betterer.results b/.betterer.results index 9bc89b713c3..8595a3f19de 100644 --- a/.betterer.results +++ b/.betterer.results @@ -227,21 +227,9 @@ exports[`no enzyme tests`] = { "public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx:2556927610": [ [1, 17, 13, "RegExp match", "2409514259"] ], - "public/app/features/explore/ErrorContainer.test.tsx:2082593062": [ - [2, 19, 13, "RegExp match", "2409514259"] - ], - "public/app/features/explore/Explore.test.tsx:2684077338": [ - [11, 19, 13, "RegExp match", "2409514259"] - ], - "public/app/features/explore/ExploreDrawer.test.tsx:2094071178": [ - [1, 17, 13, "RegExp match", "2409514259"] - ], "public/app/features/explore/LiveLogs.test.tsx:1667605379": [ [2, 17, 13, "RegExp match", "2409514259"] ], - "public/app/features/explore/MetaInfoText.test.tsx:802018588": [ - [1, 27, 13, "RegExp match", "2409514259"] - ], "public/app/features/explore/RichHistory/RichHistory.test.tsx:409631018": [ [1, 17, 13, "RegExp match", "2409514259"] ], diff --git a/public/app/features/explore/ErrorContainer.test.tsx b/public/app/features/explore/ErrorContainer.test.tsx index 3210362aa71..589cdba349c 100644 --- a/public/app/features/explore/ErrorContainer.test.tsx +++ b/public/app/features/explore/ErrorContainer.test.tsx @@ -1,35 +1,54 @@ import React from 'react'; -import { DataQueryError } from '@grafana/data'; -import { shallow } from 'enzyme'; -import { ErrorContainer } from './ErrorContainer'; - -const makeError = (propOverrides?: DataQueryError): DataQueryError => { - const queryError: DataQueryError = { - data: { - message: 'Error data message', - error: 'Error data content', - }, - message: 'Error message', - status: 'Error status', - statusText: 'Error status text', - refId: 'A', - }; - Object.assign(queryError, propOverrides); - return queryError; -}; - -const setup = (propOverrides?: object) => { - const props = { - queryError: makeError(propOverrides), - }; - - const wrapper = shallow(); - return wrapper; -}; +import { render, screen } from '@testing-library/react'; +import { ErrorContainer, ErrorContainerProps } from './ErrorContainer'; describe('ErrorContainer', () => { - it('should render component', () => { - const wrapper = setup(); - expect(wrapper).toMatchSnapshot(); + it('should render component and show message', () => { + const props: ErrorContainerProps = { + queryError: { + data: { + message: 'Error data message', + error: 'Error data content', + }, + message: 'Error message', + status: 'Error status', + statusText: 'Error status text', + refId: 'A', + }, + }; + render(); + const alertEl = screen.getByRole('alert'); + expect(alertEl).toBeInTheDocument(); + expect(alertEl).toHaveTextContent(/query error/i); + expect(alertEl).toHaveTextContent('Error message'); + }); + + it('should render component and show message if message is in data only', () => { + const props: ErrorContainerProps = { + queryError: { + data: { + message: 'Error data message', + error: 'Error data content', + }, + status: 'Error status', + statusText: 'Error status text', + refId: 'A', + }, + }; + render(); + + const alertEl = screen.getByRole('alert'); + expect(alertEl).toBeInTheDocument(); + expect(alertEl).toHaveTextContent(/query error/i); + expect(alertEl).toHaveTextContent('Error data message'); + }); + + it('should have hidden unknown error if prop is not passed in', () => { + const props: ErrorContainerProps = {}; + render(); + + const alertEl = screen.getByRole('alert', { hidden: true }); + expect(alertEl).toBeInTheDocument(); + expect(alertEl).toHaveTextContent('Unknown error'); }); }); diff --git a/public/app/features/explore/Explore.test.tsx b/public/app/features/explore/Explore.test.tsx deleted file mode 100644 index ed682341c4c..00000000000 --- a/public/app/features/explore/Explore.test.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import React from 'react'; -import { - DataSourceApi, - LoadingState, - toUtc, - DataQueryError, - DataQueryRequest, - CoreApp, - createTheme, -} from '@grafana/data'; -import { ExploreId } from 'app/types/explore'; -import { shallow } from 'enzyme'; -import { Explore, Props } from './Explore'; -import { scanStopAction } from './state/query'; -import { SecondaryActions } from './SecondaryActions'; - -const dummyProps: Props = { - logsResult: undefined, - changeSize: jest.fn(), - datasourceInstance: { - meta: { - metrics: true, - logs: true, - }, - components: { - QueryEditorHelp: {}, - }, - } as DataSourceApi, - datasourceMissing: false, - exploreId: ExploreId.left, - loading: false, - modifyQueries: jest.fn(), - scanStart: jest.fn(), - scanStopAction: scanStopAction, - setQueries: jest.fn(), - queryKeys: [], - isLive: false, - syncedTimes: false, - updateTimeRange: jest.fn(), - makeAbsoluteTime: jest.fn(), - graphResult: [], - absoluteRange: { - from: 0, - to: 0, - }, - timeZone: 'UTC', - queryResponse: { - state: LoadingState.NotStarted, - series: [], - request: { - requestId: '1', - dashboardId: 0, - interval: '1s', - panelId: 1, - scopedVars: { - apps: { - value: 'value', - }, - }, - targets: [ - { - refId: 'A', - }, - ], - timezone: 'UTC', - app: CoreApp.Explore, - startTime: 0, - } as unknown as DataQueryRequest, - error: {} as DataQueryError, - timeRange: { - from: toUtc('2019-01-01 10:00:00'), - to: toUtc('2019-01-01 16:00:00'), - raw: { - from: 'now-6h', - to: 'now', - }, - }, - graphFrames: [], - logsFrames: [], - tableFrames: [], - traceFrames: [], - nodeGraphFrames: [], - graphResult: null, - logsResult: null, - tableResult: null, - }, - addQueryRow: jest.fn(), - theme: createTheme(), - showMetrics: true, - showLogs: true, - showTable: true, - showTrace: true, - showNodeGraph: true, - splitOpen: (() => {}) as any, - logsVolumeData: undefined, - loadLogsVolumeData: () => {}, - changeGraphStyle: () => {}, - graphStyle: 'lines', -}; - -describe('Explore', () => { - it('should render component', () => { - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - }); - - it('renders SecondaryActions and add row button', () => { - const wrapper = shallow(); - expect(wrapper.find(SecondaryActions)).toHaveLength(1); - expect(wrapper.find(SecondaryActions).props().addQueryRowButtonHidden).toBe(false); - }); -}); diff --git a/public/app/features/explore/ExploreDrawer.test.tsx b/public/app/features/explore/ExploreDrawer.test.tsx deleted file mode 100644 index 2456073c217..00000000000 --- a/public/app/features/explore/ExploreDrawer.test.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import { ExploreDrawer } from './ExploreDrawer'; - -describe('', () => { - it('renders child element', () => { - const childElement =
Child element
; - const wrapper = mount({childElement}); - expect(wrapper.text()).toBe('Child element'); - }); -}); diff --git a/public/app/features/explore/MetaInfoText.test.tsx b/public/app/features/explore/MetaInfoText.test.tsx index b5e55197d95..c1d7e316eef 100644 --- a/public/app/features/explore/MetaInfoText.test.tsx +++ b/public/app/features/explore/MetaInfoText.test.tsx @@ -1,34 +1,26 @@ import React from 'react'; -import { shallow, render } from 'enzyme'; +import { render, screen } from '@testing-library/react'; import { MetaInfoText, MetaItemProps } from './MetaInfoText'; describe('MetaInfoText', () => { - it('should render component', () => { - const items: MetaItemProps[] = [ - { label: 'label', value: 'value' }, - { label: 'label2', value: 'value2' }, - ]; - const wrapper = shallow(); - expect(wrapper).toMatchSnapshot(); - }); - - it('should render items', () => { + it('should render component and items', () => { const items: MetaItemProps[] = [ { label: 'label', value: 'value' }, { label: 'label2', value: 'value2' }, ]; - const wrapper = render(); - expect(wrapper.find('label')).toBeTruthy(); - expect(wrapper.find('value')).toBeTruthy(); - expect(wrapper.find('label2')).toBeTruthy(); - expect(wrapper.find('value2')).toBeTruthy(); + render(); + expect(screen.getAllByTestId('meta-info-text')).toHaveLength(1); + expect(screen.getAllByTestId('meta-info-text-item')).toHaveLength(2); + expect(screen.getByText('label:')).toBeInTheDocument(); + expect(screen.getByText('label2:')).toBeInTheDocument(); + expect(screen.getByText(/^value$/)).toBeInTheDocument(); + expect(screen.getByText(/^value2$/)).toBeInTheDocument(); }); - it('should render no items when the array is empty', () => { + it('should render component with no items when the array is empty', () => { const items: MetaItemProps[] = []; - - const wrapper = shallow(); - expect(wrapper.find('div').exists()).toBeTruthy(); - expect(wrapper.find('div').children()).toHaveLength(0); + render(); + expect(screen.getAllByTestId('meta-info-text')).toHaveLength(1); + expect(screen.queryByTestId('meta-info-text-item')).toBeNull(); }); }); diff --git a/public/app/features/explore/MetaInfoText.tsx b/public/app/features/explore/MetaInfoText.tsx index 75b75cfeb7e..dbdd234e1b4 100644 --- a/public/app/features/explore/MetaInfoText.tsx +++ b/public/app/features/explore/MetaInfoText.tsx @@ -43,7 +43,7 @@ const MetaInfoItem = memo(function MetaInfoItem(props: MetaItemProps) { const { label, value } = props; return ( -
+
{label && {label}:} {value}
@@ -59,7 +59,7 @@ export const MetaInfoText = memo(function MetaInfoText(props: MetaInfoTextProps) const { metaItems } = props; return ( -
+
{metaItems.map((item, index) => ( ))} diff --git a/public/app/features/explore/__snapshots__/ErrorContainer.test.tsx.snap b/public/app/features/explore/__snapshots__/ErrorContainer.test.tsx.snap deleted file mode 100644 index 071c68f68e0..00000000000 --- a/public/app/features/explore/__snapshots__/ErrorContainer.test.tsx.snap +++ /dev/null @@ -1,16 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ErrorContainer should render component 1`] = ` - - - Error message - - -`; diff --git a/public/app/features/explore/__snapshots__/Explore.test.tsx.snap b/public/app/features/explore/__snapshots__/Explore.test.tsx.snap deleted file mode 100644 index 59b523589fd..00000000000 --- a/public/app/features/explore/__snapshots__/Explore.test.tsx.snap +++ /dev/null @@ -1,49 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Explore should render component 1`] = ` - - -
-
- - - -
- - - -
- -`; diff --git a/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap b/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap deleted file mode 100644 index 07c3073f191..00000000000 --- a/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap +++ /dev/null @@ -1,18 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MetaInfoText should render component 1`] = ` -
- - -
-`;