From 07201fa8767dc39fe24518aea8934b346bdca001 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Tue, 11 Oct 2022 16:06:05 +0300
Subject: [PATCH] more jest stuff

---
 grafana-plugin/jest.config.js                 |  1 +
 .../src/components/GTable/GTable.tsx          | 12 +----
 .../OutgoingWebhookForm.tsx                   |  2 +-
 .../src/jest/outgoingWebhooksStub.ts          | 26 +++++++++
 grafana-plugin/src/jest/utils.ts              | 13 +++++
 .../OutgoingWebhooks.test.tsx                 | 53 +++++++++++++------
 6 files changed, 80 insertions(+), 27 deletions(-)
 create mode 100644 grafana-plugin/src/jest/outgoingWebhooksStub.ts
 create mode 100644 grafana-plugin/src/jest/utils.ts

diff --git a/grafana-plugin/jest.config.js b/grafana-plugin/jest.config.js
index 76f95be8..31684c09 100644
--- a/grafana-plugin/jest.config.js
+++ b/grafana-plugin/jest.config.js
@@ -21,6 +21,7 @@ module.exports = {
 
   moduleNameMapper: {
     "grafana/app/(.*)": '<rootDir>/src/jest/grafanaMock.ts',
+    "jest/outgoingWebhooksStub": '<rootDir>/src/jest/outgoingWebhooksStub.ts',
     "^jest$": '<rootDir>/src/jest',
     '^.+\\.(css|scss)$': '<rootDir>/src/jest/styleMock.ts',
     "^lodash-es$": "lodash",
diff --git a/grafana-plugin/src/components/GTable/GTable.tsx b/grafana-plugin/src/components/GTable/GTable.tsx
index 0e6aaed5..0706ff6f 100644
--- a/grafana-plugin/src/components/GTable/GTable.tsx
+++ b/grafana-plugin/src/components/GTable/GTable.tsx
@@ -107,16 +107,6 @@ const GTable: FC<Props> = (props) => {
     [data]
   );
 
-  /* useEffect(() => { // todo clear selection on data change
-    if (rowSelection && rowSelection.selectedRowKeys.length) {
-      const { selectedRowKeys, onChange } = rowSelection;
-      const newSelectedRowKeys = selectedRowKeys.filter((key: string) =>
-        data.some((item: any) => item[rowKey as string] === key)
-      );
-      onChange(newSelectedRowKeys);
-    }
-  }, [data?.length]); */
-
   const columns = useMemo(() => {
     const columns = [...columnsProp];
 
@@ -146,7 +136,7 @@ const GTable: FC<Props> = (props) => {
   }, [rowSelection, columnsProp, data]);
 
   return (
-    <div className={cx('root')}>
+    <div className={cx('root')} data-testid="test__gTable">
       <Table
         expandable={expandable}
         rowKey={rowKey}
diff --git a/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.tsx b/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.tsx
index 76891c47..47317d42 100644
--- a/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.tsx
+++ b/grafana-plugin/src/containers/OutgoingWebhookForm/OutgoingWebhookForm.tsx
@@ -54,7 +54,7 @@ const OutgoingWebhookForm = observer((props: OutgoingWebhookFormProps) => {
       onClose={onHide}
       closeOnMaskClick
     >
-      <div className={cx('content')}>
+      <div className={cx('content')} data-testid="test__outgoingWebhookEditForm">
         <GForm form={form} data={data} onSubmit={handleSubmit} />
         <WithPermissionControl userAction={UserAction.UpdateCustomActions}>
           <Button form={form.name} type="submit">
diff --git a/grafana-plugin/src/jest/outgoingWebhooksStub.ts b/grafana-plugin/src/jest/outgoingWebhooksStub.ts
new file mode 100644
index 00000000..850b89c3
--- /dev/null
+++ b/grafana-plugin/src/jest/outgoingWebhooksStub.ts
@@ -0,0 +1,26 @@
+import { OutgoingWebhook } from "models/outgoing_webhook/outgoing_webhook.types";
+
+export default [
+  {
+    id: 'K2E45EI2586HS',
+    name: 'hook-1',
+    team: null,
+    webhook: 'http://google.ro',
+    data: null,
+    user: 'rares',
+    password: 'password',
+    authorization_header: 'auth-header',
+    forward_whole_payload: false,
+  },
+  {
+    id: 'KL3UZQQF2KE5V',
+    name: 'hook-3',
+    team: null,
+    webhook: 'http://google.ro',
+    data: null,
+    user: null,
+    password: null,
+    authorization_header: null,
+    forward_whole_payload: false,
+  },
+] as OutgoingWebhook[];
diff --git a/grafana-plugin/src/jest/utils.ts b/grafana-plugin/src/jest/utils.ts
new file mode 100644
index 00000000..b187f6e9
--- /dev/null
+++ b/grafana-plugin/src/jest/utils.ts
@@ -0,0 +1,13 @@
+export function mockUseStore() {
+  jest.mock('state/useStore', () => ({
+    useStore: () => ({
+      isUserActionAllowed: jest.fn().mockReturnValue(true),
+    }),
+  }));
+}
+
+export function mockGrafanaLocationSrv() {
+  jest.mock('@grafana/runtime', () => ({
+    getLocationSrv: jest.fn(),
+  }));
+}
diff --git a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.test.tsx b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.test.tsx
index 1f87f5dd..f0dfc69f 100644
--- a/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.test.tsx
+++ b/grafana-plugin/src/pages/outgoing_webhooks/OutgoingWebhooks.test.tsx
@@ -7,31 +7,54 @@ import React from 'react';
 import '@testing-library/jest-dom';
 import { OutgoingWebhooks } from './OutgoingWebhooks';
 
+import outgoingWebhooksStub from 'jest/outgoingWebhooksStub';
+import { mockGrafanaLocationSrv, mockUseStore } from 'jest/utils';
+import { OutgoingWebhook } from 'models/outgoing_webhook/outgoing_webhook.types';
+
 jest.mock('state/useStore', () => ({
   useStore: () => ({
     isUserActionAllowed: jest.fn().mockReturnValue(true),
   }),
 }));
-
 jest.mock('@grafana/runtime', () => ({
   getLocationSrv: jest.fn(),
 }));
 
-const storeMock = {
-  isUserActionAllowed: jest.fn().mockReturnValue(true),
-  outgoingWebhookStore: {
-    loadItem: () => Promise.resolve(undefined),
-    updateItems: jest.fn(),
-    getSearchResult: jest.fn(),
-  },
-};
-
 describe('OutgoingWebhooks', () => {
-  function getProps(): any {
-    return { store: storeMock, query: { id: undefined } };
+  const outgoingWebhooks = outgoingWebhooksStub as OutgoingWebhook[];
+
+  const storeMock = {
+    isUserActionAllowed: jest.fn().mockReturnValue(true),
+    outgoingWebhookStore: {
+      loadItem: () => Promise.resolve(outgoingWebhooks[0]),
+      updateItems: () => Promise.resolve(),
+      getSearchResult: () => outgoingWebhooks,
+      items: outgoingWebhooks
+    },
+  };
+
+  test('It renders all retrieved webhooks', async () => {
+    render(<OutgoingWebhooks {...getProps()} />);
+
+    const gTable = screen.queryByTestId('test__gTable');
+    const rows = gTable.querySelectorAll('tbody tr');
+
+    expect(getEditForm()).toBeNull(); // edit doesn't show for [id=undefined]
+    expect(rows.length).toBe(outgoingWebhooks.length);
+  });
+
+  test('It opens Edit View if [id] is supplied', async () => {
+    const id = outgoingWebhooks[0].id;
+    render(<OutgoingWebhooks {...getProps(id)} />);
+
+    expect(getEditForm()).toBeDefined(); // edit shows for [id=?]
+  });
+
+  function getProps(id: OutgoingWebhook['id'] = undefined): any {
+    return { store: storeMock, query: { id } };
   }
 
-  test('It renders', async () => {
-    render(<OutgoingWebhooks {...getProps()} />);
-  });
+  function getEditForm(): HTMLElement {
+    return screen.queryByTestId('test__outgoingWebhookEditForm');
+  }
 });