shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

More cleanup based on pr feedback. Adds org notif list page and tests

Browse Source
This commit is contained in:
mabashian 2019-01-23 16:52:14 -05:00
parent 6c19d6ae4e
commit 47719776f2
7 changed files with 151 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
__tests__/components/NotificationList.test.jsx
View File

@ -43,7 +43,7 @@ describe('<Notifications />', () => {
</I18nProvider>
</MemoryRouter>
).find('Notifications');
wrapper.instance().toggleSuccess(1, true);
wrapper.instance().toggleNotification(1, true, 'success');
expect(spy).toHaveBeenCalledWith(1, true);
});
test('post success makes request and updates state properly', async () => {
@ -79,7 +79,7 @@ describe('<Notifications />', () => {
</I18nProvider>
</MemoryRouter>
).find('Notifications');
wrapper.instance().toggleError(1, true);
wrapper.instance().toggleNotification(1, true, 'error');
expect(spy).toHaveBeenCalledWith(1, true);
});
test('post error makes request and updates state properly', async () => {

32
__tests__/components/NotificationListItem.test.jsx
View File

@ -26,78 +26,70 @@ describe('<NotificationListItem />', () => {
});
test('handles success click when toggle is on', () => {
const successToggleClickSpy = jest.spyOn(NotificationListItem.prototype, 'successToggleClick');
const toggleSuccessPropFn = jest.fn();
const toggleNotification = jest.fn();
wrapper = mount(
<I18nProvider>
<MemoryRouter>
<NotificationListItem
itemId={9000}
successTurnedOn
toggleSuccess={toggleSuccessPropFn}
toggleNotification={toggleNotification}
/>
</MemoryRouter>
</I18nProvider>
);
wrapper.find('Switch').first().find('input').simulate('change');
expect(successToggleClickSpy).toHaveBeenCalledWith(true);
expect(toggleSuccessPropFn).toHaveBeenCalledWith(9000, true);
expect(toggleNotification).toHaveBeenCalledWith(9000, true, 'success');
});
test('handles success click when toggle is off', () => {
const successToggleClickSpy = jest.spyOn(NotificationListItem.prototype, 'successToggleClick');
const toggleSuccessPropFn = jest.fn();
const toggleNotification = jest.fn();
wrapper = mount(
<I18nProvider>
<MemoryRouter>
<NotificationListItem
itemId={9000}
successTurnedOn={false}
toggleSuccess={toggleSuccessPropFn}
toggleNotification={toggleNotification}
/>
</MemoryRouter>
</I18nProvider>
);
wrapper.find('Switch').first().find('input').simulate('change');
expect(successToggleClickSpy).toHaveBeenCalledWith(false);
expect(toggleSuccessPropFn).toHaveBeenCalledWith(9000, false);
expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'success');
});
test('handles error click when toggle is on', () => {
const errorToggleClickSpy = jest.spyOn(NotificationListItem.prototype, 'errorToggleClick');
const toggleErrorPropFn = jest.fn();
const toggleNotification = jest.fn();
wrapper = mount(
<I18nProvider>
<MemoryRouter>
<NotificationListItem
itemId={9000}
errorTurnedOn
toggleError={toggleErrorPropFn}
toggleNotification={toggleNotification}
/>
</MemoryRouter>
</I18nProvider>
);
wrapper.find('Switch').at(1).find('input').simulate('change');
expect(errorToggleClickSpy).toHaveBeenCalledWith(true);
expect(toggleErrorPropFn).toHaveBeenCalledWith(9000, true);
expect(toggleNotification).toHaveBeenCalledWith(9000, true, 'error');
});
test('handles error click when toggle is off', () => {
const errorToggleClickSpy = jest.spyOn(NotificationListItem.prototype, 'errorToggleClick');
const toggleErrorPropFn = jest.fn();
const toggleNotification = jest.fn();
wrapper = mount(
<I18nProvider>
<MemoryRouter>
<NotificationListItem
itemId={9000}
errorTurnedOn={false}
toggleError={toggleErrorPropFn}
toggleNotification={toggleNotification}
/>
</MemoryRouter>
</I18nProvider>
);
wrapper.find('Switch').at(1).find('input').simulate('change');
expect(errorToggleClickSpy).toHaveBeenCalledWith(false);
expect(toggleErrorPropFn).toHaveBeenCalledWith(9000, false);
expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'error');
});
});

58
__tests__/pages/Organizations/screens/Organization/OrganizationNotifications.jsx Normal file
View File

