mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Add tests for ApiKeysPage #13411
This commit is contained in:
parent
e3d579e410
commit
60866d16b1
73
public/app/features/api-keys/ApiKeysPage.test.tsx
Normal file
73
public/app/features/api-keys/ApiKeysPage.test.tsx
Normal file
@ -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');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
@ -48,10 +48,8 @@ export class ApiKeysPage extends PureComponent<Props, any> {
|
|||||||
await this.props.loadApiKeys();
|
await this.props.loadApiKeys();
|
||||||
}
|
}
|
||||||
|
|
||||||
onDeleteApiKey(id: number) {
|
onDeleteApiKey(key: ApiKey) {
|
||||||
return () => {
|
this.props.deleteApiKey(key.id);
|
||||||
this.props.deleteApiKey(id);
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onSearchQueryChange = evt => {
|
onSearchQueryChange = evt => {
|
||||||
@ -111,8 +109,6 @@ export class ApiKeysPage extends PureComponent<Props, any> {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="page-action-bar__spacer" />
|
<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}>
|
<button className="btn btn-success pull-right" onClick={this.onToggleAdding} disabled={isAdding}>
|
||||||
<i className="fa fa-plus" /> Add API Key
|
<i className="fa fa-plus" /> Add API Key
|
||||||
</button>
|
</button>
|
||||||
@ -180,7 +176,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
|
|||||||
<td>{key.name}</td>
|
<td>{key.name}</td>
|
||||||
<td>{key.role}</td>
|
<td>{key.role}</td>
|
||||||
<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" />
|
<i className="fa fa-remove" />
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
|
22
public/app/features/api-keys/__mocks__/apiKeysMock.ts
Normal file
22
public/app/features/api-keys/__mocks__/apiKeysMock.ts
Normal file
@ -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,
|
||||||
|
};
|
||||||
|
};
|
@ -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>
|
||||||
|
`;
|
@ -1,4 +1,4 @@
|
|||||||
import { Team, TeamGroup, TeamMember } from '../../../types';
|
import { Team, TeamGroup, TeamMember } from 'app/types';
|
||||||
|
|
||||||
export const getMultipleMockTeams = (numberOfTeams: number): Team[] => {
|
export const getMultipleMockTeams = (numberOfTeams: number): Team[] => {
|
||||||
const teams: Team[] = [];
|
const teams: Team[] = [];
|
||||||
|
Loading…
Reference in New Issue
Block a user