Add tests for ApiKeysPage #13411

public/app/features/api-keys/ApiKeysPage.test.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Props, ApiKeysPage } from './ApiKeysPage';
+import { NavModel, ApiKey } from 'app/types';
+import { getMultipleMockKeys, getMockKey } from './__mocks__/apiKeysMock';
+
+const setup = (propOverrides?: object) => {
+  const props: Props = {
+    navModel: {} as NavModel,
+    apiKeys: [] as ApiKey[],
+    searchQuery: '',
+    loadApiKeys: jest.fn(),
+    deleteApiKey: jest.fn(),
+    setSearchQuery: jest.fn(),
+    addApiKey: jest.fn(),
+  };
+
+  Object.assign(props, propOverrides);
+
+  const wrapper = shallow(<ApiKeysPage {...props} />);
+  const instance = wrapper.instance() as ApiKeysPage;
+
+  return {
+    wrapper,
+    instance,
+  };
+};
+
+describe('Render', () => {
+  it('should render component', () => {
+    const { wrapper } = setup();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it('should render API keys table', () => {
+    const { wrapper } = setup({
+      apiKeys: getMultipleMockKeys(5),
+    });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
+
+describe('Life cycle', () => {
+  it('should call loadApiKeys', () => {
+    const { instance } = setup();
+
+    instance.componentDidMount();
+
+    expect(instance.props.loadApiKeys).toHaveBeenCalled();
+  });
+});
+
+describe('Functions', () => {
+  describe('Delete team', () => {
+    it('should call delete team', () => {
+      const { instance } = setup();
+      instance.onDeleteApiKey(getMockKey());
+      expect(instance.props.deleteApiKey).toHaveBeenCalledWith(1);
+    });
+  });
+
+  describe('on search query change', () => {
+    it('should call setSearchQuery', () => {
+      const { instance } = setup();
+      const mockEvent = { target: { value: 'test' } };
+
+      instance.onSearchQueryChange(mockEvent);
+
+      expect(instance.props.setSearchQuery).toHaveBeenCalledWith('test');
+    });
+  });
+});

public/app/features/api-keys/ApiKeysPage.tsx

@@ -48,10 +48,8 @@ export class ApiKeysPage extends PureComponent<Props, any> {
     await this.props.loadApiKeys();
   }
 
-  onDeleteApiKey(id: number) {
-    return () => {
-      this.props.deleteApiKey(id);
-    };
+  onDeleteApiKey(key: ApiKey) {
+    this.props.deleteApiKey(key.id);
   }
 
   onSearchQueryChange = evt => {
@@ -111,8 +109,6 @@ export class ApiKeysPage extends PureComponent<Props, any> {
             </div>
 
             <div className="page-action-bar__spacer" />
-
-            {/* <button className="btn btn-success pull-right" onClick={this.onToggleAdding} disabled={isAdding}> */}
             <button className="btn btn-success pull-right" onClick={this.onToggleAdding} disabled={isAdding}>
               <i className="fa fa-plus" /> Add API Key
             </button>
@@ -180,7 +176,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
                       <td>{key.name}</td>
                       <td>{key.role}</td>
                       <td>
-                        <a onClick={this.onDeleteApiKey(key.id)} className="btn btn-danger btn-mini">
+                        <a onClick={this.onDeleteApiKey(key)} className="btn btn-danger btn-mini">
                           <i className="fa fa-remove" />
                         </a>
                       </td>

public/app/features/api-keys/__mocks__/apiKeysMock.ts

@@ -0,0 +1,22 @@
+import { ApiKey, OrgRole } from 'app/types';
+
+export const getMultipleMockKeys = (numberOfKeys: number): ApiKey[] => {
+  const keys: ApiKey[] = [];
+  for (let i = 1; i <= numberOfKeys; i++) {
+    keys.push({
+      id: i,
+      name: `test-${i}`,
+      role: OrgRole.Viewer,
+    });
+  }
+
+  return keys;
+};
+
+export const getMockKey = (): ApiKey => {
+  return {
+    id: 1,
+    name: 'test',
+    role: OrgRole.Admin,
+  };
+};

public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap

@@ -0,0 +1,430 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Render should render API keys table 1`] = `
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <div
+    className="page-container page-body"
+  >
+    <div
+      className="page-action-bar"
+    >
+      <div
+        className="gf-form gf-form--grow"
+      >
+        <label
+          className="gf-form--has-input-icon gf-form--grow"
+        >
+          <input
+            className="gf-form-input"
+            onChange={[Function]}
+            placeholder="Search keys"
+            type="text"
+            value=""
+          />
+          <i
+            className="gf-form-input-icon fa fa-search"
+          />
+        </label>
+      </div>
+      <div
+        className="page-action-bar__spacer"
+      />
+      <button
+        className="btn btn-success pull-right"
+        disabled={false}
+        onClick={[Function]}
+      >
+        <i
+          className="fa fa-plus"
+        />
+         Add API Key
+      </button>
+    </div>
+    <Component
+      in={false}
+    >
+      <div
+        className="cta-form"
+      >
+        <button
+          className="cta-form__close btn btn-transparent"
+          onClick={[Function]}
+        >
+          <i
+            className="fa fa-close"
+          />
+        </button>
+        <h5>
+          Add API Key
+        </h5>
+        <form
+          className="gf-form-group"
+          onSubmit={[Function]}
+        >
+          <div
+            className="gf-form-inline"
+          >
+            <div
+              className="gf-form max-width-21"
+            >
+              <span
+                className="gf-form-label"
+              >
+                Key name
+              </span>
+              <input
+                className="gf-form-input"
+                onChange={[Function]}
+                placeholder="Name"
+                type="text"
+                value=""
+              />
+            </div>
+            <div
+              className="gf-form"
+            >
+              <span
+                className="gf-form-label"
+              >
+                Role
+              </span>
+              <span
+                className="gf-form-select-wrapper"
+              >
+                <select
+                  className="gf-form-input gf-size-auto"
+                  onChange={[Function]}
+                  value="Viewer"
+                >
+                  <option
+                    key="Viewer"
+                    label="Viewer"
+                    value="Viewer"
+                  >
+                    Viewer
+                  </option>
+                  <option
+                    key="Editor"
+                    label="Editor"
+                    value="Editor"
+                  >
+                    Editor
+                  </option>
+                  <option
+                    key="Admin"
+                    label="Admin"
+                    value="Admin"
+                  >
+                    Admin
+                  </option>
+                </select>
+              </span>
+            </div>
+            <div
+              className="gf-form"
+            >
+              <button
+                className="btn gf-form-btn btn-success"
+              >
+                Add
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </Component>
+    <h3
+      className="page-heading"
+    >
+      Existing Keys
+    </h3>
+    <table
+      className="filter-table"
+    >
+      <thead>
+        <tr>
+          <th>
+            Name
+          </th>
+          <th>
+            Role
+          </th>
+          <th
+            style={
+              Object {
+                "width": "34px",
+              }
+            }
+          />
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          key="1"
+        >
+          <td>
+            test-1
+          </td>
+          <td>
+            Viewer
+          </td>
+          <td>
+            <a
+              className="btn btn-danger btn-mini"
+            >
+              <i
+                className="fa fa-remove"
+              />
+            </a>
+          </td>
+        </tr>
+        <tr
+          key="2"
+        >
+          <td>
+            test-2
+          </td>
+          <td>
+            Viewer
+          </td>
+          <td>
+            <a
+              className="btn btn-danger btn-mini"
+            >
+              <i
+                className="fa fa-remove"
+              />
+            </a>
+          </td>
+        </tr>
+        <tr
+          key="3"
+        >
+          <td>
+            test-3
+          </td>
+          <td>
+            Viewer
+          </td>
+          <td>
+            <a
+              className="btn btn-danger btn-mini"
+            >
+              <i
+                className="fa fa-remove"
+              />
+            </a>
+          </td>
+        </tr>
+        <tr
+          key="4"
+        >
+          <td>
+            test-4
+          </td>
+          <td>
+            Viewer
+          </td>
+          <td>
+            <a
+              className="btn btn-danger btn-mini"
+            >
+              <i
+                className="fa fa-remove"
+              />
+            </a>
+          </td>
+        </tr>
+        <tr
+          key="5"
+        >
+          <td>
+            test-5
+          </td>
+          <td>
+            Viewer
+          </td>
+          <td>
+            <a
+              className="btn btn-danger btn-mini"
+            >
+              <i
+                className="fa fa-remove"
+              />
+            </a>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`Render should render component 1`] = `
+<div>
+  <PageHeader
+    model={Object {}}
+  />
+  <div
+    className="page-container page-body"
+  >
+    <div
+      className="page-action-bar"
+    >
+      <div
+        className="gf-form gf-form--grow"
+      >
+        <label
+          className="gf-form--has-input-icon gf-form--grow"
+        >
+          <input
+            className="gf-form-input"
+            onChange={[Function]}
+            placeholder="Search keys"
+            type="text"
+            value=""
+          />
+          <i
+            className="gf-form-input-icon fa fa-search"
+          />
+        </label>
+      </div>
+      <div
+        className="page-action-bar__spacer"
+      />
+      <button
+        className="btn btn-success pull-right"
+        disabled={false}
+        onClick={[Function]}
+      >
+        <i
+          className="fa fa-plus"
+        />
+         Add API Key
+      </button>
+    </div>
+    <Component
+      in={false}
+    >
+      <div
+        className="cta-form"
+      >
+        <button
+          className="cta-form__close btn btn-transparent"
+          onClick={[Function]}
+        >
+          <i
+            className="fa fa-close"
+          />
+        </button>
+        <h5>
+          Add API Key
+        </h5>
+        <form
+          className="gf-form-group"
+          onSubmit={[Function]}
+        >
+          <div
+            className="gf-form-inline"
+          >
+            <div
+              className="gf-form max-width-21"
+            >
+              <span
+                className="gf-form-label"
+              >
+                Key name
+              </span>
+              <input
+                className="gf-form-input"
+                onChange={[Function]}
+                placeholder="Name"
+                type="text"
+                value=""
+              />
+            </div>
+            <div
+              className="gf-form"
+            >
+              <span
+                className="gf-form-label"
+              >
+                Role
+              </span>
+              <span
+                className="gf-form-select-wrapper"
+              >
+                <select
+                  className="gf-form-input gf-size-auto"
+                  onChange={[Function]}
+                  value="Viewer"
+                >
+                  <option
+                    key="Viewer"
+                    label="Viewer"
+                    value="Viewer"
+                  >
+                    Viewer
+                  </option>
+                  <option
+                    key="Editor"
+                    label="Editor"
+                    value="Editor"
+                  >
+                    Editor
+                  </option>
+                  <option
+                    key="Admin"
+                    label="Admin"
+                    value="Admin"
+                  >
+                    Admin
+                  </option>
+                </select>
+              </span>
+            </div>
+            <div
+              className="gf-form"
+            >
+              <button
+                className="btn gf-form-btn btn-success"
+              >
+                Add
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </Component>
+    <h3
+      className="page-heading"
+    >
+      Existing Keys
+    </h3>
+    <table
+      className="filter-table"
+    >
+      <thead>
+        <tr>
+          <th>
+            Name
+          </th>
+          <th>
+            Role
+          </th>
+          <th
+            style={
+              Object {
+                "width": "34px",
+              }
+            }
+          />
+        </tr>
+      </thead>
+    </table>
+  </div>
+</div>
+`;

public/app/features/teams/__mocks__/teamMocks.ts

@@ -1,4 +1,4 @@
-import { Team, TeamGroup, TeamMember } from '../../../types';
+import { Team, TeamGroup, TeamMember } from 'app/types';
 
 export const getMultipleMockTeams = (numberOfTeams: number): Team[] => {
   const teams: Team[] = [];