Fix tests for components

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<RichHistoryProps>) => {
 };
 
 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);
   });
 });

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);
     });
   });
 });

public/app/features/explore/RichHistory/RichHistoryCard.tsx

@@ -117,12 +117,16 @@ export function RichHistoryCard(props: Props) {
       <div className={styles.queryCardLeft} onClick={() => onChangeQuery(query)}>
         {query.queries.map((q, i) => {
           return (
-            <div key={`${q}-${i}`} className={styles.queryRow}>
+            <div aria-label="Query text" key={`${q}-${i}`} className={styles.queryRow}>
               {q}
             </div>
           );
         })}
-        {!activeUpdateComment && query.comment && <div className={styles.comment}>{query.comment}</div>}
+        {!activeUpdateComment && query.comment && (
+          <div aria-label="Query comment" className={styles.comment}>
+            {query.comment}
+          </div>
+        )}
         {activeUpdateComment && (
           <div>
             <Forms.TextArea

public/app/features/explore/RichHistory/RichHistoryContainer.test.tsx

@@ -31,10 +31,10 @@ describe('RichHistoryContainer', () => {
   });
   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');
   });
 });

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);
     });
   });
 });

public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx

@@ -162,7 +162,7 @@ export function RichHistoryQueriesTab(props: Props) {
   return (
     <div className={styles.container}>
       <div className={styles.containerSlider}>
-        <div className={styles.slider} aria-label="Slider">
+        <div className={styles.slider}>
           <div className="label-slider">
             Filter history <br />
             between

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<RichHistorySettingsProps>) => {
   const props: RichHistorySettingsProps = {
@@ -20,19 +21,26 @@ const setup = (propOverrides?: Partial<RichHistorySettingsProps>) => {
 };
 
 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('<input type="checkbox" id="switch-5" checked="">');
+    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('<input type="checkbox" id="switch-8">');
+    expect(
+      wrapper
+        .find(Forms.Switch)
+        .at(1)
+        .prop('value')
+    ).toBe(false);
   });
 });

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);
     });
   });
 });