@ -0,0 +1,58 @@
import React from 'react';
import { mount } from 'enzyme';
import { MemoryRouter } from 'react-router-dom';
import OrganizationNotifications from '../../../../../src/pages/Organizations/screens/Organization/OrganizationNotifications';
describe('<OrganizationNotifications />', () => {
test('initially renders succesfully', () => {
mount(
<MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
<OrganizationNotifications
match={{ path: '/organizations/:id/notifications', url: '/organizations/1/notifications' }}
location={{ search: '', pathname: '/organizations/1/notifications' }}
params={{}}
api={{
getOrganizationNotifications: jest.fn(),
getOrganizationNotificationSuccess: jest.fn(),
getOrganizationNotificationError: jest.fn(),
createOrganizationNotificationSuccess: jest.fn(),
createOrganizationNotificationError: jest.fn()
}}
/>
</MemoryRouter>
);
});
test('handles api requests', () => {
const getOrganizationNotifications = jest.fn();
const getOrganizationNotificationSuccess = jest.fn();
const getOrganizationNotificationError = jest.fn();
const createOrganizationNotificationSuccess = jest.fn();
const createOrganizationNotificationError = jest.fn();
const wrapper = mount(
<MemoryRouter initialEntries={['/organizations/1']} initialIndex={0}>
<OrganizationNotifications
match={{ path: '/organizations/:id/notifications', url: '/organizations/1/notifications' }}
location={{ search: '', pathname: '/organizations/1/notifications' }}
params={{}}
api={{
getOrganizationNotifications,
getOrganizationNotificationSuccess,
getOrganizationNotificationError,
createOrganizationNotificationSuccess,
createOrganizationNotificationError
}}
/>
</MemoryRouter>
).find('OrganizationNotifications');
wrapper.instance().getOrgNotifications(1, { foo: 'bar' });
expect(getOrganizationNotifications).toHaveBeenCalledWith(1, { foo: 'bar' });
wrapper.instance().getOrgNotificationSuccess(1, { foo: 'bar' });
expect(getOrganizationNotificationSuccess).toHaveBeenCalledWith(1, { foo: 'bar' });
wrapper.instance().getOrgNotificationError(1, { foo: 'bar' });
expect(getOrganizationNotificationError).toHaveBeenCalledWith(1, { foo: 'bar' });
wrapper.instance().createOrgNotificationSuccess(1, { id: 2 });
expect(createOrganizationNotificationSuccess).toHaveBeenCalledWith(1, { id: 2 });
wrapper.instance().createOrgNotificationError(1, { id: 2 });
expect(createOrganizationNotificationError).toHaveBeenCalledWith(1, { id: 2 });
});
});

27
src/components/NotificationsList/NotificationListItem.jsx
View File

