mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
TeamMemberRow: Convert tests to RTL (#49875)
* TeamMemberRow: Remove legacy select * TeamMemberRow: Update attributes * TeamMemberRow: Refactor tests to RTL
This commit is contained in:
Alex Khomenko
GitHub
parent
387267b30a
commit
bfbe856319
@ -170,9 +170,6 @@ exports[`no enzyme tests`] = {
|
||||
"public/app/features/org/OrgProfile.test.tsx:623809345": [
|
||||
[0, 19, 13, "RegExp match", "2409514259"]
|
||||
],
|
||||
"public/app/features/teams/TeamMemberRow.test.tsx:1649328210": [
|
||||
[0, 19, 13, "RegExp match", "2409514259"]
|
||||
],
|
||||
"public/app/features/teams/TeamMembers.test.tsx:4089428239": [
|
||||
[0, 19, 13, "RegExp match", "2409514259"]
|
||||
],
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
import { shallow } from 'enzyme';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
|
||||
import { SelectableValue } from '@grafana/data';
|
||||
|
||||
import { TeamMember, TeamPermissionLevel } from '../../types';
|
||||
import { TeamPermissionLevel } from '../../types';
|
||||
|
||||
import { TeamMemberRow, Props } from './TeamMemberRow';
|
||||
import { getMockTeamMember } from './__mocks__/teamMocks';
|
||||
@ -20,75 +19,60 @@ const setup = (propOverrides?: object) => {
|
||||
|
||||
Object.assign(props, propOverrides);
|
||||
|
||||
const wrapper = shallow(<TeamMemberRow {...props} />);
|
||||
const instance = wrapper.instance() as TeamMemberRow;
|
||||
|
||||
return {
|
||||
wrapper,
|
||||
instance,
|
||||
};
|
||||
render(
|
||||
<table>
|
||||
<tbody>
|
||||
<TeamMemberRow {...props} />
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
};
|
||||
|
||||
describe('Render', () => {
|
||||
it('should render team members when sync enabled', () => {
|
||||
it('should render team member labels when sync enabled', () => {
|
||||
const member = getMockTeamMember();
|
||||
member.labels = ['LDAP'];
|
||||
const { wrapper } = setup({ member, syncEnabled: true });
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
setup({ member, syncEnabled: true });
|
||||
expect(screen.getByText('LDAP')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
describe('when feature toggle editorsCanAdmin is turned on', () => {
|
||||
it('should render permissions select if user is team admin', () => {
|
||||
const { wrapper } = setup({ editorsCanAdmin: true, signedInUserIsTeamAdmin: true });
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render span and disable buttons if user is team member', () => {
|
||||
const { wrapper } = setup({ editorsCanAdmin: true, signedInUserIsTeamAdmin: false });
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
const member = getMockTeamMember();
|
||||
setup({ editorsCanAdmin: true, signedInUserIsTeamAdmin: true, member });
|
||||
expect(screen.getByLabelText(`Select member's ${member.name} permission level`)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('when feature toggle editorsCanAdmin is turned off', () => {
|
||||
it('should not render permissions', () => {
|
||||
const { wrapper } = setup({ editorsCanAdmin: false, signedInUserIsTeamAdmin: true });
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
const member = getMockTeamMember();
|
||||
setup({ editorsCanAdmin: false, signedInUserIsTeamAdmin: true, member });
|
||||
expect(screen.queryByLabelText(`Select member's ${member.name} permission level`)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Functions', () => {
|
||||
describe('on remove member', () => {
|
||||
it('should remove member on remove button click', async () => {
|
||||
const member = getMockTeamMember();
|
||||
const { instance } = setup({ member });
|
||||
const mockRemove = jest.fn();
|
||||
setup({ member, removeTeamMember: mockRemove, editorsCanAdmin: true, signedInUserIsTeamAdmin: true });
|
||||
await userEvent.click(screen.getByRole('button', { name: `Remove team member ${member.name}` }));
|
||||
await userEvent.click(screen.getByRole('button', { name: 'Delete' }));
|
||||
|
||||
instance.onRemoveMember(member);
|
||||
|
||||
expect(instance.props.removeTeamMember).toHaveBeenCalledWith(1);
|
||||
expect(mockRemove).toHaveBeenCalledWith(member.userId);
|
||||
});
|
||||
|
||||
describe('on update permision for user in team', () => {
|
||||
const member: TeamMember = {
|
||||
userId: 3,
|
||||
teamId: 2,
|
||||
avatarUrl: '',
|
||||
email: 'user@user.org',
|
||||
login: 'member',
|
||||
name: 'member',
|
||||
labels: [],
|
||||
permission: TeamPermissionLevel.Member,
|
||||
};
|
||||
const { instance } = setup({ member });
|
||||
it('should update permission for user in team', async () => {
|
||||
const member = getMockTeamMember();
|
||||
const mockUpdate = jest.fn();
|
||||
setup({ member, editorsCanAdmin: true, signedInUserIsTeamAdmin: true, updateTeamMember: mockUpdate });
|
||||
const permission = TeamPermissionLevel.Admin;
|
||||
const item: SelectableValue<TeamPermissionLevel> = { value: permission };
|
||||
const expectedTeamMemeber = { ...member, permission };
|
||||
const expectedTeamMember = { ...member, permission };
|
||||
await userEvent.click(screen.getByLabelText(`Select member's ${member.name} permission level`));
|
||||
await userEvent.click(screen.getByText('Admin'));
|
||||
|
||||
instance.onPermissionChange(item, member);
|
||||
|
||||
expect(instance.props.updateTeamMember).toHaveBeenCalledWith(expectedTeamMemeber);
|
||||
expect(mockUpdate).toHaveBeenCalledWith(expectedTeamMember);
|
||||
});
|
||||
});
|
||||
|
||||
@ -2,15 +2,13 @@ import React, { PureComponent } from 'react';
|
||||
import { connect, ConnectedProps } from 'react-redux';
|
||||
|
||||
import { SelectableValue } from '@grafana/data';
|
||||
import { LegacyForms, DeleteButton } from '@grafana/ui';
|
||||
import { Select, DeleteButton } from '@grafana/ui';
|
||||
import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
|
||||
import { WithFeatureToggle } from 'app/core/components/WithFeatureToggle';
|
||||
import { TeamMember, teamsPermissionLevels, TeamPermissionLevel } from 'app/types';
|
||||
|
||||
import { updateTeamMember, removeTeamMember } from './state/actions';
|
||||
|
||||
const { Select } = LegacyForms;
|
||||
|
||||
const mapDispatchToProps = {
|
||||
removeTeamMember,
|
||||
updateTeamMember,
|
||||
@ -54,18 +52,18 @@ export class TeamMemberRow extends PureComponent<Props> {
|
||||
return (
|
||||
<WithFeatureToggle featureToggle={editorsCanAdmin}>
|
||||
<td className="width-5 team-permissions">
|
||||
<div className="gf-form">
|
||||
{signedInUserIsTeamAdmin && (
|
||||
{signedInUserIsTeamAdmin ? (
|
||||
<Select
|
||||
isSearchable={false}
|
||||
options={teamsPermissionLevels}
|
||||
onChange={(item) => this.onPermissionChange(item, member)}
|
||||
className="gf-form-select-box__control--menu-right"
|
||||
value={value}
|
||||
width={32}
|
||||
aria-label={`Select member's ${member.name} permission level`}
|
||||
/>
|
||||
) : (
|
||||
<span>{value.label}</span>
|
||||
)}
|
||||
{!signedInUserIsTeamAdmin && <span>{value.label}</span>}
|
||||
</div>
|
||||
</td>
|
||||
</WithFeatureToggle>
|
||||
);
|
||||
@ -91,7 +89,7 @@ export class TeamMemberRow extends PureComponent<Props> {
|
||||
<tr key={member.userId}>
|
||||
<td className="width-4 text-center">
|
||||
<img
|
||||
aria-label={`Avatar for team member "${member.name}"`}
|
||||
alt={`Avatar for team member "${member.name}"`}
|
||||
className="filter-table__avatar"
|
||||
src={member.avatarUrl}
|
||||
/>
|
||||
@ -103,7 +101,7 @@ export class TeamMemberRow extends PureComponent<Props> {
|
||||
{syncEnabled && this.renderLabels(member.labels)}
|
||||
<td className="text-right">
|
||||
<DeleteButton
|
||||
aria-label="Remove team member"
|
||||
aria-label={`Remove team member ${member.name}`}
|
||||
size="sm"
|
||||
disabled={!signedInUserIsTeamAdmin}
|
||||
onConfirm={() => this.onRemoveMember(member)}
|
||||
|
||||
@ -1,294 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Render should render team members when sync enabled 1`] = `
|
||||
<tr
|
||||
key="1"
|
||||
>
|
||||
<td
|
||||
className="width-4 text-center"
|
||||
>
|
||||
<img
|
||||
aria-label="Avatar for team member \\"testName\\""
|
||||
className="filter-table__avatar"
|
||||
src="some/url/"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
testUser
|
||||
</td>
|
||||
<td>
|
||||
test@test.com
|
||||
</td>
|
||||
<td>
|
||||
testName
|
||||
</td>
|
||||
<WithFeatureToggle
|
||||
featureToggle={false}
|
||||
>
|
||||
<td
|
||||
className="width-5 team-permissions"
|
||||
>
|
||||
<div
|
||||
className="gf-form"
|
||||
>
|
||||
<span>
|
||||
Member
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</WithFeatureToggle>
|
||||
<td>
|
||||
<TagBadge
|
||||
count={0}
|
||||
key="LDAP"
|
||||
label="LDAP"
|
||||
onClick={[Function]}
|
||||
removeIcon={false}
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
className="text-right"
|
||||
>
|
||||
<DeleteButton
|
||||
aria-label="Remove team member"
|
||||
disabled={true}
|
||||
onConfirm={[Function]}
|
||||
size="sm"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
|
||||
exports[`Render when feature toggle editorsCanAdmin is turned off should not render permissions 1`] = `
|
||||
<tr
|
||||
key="1"
|
||||
>
|
||||
<td
|
||||
className="width-4 text-center"
|
||||
>
|
||||
<img
|
||||
aria-label="Avatar for team member \\"testName\\""
|
||||
className="filter-table__avatar"
|
||||
src="some/url/"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
testUser
|
||||
</td>
|
||||
<td>
|
||||
test@test.com
|
||||
</td>
|
||||
<td>
|
||||
testName
|
||||
</td>
|
||||
<WithFeatureToggle
|
||||
featureToggle={false}
|
||||
>
|
||||
<td
|
||||
className="width-5 team-permissions"
|
||||
>
|
||||
<div
|
||||
className="gf-form"
|
||||
>
|
||||
<Select
|
||||
allowCustomValue={false}
|
||||
autoFocus={false}
|
||||
backspaceRemovesValue={true}
|
||||
className="gf-form-select-box__control--menu-right"
|
||||
components={
|
||||
Object {
|
||||
"Group": [Function],
|
||||
"IndicatorsContainer": [Function],
|
||||
"MenuList": [Function],
|
||||
"Option": [Function],
|
||||
"SingleValue": [Function],
|
||||
}
|
||||
}
|
||||
isClearable={false}
|
||||
isDisabled={false}
|
||||
isLoading={false}
|
||||
isMulti={false}
|
||||
isSearchable={false}
|
||||
maxMenuHeight={300}
|
||||
onChange={[Function]}
|
||||
openMenuOnFocus={false}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"description": "Is team member",
|
||||
"label": "Member",
|
||||
"value": 0,
|
||||
},
|
||||
Object {
|
||||
"description": "Can add/remove permissions, members and delete team.",
|
||||
"label": "Admin",
|
||||
"value": 4,
|
||||
},
|
||||
]
|
||||
}
|
||||
tabSelectsValue={true}
|
||||
value={
|
||||
Object {
|
||||
"description": "Is team member",
|
||||
"label": "Member",
|
||||
"value": 0,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</WithFeatureToggle>
|
||||
<td
|
||||
className="text-right"
|
||||
>
|
||||
<DeleteButton
|
||||
aria-label="Remove team member"
|
||||
disabled={false}
|
||||
onConfirm={[Function]}
|
||||
size="sm"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
|
||||
exports[`Render when feature toggle editorsCanAdmin is turned on should render permissions select if user is team admin 1`] = `
|
||||
<tr
|
||||
key="1"
|
||||
>
|
||||
<td
|
||||
className="width-4 text-center"
|
||||
>
|
||||
<img
|
||||
aria-label="Avatar for team member \\"testName\\""
|
||||
className="filter-table__avatar"
|
||||
src="some/url/"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
testUser
|
||||
</td>
|
||||
<td>
|
||||
test@test.com
|
||||
</td>
|
||||
<td>
|
||||
testName
|
||||
</td>
|
||||
<WithFeatureToggle
|
||||
featureToggle={true}
|
||||
>
|
||||
<td
|
||||
className="width-5 team-permissions"
|
||||
>
|
||||
<div
|
||||
className="gf-form"
|
||||
>
|
||||
<Select
|
||||
allowCustomValue={false}
|
||||
autoFocus={false}
|
||||
backspaceRemovesValue={true}
|
||||
className="gf-form-select-box__control--menu-right"
|
||||
components={
|
||||
Object {
|
||||
"Group": [Function],
|
||||
"IndicatorsContainer": [Function],
|
||||
"MenuList": [Function],
|
||||
"Option": [Function],
|
||||
"SingleValue": [Function],
|
||||
}
|
||||
}
|
||||
isClearable={false}
|
||||
isDisabled={false}
|
||||
isLoading={false}
|
||||
isMulti={false}
|
||||
isSearchable={false}
|
||||
maxMenuHeight={300}
|
||||
onChange={[Function]}
|
||||
openMenuOnFocus={false}
|
||||
options={
|
||||
Array [
|
||||
Object {
|
||||
"description": "Is team member",
|
||||
"label": "Member",
|
||||
"value": 0,
|
||||
},
|
||||
Object {
|
||||
"description": "Can add/remove permissions, members and delete team.",
|
||||
"label": "Admin",
|
||||
"value": 4,
|
||||
},
|
||||
]
|
||||
}
|
||||
tabSelectsValue={true}
|
||||
value={
|
||||
Object {
|
||||
"description": "Is team member",
|
||||
"label": "Member",
|
||||
"value": 0,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</WithFeatureToggle>
|
||||
<td
|
||||
className="text-right"
|
||||
>
|
||||
<DeleteButton
|
||||
aria-label="Remove team member"
|
||||
disabled={false}
|
||||
onConfirm={[Function]}
|
||||
size="sm"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
|
||||
exports[`Render when feature toggle editorsCanAdmin is turned on should render span and disable buttons if user is team member 1`] = `
|
||||
<tr
|
||||
key="1"
|
||||
>
|
||||
<td
|
||||
className="width-4 text-center"
|
||||
>
|
||||
<img
|
||||
aria-label="Avatar for team member \\"testName\\""
|
||||
className="filter-table__avatar"
|
||||
src="some/url/"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
testUser
|
||||
</td>
|
||||
<td>
|
||||
test@test.com
|
||||
</td>
|
||||
<td>
|
||||
testName
|
||||
</td>
|
||||
<WithFeatureToggle
|
||||
featureToggle={true}
|
||||
>
|
||||
<td
|
||||
className="width-5 team-permissions"
|
||||
>
|
||||
<div
|
||||
className="gf-form"
|
||||
>
|
||||
<span>
|
||||
Member
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</WithFeatureToggle>
|
||||
<td
|
||||
className="text-right"
|
||||
>
|
||||
<DeleteButton
|
||||
aria-label="Remove team member"
|
||||
disabled={true}
|
||||
onConfirm={[Function]}
|
||||
size="sm"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
Loading…
Reference in New Issue
Block a user