mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
TeamMembers: Refactor test to RTL (#49922)
This commit is contained in:
Alex Khomenko
GitHub
@@ -167,9 +167,6 @@ exports[`no enzyme tests`] = {
|
|||||||
"public/app/features/org/OrgProfile.test.tsx:623809345": [
|
"public/app/features/org/OrgProfile.test.tsx:623809345": [
|
||||||
[0, 19, 13, "RegExp match", "2409514259"]
|
[0, 19, 13, "RegExp match", "2409514259"]
|
||||||
],
|
],
|
||||||
"public/app/features/teams/TeamMembers.test.tsx:4089428239": [
|
|
||||||
[0, 19, 13, "RegExp match", "2409514259"]
|
|
||||||
],
|
|
||||||
"public/app/features/teams/TeamPages.test.tsx:3990420214": [
|
"public/app/features/teams/TeamPages.test.tsx:3990420214": [
|
||||||
[0, 19, 13, "RegExp match", "2409514259"]
|
[0, 19, 13, "RegExp match", "2409514259"]
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -1,18 +1,33 @@
|
|||||||
import { shallow } from 'enzyme';
|
import { render, screen, waitFor } from '@testing-library/react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { Provider } from 'react-redux';
|
||||||
import { mockToolkitActionCreator } from 'test/core/redux/mocks';
|
import { mockToolkitActionCreator } from 'test/core/redux/mocks';
|
||||||
|
|
||||||
import { User } from 'app/core/services/context_srv';
|
import { User } from 'app/core/services/context_srv';
|
||||||
|
import { configureStore } from 'app/store/configureStore';
|
||||||
|
|
||||||
import { OrgRole, TeamMember } from '../../types';
|
import { OrgRole, TeamMember } from '../../types';
|
||||||
|
|
||||||
import { Props, State, TeamMembers } from './TeamMembers';
|
import { Props, TeamMembers } from './TeamMembers';
|
||||||
import { getMockTeamMembers } from './__mocks__/teamMocks';
|
import { getMockTeamMembers } from './__mocks__/teamMocks';
|
||||||
import { setSearchMemberQuery } from './state/reducers';
|
import { setSearchMemberQuery } from './state/reducers';
|
||||||
|
|
||||||
const signedInUserId = 1;
|
const signedInUserId = 1;
|
||||||
|
|
||||||
|
jest.mock('@grafana/runtime', () => ({
|
||||||
|
...jest.requireActual('@grafana/runtime'),
|
||||||
|
getBackendSrv: () => ({
|
||||||
|
get: jest.fn().mockResolvedValue([{ userId: 1, login: 'Test' }]),
|
||||||
|
}),
|
||||||
|
config: {
|
||||||
|
bootData: { navTree: [], user: {} },
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
const setup = (propOverrides?: object) => {
|
const setup = (propOverrides?: object) => {
|
||||||
|
const store = configureStore();
|
||||||
|
|
||||||
const props: Props = {
|
const props: Props = {
|
||||||
members: [] as TeamMember[],
|
members: [] as TeamMember[],
|
||||||
searchMemberQuery: '',
|
searchMemberQuery: '',
|
||||||
@@ -29,55 +44,24 @@ const setup = (propOverrides?: object) => {
|
|||||||
|
|
||||||
Object.assign(props, propOverrides);
|
Object.assign(props, propOverrides);
|
||||||
|
|
||||||
const wrapper = shallow(<TeamMembers {...props} />);
|
render(
|
||||||
const instance = wrapper.instance() as TeamMembers;
|
<Provider store={store}>
|
||||||
|
<TeamMembers {...props} />
|
||||||
return {
|
</Provider>
|
||||||
wrapper,
|
);
|
||||||
instance,
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
describe('Render', () => {
|
describe('TeamMembers', () => {
|
||||||
it('should render component', () => {
|
it('should render team members', async () => {
|
||||||
const { wrapper } = setup({});
|
setup({ members: getMockTeamMembers(1, 1) });
|
||||||
|
expect(await screen.findAllByRole('row')).toHaveLength(2);
|
||||||
expect(wrapper).toMatchSnapshot();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render team members', () => {
|
it('should add user to a team', async () => {
|
||||||
const { wrapper } = setup({ members: getMockTeamMembers(5, 5) });
|
const mockAdd = jest.fn();
|
||||||
|
setup({ addTeamMember: mockAdd });
|
||||||
expect(wrapper).toMatchSnapshot();
|
await userEvent.type(screen.getByLabelText('User picker'), 'Test{enter}');
|
||||||
});
|
await userEvent.click(screen.getByRole('button', { name: 'Add to team' }));
|
||||||
});
|
await waitFor(() => expect(mockAdd).toHaveBeenCalledWith(1));
|
||||||
|
|
||||||
describe('Functions', () => {
|
|
||||||
describe('on search member query change', () => {
|
|
||||||
it('it should call setSearchMemberQuery', () => {
|
|
||||||
const { instance } = setup({});
|
|
||||||
|
|
||||||
instance.onSearchQueryChange('member');
|
|
||||||
|
|
||||||
expect(instance.props.setSearchMemberQuery).toHaveBeenCalledWith('member');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('on add user to team', () => {
|
|
||||||
const { wrapper, instance } = setup({});
|
|
||||||
const state = wrapper.state() as State;
|
|
||||||
|
|
||||||
state.newTeamMember = {
|
|
||||||
id: 1,
|
|
||||||
label: '',
|
|
||||||
avatarUrl: '',
|
|
||||||
login: '',
|
|
||||||
name: '',
|
|
||||||
email: '',
|
|
||||||
};
|
|
||||||
|
|
||||||
instance.onAddUserToTeam();
|
|
||||||
|
|
||||||
expect(instance.props.addTeamMember).toHaveBeenCalledWith(1);
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,283 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`Render should render component 1`] = `
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
className="page-action-bar"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="gf-form gf-form--grow"
|
|
||||||
>
|
|
||||||
<FilterInput
|
|
||||||
onChange={[Function]}
|
|
||||||
placeholder="Search members"
|
|
||||||
value=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
className="pull-right"
|
|
||||||
disabled={false}
|
|
||||||
onClick={[Function]}
|
|
||||||
>
|
|
||||||
Add member
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<SlideDown
|
|
||||||
in={false}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="cta-form"
|
|
||||||
>
|
|
||||||
<CloseButton
|
|
||||||
aria-label="Close 'Add team member' dialogue"
|
|
||||||
onClick={[Function]}
|
|
||||||
/>
|
|
||||||
<Label
|
|
||||||
htmlFor="user-picker"
|
|
||||||
>
|
|
||||||
Add team member
|
|
||||||
</Label>
|
|
||||||
<div
|
|
||||||
className="gf-form-inline"
|
|
||||||
>
|
|
||||||
<UserPicker
|
|
||||||
className="min-width-30"
|
|
||||||
inputId="user-picker"
|
|
||||||
onSelected={[Function]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</SlideDown>
|
|
||||||
<div
|
|
||||||
className="admin-list-table"
|
|
||||||
>
|
|
||||||
<table
|
|
||||||
className="filter-table filter-table--hover form-inline"
|
|
||||||
>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th />
|
|
||||||
<th>
|
|
||||||
Login
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
Email
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
Name
|
|
||||||
</th>
|
|
||||||
<WithFeatureToggle
|
|
||||||
featureToggle={false}
|
|
||||||
>
|
|
||||||
<th>
|
|
||||||
Permission
|
|
||||||
</th>
|
|
||||||
</WithFeatureToggle>
|
|
||||||
<th
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"width": "1%",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody />
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`Render should render team members 1`] = `
|
|
||||||
<div>
|
|
||||||
<div
|
|
||||||
className="page-action-bar"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="gf-form gf-form--grow"
|
|
||||||
>
|
|
||||||
<FilterInput
|
|
||||||
onChange={[Function]}
|
|
||||||
placeholder="Search members"
|
|
||||||
value=""
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
className="pull-right"
|
|
||||||
disabled={false}
|
|
||||||
onClick={[Function]}
|
|
||||||
>
|
|
||||||
Add member
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<SlideDown
|
|
||||||
in={false}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="cta-form"
|
|
||||||
>
|
|
||||||
<CloseButton
|
|
||||||
aria-label="Close 'Add team member' dialogue"
|
|
||||||
onClick={[Function]}
|
|
||||||
/>
|
|
||||||
<Label
|
|
||||||
htmlFor="user-picker"
|
|
||||||
>
|
|
||||||
Add team member
|
|
||||||
</Label>
|
|
||||||
<div
|
|
||||||
className="gf-form-inline"
|
|
||||||
>
|
|
||||||
<UserPicker
|
|
||||||
className="min-width-30"
|
|
||||||
inputId="user-picker"
|
|
||||||
onSelected={[Function]}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</SlideDown>
|
|
||||||
<div
|
|
||||||
className="admin-list-table"
|
|
||||||
>
|
|
||||||
<table
|
|
||||||
className="filter-table filter-table--hover form-inline"
|
|
||||||
>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th />
|
|
||||||
<th>
|
|
||||||
Login
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
Email
|
|
||||||
</th>
|
|
||||||
<th>
|
|
||||||
Name
|
|
||||||
</th>
|
|
||||||
<WithFeatureToggle
|
|
||||||
featureToggle={false}
|
|
||||||
>
|
|
||||||
<th>
|
|
||||||
Permission
|
|
||||||
</th>
|
|
||||||
</WithFeatureToggle>
|
|
||||||
<th
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"width": "1%",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<Connect(TeamMemberRow)
|
|
||||||
editorsCanAdmin={false}
|
|
||||||
key="1"
|
|
||||||
member={
|
|
||||||
Object {
|
|
||||||
"avatarUrl": "some/url/",
|
|
||||||
"email": "test@test.com",
|
|
||||||
"labels": Array [
|
|
||||||
"label 1",
|
|
||||||
"label 2",
|
|
||||||
],
|
|
||||||
"login": "testUser-1",
|
|
||||||
"name": "testName",
|
|
||||||
"permission": 0,
|
|
||||||
"teamId": 1,
|
|
||||||
"userId": 1,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
signedInUserIsTeamAdmin={true}
|
|
||||||
syncEnabled={false}
|
|
||||||
/>
|
|
||||||
<Connect(TeamMemberRow)
|
|
||||||
editorsCanAdmin={false}
|
|
||||||
key="2"
|
|
||||||
member={
|
|
||||||
Object {
|
|
||||||
"avatarUrl": "some/url/",
|
|
||||||
"email": "test@test.com",
|
|
||||||
"labels": Array [
|
|
||||||
"label 1",
|
|
||||||
"label 2",
|
|
||||||
],
|
|
||||||
"login": "testUser-2",
|
|
||||||
"name": "testName",
|
|
||||||
"permission": 0,
|
|
||||||
"teamId": 1,
|
|
||||||
"userId": 2,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
signedInUserIsTeamAdmin={true}
|
|
||||||
syncEnabled={false}
|
|
||||||
/>
|
|
||||||
<Connect(TeamMemberRow)
|
|
||||||
editorsCanAdmin={false}
|
|
||||||
key="3"
|
|
||||||
member={
|
|
||||||
Object {
|
|
||||||
"avatarUrl": "some/url/",
|
|
||||||
"email": "test@test.com",
|
|
||||||
"labels": Array [
|
|
||||||
"label 1",
|
|
||||||
"label 2",
|
|
||||||
],
|
|
||||||
"login": "testUser-3",
|
|
||||||
"name": "testName",
|
|
||||||
"permission": 0,
|
|
||||||
"teamId": 1,
|
|
||||||
"userId": 3,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
signedInUserIsTeamAdmin={true}
|
|
||||||
syncEnabled={false}
|
|
||||||
/>
|
|
||||||
<Connect(TeamMemberRow)
|
|
||||||
editorsCanAdmin={false}
|
|
||||||
key="4"
|
|
||||||
member={
|
|
||||||
Object {
|
|
||||||
"avatarUrl": "some/url/",
|
|
||||||
"email": "test@test.com",
|
|
||||||
"labels": Array [
|
|
||||||
"label 1",
|
|
||||||
"label 2",
|
|
||||||
],
|
|
||||||
"login": "testUser-4",
|
|
||||||
"name": "testName",
|
|
||||||
"permission": 0,
|
|
||||||
"teamId": 1,
|
|
||||||
"userId": 4,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
signedInUserIsTeamAdmin={true}
|
|
||||||
syncEnabled={false}
|
|
||||||
/>
|
|
||||||
<Connect(TeamMemberRow)
|
|
||||||
editorsCanAdmin={false}
|
|
||||||
key="5"
|
|
||||||
member={
|
|
||||||
Object {
|
|
||||||
"avatarUrl": "some/url/",
|
|
||||||
"email": "test@test.com",
|
|
||||||
"labels": Array [
|
|
||||||
"label 1",
|
|
||||||
"label 2",
|
|
||||||
],
|
|
||||||
"login": "testUser-5",
|
|
||||||
"name": "testName",
|
|
||||||
"permission": 4,
|
|
||||||
"teamId": 1,
|
|
||||||
"userId": 5,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
signedInUserIsTeamAdmin={true}
|
|
||||||
syncEnabled={false}
|
|
||||||
/>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
Reference in New Issue
Block a user