DevEnv: update frontend dependencies - tests (#22140)

* DevEnv: updates @types/testing-library__react-hooks 3.1.0 -> 3.2.0

* DevEnv: updates @types/enzyme-adapter-react-16 1.0.5 -> 1.0.6

* DevEnv: updates @types/react-test-renderer 16.9.0 -> 16.9.2

* DevEnv: updates react-test-renderer 16.9.0 -> 16.12.0

* DevEnv: updates @types/enzyme 3.9.0 -> 3.10.5

* DevEnv: updates enzyme-adapter-react-16 1.0.6 -> 1.15.2

* DevEnv: updates enzyme 3.9.0 -> 3.11.0

* Fix: updates snapshots

* Fix: updates tests

* DevEnv: updates enzyme-to-json 3.3.5 -> 3.4.4

* DevEnv: updates expect.js 0.2.0 -> 0.3.1

* DevEnv: updates @types/puppeteer-core 1.9.0 -> 2.0.0

* DevEnv: updates puppeteer-core 1.15.0 -> 2.1.1

* DevEnv: updates @types/expect-puppeteer 3.3.1 -> 4.4.0

* DevEnv: updates expect-puppeteer 4.1.1 -> 4.4.0

* DevEnv: updates mocha 4.1.0 -> 7.0.1

package.json

@@ -25,9 +25,9 @@
     "@types/clipboard": "2.0.1",
     "@types/d3": "5.7.2",
     "@types/d3-scale-chromatic": "1.3.1",
-    "@types/enzyme": "3.9.0",
-    "@types/enzyme-adapter-react-16": "1.0.5",
-    "@types/expect-puppeteer": "3.3.1",
+    "@types/enzyme": "3.10.5",
+    "@types/enzyme-adapter-react-16": "1.0.6",
+    "@types/expect-puppeteer": "4.4.0",
     "@types/file-saver": "2.0.1",
     "@types/hoist-non-react-statics": "3.3.0",
     "@types/is-hotkey": "0.1.1",
@@ -42,13 +42,13 @@
     "@types/pixelmatch": "4.0.0",
     "@types/pngjs": "3.4.1",
     "@types/prismjs": "1.16.0",
-    "@types/puppeteer-core": "1.9.0",
+    "@types/puppeteer-core": "2.0.0",
     "@types/react": "16.8.16",
     "@types/react-dom": "16.8.4",
     "@types/react-grid-layout": "0.16.7",
     "@types/react-redux": "7.1.2",
     "@types/react-select": "3.0.8",
-    "@types/react-test-renderer": "16.9.0",
+    "@types/react-test-renderer": "16.9.2",
     "@types/react-transition-group": "2.0.16",
     "@types/react-window": "1.7.0",
     "@types/redux-logger": "3.0.7",
@@ -57,7 +57,7 @@
     "@types/slate": "0.47.1",
     "@types/slate-plain-serializer": "0.6.1",
     "@types/slate-react": "0.22.5",
-    "@types/testing-library__react-hooks": "^3.1.0",
+    "@types/testing-library__react-hooks": "^3.2.0",
     "@types/tinycolor2": "1.4.2",
     "@typescript-eslint/eslint-plugin": "2.19.0",
     "@typescript-eslint/parser": "2.19.0",
@@ -70,9 +70,9 @@
     "babel-plugin-angularjs-annotate": "0.10.0",
     "clean-webpack-plugin": "2.0.0",
     "css-loader": "2.1.1",
-    "enzyme": "3.9.0",
-    "enzyme-adapter-react-16": "1.11.2",
-    "enzyme-to-json": "3.3.5",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.2",
+    "enzyme-to-json": "3.4.4",
     "es6-promise": "3.3.1",
     "es6-shim": "0.35.5",
     "eslint": "6.8.0",
@@ -81,8 +81,8 @@
     "eslint-plugin-jsdoc": "21.0.0",
     "eslint-plugin-prettier": "3.1.2",
     "eslint-plugin-react": "7.18.3",
-    "expect-puppeteer": "4.1.1",
-    "expect.js": "0.2.0",
+    "expect-puppeteer": "4.4.0",
+    "expect.js": "0.3.1",
     "expose-loader": "0.7.5",
     "file-loader": "3.0.1",
     "fork-ts-checker-webpack-plugin": "1.0.0",
@@ -112,7 +112,7 @@
     "lint-staged": "8.1.5",
     "load-grunt-tasks": "5.1.0",
     "mini-css-extract-plugin": "0.5.0",
-    "mocha": "4.1.0",
+    "mocha": "7.0.1",
     "module-alias": "2.2.0",
     "monaco-editor": "0.15.6",
     "ngtemplate-loader": "2.0.1",
@@ -126,9 +126,9 @@
     "postcss-loader": "3.0.0",
     "postcss-reporter": "6.0.1",
     "prettier": "1.19.1",
-    "puppeteer-core": "1.15.0",
+    "puppeteer-core": "2.1.1",
     "react-hot-loader": "4.8.0",
-    "react-test-renderer": "16.9.0",
+    "react-test-renderer": "16.12.0",
     "redux-mock-store": "1.5.3",
     "regexp-replace-loader": "1.0.1",
     "rimraf": "2.6.3",

packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.test.tsx

@@ -27,10 +27,10 @@ describe('ConfirmModal', () => {
         onDismiss={() => {}}
       />
     );
-    expect(wrapper.html()).toBe(null);
+    expect(wrapper.html()).toBe('');
 
     wrapper.setProps({ ...wrapper.props(), isOpen: false });
-    expect(wrapper.html()).toBe(null);
+    expect(wrapper.html()).toBe('');
   });
 
   it('renders correct contents', () => {

packages/grafana-ui/src/components/Modal/Modal.test.tsx

@@ -9,10 +9,10 @@ describe('Modal', () => {
 
   it('renders nothing by default or when isOpen is false', () => {
     const wrapper = mount(<Modal title={'Some Title'} />);
-    expect(wrapper.html()).toBe(null);
+    expect(wrapper.html()).toBe('');
 
     wrapper.setProps({ ...wrapper.props(), isOpen: false });
-    expect(wrapper.html()).toBe(null);
+    expect(wrapper.html()).toBe('');
   });
 
   it('renders correct contents', () => {

packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap

@@ -41,7 +41,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
           <i
             className="fa fa-clock-o fa-fw"
           />
-          <Component
+          <Memo()
             onChange={[Function]}
             onMoveBackward={[Function]}
             onMoveForward={[Function]}
@@ -348,7 +348,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
           <i
             className="fa fa-clock-o fa-fw"
           />
-          <Component
+          <Memo()
             onChange={[Function]}
             onMoveBackward={[Function]}
             onMoveForward={[Function]}

public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
 <div
   className=""
 >
-  <Component
+  <Connect(DashNav)
     $injector={Object {}}
     dashboard={
       DashboardModel {
@@ -338,7 +338,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
 <div
   className="dashboard-page--settings-opening"
 >
-  <Component
+  <Connect(DashNav)
     $injector={Object {}}
     dashboard={
       DashboardModel {

public/app/features/dashboard/dashgrid/__snapshots__/DashboardGrid.test.tsx.snap

@@ -49,7 +49,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
     id="panel-1"
     key="1"
   >
-    <Component
+    <Connect(DashboardPanelUnconnected)
       dashboard={
         DashboardModel {
           "annotations": Object {
@@ -296,7 +296,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
     id="panel-2"
     key="2"
   >
-    <Component
+    <Connect(DashboardPanelUnconnected)
       dashboard={
         DashboardModel {
           "annotations": Object {
@@ -543,7 +543,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
     id="panel-3"
     key="3"
   >
-    <Component
+    <Connect(DashboardPanelUnconnected)
       dashboard={
         DashboardModel {
           "annotations": Object {
@@ -790,7 +790,7 @@ exports[`DashboardGrid Can render dashboard grid Should render 1`] = `
     id="panel-4"
     key="4"
   >
-    <Component
+    <Connect(DashboardPanelUnconnected)
       dashboard={
         DashboardModel {
           "annotations": Object {

public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap

@@ -4,12 +4,12 @@ exports[`MetaInfoText should render component 1`] = `
 <div
   className="css-mi7ebz"
 >
-  <Component
+  <Memo(MetaInfoItem)
     key="0-label"
     label="label"
     value="value"
   />
-  <Component
+  <Memo(MetaInfoItem)
     key="1-label2"
     label="label2"
     value="value2"

public/app/features/explore/__snapshots__/TableContainer.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`TableContainer should render component 1`] = `
   loading={false}
   onToggle={[Function]}
 >
-  <Component
+  <Memo(MetaInfoText)
     metaItems={
       Array [
         Object {

public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap

@@ -183,7 +183,7 @@ exports[`Render should render team members 1`] = `
         </tr>
       </thead>
       <tbody>
-        <Component
+        <Connect(TeamMemberRow)
           editorsCanAdmin={false}
           key="1"
           member={
@@ -204,7 +204,7 @@ exports[`Render should render team members 1`] = `
           signedInUserIsTeamAdmin={true}
           syncEnabled={false}
         />
-        <Component
+        <Connect(TeamMemberRow)
           editorsCanAdmin={false}
           key="2"
           member={
@@ -225,7 +225,7 @@ exports[`Render should render team members 1`] = `
           signedInUserIsTeamAdmin={true}
           syncEnabled={false}
         />
-        <Component
+        <Connect(TeamMemberRow)
           editorsCanAdmin={false}
           key="3"
           member={
@@ -246,7 +246,7 @@ exports[`Render should render team members 1`] = `
           signedInUserIsTeamAdmin={true}
           syncEnabled={false}
         />
-        <Component
+        <Connect(TeamMemberRow)
           editorsCanAdmin={false}
           key="4"
           member={
@@ -267,7 +267,7 @@ exports[`Render should render team members 1`] = `
           signedInUserIsTeamAdmin={true}
           syncEnabled={false}
         />
-        <Component
+        <Connect(TeamMemberRow)
           editorsCanAdmin={false}
           key="5"
           member={

public/app/features/teams/__snapshots__/TeamPages.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`Render should render group sync page 1`] = `
   <PageContents
     isLoading={true}
   >
-    <Component />
+    <Connect(TeamGroupSync) />
   </PageContents>
 </Page>
 `;
@@ -29,7 +29,7 @@ exports[`Render should render member page if team not empty 1`] = `
   <PageContents
     isLoading={true}
   >
-    <Component
+    <Connect(TeamMembers)
       members={Array []}
       syncEnabled={true}
     />
@@ -44,7 +44,7 @@ exports[`Render should render settings and preferences page 1`] = `
   <PageContents
     isLoading={true}
   >
-    <Component />
+    <Connect(TeamSettings) />
   </PageContents>
 </Page>
 `;
@@ -66,7 +66,7 @@ exports[`Render when feature toggle editorsCanAdmin is turned on should render s
   <PageContents
     isLoading={true}
   >
-    <Component />
+    <Connect(TeamSettings) />
   </PageContents>
 </Page>
 `;

public/app/features/users/__snapshots__/InviteesTable.test.tsx.snap

@@ -49,7 +49,7 @@ exports[`Render should render invitees 1`] = `
     </tr>
   </thead>
   <tbody>
-    <Component
+    <Connect(InviteeRow)
       invitee={
         Object {
           "code": "asdfasdfsadf-0",
@@ -70,7 +70,7 @@ exports[`Render should render invitees 1`] = `
       }
       key="0-0"
     />
-    <Component
+    <Connect(InviteeRow)
       invitee={
         Object {
           "code": "asdfasdfsadf-1",
@@ -91,7 +91,7 @@ exports[`Render should render invitees 1`] = `
       }
       key="1-1"
     />
-    <Component
+    <Connect(InviteeRow)
       invitee={
         Object {
           "code": "asdfasdfsadf-2",
@@ -112,7 +112,7 @@ exports[`Render should render invitees 1`] = `
       }
       key="2-2"
     />
-    <Component
+    <Connect(InviteeRow)
       invitee={
         Object {
           "code": "asdfasdfsadf-3",
@@ -133,7 +133,7 @@ exports[`Render should render invitees 1`] = `
       }
       key="3-3"
     />
-    <Component
+    <Connect(InviteeRow)
       invitee={
         Object {
           "code": "asdfasdfsadf-4",
@@ -154,7 +154,7 @@ exports[`Render should render invitees 1`] = `
       }
       key="4-4"
     />
-    <Component
+    <Connect(InviteeRow)
       invitee={
         Object {
           "code": "asdfasdfsadf-5",

public/app/features/users/__snapshots__/UsersListPage.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`Render should render List page 1`] = `
   <PageContents
     isLoading={false}
   >
-    <Component
+    <Connect(UsersActionBar)
       onShowInvites={[Function]}
       showInvites={false}
     />
@@ -45,7 +45,7 @@ exports[`Render should render component 1`] = `
   <PageContents
     isLoading={true}
   >
-    <Component
+    <Connect(UsersActionBar)
       onShowInvites={[Function]}
       showInvites={false}
     />