mirror of
https://github.com/ansible/awx.git
synced 2026-02-23 14:05:59 -03:30
158 paginated data list (#180)
* working: rename OrganizationTeamsList to PaginatedDataList * convert org notifications list fully to PaginatedDataList * update NotificationList tests * refactor org access to use PaginatedDataList * update tests for org access refactor; fix pagination & sorting * restore Add Role functionality to Org roles * fix displayed text when list of items is empty * preserve query params when navigating through pagination * fix bugs after RBAC rebase * fix lint errors, fix add org access button
This commit is contained in:
Keith Grant
GitHub
@@ -49,11 +49,7 @@ exports[`mountWithContexts injected I18nProvider should mount and render deeply
|
||||
|
||||
exports[`mountWithContexts injected Network should mount and render 1`] = `
|
||||
<Foo
|
||||
api={
|
||||
Object {
|
||||
"getConfig": [Function],
|
||||
}
|
||||
}
|
||||
api={"/api/"}
|
||||
handleHttpError={[Function]}
|
||||
>
|
||||
<div>
|
||||
|
||||
@@ -1,168 +0,0 @@
|
||||
import React from 'react';
|
||||
import { mountWithContexts } from '../enzymeHelpers';
|
||||
import Notifications, { _Notifications } from '../../src/components/NotificationsList/Notifications.list';
|
||||
|
||||
describe('<Notifications />', () => {
|
||||
test('initially renders succesfully', () => {
|
||||
mountWithContexts(
|
||||
<Notifications
|
||||
onReadError={() => {}}
|
||||
onReadNotifications={() => {}}
|
||||
onReadSuccess={() => {}}
|
||||
onCreateError={() => {}}
|
||||
onCreateSuccess={() => {}}
|
||||
canToggleNotifications
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
test('fetches notifications on mount', () => {
|
||||
const spy = jest.spyOn(_Notifications.prototype, 'readNotifications');
|
||||
mountWithContexts(
|
||||
<Notifications
|
||||
onReadError={() => {}}
|
||||
onReadNotifications={() => {}}
|
||||
onReadSuccess={() => {}}
|
||||
onCreateError={() => {}}
|
||||
onCreateSuccess={() => {}}
|
||||
canToggleNotifications
|
||||
/>
|
||||
);
|
||||
expect(spy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('toggle success calls post', () => {
|
||||
const spy = jest.spyOn(_Notifications.prototype, 'createSuccess');
|
||||
const wrapper = mountWithContexts(
|
||||
<Notifications
|
||||
onReadError={() => {}}
|
||||
onReadNotifications={() => {}}
|
||||
onReadSuccess={() => {}}
|
||||
onCreateError={() => {}}
|
||||
onCreateSuccess={() => {}}
|
||||
canToggleNotifications
|
||||
/>
|
||||
).find('Notifications');
|
||||
wrapper.instance().toggleNotification(1, true, 'success');
|
||||
expect(spy).toHaveBeenCalledWith(1, true);
|
||||
});
|
||||
|
||||
test('post success makes request and updates state properly', async () => {
|
||||
const onCreateSuccess = jest.fn();
|
||||
const wrapper = mountWithContexts(
|
||||
<_Notifications
|
||||
match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications', params: { id: 1 } }}
|
||||
location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
|
||||
handleHttpError={() => {}}
|
||||
onReadError={() => {}}
|
||||
onReadNotifications={() => {}}
|
||||
onReadSuccess={() => {}}
|
||||
onCreateError={() => {}}
|
||||
onCreateSuccess={onCreateSuccess}
|
||||
canToggleNotifications
|
||||
/>
|
||||
).find('Notifications');
|
||||
wrapper.setState({ successTemplateIds: [44] });
|
||||
await wrapper.instance().createSuccess(44, true);
|
||||
expect(onCreateSuccess).toHaveBeenCalledWith(1, { id: 44, disassociate: true });
|
||||
expect(wrapper.state('successTemplateIds')).not.toContain(44);
|
||||
await wrapper.instance().createSuccess(44, false);
|
||||
expect(onCreateSuccess).toHaveBeenCalledWith(1, { id: 44 });
|
||||
expect(wrapper.state('successTemplateIds')).toContain(44);
|
||||
});
|
||||
|
||||
test('toggle error calls post', () => {
|
||||
const spy = jest.spyOn(_Notifications.prototype, 'createError');
|
||||
const wrapper = mountWithContexts(
|
||||
<Notifications
|
||||
onReadError={() => {}}
|
||||
onReadNotifications={() => {}}
|
||||
onReadSuccess={() => {}}
|
||||
onCreateError={() => {}}
|
||||
onCreateSuccess={() => {}}
|
||||
canToggleNotifications
|
||||
/>
|
||||
).find('Notifications');
|
||||
wrapper.instance().toggleNotification(1, true, 'error');
|
||||
expect(spy).toHaveBeenCalledWith(1, true);
|
||||
});
|
||||
|
||||
test('post error makes request and updates state properly', async () => {
|
||||
const onCreateError = jest.fn();
|
||||
const wrapper = mountWithContexts(
|
||||
<_Notifications
|
||||
match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications', params: { id: 1 } }}
|
||||
location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
|
||||
handleHttpError={() => {}}
|
||||
onReadError={() => {}}
|
||||
onReadNotifications={() => {}}
|
||||
onReadSuccess={() => {}}
|
||||
onCreateError={onCreateError}
|
||||
onCreateSuccess={() => {}}
|
||||
canToggleNotifications
|
||||
/>
|
||||
).find('Notifications');
|
||||
wrapper.setState({ errorTemplateIds: [44] });
|
||||
await wrapper.instance().createError(44, true);
|
||||
expect(onCreateError).toHaveBeenCalledWith(1, { id: 44, disassociate: true });
|
||||
expect(wrapper.state('errorTemplateIds')).not.toContain(44);
|
||||
await wrapper.instance().createError(44, false);
|
||||
expect(onCreateError).toHaveBeenCalledWith(1, { id: 44 });
|
||||
expect(wrapper.state('errorTemplateIds')).toContain(44);
|
||||
});
|
||||
|
||||
test('fetchNotifications', async () => {
|
||||
const mockQueryParams = {
|
||||
page: 44,
|
||||
page_size: 10,
|
||||
order_by: 'name'
|
||||
};
|
||||
const onReadNotifications = jest.fn().mockResolvedValue({
|
||||
data: {
|
||||
results: [
|
||||
{ id: 1, notification_type: 'slack' },
|
||||
{ id: 2, notification_type: 'email' },
|
||||
{ id: 3, notification_type: 'github' }
|
||||
]
|
||||
}
|
||||
});
|
||||
const onReadSuccess = jest.fn().mockResolvedValue({
|
||||
data: {
|
||||
results: [
|
||||
{ id: 1 }
|
||||
]
|
||||
}
|
||||
});
|
||||
const onReadError = jest.fn().mockResolvedValue({
|
||||
data: {
|
||||
results: [
|
||||
{ id: 2 }
|
||||
]
|
||||
}
|
||||
});
|
||||
const wrapper = mountWithContexts(
|
||||
<_Notifications
|
||||
match={{ path: '/organizations/:id/?tab=notifications', url: '/organizations/:id/?tab=notifications', params: { id: 1 } }}
|
||||
location={{ search: '', pathname: '/organizations/:id/?tab=notifications' }}
|
||||
handleHttpError={() => {}}
|
||||
onReadError={onReadError}
|
||||
onReadNotifications={onReadNotifications}
|
||||
onReadSuccess={onReadSuccess}
|
||||
onCreateError={() => {}}
|
||||
onCreateSuccess={() => {}}
|
||||
canToggleNotifications
|
||||
/>
|
||||
).find('Notifications');
|
||||
wrapper.instance().updateUrl = jest.fn();
|
||||
await wrapper.instance().readNotifications(mockQueryParams);
|
||||
expect(onReadNotifications).toHaveBeenCalledWith(1, mockQueryParams);
|
||||
expect(onReadSuccess).toHaveBeenCalledWith(1, {
|
||||
id__in: '1,2,3'
|
||||
});
|
||||
expect(onReadError).toHaveBeenCalledWith(1, {
|
||||
id__in: '1,2,3'
|
||||
});
|
||||
expect(wrapper.state('successTemplateIds')).toContain(1);
|
||||
expect(wrapper.state('errorTemplateIds')).toContain(2);
|
||||
});
|
||||
});
|
||||
@@ -2,38 +2,49 @@ import React from 'react';
|
||||
import { mountWithContexts } from '../enzymeHelpers';
|
||||
import NotificationListItem from '../../src/components/NotificationsList/NotificationListItem';
|
||||
|
||||
describe('<NotificationListItem />', () => {
|
||||
describe('<NotificationListItem canToggleNotifications />', () => {
|
||||
let wrapper;
|
||||
const toggleNotification = jest.fn();
|
||||
let toggleNotification;
|
||||
|
||||
beforeEach(() => {
|
||||
toggleNotification = jest.fn();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
if (wrapper) {
|
||||
wrapper.unmount();
|
||||
wrapper = null;
|
||||
}
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
test('initially renders succesfully', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<NotificationListItem
|
||||
itemId={9000}
|
||||
notification={{
|
||||
id: 9000,
|
||||
name: 'Foo',
|
||||
notification_type: 'slack',
|
||||
}}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
notificationType="slack"
|
||||
canToggleNotifications
|
||||
/>
|
||||
);
|
||||
expect(wrapper.length).toBe(1);
|
||||
expect(wrapper.find('NotificationListItem')).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('handles success click when toggle is on', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<NotificationListItem
|
||||
itemId={9000}
|
||||
notification={{
|
||||
id: 9000,
|
||||
name: 'Foo',
|
||||
notification_type: 'slack',
|
||||
}}
|
||||
successTurnedOn
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
notificationType="slack"
|
||||
canToggleNotifications
|
||||
/>
|
||||
);
|
||||
@@ -44,11 +55,14 @@ describe('<NotificationListItem />', () => {
|
||||
test('handles success click when toggle is off', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<NotificationListItem
|
||||
itemId={9000}
|
||||
notification={{
|
||||
id: 9000,
|
||||
name: 'Foo',
|
||||
notification_type: 'slack',
|
||||
}}
|
||||
successTurnedOn={false}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
notificationType="slack"
|
||||
canToggleNotifications
|
||||
/>
|
||||
);
|
||||
@@ -59,11 +73,14 @@ describe('<NotificationListItem />', () => {
|
||||
test('handles error click when toggle is on', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<NotificationListItem
|
||||
itemId={9000}
|
||||
notification={{
|
||||
id: 9000,
|
||||
name: 'Foo',
|
||||
notification_type: 'slack',
|
||||
}}
|
||||
errorTurnedOn
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
notificationType="slack"
|
||||
canToggleNotifications
|
||||
/>
|
||||
);
|
||||
@@ -74,11 +91,14 @@ describe('<NotificationListItem />', () => {
|
||||
test('handles error click when toggle is off', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<NotificationListItem
|
||||
itemId={9000}
|
||||
notification={{
|
||||
id: 9000,
|
||||
name: 'Foo',
|
||||
notification_type: 'slack',
|
||||
}}
|
||||
errorTurnedOn={false}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
notificationType="slack"
|
||||
canToggleNotifications
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { createMemoryHistory } from 'history';
|
||||
import { mountWithContexts } from '../../../enzymeHelpers';
|
||||
import { sleep } from '../../../testUtils';
|
||||
import OrganizationTeamsList from '../../../../src/pages/Organizations/components/OrganizationTeamsList';
|
||||
import { mountWithContexts } from '../enzymeHelpers';
|
||||
import { sleep } from '../testUtils';
|
||||
import PaginatedDataList from '../../src/components/PaginatedDataList';
|
||||
|
||||
const mockData = [
|
||||
{ id: 1, name: 'one', url: '/org/team/1' },
|
||||
@@ -12,15 +12,15 @@ const mockData = [
|
||||
{ id: 5, name: 'five', url: '/org/team/5' },
|
||||
];
|
||||
|
||||
describe('<OrganizationTeamsList />', () => {
|
||||
describe('<PaginatedDataList />', () => {
|
||||
afterEach(() => {
|
||||
jest.restoreAllMocks();
|
||||
});
|
||||
|
||||
test('initially renders succesfully', () => {
|
||||
mountWithContexts(
|
||||
<OrganizationTeamsList
|
||||
teams={mockData}
|
||||
<PaginatedDataList
|
||||
items={mockData}
|
||||
itemCount={7}
|
||||
queryParams={{
|
||||
page: 1,
|
||||
@@ -37,8 +37,8 @@ describe('<OrganizationTeamsList />', () => {
|
||||
initialEntries: ['/organizations/1/teams'],
|
||||
});
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationTeamsList
|
||||
teams={mockData}
|
||||
<PaginatedDataList
|
||||
items={mockData}
|
||||
itemCount={7}
|
||||
queryParams={{
|
||||
page: 1,
|
||||
@@ -69,8 +69,8 @@ describe('<OrganizationTeamsList />', () => {
|
||||
initialEntries: ['/organizations/1/teams'],
|
||||
});
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationTeamsList
|
||||
teams={mockData}
|
||||
<PaginatedDataList
|
||||
items={mockData}
|
||||
itemCount={7}
|
||||
queryParams={{
|
||||
page: 1,
|
||||
@@ -0,0 +1,369 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<NotificationListItem /> initially renders succesfully 1`] = `
|
||||
<NotificationListItem
|
||||
canToggleNotifications={true}
|
||||
detailUrl="/foo"
|
||||
errorTurnedOn={false}
|
||||
notification={
|
||||
Object {
|
||||
"id": 9000,
|
||||
"name": "Foo",
|
||||
"notification_type": "slack",
|
||||
}
|
||||
}
|
||||
successTurnedOn={false}
|
||||
toggleNotification={[MockFunction]}
|
||||
>
|
||||
<I18n
|
||||
update={true}
|
||||
withHash={true}
|
||||
>
|
||||
<DataListItem
|
||||
aria-labelledby="items-list-item-9000"
|
||||
className=""
|
||||
isExpanded={false}
|
||||
key="9000"
|
||||
>
|
||||
<li
|
||||
aria-labelledby="items-list-item-9000"
|
||||
className="pf-c-data-list__item"
|
||||
>
|
||||
<DataListCell
|
||||
className=""
|
||||
key=".0"
|
||||
rowid="items-list-item-9000"
|
||||
width={1}
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__cell"
|
||||
>
|
||||
<Link
|
||||
replace={false}
|
||||
style={
|
||||
Object {
|
||||
"marginRight": "1.5em",
|
||||
}
|
||||
}
|
||||
to={
|
||||
Object {
|
||||
"pathname": "/foo",
|
||||
}
|
||||
}
|
||||
>
|
||||
<a
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"marginRight": "1.5em",
|
||||
}
|
||||
}
|
||||
>
|
||||
<b
|
||||
id="items-list-item-9000"
|
||||
>
|
||||
Foo
|
||||
</b>
|
||||
</a>
|
||||
</Link>
|
||||
<Badge
|
||||
className=""
|
||||
isRead={true}
|
||||
style={
|
||||
Object {
|
||||
"textTransform": "capitalize",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="pf-c-badge pf-m-read"
|
||||
style={
|
||||
Object {
|
||||
"textTransform": "capitalize",
|
||||
}
|
||||
}
|
||||
>
|
||||
slack
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
</DataListCell>
|
||||
<DataListCell
|
||||
alignRight={true}
|
||||
className=""
|
||||
key=".1"
|
||||
rowid="items-list-item-9000"
|
||||
width={1}
|
||||
>
|
||||
<div
|
||||
alignRight={true}
|
||||
className="pf-c-data-list__cell"
|
||||
>
|
||||
<Switch
|
||||
aria-label="Toggle notification success"
|
||||
className=""
|
||||
id="notification-9000-success-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Successful"
|
||||
onChange={[Function]}
|
||||
>
|
||||
<label
|
||||
className="pf-c-switch"
|
||||
htmlFor="notification-9000-success-toggle"
|
||||
>
|
||||
<input
|
||||
aria-label="Toggle notification success"
|
||||
checked={false}
|
||||
className="pf-c-switch__input"
|
||||
disabled={false}
|
||||
id="notification-9000-success-toggle"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pf-c-switch__toggle"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-on"
|
||||
>
|
||||
Successful
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-off"
|
||||
>
|
||||
Successful
|
||||
</span>
|
||||
</label>
|
||||
</Switch>
|
||||
<Switch
|
||||
aria-label="Toggle notification failure"
|
||||
className=""
|
||||
id="notification-9000-error-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Failure"
|
||||
onChange={[Function]}
|
||||
>
|
||||
<label
|
||||
className="pf-c-switch"
|
||||
htmlFor="notification-9000-error-toggle"
|
||||
>
|
||||
<input
|
||||
aria-label="Toggle notification failure"
|
||||
checked={false}
|
||||
className="pf-c-switch__input"
|
||||
disabled={false}
|
||||
id="notification-9000-error-toggle"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pf-c-switch__toggle"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-on"
|
||||
>
|
||||
Failure
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-off"
|
||||
>
|
||||
Failure
|
||||
</span>
|
||||
</label>
|
||||
</Switch>
|
||||
</div>
|
||||
</DataListCell>
|
||||
</li>
|
||||
</DataListItem>
|
||||
</I18n>
|
||||
</NotificationListItem>
|
||||
`;
|
||||
|
||||
exports[`<NotificationListItem canToggleNotifications /> initially renders succesfully 1`] = `
|
||||
<NotificationListItem
|
||||
canToggleNotifications={true}
|
||||
detailUrl="/foo"
|
||||
errorTurnedOn={false}
|
||||
notification={
|
||||
Object {
|
||||
"id": 9000,
|
||||
"name": "Foo",
|
||||
"notification_type": "slack",
|
||||
}
|
||||
}
|
||||
successTurnedOn={false}
|
||||
toggleNotification={[MockFunction]}
|
||||
>
|
||||
<I18n
|
||||
update={true}
|
||||
withHash={true}
|
||||
>
|
||||
<DataListItem
|
||||
aria-labelledby="items-list-item-9000"
|
||||
className=""
|
||||
isExpanded={false}
|
||||
key="9000"
|
||||
>
|
||||
<li
|
||||
aria-labelledby="items-list-item-9000"
|
||||
className="pf-c-data-list__item"
|
||||
>
|
||||
<DataListCell
|
||||
className=""
|
||||
key=".0"
|
||||
rowid="items-list-item-9000"
|
||||
width={1}
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__cell"
|
||||
>
|
||||
<Link
|
||||
replace={false}
|
||||
style={
|
||||
Object {
|
||||
"marginRight": "1.5em",
|
||||
}
|
||||
}
|
||||
to={
|
||||
Object {
|
||||
"pathname": "/foo",
|
||||
}
|
||||
}
|
||||
>
|
||||
<a
|
||||
onClick={[Function]}
|
||||
style={
|
||||
Object {
|
||||
"marginRight": "1.5em",
|
||||
}
|
||||
}
|
||||
>
|
||||
<b>
|
||||
Foo
|
||||
</b>
|
||||
</a>
|
||||
</Link>
|
||||
<Badge
|
||||
className=""
|
||||
isRead={true}
|
||||
style={
|
||||
Object {
|
||||
"textTransform": "capitalize",
|
||||
}
|
||||
}
|
||||
>
|
||||
<span
|
||||
className="pf-c-badge pf-m-read"
|
||||
style={
|
||||
Object {
|
||||
"textTransform": "capitalize",
|
||||
}
|
||||
}
|
||||
>
|
||||
slack
|
||||
</span>
|
||||
</Badge>
|
||||
</div>
|
||||
</DataListCell>
|
||||
<DataListCell
|
||||
alignRight={true}
|
||||
className=""
|
||||
key=".1"
|
||||
rowid="items-list-item-9000"
|
||||
width={1}
|
||||
>
|
||||
<div
|
||||
alignRight={true}
|
||||
className="pf-c-data-list__cell"
|
||||
>
|
||||
<Switch
|
||||
aria-label="Toggle notification success"
|
||||
className=""
|
||||
id="notification-9000-success-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Successful"
|
||||
onChange={[Function]}
|
||||
>
|
||||
<label
|
||||
className="pf-c-switch"
|
||||
htmlFor="notification-9000-success-toggle"
|
||||
>
|
||||
<input
|
||||
aria-label="Toggle notification success"
|
||||
checked={false}
|
||||
className="pf-c-switch__input"
|
||||
disabled={false}
|
||||
id="notification-9000-success-toggle"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pf-c-switch__toggle"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-on"
|
||||
>
|
||||
Successful
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-off"
|
||||
>
|
||||
Successful
|
||||
</span>
|
||||
</label>
|
||||
</Switch>
|
||||
<Switch
|
||||
aria-label="Toggle notification failure"
|
||||
className=""
|
||||
id="notification-9000-error-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Failure"
|
||||
onChange={[Function]}
|
||||
>
|
||||
<label
|
||||
className="pf-c-switch"
|
||||
htmlFor="notification-9000-error-toggle"
|
||||
>
|
||||
<input
|
||||
aria-label="Toggle notification failure"
|
||||
checked={false}
|
||||
className="pf-c-switch__input"
|
||||
disabled={false}
|
||||
id="notification-9000-error-toggle"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pf-c-switch__toggle"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-on"
|
||||
>
|
||||
Failure
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-off"
|
||||
>
|
||||
Failure
|
||||
</span>
|
||||
</label>
|
||||
</Switch>
|
||||
</div>
|
||||
</DataListCell>
|
||||
</li>
|
||||
</DataListItem>
|
||||
</I18n>
|
||||
</NotificationListItem>
|
||||
`;
|
||||
@@ -50,7 +50,8 @@ const defaultContexts = {
|
||||
pathname: '',
|
||||
search: '',
|
||||
state: '',
|
||||
}
|
||||
},
|
||||
toJSON: () => '/history/',
|
||||
},
|
||||
route: {
|
||||
location: {
|
||||
@@ -71,6 +72,7 @@ const defaultContexts = {
|
||||
network: {
|
||||
api: {
|
||||
getConfig: () => {},
|
||||
toJSON: () => '/api/',
|
||||
},
|
||||
handleHttpError: () => {},
|
||||
},
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import { mountWithContexts } from '../../../enzymeHelpers';
|
||||
import DeleteRoleConfirmationModal from '../../../../src/pages/Organizations/components/DeleteRoleConfirmationModal';
|
||||
|
||||
const role = {
|
||||
id: 3,
|
||||
name: 'Member',
|
||||
resource_name: 'Org',
|
||||
resource_type: 'organization',
|
||||
team_id: 5,
|
||||
team_name: 'The Team',
|
||||
};
|
||||
|
||||
describe('<DeleteRoleConfirmationModal />', () => {
|
||||
test('should render initially', () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<DeleteRoleConfirmationModal
|
||||
role={role}
|
||||
username="jane"
|
||||
onCancel={() => {}}
|
||||
onConfirm={() => {}}
|
||||
/>
|
||||
);
|
||||
wrapper.update();
|
||||
expect(wrapper.find('DeleteRoleConfirmationModal')).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import { mountWithContexts } from '../../../enzymeHelpers';
|
||||
import OrganizationAccessItem from '../../../../src/pages/Organizations/components/OrganizationAccessItem';
|
||||
|
||||
const accessRecord = {
|
||||
id: 2,
|
||||
username: 'jane',
|
||||
url: '/bar',
|
||||
first_name: 'jane',
|
||||
last_name: 'brown',
|
||||
summary_fields: {
|
||||
direct_access: [{
|
||||
role: {
|
||||
id: 3,
|
||||
name: 'Member',
|
||||
resource_name: 'Org',
|
||||
resource_type: 'organization',
|
||||
team_id: 5,
|
||||
team_name: 'The Team',
|
||||
user_capabilities: { unattach: true },
|
||||
}
|
||||
}],
|
||||
indirect_access: [],
|
||||
}
|
||||
};
|
||||
|
||||
describe('<OrganizationAccessItem />', () => {
|
||||
test('initially renders succesfully', () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationAccessItem
|
||||
accessRecord={accessRecord}
|
||||
onRoleDelete={() => {}}
|
||||
/>
|
||||
);
|
||||
expect(wrapper.find('OrganizationAccessItem')).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,531 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
<DeleteRoleConfirmationModal
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
role={
|
||||
Object {
|
||||
"id": 3,
|
||||
"name": "Member",
|
||||
"resource_name": "Org",
|
||||
"resource_type": "organization",
|
||||
"team_id": 5,
|
||||
"team_name": "The Team",
|
||||
}
|
||||
}
|
||||
username="jane"
|
||||
>
|
||||
<I18n
|
||||
update={true}
|
||||
withHash={true}
|
||||
>
|
||||
<_default
|
||||
actions={
|
||||
Array [
|
||||
<Button
|
||||
aria-label="Confirm delete"
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="danger"
|
||||
>
|
||||
Delete
|
||||
</Button>,
|
||||
<Button
|
||||
aria-label={null}
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
>
|
||||
Cancel
|
||||
</Button>,
|
||||
]
|
||||
}
|
||||
isOpen={true}
|
||||
title="Remove Team Access"
|
||||
variant="danger"
|
||||
>
|
||||
<Modal
|
||||
actions={
|
||||
Array [
|
||||
<Button
|
||||
aria-label="Confirm delete"
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="danger"
|
||||
>
|
||||
Delete
|
||||
</Button>,
|
||||
<Button
|
||||
aria-label={null}
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
>
|
||||
Cancel
|
||||
</Button>,
|
||||
]
|
||||
}
|
||||
ariaDescribedById=""
|
||||
className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
hideTitle={false}
|
||||
isLarge={false}
|
||||
isOpen={true}
|
||||
isSmall={false}
|
||||
onClose={[Function]}
|
||||
title="Remove Team Access"
|
||||
width={null}
|
||||
>
|
||||
<Portal
|
||||
containerInfo={
|
||||
<div>
|
||||
<div
|
||||
class="pf-c-backdrop"
|
||||
>
|
||||
<div
|
||||
class="pf-l-bullseye"
|
||||
>
|
||||
<div
|
||||
class="pf-l-bullseye"
|
||||
>
|
||||
<div
|
||||
aria-describedby="pf-modal-0"
|
||||
aria-label="Remove Team Access"
|
||||
aria-modal="true"
|
||||
class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
role="dialog"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="pf-c-button pf-m-plain"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 352 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<h3
|
||||
class="pf-c-title pf-m-2xl"
|
||||
>
|
||||
|
||||
Remove Team Access
|
||||
|
||||
</h3>
|
||||
<div
|
||||
class="pf-c-modal-box__body"
|
||||
id="pf-modal-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="at-c-alertModal__icon"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="pf-c-modal-box__footer"
|
||||
>
|
||||
|
||||
<button
|
||||
aria-label="Confirm delete"
|
||||
class="pf-c-button pf-m-danger"
|
||||
type="button"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
class="pf-c-button pf-m-secondary"
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<ModalContent
|
||||
actions={
|
||||
Array [
|
||||
<Button
|
||||
aria-label="Confirm delete"
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="danger"
|
||||
>
|
||||
Delete
|
||||
</Button>,
|
||||
<Button
|
||||
aria-label={null}
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
>
|
||||
Cancel
|
||||
</Button>,
|
||||
]
|
||||
}
|
||||
ariaDescribedById=""
|
||||
className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
hideTitle={false}
|
||||
id="pf-modal-0"
|
||||
isLarge={false}
|
||||
isOpen={true}
|
||||
isSmall={false}
|
||||
onClose={[Function]}
|
||||
title="Remove Team Access"
|
||||
width={null}
|
||||
>
|
||||
<Backdrop
|
||||
className=""
|
||||
>
|
||||
<div
|
||||
className="pf-c-backdrop"
|
||||
>
|
||||
<Bullseye
|
||||
className=""
|
||||
component="div"
|
||||
>
|
||||
<div
|
||||
className="pf-l-bullseye"
|
||||
>
|
||||
<FocusTrap
|
||||
_createFocusTrap={[Function]}
|
||||
active={true}
|
||||
className="pf-l-bullseye"
|
||||
focusTrapOptions={
|
||||
Object {
|
||||
"clickOutsideDeactivates": true,
|
||||
}
|
||||
}
|
||||
paused={false}
|
||||
tag="div"
|
||||
>
|
||||
<div
|
||||
className="pf-l-bullseye"
|
||||
>
|
||||
<ModalBox
|
||||
className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
id="pf-modal-0"
|
||||
isLarge={false}
|
||||
isSmall={false}
|
||||
style={
|
||||
Object {
|
||||
"width": null,
|
||||
}
|
||||
}
|
||||
title="Remove Team Access"
|
||||
>
|
||||
<div
|
||||
aria-describedby="pf-modal-0"
|
||||
aria-label="Remove Team Access"
|
||||
aria-modal="true"
|
||||
className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
role="dialog"
|
||||
style={
|
||||
Object {
|
||||
"width": null,
|
||||
}
|
||||
}
|
||||
>
|
||||
<ModalBoxCloseButton
|
||||
className=""
|
||||
onClose={[Function]}
|
||||
>
|
||||
<Button
|
||||
aria-label="Close"
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="plain"
|
||||
>
|
||||
<button
|
||||
aria-disabled={null}
|
||||
aria-label="Close"
|
||||
className="pf-c-button pf-m-plain"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
<TimesIcon
|
||||
color="currentColor"
|
||||
size="sm"
|
||||
title={null}
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
aria-labelledby={null}
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"verticalAlign": "-0.125em",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 352 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</TimesIcon>
|
||||
</button>
|
||||
</Button>
|
||||
</ModalBoxCloseButton>
|
||||
<ModalBoxHeader
|
||||
className=""
|
||||
hideTitle={false}
|
||||
>
|
||||
<Title
|
||||
className=""
|
||||
headingLevel="h3"
|
||||
size="2xl"
|
||||
>
|
||||
<h3
|
||||
className="pf-c-title pf-m-2xl"
|
||||
>
|
||||
|
||||
Remove Team Access
|
||||
|
||||
</h3>
|
||||
</Title>
|
||||
</ModalBoxHeader>
|
||||
<ModalBoxBody
|
||||
className=""
|
||||
id="pf-modal-0"
|
||||
>
|
||||
<div
|
||||
className="pf-c-modal-box__body"
|
||||
id="pf-modal-0"
|
||||
>
|
||||
<WithI18n
|
||||
components={
|
||||
Array [
|
||||
<b />,
|
||||
<b />,
|
||||
<br />,
|
||||
<br />,
|
||||
<b />,
|
||||
<i />,
|
||||
]
|
||||
}
|
||||
id="Are you sure you want to remove<0> {0} </0>access from<1> {1}</1>? Doing so affects all members of the team.<2/><3/>If you<4><5> only </5></4>want to remove access for this particular user, please remove them from the team."
|
||||
values={
|
||||
Object {
|
||||
"0": "Member",
|
||||
"1": "The Team",
|
||||
}
|
||||
}
|
||||
>
|
||||
<I18n
|
||||
update={true}
|
||||
withHash={true}
|
||||
>
|
||||
<Trans
|
||||
components={
|
||||
Array [
|
||||
<b />,
|
||||
<b />,
|
||||
<br />,
|
||||
<br />,
|
||||
<b />,
|
||||
<i />,
|
||||
]
|
||||
}
|
||||
i18n={"/i18n/"}
|
||||
id="Are you sure you want to remove<0> {0} </0>access from<1> {1}</1>? Doing so affects all members of the team.<2/><3/>If you<4><5> only </5></4>want to remove access for this particular user, please remove them from the team."
|
||||
values={
|
||||
Object {
|
||||
"0": "Member",
|
||||
"1": "The Team",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Render
|
||||
value={null}
|
||||
/>
|
||||
</Trans>
|
||||
</I18n>
|
||||
</WithI18n>
|
||||
<ExclamationCircleIcon
|
||||
className="at-c-alertModal__icon"
|
||||
color="currentColor"
|
||||
size="sm"
|
||||
title={null}
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
aria-labelledby={null}
|
||||
className="at-c-alertModal__icon"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"verticalAlign": "-0.125em",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</ExclamationCircleIcon>
|
||||
</div>
|
||||
</ModalBoxBody>
|
||||
<ModalBoxFooter
|
||||
className=""
|
||||
>
|
||||
<div
|
||||
className="pf-c-modal-box__footer"
|
||||
>
|
||||
|
||||
<Button
|
||||
aria-label="Confirm delete"
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
key="delete"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="danger"
|
||||
>
|
||||
<button
|
||||
aria-disabled={null}
|
||||
aria-label="Confirm delete"
|
||||
className="pf-c-button pf-m-danger"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</Button>
|
||||
<Button
|
||||
aria-label={null}
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
key="cancel"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
>
|
||||
<button
|
||||
aria-disabled={null}
|
||||
aria-label={null}
|
||||
className="pf-c-button pf-m-secondary"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</ModalBoxFooter>
|
||||
</div>
|
||||
</ModalBox>
|
||||
</div>
|
||||
</FocusTrap>
|
||||
</div>
|
||||
</Bullseye>
|
||||
</div>
|
||||
</Backdrop>
|
||||
</ModalContent>
|
||||
</Portal>
|
||||
</Modal>
|
||||
</_default>
|
||||
</I18n>
|
||||
</DeleteRoleConfirmationModal>
|
||||
`;
|
||||
@@ -0,0 +1,326 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
|
||||
<OrganizationAccessItem
|
||||
accessRecord={
|
||||
Object {
|
||||
"first_name": "jane",
|
||||
"id": 2,
|
||||
"last_name": "brown",
|
||||
"summary_fields": Object {
|
||||
"direct_access": Array [
|
||||
Object {
|
||||
"role": Object {
|
||||
"id": 3,
|
||||
"name": "Member",
|
||||
"resource_name": "Org",
|
||||
"resource_type": "organization",
|
||||
"team_id": 5,
|
||||
"team_name": "The Team",
|
||||
"user_capabilities": Object {
|
||||
"unattach": true,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
"indirect_access": Array [],
|
||||
},
|
||||
"url": "/bar",
|
||||
"username": "jane",
|
||||
}
|
||||
}
|
||||
onRoleDelete={[Function]}
|
||||
>
|
||||
<I18n
|
||||
update={true}
|
||||
withHash={true}
|
||||
>
|
||||
<DataListItem
|
||||
aria-labelledby="access-list-item"
|
||||
className=""
|
||||
isExpanded={false}
|
||||
key="2"
|
||||
>
|
||||
<li
|
||||
aria-labelledby="access-list-item"
|
||||
className="pf-c-data-list__item"
|
||||
>
|
||||
<DataListCell
|
||||
className=""
|
||||
key=".0"
|
||||
rowid="access-list-item"
|
||||
width={1}
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__cell"
|
||||
>
|
||||
<TextContent
|
||||
className=""
|
||||
style={
|
||||
Object {
|
||||
"display": "grid",
|
||||
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="pf-c-content"
|
||||
style={
|
||||
Object {
|
||||
"display": "grid",
|
||||
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Link
|
||||
replace={false}
|
||||
to={
|
||||
Object {
|
||||
"pathname": "/bar",
|
||||
}
|
||||
}
|
||||
>
|
||||
<a
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Text
|
||||
className=""
|
||||
component="h6"
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": "700",
|
||||
"lineHeight": "24px",
|
||||
"marginRight": "20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<h6
|
||||
className=""
|
||||
data-pf-content={true}
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": "700",
|
||||
"lineHeight": "24px",
|
||||
"marginRight": "20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
jane
|
||||
</h6>
|
||||
</Text>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</TextContent>
|
||||
<Detail
|
||||
customStyles={null}
|
||||
label="Name"
|
||||
url={null}
|
||||
value="jane brown"
|
||||
>
|
||||
<TextContent
|
||||
className=""
|
||||
style={
|
||||
Object {
|
||||
"display": "grid",
|
||||
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="pf-c-content"
|
||||
style={
|
||||
Object {
|
||||
"display": "grid",
|
||||
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
className=""
|
||||
component="h6"
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": "700",
|
||||
"lineHeight": "24px",
|
||||
"marginRight": "20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<h6
|
||||
className=""
|
||||
data-pf-content={true}
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": "700",
|
||||
"lineHeight": "24px",
|
||||
"marginRight": "20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Name
|
||||
</h6>
|
||||
</Text>
|
||||
<Text
|
||||
className=""
|
||||
component="p"
|
||||
style={
|
||||
Object {
|
||||
"lineHeight": "28px",
|
||||
"overflow": "visible",
|
||||
}
|
||||
}
|
||||
>
|
||||
<p
|
||||
className=""
|
||||
data-pf-content={true}
|
||||
style={
|
||||
Object {
|
||||
"lineHeight": "28px",
|
||||
"overflow": "visible",
|
||||
}
|
||||
}
|
||||
>
|
||||
jane brown
|
||||
</p>
|
||||
</Text>
|
||||
</div>
|
||||
</TextContent>
|
||||
</Detail>
|
||||
</div>
|
||||
</DataListCell>
|
||||
<DataListCell
|
||||
className=""
|
||||
key=".1"
|
||||
rowid="access-list-item"
|
||||
width={1}
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__cell"
|
||||
>
|
||||
<ul
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"flexWrap": "wrap",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
className=""
|
||||
component="h6"
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": "700",
|
||||
"lineHeight": "24px",
|
||||
"marginRight": "20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<h6
|
||||
className=""
|
||||
data-pf-content={true}
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": "700",
|
||||
"lineHeight": "24px",
|
||||
"marginRight": "20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Team Roles
|
||||
</h6>
|
||||
</Text>
|
||||
<Chip
|
||||
className="awx-c-chip"
|
||||
closeBtnAriaLabel="close"
|
||||
isOverflowChip={false}
|
||||
key="3"
|
||||
onClick={[Function]}
|
||||
tooltipPosition="top"
|
||||
>
|
||||
<GenerateId
|
||||
prefix="pf-random-id-"
|
||||
>
|
||||
<li
|
||||
className="pf-c-chip awx-c-chip"
|
||||
>
|
||||
<span
|
||||
className="pf-c-chip__text"
|
||||
id="pf-random-id-0"
|
||||
>
|
||||
Member
|
||||
</span>
|
||||
<ChipButton
|
||||
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
|
||||
ariaLabel="close"
|
||||
className=""
|
||||
id="remove_pf-random-id-0"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Button
|
||||
aria-label="close"
|
||||
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
|
||||
className=""
|
||||
component="button"
|
||||
id="remove_pf-random-id-0"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="plain"
|
||||
>
|
||||
<button
|
||||
aria-disabled={null}
|
||||
aria-label="close"
|
||||
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
|
||||
className="pf-c-button pf-m-plain"
|
||||
disabled={false}
|
||||
id="remove_pf-random-id-0"
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
<TimesCircleIcon
|
||||
aria-hidden="true"
|
||||
color="currentColor"
|
||||
size="sm"
|
||||
title={null}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
aria-labelledby={null}
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"verticalAlign": "-0.125em",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</TimesCircleIcon>
|
||||
</button>
|
||||
</Button>
|
||||
</ChipButton>
|
||||
</li>
|
||||
</GenerateId>
|
||||
</Chip>
|
||||
</ul>
|
||||
</div>
|
||||
</DataListCell>
|
||||
</li>
|
||||
</DataListItem>
|
||||
</I18n>
|
||||
</OrganizationAccessItem>
|
||||
`;
|
||||
@@ -1,34 +1,173 @@
|
||||
import React from 'react';
|
||||
import { mountWithContexts } from '../../../../enzymeHelpers';
|
||||
import OrganizationAccess from '../../../../../src/pages/Organizations/screens/Organization/OrganizationAccess';
|
||||
import { sleep } from '../../../../testUtils';
|
||||
|
||||
describe('<OrganizationAccess />', () => {
|
||||
let network;
|
||||
const organization = {
|
||||
id: 1,
|
||||
name: 'Default'
|
||||
};
|
||||
test('initially renders succesfully', () => {
|
||||
mountWithContexts(<OrganizationAccess organization={organization} />);
|
||||
|
||||
const data = {
|
||||
count: 2,
|
||||
results: [{
|
||||
id: 1,
|
||||
username: 'joe',
|
||||
url: '/foo',
|
||||
first_name: 'joe',
|
||||
last_name: 'smith',
|
||||
summary_fields: {
|
||||
direct_access: [{
|
||||
role: {
|
||||
id: 1,
|
||||
name: 'Member',
|
||||
resource_name: 'Org',
|
||||
resource_type: 'organization',
|
||||
user_capabilities: { unattach: true },
|
||||
}
|
||||
}],
|
||||
indirect_access: [],
|
||||
}
|
||||
}, {
|
||||
id: 2,
|
||||
username: 'jane',
|
||||
url: '/bar',
|
||||
first_name: 'jane',
|
||||
last_name: 'brown',
|
||||
summary_fields: {
|
||||
direct_access: [{
|
||||
role: {
|
||||
id: 3,
|
||||
name: 'Member',
|
||||
resource_name: 'Org',
|
||||
resource_type: 'organization',
|
||||
team_id: 5,
|
||||
team_name: 'The Team',
|
||||
user_capabilities: { unattach: true },
|
||||
}
|
||||
}],
|
||||
indirect_access: [],
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
network = {
|
||||
api: {
|
||||
getOrganizationAccessList: jest.fn()
|
||||
.mockReturnValue(Promise.resolve({ data })),
|
||||
disassociateTeamRole: jest.fn(),
|
||||
disassociateUserRole: jest.fn(),
|
||||
toJSON: () => '/api/',
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
test('passed methods as props are called appropriately', async () => {
|
||||
const mockAPIAccessList = {
|
||||
foo: 'bar',
|
||||
};
|
||||
const mockResponse = {
|
||||
status: 'success',
|
||||
};
|
||||
const wrapper = mountWithContexts(<OrganizationAccess organization={organization} />,
|
||||
{ context: { network: {
|
||||
api: {
|
||||
getOrganizationAccessList: () => Promise.resolve(mockAPIAccessList),
|
||||
disassociate: () => Promise.resolve(mockResponse)
|
||||
},
|
||||
handleHttpError: () => {}
|
||||
} } }).find('OrganizationAccess');
|
||||
const accessList = await wrapper.instance().getOrgAccessList();
|
||||
expect(accessList).toEqual(mockAPIAccessList);
|
||||
const resp = await wrapper.instance().removeRole(2, 3, 'users');
|
||||
expect(resp).toEqual(mockResponse);
|
||||
test.only('initially renders succesfully', () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationAccess id={1} organization={organization} />,
|
||||
{ context: { network } }
|
||||
);
|
||||
expect(wrapper.find('OrganizationAccess')).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should fetch and display access records on mount', async () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationAccess id={1} />,
|
||||
{ context: { network } }
|
||||
);
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
expect(network.api.getOrganizationAccessList).toHaveBeenCalled();
|
||||
expect(wrapper.find('OrganizationAccess').state('isInitialized')).toBe(true);
|
||||
expect(wrapper.find('PaginatedDataList').prop('items')).toEqual(data.results);
|
||||
expect(wrapper.find('OrganizationAccessItem')).toHaveLength(2);
|
||||
});
|
||||
|
||||
test('should open confirmation dialog when deleting role', async () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationAccess id={1} />,
|
||||
{ context: { network } }
|
||||
);
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
|
||||
const button = wrapper.find('ChipButton').at(0);
|
||||
button.prop('onClick')();
|
||||
wrapper.update();
|
||||
|
||||
const component = wrapper.find('OrganizationAccess');
|
||||
expect(component.state('roleToDelete'))
|
||||
.toEqual(data.results[0].summary_fields.direct_access[0].role);
|
||||
expect(component.state('roleToDeleteAccessRecord'))
|
||||
.toEqual(data.results[0]);
|
||||
expect(component.find('DeleteRoleConfirmationModal')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should close dialog when cancel button clicked', async () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationAccess id={1} />,
|
||||
{ context: { network } }
|
||||
);
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
const button = wrapper.find('ChipButton').at(0);
|
||||
button.prop('onClick')();
|
||||
wrapper.update();
|
||||
|
||||
wrapper.find('DeleteRoleConfirmationModal').prop('onCancel')();
|
||||
const component = wrapper.find('OrganizationAccess');
|
||||
expect(component.state('roleToDelete')).toBeNull();
|
||||
expect(component.state('roleToDeleteAccessRecord')).toBeNull();
|
||||
expect(network.api.disassociateTeamRole).not.toHaveBeenCalled();
|
||||
expect(network.api.disassociateUserRole).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should delete user role', async () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationAccess id={1} />,
|
||||
{ context: { network } }
|
||||
);
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
const button = wrapper.find('ChipButton').at(0);
|
||||
button.prop('onClick')();
|
||||
wrapper.update();
|
||||
|
||||
wrapper.find('DeleteRoleConfirmationModal').prop('onConfirm')();
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
|
||||
const component = wrapper.find('OrganizationAccess');
|
||||
expect(component.state('roleToDelete')).toBeNull();
|
||||
expect(component.state('roleToDeleteAccessRecord')).toBeNull();
|
||||
expect(network.api.disassociateTeamRole).not.toHaveBeenCalled();
|
||||
expect(network.api.disassociateUserRole).toHaveBeenCalledWith(1, 1);
|
||||
expect(network.api.getOrganizationAccessList).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it('should delete team role', async () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationAccess id={1} />,
|
||||
{ context: { network } }
|
||||
);
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
const button = wrapper.find('ChipButton').at(1);
|
||||
button.prop('onClick')();
|
||||
wrapper.update();
|
||||
|
||||
wrapper.find('DeleteRoleConfirmationModal').prop('onConfirm')();
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
|
||||
const component = wrapper.find('OrganizationAccess');
|
||||
expect(component.state('roleToDelete')).toBeNull();
|
||||
expect(component.state('roleToDeleteAccessRecord')).toBeNull();
|
||||
expect(network.api.disassociateTeamRole).toHaveBeenCalledWith(5, 3);
|
||||
expect(network.api.disassociateUserRole).not.toHaveBeenCalled();
|
||||
expect(network.api.getOrganizationAccessList).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,45 +1,170 @@
|
||||
import React from 'react';
|
||||
import { mountWithContexts } from '../../../../enzymeHelpers';
|
||||
|
||||
import OrganizationNotifications from '../../../../../src/pages/Organizations/screens/Organization/OrganizationNotifications';
|
||||
import { sleep } from '../../../../testUtils';
|
||||
|
||||
describe('<OrganizationNotifications />', () => {
|
||||
let api;
|
||||
let data;
|
||||
let network;
|
||||
|
||||
beforeEach(() => {
|
||||
api = {
|
||||
getOrganizationNotifications: jest.fn(),
|
||||
getOrganizationNotificationSuccess: jest.fn(),
|
||||
getOrganizationNotificationError: jest.fn(),
|
||||
createOrganizationNotificationSuccess: jest.fn(),
|
||||
createOrganizationNotificationError: jest.fn()
|
||||
data = {
|
||||
count: 2,
|
||||
results: [{
|
||||
id: 1,
|
||||
name: 'Notification one',
|
||||
url: '/api/v2/notification_templates/1/',
|
||||
notification_type: 'email',
|
||||
}, {
|
||||
id: 2,
|
||||
name: 'Notification two',
|
||||
url: '/api/v2/notification_templates/2/',
|
||||
notification_type: 'email',
|
||||
}]
|
||||
};
|
||||
network = {
|
||||
api: {
|
||||
getOrganizationNotifications: jest.fn()
|
||||
.mockReturnValue(Promise.resolve({ data })),
|
||||
getOrganizationNotificationSuccess: jest.fn()
|
||||
.mockReturnValue(Promise.resolve({
|
||||
data: { results: [{ id: 1 }] },
|
||||
})),
|
||||
getOrganizationNotificationError: jest.fn()
|
||||
.mockReturnValue(Promise.resolve({
|
||||
data: { results: [{ id: 2 }] },
|
||||
})),
|
||||
createOrganizationNotificationSuccess: jest.fn(),
|
||||
createOrganizationNotificationError: jest.fn(),
|
||||
toJSON: () => '/api/',
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
test('initially renders succesfully', () => {
|
||||
mountWithContexts(
|
||||
<OrganizationNotifications canToggleNotifications />, { context: { network: {
|
||||
api,
|
||||
handleHttpError: () => {}
|
||||
} } }
|
||||
);
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
test('handles api requests', () => {
|
||||
|
||||
test('initially renders succesfully', async () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationNotifications canToggleNotifications />, { context: { network: {
|
||||
api,
|
||||
handleHttpError: () => {}
|
||||
} } }
|
||||
).find('OrganizationNotifications');
|
||||
wrapper.instance().readOrgNotifications(1, { foo: 'bar' });
|
||||
expect(api.getOrganizationNotifications).toHaveBeenCalledWith(1, { foo: 'bar' });
|
||||
wrapper.instance().readOrgNotificationSuccess(1, { foo: 'bar' });
|
||||
expect(api.getOrganizationNotificationSuccess).toHaveBeenCalledWith(1, { foo: 'bar' });
|
||||
wrapper.instance().readOrgNotificationError(1, { foo: 'bar' });
|
||||
expect(api.getOrganizationNotificationError).toHaveBeenCalledWith(1, { foo: 'bar' });
|
||||
wrapper.instance().createOrgNotificationSuccess(1, { id: 2 });
|
||||
expect(api.createOrganizationNotificationSuccess).toHaveBeenCalledWith(1, { id: 2 });
|
||||
wrapper.instance().createOrgNotificationError(1, { id: 2 });
|
||||
expect(api.createOrganizationNotificationError).toHaveBeenCalledWith(1, { id: 2 });
|
||||
<OrganizationNotifications id={1} canToggleNotifications />,
|
||||
{ context: { network } }
|
||||
);
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should render list fetched of items', async () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationNotifications id={1} canToggleNotifications />,
|
||||
{
|
||||
context: { network }
|
||||
}
|
||||
);
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
|
||||
expect(network.api.getOrganizationNotifications).toHaveBeenCalled();
|
||||
expect(wrapper.find('OrganizationNotifications').state('notifications'))
|
||||
.toEqual(data.results);
|
||||
const items = wrapper.find('NotificationListItem');
|
||||
expect(items).toHaveLength(2);
|
||||
expect(items.at(0).prop('successTurnedOn')).toEqual(true);
|
||||
expect(items.at(0).prop('errorTurnedOn')).toEqual(false);
|
||||
expect(items.at(1).prop('successTurnedOn')).toEqual(false);
|
||||
expect(items.at(1).prop('errorTurnedOn')).toEqual(true);
|
||||
});
|
||||
|
||||
test('should enable success notification', async () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationNotifications id={1} canToggleNotifications />,
|
||||
{
|
||||
context: { network }
|
||||
}
|
||||
);
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
|
||||
expect(
|
||||
wrapper.find('OrganizationNotifications').state('successTemplateIds')
|
||||
).toEqual([1]);
|
||||
const items = wrapper.find('NotificationListItem');
|
||||
items.at(1).find('Switch').at(0).prop('onChange')();
|
||||
expect(network.api.createOrganizationNotificationSuccess).toHaveBeenCalled();
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper.find('OrganizationNotifications').state('successTemplateIds')
|
||||
).toEqual([1, 2]);
|
||||
});
|
||||
|
||||
test('should enable error notification', async () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationNotifications id={1} canToggleNotifications />,
|
||||
{
|
||||
context: { network }
|
||||
}
|
||||
);
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
|
||||
expect(
|
||||
wrapper.find('OrganizationNotifications').state('errorTemplateIds')
|
||||
).toEqual([2]);
|
||||
const items = wrapper.find('NotificationListItem');
|
||||
items.at(0).find('Switch').at(1).prop('onChange')();
|
||||
expect(network.api.createOrganizationNotificationError).toHaveBeenCalled();
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper.find('OrganizationNotifications').state('errorTemplateIds')
|
||||
).toEqual([2, 1]);
|
||||
});
|
||||
|
||||
test('should disable success notification', async () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationNotifications id={1} canToggleNotifications />,
|
||||
{
|
||||
context: { network }
|
||||
}
|
||||
);
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
|
||||
expect(
|
||||
wrapper.find('OrganizationNotifications').state('successTemplateIds')
|
||||
).toEqual([1]);
|
||||
const items = wrapper.find('NotificationListItem');
|
||||
items.at(0).find('Switch').at(0).prop('onChange')();
|
||||
expect(network.api.createOrganizationNotificationSuccess).toHaveBeenCalled();
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper.find('OrganizationNotifications').state('successTemplateIds')
|
||||
).toEqual([]);
|
||||
});
|
||||
|
||||
test('should disable error notification', async () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationNotifications id={1} canToggleNotifications />,
|
||||
{
|
||||
context: { network }
|
||||
}
|
||||
);
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
|
||||
expect(
|
||||
wrapper.find('OrganizationNotifications').state('errorTemplateIds')
|
||||
).toEqual([2]);
|
||||
const items = wrapper.find('NotificationListItem');
|
||||
items.at(1).find('Switch').at(1).prop('onChange')();
|
||||
expect(network.api.createOrganizationNotificationError).toHaveBeenCalled();
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper.find('OrganizationNotifications').state('errorTemplateIds')
|
||||
).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -5,7 +5,6 @@ import { createMemoryHistory } from 'history';
|
||||
import { mountWithContexts } from '../../../../enzymeHelpers';
|
||||
import { sleep } from '../../../../testUtils';
|
||||
import OrganizationTeams, { _OrganizationTeams } from '../../../../../src/pages/Organizations/screens/Organization/OrganizationTeams';
|
||||
import OrganizationTeamsList from '../../../../../src/pages/Organizations/components/OrganizationTeamsList';
|
||||
|
||||
const listData = {
|
||||
data: {
|
||||
@@ -52,7 +51,7 @@ describe('<OrganizationTeams />', () => {
|
||||
});
|
||||
});
|
||||
|
||||
test('should pass fetched teams to list component', async () => {
|
||||
test('should pass fetched teams to PaginatedDatalist', async () => {
|
||||
const readOrganizationTeamsList = jest.fn(() => Promise.resolve(listData));
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationTeams
|
||||
@@ -66,8 +65,8 @@ describe('<OrganizationTeams />', () => {
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
|
||||
const list = wrapper.find('OrganizationTeamsList');
|
||||
expect(list.prop('teams')).toEqual(listData.data.results);
|
||||
const list = wrapper.find('PaginatedDataList');
|
||||
expect(list.prop('items')).toEqual(listData.data.results);
|
||||
expect(list.prop('itemCount')).toEqual(listData.data.count);
|
||||
expect(list.prop('queryParams')).toEqual({
|
||||
page: 1,
|
||||
@@ -76,7 +75,7 @@ describe('<OrganizationTeams />', () => {
|
||||
});
|
||||
});
|
||||
|
||||
test('should pass queryParams to OrganizationTeamsList', async () => {
|
||||
test('should pass queryParams to PaginatedDataList', async () => {
|
||||
const page1Data = listData;
|
||||
const page2Data = {
|
||||
data: {
|
||||
@@ -111,7 +110,7 @@ describe('<OrganizationTeams />', () => {
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
|
||||
const list = wrapper.find(OrganizationTeamsList);
|
||||
const list = wrapper.find('PaginatedDataList');
|
||||
expect(list.prop('queryParams')).toEqual({
|
||||
page: 1,
|
||||
page_size: 5,
|
||||
@@ -123,7 +122,7 @@ describe('<OrganizationTeams />', () => {
|
||||
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
const list2 = wrapper.find(OrganizationTeamsList);
|
||||
const list2 = wrapper.find('PaginatedDataList');
|
||||
expect(list2.prop('queryParams')).toEqual({
|
||||
page: 2,
|
||||
page_size: 5,
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<OrganizationAccess /> initially renders succesfully 1`] = `
|
||||
<OrganizationAccess
|
||||
api={"/api/"}
|
||||
handleHttpError={[Function]}
|
||||
history={"/history/"}
|
||||
id={1}
|
||||
location={
|
||||
Object {
|
||||
"hash": "",
|
||||
"pathname": "",
|
||||
"search": "",
|
||||
"state": "",
|
||||
}
|
||||
}
|
||||
match={
|
||||
Object {
|
||||
"isExact": false,
|
||||
"params": Object {},
|
||||
"path": "",
|
||||
"url": "",
|
||||
}
|
||||
}
|
||||
organization={
|
||||
Object {
|
||||
"id": 1,
|
||||
"name": "Default",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div>
|
||||
Loading...
|
||||
</div>
|
||||
</OrganizationAccess>
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -15,6 +15,14 @@ describe('qs (qs.js)', () => {
|
||||
});
|
||||
});
|
||||
|
||||
test('encodeQueryString omits null values', () => {
|
||||
const vals = {
|
||||
order_by: 'name',
|
||||
page: null,
|
||||
};
|
||||
expect(encodeQueryString(vals)).toEqual('order_by=name');
|
||||
});
|
||||
|
||||
test('parseQueryString returns the expected queryParams', () => {
|
||||
[
|
||||
['order_by=name&page=1&page_size=5', ['page', 'page_size'], { order_by: 'name', page: 1, page_size: 5 }],
|
||||
@@ -26,4 +34,16 @@ describe('qs (qs.js)', () => {
|
||||
expect(actualQueryParams).toEqual(expectedQueryParams);
|
||||
});
|
||||
});
|
||||
|
||||
test('parseQueryString should strip leading "?"', () => {
|
||||
expect(parseQueryString('?foo=bar&order_by=win')).toEqual({
|
||||
foo: 'bar',
|
||||
order_by: 'win',
|
||||
});
|
||||
|
||||
expect(parseQueryString('foo=bar&order_by=?win')).toEqual({
|
||||
foo: 'bar',
|
||||
order_by: '?win',
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
34
__tests__/util/strings.test.js
Normal file
34
__tests__/util/strings.test.js
Normal file
@@ -0,0 +1,34 @@
|
||||
import { pluralize, getArticle, ucFirst } from '../../src/util/strings';
|
||||
|
||||
describe('string utils', () => {
|
||||
describe('pluralize', () => {
|
||||
test('should add an "s"', () => {
|
||||
expect(pluralize('team')).toEqual('teams');
|
||||
});
|
||||
|
||||
test('should add an "es"', () => {
|
||||
expect(pluralize('class')).toEqual('classes');
|
||||
});
|
||||
});
|
||||
|
||||
describe('getArticle', () => {
|
||||
test('should return "a"', () => {
|
||||
expect(getArticle('team')).toEqual('a');
|
||||
expect(getArticle('notification')).toEqual('a');
|
||||
});
|
||||
|
||||
test('should return "an"', () => {
|
||||
expect(getArticle('aardvark')).toEqual('an');
|
||||
expect(getArticle('ear')).toEqual('an');
|
||||
expect(getArticle('interest')).toEqual('an');
|
||||
expect(getArticle('ogre')).toEqual('an');
|
||||
expect(getArticle('umbrella')).toEqual('an');
|
||||
});
|
||||
});
|
||||
|
||||
describe('ucFirst', () => {
|
||||
test('should capitalize first character', () => {
|
||||
expect(ucFirst('team')).toEqual('Team');
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user