From a44f098cfa8d1f209bf9e931a487474004797b92 Mon Sep 17 00:00:00 2001 From: Ivana Date: Mon, 16 Mar 2020 20:53:55 +0100 Subject: [PATCH] Fix tests for components --- .../explore/RichHistory/RichHistory.test.tsx | 32 ++++++++--- .../RichHistory/RichHistoryCard.test.tsx | 53 ++++++++++++------- .../explore/RichHistory/RichHistoryCard.tsx | 8 ++- .../RichHistory/RichHistoryContainer.test.tsx | 4 +- .../RichHistoryQueriesTab.test.tsx | 24 ++++++--- .../RichHistory/RichHistoryQueriesTab.tsx | 2 +- .../RichHistory/RichHistorySettings.test.tsx | 20 ++++--- .../RichHistoryStarredTab.test.tsx | 6 +-- 8 files changed, 104 insertions(+), 45 deletions(-) diff --git a/public/app/features/explore/RichHistory/RichHistory.test.tsx b/public/app/features/explore/RichHistory/RichHistory.test.tsx index 1b978d1b7a2..5c576e1701b 100644 --- a/public/app/features/explore/RichHistory/RichHistory.test.tsx +++ b/public/app/features/explore/RichHistory/RichHistory.test.tsx @@ -4,6 +4,7 @@ import { GrafanaTheme } from '@grafana/data'; import { ExploreId } from '../../../types/explore'; import { RichHistory, RichHistoryProps } from './RichHistory'; import { Tabs } from './RichHistory'; +import { Tab, Slider } from '@grafana/ui'; jest.mock('../state/selectors', () => ({ getExploreDatasources: jest.fn() })); @@ -24,18 +25,37 @@ const setup = (propOverrides?: Partial) => { }; describe('RichHistory', () => { - it('should correctly render all tabs in tab bar', () => { + it('should render all tabs in tab bar', () => { const wrapper = setup(); - expect(wrapper.html()).toContain('Query history'); - expect(wrapper.html()).toContain('Starred'); - expect(wrapper.html()).toContain('Settings'); + expect(wrapper.find(Tab)).toHaveLength(3); + }); + it('should render correct lebels of tabs in tab bar', () => { + const wrapper = setup(); + expect( + wrapper + .find(Tab) + .at(0) + .text() + ).toEqual('Query history'); + expect( + wrapper + .find(Tab) + .at(1) + .text() + ).toEqual('Starred'); + expect( + wrapper + .find(Tab) + .at(2) + .text() + ).toEqual('Settings'); }); it('should correctly render query history tab as active tab', () => { const wrapper = setup(); - expect(wrapper.html()).toContain('slider'); + expect(wrapper.find(Slider)).toHaveLength(1); }); it('should correctly render starred tab as active tab', () => { const wrapper = setup({ firstTab: Tabs.Starred }); - expect(wrapper.html()).not.toContain('slider'); + expect(wrapper.find(Slider)).toHaveLength(0); }); }); diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.test.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.test.tsx index 5423427cbbf..c1e5ff90901 100644 --- a/public/app/features/explore/RichHistory/RichHistoryCard.test.tsx +++ b/public/app/features/explore/RichHistory/RichHistoryCard.test.tsx @@ -42,44 +42,61 @@ const starredQueryWithComment = { describe('RichHistoryCard', () => { it('should render all queries', () => { const wrapper = setup(); - expect(wrapper.html()).toContain('query1'); - expect(wrapper.html()).toContain('query2'); - expect(wrapper.html()).toContain('query3'); + expect(wrapper.find({ 'aria-label': 'Query text' })).toHaveLength(3); + expect( + wrapper + .find({ 'aria-label': 'Query text' }) + .at(0) + .text() + ).toEqual('query1'); + expect( + wrapper + .find({ 'aria-label': 'Query text' }) + .at(1) + .text() + ).toEqual('query2'); + expect( + wrapper + .find({ 'aria-label': 'Query text' }) + .at(2) + .text() + ).toEqual('query3'); }); describe('commenting', () => { it('should render comment, if comment present', () => { const wrapper = setup({ query: starredQueryWithComment }); - expect(wrapper.html()).toContain('test comment'); + expect(wrapper.find({ 'aria-label': 'Query comment' })).toHaveLength(1); + expect(wrapper.find({ 'aria-label': 'Query comment' }).text()).toEqual('test comment'); }); it('should have title "Edit comment" at comment icon, if comment present', () => { const wrapper = setup({ query: starredQueryWithComment }); - expect(wrapper.html()).toContain('Edit comment'); + expect(wrapper.find({ title: 'Edit comment' })).toHaveLength(1); + expect(wrapper.find({ title: 'Add comment' })).toHaveLength(0); }); it('should have title "Add comment" at comment icon, if no comment present', () => { const wrapper = setup(); - expect(wrapper.html()).toContain('Add comment'); + expect(wrapper.find({ title: 'Add comment' })).toHaveLength(1); + expect(wrapper.find({ title: 'Edit comment' })).toHaveLength(0); }); }); describe('starring', () => { - it('should render fa-star-o icon, if not starred', () => { - const wrapper = setup(); - expect(wrapper.html()).toContain('fa-star-o'); - }); it('should have title "Star query", if not starred', () => { const wrapper = setup(); - expect(wrapper.html()).toContain('Star query'); + expect(wrapper.find({ title: 'Star query' })).toHaveLength(1); }); - - it('should have fa-star icon, if starred', () => { - const wrapper = setup({ query: starredQueryWithComment }); - expect(wrapper.html()).toContain('fa-star'); + it('should render fa-star-o icon, if not starred', () => { + const wrapper = setup(); + expect(wrapper.find({ title: 'Star query' }).hasClass('fa-star-o')).toBe(true); }); - - it('should have title "Unstar query", if starred', () => { + it('should have title "Unstar query", if not starred', () => { const wrapper = setup({ query: starredQueryWithComment }); - expect(wrapper.html()).toContain('Unstar query'); + expect(wrapper.find({ title: 'Unstar query' })).toHaveLength(1); + }); + it('should have fa-star icon, if not starred', () => { + const wrapper = setup({ query: starredQueryWithComment }); + expect(wrapper.find({ title: 'Unstar query' }).hasClass('fa-star')).toBe(true); }); }); }); diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.tsx index d12e0ef9199..8cb79dfd908 100644 --- a/public/app/features/explore/RichHistory/RichHistoryCard.tsx +++ b/public/app/features/explore/RichHistory/RichHistoryCard.tsx @@ -117,12 +117,16 @@ export function RichHistoryCard(props: Props) {
onChangeQuery(query)}> {query.queries.map((q, i) => { return ( -
+
{q}
); })} - {!activeUpdateComment && query.comment &&
{query.comment}
} + {!activeUpdateComment && query.comment && ( +
+ {query.comment} +
+ )} {activeUpdateComment && (
{ }); it('should render component with correct width', () => { const wrapper = setup(); - expect(wrapper.html()).toContain('width: 531.5px'); + expect(wrapper.getDOMNode().getAttribute('style')).toContain('width: 531.5px'); }); it('should render component with correct height', () => { const wrapper = setup(); - expect(wrapper.html()).toContain('height: 400px'); + expect(wrapper.getDOMNode().getAttribute('style')).toContain('height: 400px'); }); }); diff --git a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.test.tsx b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.test.tsx index 03795fdd367..83d21a6818d 100644 --- a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.test.tsx +++ b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.test.tsx @@ -3,6 +3,7 @@ import { mount } from 'enzyme'; import { ExploreId } from '../../../types/explore'; import { SortOrder } from 'app/core/utils/explore'; import { RichHistoryQueriesTab, Props } from './RichHistoryQueriesTab'; +import { Slider } from '@grafana/ui'; jest.mock('../state/selectors', () => ({ getExploreDatasources: jest.fn() })); @@ -28,31 +29,40 @@ describe('RichHistoryQueriesTab', () => { describe('slider', () => { it('should render slider', () => { const wrapper = setup(); - expect(wrapper.html()).toContain('aria-label="Slider'); + expect(wrapper.find(Slider)).toHaveLength(1); }); it('should render slider with correct timerange', () => { const wrapper = setup(); - expect(wrapper.html()).toContain('today'); - expect(wrapper.html()).toContain('two weeks ago'); + expect( + wrapper + .find('.label-slider') + .at(1) + .text() + ).toEqual('today'); + expect( + wrapper + .find('.label-slider') + .at(2) + .text() + ).toEqual('two weeks ago'); }); }); describe('sort options', () => { it('should render sorter', () => { const wrapper = setup(); - expect(wrapper.html()).toContain('aria-label="Sort queries"'); + expect(wrapper.find({ 'aria-label': 'Sort queries' })).toHaveLength(1); }); }); describe('select datasource', () => { it('should render select datasource if activeDatasourceOnly is false', () => { const wrapper = setup(); - expect(wrapper.html()).toContain('aria-label="Filter datasources"'); + expect(wrapper.find({ 'aria-label': 'Filter datasources' })).toHaveLength(1); }); - it('should not render select datasource if activeDatasourceOnly is true', () => { const wrapper = setup({ activeDatasourceOnly: true }); - expect(wrapper.html()).not.toContain('aria-label="filter datasources"'); + expect(wrapper.find({ 'aria-label': 'Filter datasources' })).toHaveLength(0); }); }); }); diff --git a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx index c4c7e5eb19e..fe4964ffdab 100644 --- a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx +++ b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx @@ -162,7 +162,7 @@ export function RichHistoryQueriesTab(props: Props) { return (
-
+
Filter history
between diff --git a/public/app/features/explore/RichHistory/RichHistorySettings.test.tsx b/public/app/features/explore/RichHistory/RichHistorySettings.test.tsx index 99f73a7ca5e..1e1257d11ae 100644 --- a/public/app/features/explore/RichHistory/RichHistorySettings.test.tsx +++ b/public/app/features/explore/RichHistory/RichHistorySettings.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { mount } from 'enzyme'; import { RichHistorySettings, RichHistorySettingsProps } from './RichHistorySettings'; +import { Forms } from '@grafana/ui'; const setup = (propOverrides?: Partial) => { const props: RichHistorySettingsProps = { @@ -20,19 +21,26 @@ const setup = (propOverrides?: Partial) => { }; describe('RichHistorySettings', () => { - it('whould render without errors', () => { - setup(); - }); it('should render component with correct retention period', () => { const wrapper = setup(); - expect(wrapper.html()).toContain('2 weeks'); + expect(wrapper.find(Forms.Select).text()).toEqual('2 weeks'); }); it('should render component with correctly checked starredTabAsFirstTab settings', () => { const wrapper = setup(); - expect(wrapper.html()).toContain(''); + expect( + wrapper + .find(Forms.Switch) + .at(0) + .prop('value') + ).toBe(true); }); it('should render component with correctly not checked toggleactiveDatasourceOnly settings', () => { const wrapper = setup(); - expect(wrapper.html()).toContain(''); + expect( + wrapper + .find(Forms.Switch) + .at(1) + .prop('value') + ).toBe(false); }); }); diff --git a/public/app/features/explore/RichHistory/RichHistoryStarredTab.test.tsx b/public/app/features/explore/RichHistory/RichHistoryStarredTab.test.tsx index 7fe299dbb8e..f1dc2df53b2 100644 --- a/public/app/features/explore/RichHistory/RichHistoryStarredTab.test.tsx +++ b/public/app/features/explore/RichHistory/RichHistoryStarredTab.test.tsx @@ -27,19 +27,19 @@ describe('RichHistoryStarredTab', () => { describe('sorter', () => { it('should render sorter', () => { const wrapper = setup(); - expect(wrapper.html()).toContain('aria-label="Sort queries"'); + expect(wrapper.find({ 'aria-label': 'Sort queries' })).toHaveLength(1); }); }); describe('select datasource', () => { it('should render select datasource if activeDatasourceOnly is false', () => { const wrapper = setup(); - expect(wrapper.html()).toContain('aria-label="Filter datasources"'); + expect(wrapper.find({ 'aria-label': 'Filter datasources' })).toHaveLength(1); }); it('should not render select datasource if activeDatasourceOnly is true', () => { const wrapper = setup({ activeDatasourceOnly: true }); - expect(wrapper.html()).not.toContain('aria-label="Filter datasources"'); + expect(wrapper.find({ 'aria-label': 'Filter datasources' })).toHaveLength(0); }); }); });