From 3710c9a7c857dda78ed724b84bb25c29b89c3c4e Mon Sep 17 00:00:00 2001
From: Seyaji <67058118+Seyaji@users.noreply.github.com>
Date: Tue, 21 Jun 2022 11:47:54 +0100
Subject: [PATCH] Chore: Convert DataSourcesListPage test to RTL (#51138)

* Convert DataSourceListPage test to RTL

* Convert DataSourceListPage test to RTL
---
 .betterer.results                             |   3 -
 .../datasources/DataSourcesListPage.test.tsx  |  21 ++-
 .../DataSourcesListPage.test.tsx.snap         | 150 ------------------
 3 files changed, 15 insertions(+), 159 deletions(-)
 delete mode 100644 public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap

diff --git a/.betterer.results b/.betterer.results
index 6166bdc880a..757ecfe1763 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -116,9 +116,6 @@ exports[`no enzyme tests`] = {
     "public/app/features/datasources/DataSourceDashboards.test.tsx:1369048021": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/datasources/DataSourcesListPage.test.tsx:2960099202": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx:4164297658": [
       [0, 17, 13, "RegExp match", "2409514259"]
     ],
diff --git a/public/app/features/datasources/DataSourcesListPage.test.tsx b/public/app/features/datasources/DataSourcesListPage.test.tsx
index c26bd1af413..34ee0dc69ac 100644
--- a/public/app/features/datasources/DataSourcesListPage.test.tsx
+++ b/public/app/features/datasources/DataSourcesListPage.test.tsx
@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { DataSourceSettings, NavModel, LayoutModes } from '@grafana/data';
@@ -37,23 +37,32 @@ const setup = (propOverrides?: object) => {
 
   Object.assign(props, propOverrides);
 
-  return shallow(<DataSourcesListPage {...props} />);
+  return render(<DataSourcesListPage {...props} />);
 };
 
 describe('Render', () => {
   it('should render component', () => {
-    const wrapper = setup();
+    setup();
 
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByRole('heading', { name: 'Configuration' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Documentation' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Support' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Community' })).toBeInTheDocument();
   });
 
   it('should render action bar and datasources', () => {
-    const wrapper = setup({
+    setup({
       dataSources: getMockDataSources(5),
       dataSourcesCount: 5,
       hasFetched: true,
     });
 
-    expect(wrapper).toMatchSnapshot();
+    expect(screen.getByRole('link', { name: 'Add data source' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'dataSource-0' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'dataSource-1' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'dataSource-2' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'dataSource-3' })).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: 'dataSource-4' })).toBeInTheDocument();
+    expect(screen.getAllByRole('img')).toHaveLength(5);
   });
 });
diff --git a/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap b/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap
deleted file mode 100644
index 90e246afa70..00000000000
--- a/public/app/features/datasources/__snapshots__/DataSourcesListPage.test.tsx.snap
+++ /dev/null
@@ -1,150 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render action bar and datasources 1`] = `
-<Page
-  navModel={
-    Object {
-      "main": Object {
-        "text": "Configuration",
-      },
-      "node": Object {
-        "text": "Data Sources",
-      },
-    }
-  }
->
-  <PageContents
-    isLoading={false}
-  >
-    <PageActionBar
-      key="action-bar"
-      linkButton={
-        Object {
-          "disabled": false,
-          "href": "datasources/new",
-          "title": "Add data source",
-        }
-      }
-      searchQuery=""
-      setSearchQuery={[Function]}
-    />
-    <DataSourcesList
-      dataSources={
-        Array [
-          Object {
-            "access": "",
-            "basicAuth": false,
-            "database": "database-0",
-            "id": 0,
-            "isDefault": false,
-            "jsonData": Object {
-              "authType": "credentials",
-              "defaultRegion": "eu-west-2",
-            },
-            "name": "dataSource-0",
-            "orgId": 1,
-            "readOnly": false,
-            "type": "cloudwatch",
-            "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
-            "url": "",
-            "user": "",
-          },
-          Object {
-            "access": "",
-            "basicAuth": false,
-            "database": "database-1",
-            "id": 1,
-            "isDefault": false,
-            "jsonData": Object {
-              "authType": "credentials",
-              "defaultRegion": "eu-west-2",
-            },
-            "name": "dataSource-1",
-            "orgId": 1,
-            "readOnly": false,
-            "type": "cloudwatch",
-            "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
-            "url": "",
-            "user": "",
-          },
-          Object {
-            "access": "",
-            "basicAuth": false,
-            "database": "database-2",
-            "id": 2,
-            "isDefault": false,
-            "jsonData": Object {
-              "authType": "credentials",
-              "defaultRegion": "eu-west-2",
-            },
-            "name": "dataSource-2",
-            "orgId": 1,
-            "readOnly": false,
-            "type": "cloudwatch",
-            "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
-            "url": "",
-            "user": "",
-          },
-          Object {
-            "access": "",
-            "basicAuth": false,
-            "database": "database-3",
-            "id": 3,
-            "isDefault": false,
-            "jsonData": Object {
-              "authType": "credentials",
-              "defaultRegion": "eu-west-2",
-            },
-            "name": "dataSource-3",
-            "orgId": 1,
-            "readOnly": false,
-            "type": "cloudwatch",
-            "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
-            "url": "",
-            "user": "",
-          },
-          Object {
-            "access": "",
-            "basicAuth": false,
-            "database": "database-4",
-            "id": 4,
-            "isDefault": false,
-            "jsonData": Object {
-              "authType": "credentials",
-              "defaultRegion": "eu-west-2",
-            },
-            "name": "dataSource-4",
-            "orgId": 1,
-            "readOnly": false,
-            "type": "cloudwatch",
-            "typeLogoUrl": "public/app/plugins/datasource/cloudwatch/img/amazon-web-services.png",
-            "url": "",
-            "user": "",
-          },
-        ]
-      }
-      key="list"
-      layoutMode="grid"
-    />
-  </PageContents>
-</Page>
-`;
-
-exports[`Render should render component 1`] = `
-<Page
-  navModel={
-    Object {
-      "main": Object {
-        "text": "Configuration",
-      },
-      "node": Object {
-        "text": "Data Sources",
-      },
-    }
-  }
->
-  <PageContents
-    isLoading={true}
-  />
-</Page>
-`;