more jest stuff

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",

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}

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">

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[];

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(),
+  }));
+}

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