mirror of
https://github.com/grafana/grafana.git
synced 2025-02-09 23:16:16 -06:00
Convert Enzyme UsersTable test to RTL (#49836)
* Convert Enzyme UsersTable test to RTL * Fixes on UsersTable test; no additions * remove snapshot of UsersTable test
This commit is contained in:
polibb
GitHub
parent
a7813275a5
commit
a19c3dae5a
@ -173,9 +173,6 @@ exports[`no enzyme tests`] = {
|
||||
"public/app/features/users/UsersListPage.test.tsx:2518052139": [
|
||||
[0, 19, 13, "RegExp match", "2409514259"]
|
||||
],
|
||||
"public/app/features/users/UsersTable.test.tsx:263958312": [
|
||||
[0, 19, 13, "RegExp match", "2409514259"]
|
||||
],
|
||||
"public/app/plugins/datasource/cloud-monitoring/components/Aggregation.test.tsx:3822406835": [
|
||||
[1, 19, 13, "RegExp match", "2409514259"]
|
||||
],
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { shallow } from 'enzyme';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import React from 'react';
|
||||
|
||||
import { ConfirmModal } from '@grafana/ui';
|
||||
import { OrgUser } from 'app/types';
|
||||
|
||||
import UsersTable, { Props } from './UsersTable';
|
||||
@ -24,30 +24,32 @@ const setup = (propOverrides?: object) => {
|
||||
|
||||
Object.assign(props, propOverrides);
|
||||
|
||||
return shallow(<UsersTable {...props} />);
|
||||
render(<UsersTable {...props} />);
|
||||
};
|
||||
|
||||
describe('Render', () => {
|
||||
it('should render component', () => {
|
||||
const wrapper = setup();
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
expect(() => setup()).not.toThrow();
|
||||
});
|
||||
|
||||
it('should render users table', () => {
|
||||
const wrapper = setup({
|
||||
users: getMockUsers(5),
|
||||
});
|
||||
it('should render users in table', () => {
|
||||
const usersData = getMockUsers(5);
|
||||
setup({ users: usersData });
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
usersData.forEach((user) => {
|
||||
expect(screen.getByText(user.name)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('Remove modal', () => {
|
||||
it('should render correct amount', () => {
|
||||
const wrapper = setup({
|
||||
users: getMockUsers(3),
|
||||
});
|
||||
expect(wrapper.find(ConfirmModal).length).toEqual(0);
|
||||
it('should render confirm check on delete', async () => {
|
||||
const usersData = getMockUsers(3);
|
||||
setup({ users: usersData });
|
||||
const user = userEvent.setup();
|
||||
|
||||
await user.click(screen.getAllByRole('button', { name: /delete/i })[0]);
|
||||
|
||||
expect(screen.getByText(/are you sure/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,466 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Render should render component 1`] = `
|
||||
<Fragment>
|
||||
<table
|
||||
className="filter-table form-inline"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th />
|
||||
<th>
|
||||
Login
|
||||
</th>
|
||||
<th>
|
||||
Email
|
||||
</th>
|
||||
<th>
|
||||
Name
|
||||
</th>
|
||||
<th>
|
||||
Seen
|
||||
</th>
|
||||
<th>
|
||||
Role
|
||||
</th>
|
||||
<th
|
||||
style={
|
||||
Object {
|
||||
"width": "34px",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody />
|
||||
</table>
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
exports[`Render should render users table 1`] = `
|
||||
<Fragment>
|
||||
<table
|
||||
className="filter-table form-inline"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th />
|
||||
<th>
|
||||
Login
|
||||
</th>
|
||||
<th>
|
||||
Email
|
||||
</th>
|
||||
<th>
|
||||
Name
|
||||
</th>
|
||||
<th>
|
||||
Seen
|
||||
</th>
|
||||
<th>
|
||||
Role
|
||||
</th>
|
||||
<th
|
||||
style={
|
||||
Object {
|
||||
"width": "34px",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
key="0-0"
|
||||
>
|
||||
<td
|
||||
className="width-2 text-center"
|
||||
>
|
||||
<img
|
||||
alt="User avatar"
|
||||
className="filter-table__avatar"
|
||||
src="url/to/avatar"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-6"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-0"
|
||||
>
|
||||
user-0
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-5"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-0@test.com"
|
||||
>
|
||||
user-0@test.com
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-5"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-0 test"
|
||||
>
|
||||
user-0 test
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="width-1"
|
||||
/>
|
||||
<td
|
||||
className="width-8"
|
||||
>
|
||||
<OrgRolePicker
|
||||
aria-label="Role"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
value="Admin"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Button
|
||||
aria-label="Delete user"
|
||||
icon="times"
|
||||
onClick={[Function]}
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
key="1-1"
|
||||
>
|
||||
<td
|
||||
className="width-2 text-center"
|
||||
>
|
||||
<img
|
||||
alt="User avatar"
|
||||
className="filter-table__avatar"
|
||||
src="url/to/avatar"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-6"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-1"
|
||||
>
|
||||
user-1
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-5"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-1@test.com"
|
||||
>
|
||||
user-1@test.com
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-5"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-1 test"
|
||||
>
|
||||
user-1 test
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="width-1"
|
||||
/>
|
||||
<td
|
||||
className="width-8"
|
||||
>
|
||||
<OrgRolePicker
|
||||
aria-label="Role"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
value="Admin"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Button
|
||||
aria-label="Delete user"
|
||||
icon="times"
|
||||
onClick={[Function]}
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
key="2-2"
|
||||
>
|
||||
<td
|
||||
className="width-2 text-center"
|
||||
>
|
||||
<img
|
||||
alt="User avatar"
|
||||
className="filter-table__avatar"
|
||||
src="url/to/avatar"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-6"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-2"
|
||||
>
|
||||
user-2
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-5"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-2@test.com"
|
||||
>
|
||||
user-2@test.com
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-5"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-2 test"
|
||||
>
|
||||
user-2 test
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="width-1"
|
||||
/>
|
||||
<td
|
||||
className="width-8"
|
||||
>
|
||||
<OrgRolePicker
|
||||
aria-label="Role"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
value="Admin"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Button
|
||||
aria-label="Delete user"
|
||||
icon="times"
|
||||
onClick={[Function]}
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
key="3-3"
|
||||
>
|
||||
<td
|
||||
className="width-2 text-center"
|
||||
>
|
||||
<img
|
||||
alt="User avatar"
|
||||
className="filter-table__avatar"
|
||||
src="url/to/avatar"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-6"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-3"
|
||||
>
|
||||
user-3
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-5"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-3@test.com"
|
||||
>
|
||||
user-3@test.com
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-5"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-3 test"
|
||||
>
|
||||
user-3 test
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="width-1"
|
||||
/>
|
||||
<td
|
||||
className="width-8"
|
||||
>
|
||||
<OrgRolePicker
|
||||
aria-label="Role"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
value="Admin"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Button
|
||||
aria-label="Delete user"
|
||||
icon="times"
|
||||
onClick={[Function]}
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
key="4-4"
|
||||
>
|
||||
<td
|
||||
className="width-2 text-center"
|
||||
>
|
||||
<img
|
||||
alt="User avatar"
|
||||
className="filter-table__avatar"
|
||||
src="url/to/avatar"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-6"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-4"
|
||||
>
|
||||
user-4
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-5"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-4@test.com"
|
||||
>
|
||||
user-4@test.com
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-5"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-4 test"
|
||||
>
|
||||
user-4 test
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="width-1"
|
||||
/>
|
||||
<td
|
||||
className="width-8"
|
||||
>
|
||||
<OrgRolePicker
|
||||
aria-label="Role"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
value="Admin"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Button
|
||||
aria-label="Delete user"
|
||||
icon="times"
|
||||
onClick={[Function]}
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
key="5-5"
|
||||
>
|
||||
<td
|
||||
className="width-2 text-center"
|
||||
>
|
||||
<img
|
||||
alt="User avatar"
|
||||
className="filter-table__avatar"
|
||||
src="url/to/avatar"
|
||||
/>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-6"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-5"
|
||||
>
|
||||
user-5
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-5"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-5@test.com"
|
||||
>
|
||||
user-5@test.com
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="max-width-5"
|
||||
>
|
||||
<span
|
||||
className="ellipsis"
|
||||
title="user-5 test"
|
||||
>
|
||||
user-5 test
|
||||
</span>
|
||||
</td>
|
||||
<td
|
||||
className="width-1"
|
||||
/>
|
||||
<td
|
||||
className="width-8"
|
||||
>
|
||||
<OrgRolePicker
|
||||
aria-label="Role"
|
||||
disabled={false}
|
||||
onChange={[Function]}
|
||||
value="Admin"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Button
|
||||
aria-label="Delete user"
|
||||
icon="times"
|
||||
onClick={[Function]}
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Fragment>
|
||||
`;
|
||||
Loading…
Reference in New Issue
Block a user