@ -10,31 +10,15 @@ import {
} from '@patternfly/react-core';
class NotificationListItem extends React.Component {
constructor (props) {
super(props);
this.errorToggleClick = this.errorToggleClick.bind(this);
this.successToggleClick = this.successToggleClick.bind(this);
}
errorToggleClick (flag) {
const { itemId, toggleError } = this.props;
toggleError(itemId, flag);
}
successToggleClick (flag) {
const { itemId, toggleSuccess } = this.props;
toggleSuccess(itemId, flag);
}
render () {
const {
itemId,
name,
notificationType,
detailUrl,
parentBreadcrumb,
successTurnedOn,
errorTurnedOn
errorTurnedOn,
toggleNotification
} = this.props;
const capText = {
@ -49,8 +33,7 @@ class NotificationListItem extends React.Component {
<div className="pf-u-display-inline-flex">
<Link
to={{
pathname: detailUrl,
state: { breadcrumb: [parentBreadcrumb, { name, url: detailUrl }] }
pathname: detailUrl
}}
>
<b>{name}</b>
@ -69,13 +52,13 @@ class NotificationListItem extends React.Component {
<Switch
label={i18n._(t`Successful`)}
isChecked={successTurnedOn}
onChange={() => this.successToggleClick(successTurnedOn)}
onChange={() => toggleNotification(itemId, successTurnedOn, 'success')}
aria-label={i18n._(t`Notification success toggle`)}
/>
<Switch
label={i18n._(t`Failure`)}
isChecked={errorTurnedOn}
onChange={() => this.errorToggleClick(errorTurnedOn)}
onChange={() => toggleNotification(itemId, errorTurnedOn, 'error')}
aria-label={i18n._(t`Notification failure toggle`)}
/>
</div>

21
src/components/NotificationsList/Notifications.list.jsx
View File

@ -56,8 +56,7 @@ class Notifications extends Component {
this.onSetPage = this.onSetPage.bind(this);
this.onSelectAll = this.onSelectAll.bind(this);
this.onSelect = this.onSelect.bind(this);
this.toggleError = this.toggleError.bind(this);
this.toggleSuccess = this.toggleSuccess.bind(this);
this.toggleNotification = this.toggleNotification.bind(this);
this.updateUrl = this.updateUrl.bind(this);
this.postToError = this.postToError.bind(this);
this.postToSuccess = this.postToSuccess.bind(this);
@ -131,12 +130,12 @@ class Notifications extends Component {
}
};
toggleError = (id, isCurrentlyOn) => {
this.postToError(id, isCurrentlyOn);
};
toggleSuccess = (id, isCurrentlyOn) => {
this.postToSuccess(id, isCurrentlyOn);
toggleNotification = (id, isCurrentlyOn, status) => {
if (status === 'success') {
this.postToSuccess(id, isCurrentlyOn);
} else if (status === 'error') {
this.postToError(id, isCurrentlyOn);
}
};
updateUrl (queryParams) {
@ -293,8 +292,6 @@ class Notifications extends Component {
successTemplateIds,
errorTemplateIds
} = this.state;
const { match } = this.props;
const parentBreadcrumb = { name: i18nMark('Organizations'), url: match.url };
return (
<Fragment>
@ -335,13 +332,11 @@ class Notifications extends Component {
name={o.name}
notificationType={o.notification_type}
detailUrl={`notifications/${o.id}`}
parentBreadcrumb={parentBreadcrumb}
isSelected={selected.includes(o.id)}
onSelect={() => this.onSelect(o.id)}
toggleNotification={this.toggleNotification}
errorTurnedOn={errorTemplateIds.includes(o.id)}
toggleError={this.toggleError}
successTurnedOn={successTemplateIds.includes(o.id)}
toggleSuccess={this.toggleSuccess}
/>
))}
</ul>

10
src/pages/Organizations/screens/Organization/OrganizationDetail.jsx
View File

@ -12,7 +12,7 @@ import {
Route
} from 'react-router-dom';
import NotificationsList from '../../../../components/NotificationsList/Notifications.list';
import OrganizationNotifications from './OrganizationNotifications';
import Tab from '../../../../components/Tabs/Tab';
import Tabs from '../../../../components/Tabs/Tabs';
@ -54,12 +54,8 @@ const OrganizationDetail = ({
switch (currentTab) {
case 'notifications':
relatedTemplate = (
<NotificationsList
getNotifications={(id, reqParams) => api.getOrganizationNotifications(id, reqParams)}
getSuccess={(id, reqParams) => api.getOrganizationNotificationSuccess(id, reqParams)}
getError={(id, reqParams) => api.getOrganizationNotificationError(id, reqParams)}
postSuccess={(id, data) => api.createOrganizationNotificationSuccess(id, data)}
postError={(id, data) => api.createOrganizationNotificationError(id, data)}
<OrganizationNotifications
api={api}
match={match}
location={location}
history={history}

63
src/pages/Organizations/screens/Organization/OrganizationNotifications.jsx Normal file
View File

@ -0,0 +1,63 @@
import React, { Component } from 'react';
import NotificationsList from '../../../../components/NotificationsList/Notifications.list';
class OrganizationNotifications extends Component {
constructor (props) {
super(props);
this.getOrgNotifications = this.getOrgNotifications.bind(this);
this.getOrgNotificationSuccess = this.getOrgNotificationSuccess.bind(this);
this.getOrgNotificationError = this.getOrgNotificationError.bind(this);
this.createOrgNotificationSuccess = this.createOrgNotificationSuccess.bind(this);
this.createOrgNotificationError = this.createOrgNotificationError.bind(this);
}
getOrgNotifications (id, reqParams) {
const { api } = this.props;
return api.getOrganizationNotifications(id, reqParams);
}
getOrgNotificationSuccess (id, reqParams) {
const { api } = this.props;
return api.getOrganizationNotificationSuccess(id, reqParams);
}
getOrgNotificationError (id, reqParams) {
const { api } = this.props;
return api.getOrganizationNotificationError(id, reqParams);
}
createOrgNotificationSuccess (id, data) {
const { api } = this.props;
return api.createOrganizationNotificationSuccess(id, data);
}
createOrgNotificationError (id, data) {
const { api } = this.props;
return api.createOrganizationNotificationError(id, data);
}
render () {
const {
location,
match,
history
} = this.props;
return (
<NotificationsList
getNotifications={this.getOrgNotifications}
getSuccess={this.getOrgNotificationSuccess}
getError={this.getOrgNotificationError}
postSuccess={this.createOrgNotificationSuccess}
postError={this.createOrgNotificationError}
match={match}
location={location}
history={history}
/>
);
}
}
export default OrganizationNotifications;