IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Convert InviteesTable test to RTL (#50674)

Browse Source
This commit is contained in:
Ashley Harrison
2022-06-15 09:54:26 +01:00
committed by GitHub
parent cc4473faf3
commit 3430928294
5 changed files with 57 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@@ -137,9 +137,6 @@ exports[`no enzyme tests`] = {
"public/app/features/folders/FolderSettingsPage.test.tsx:1109052730": [
[0, 19, 13, "RegExp match", "2409514259"]
],
"public/app/features/invites/InviteesTable.test.tsx:3612992381": [
[0, 19, 13, "RegExp match", "2409514259"]
],
"public/app/features/org/OrgDetailsPage.test.tsx:3835042085": [
[0, 19, 13, "RegExp match", "2409514259"]
],

8
public/app/features/invites/InviteeRow.tsx
View File

@@ -32,7 +32,13 @@ class InviteeRow extends PureComponent<Props> {
&nbsp;
</td>
<td>
<Button variant="destructive" size="sm" icon="times" onClick={() => revokeInvite(invitee.code)} />
<Button
variant="destructive"
size="sm"
icon="times"
onClick={() => revokeInvite(invitee.code)}
aria-label="Revoke Invite"
/>
</td>
</tr>
);

70
public/app/features/invites/InviteesTable.test.tsx
View File

@@ -1,34 +1,62 @@
import { shallow } from 'enzyme';
import { render, screen, within } from '@testing-library/react';
import React from 'react';
import { Provider } from 'react-redux';
import { Invitee } from 'app/types';
import { configureStore } from 'app/store/configureStore';
import { getMockInvitees } from '../users/__mocks__/userMocks';
import InviteesTable, { Props } from './InviteesTable';
import InviteesTable from './InviteesTable';
const setup = (propOverrides?: object) => {
const props: Props = {
invitees: [] as Invitee[],
describe('InviteesTable', () => {
const mockInvitees = getMockInvitees(5);
const setup = () => {
const store = configureStore();
render(
<Provider store={store}>
<InviteesTable invitees={mockInvitees} />
</Provider>
);
};
Object.assign(props, propOverrides);
return shallow(<InviteesTable {...props} />);
};
describe('Render', () => {
it('should render component', () => {
const wrapper = setup();
expect(wrapper).toMatchSnapshot();
it('should render without throwing', () => {
expect(() => setup()).not.toThrow();
});
it('should render invitees', () => {
const wrapper = setup({
invitees: getMockInvitees(5),
});
it('should render invitees username and email', () => {
setup();
expect(wrapper).toMatchSnapshot();
expect(screen.getByRole('columnheader', { name: 'Email' })).toBeInTheDocument();
expect(screen.getByRole('columnheader', { name: 'Name' })).toBeInTheDocument();
mockInvitees.forEach((mockInvitee) => {
expect(screen.getByRole('cell', { name: mockInvitee.name })).toBeInTheDocument();
expect(screen.getByRole('cell', { name: mockInvitee.email })).toBeInTheDocument();
});
});
it('should render a `Copy invite` button for each row', () => {
setup();
const tableBody = screen.getByTestId('InviteesTable-body');
const rows = within(tableBody).getAllByRole('row');
expect(rows.length).toEqual(6);
rows.forEach((row) => {
expect(within(row).getByRole('button', { name: 'Copy Invite' })).toBeInTheDocument();
});
});
it('should render a `Revoke invite` button for each row', () => {
setup();
const tableBody = screen.getByTestId('InviteesTable-body');
const rows = within(tableBody).getAllByRole('row');
expect(rows.length).toEqual(6);
rows.forEach((row) => {
expect(within(row).getByRole('button', { name: 'Revoke Invite' })).toBeInTheDocument();
});
});
});

2
public/app/features/invites/InviteesTable.tsx
View File

@@ -22,7 +22,7 @@ export default class InviteesTable extends PureComponent<Props> {
<th style={{ width: '34px' }} />
</tr>
</thead>
<tbody>
<tbody data-testid="InviteesTable-body">
{invitees.map((invitee, index) => {
return <InviteeRow key={`${invitee.id}-${index}`} invitee={invitee} />;
})}

180
public/app/features/invites/__snapshots__/InviteesTable.test.tsx.snap
View File

@@ -1,180 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should render component 1`] = `
<table
className="filter-table form-inline"
>
<thead>
<tr>
<th>
Email
</th>
<th>
Name
</th>
<th />
<th
style={
Object {
"width": "34px",
}
}
/>
</tr>
</thead>
<tbody />
</table>
`;
exports[`Render should render invitees 1`] = `
<table
className="filter-table form-inline"
>
<thead>
<tr>
<th>
Email
</th>
<th>
Name
</th>
<th />
<th
style={
Object {
"width": "34px",
}
}
/>
</tr>
</thead>
<tbody>
<Connect(InviteeRow)
invitee={
Object {
"code": "asdfasdfsadf-0",
"createdOn": "2018-10-02",
"email": "invitee-0@test.com",
"emailSent": true,
"emailSentOn": "2018-10-02",
"id": 0,
"invitedByEmail": "admin@grafana.com",
"invitedByLogin": "admin",
"invitedByName": "admin",
"name": "invitee-0",
"orgId": 1,
"role": "viewer",
"status": "not accepted",
"url": "localhost/invite/0",
}
}
key="0-0"
/>
<Connect(InviteeRow)
invitee={
Object {
"code": "asdfasdfsadf-1",
"createdOn": "2018-10-02",
"email": "invitee-1@test.com",
"emailSent": true,
"emailSentOn": "2018-10-02",
"id": 1,
"invitedByEmail": "admin@grafana.com",
"invitedByLogin": "admin",
"invitedByName": "admin",
"name": "invitee-1",
"orgId": 1,
"role": "viewer",
"status": "not accepted",
"url": "localhost/invite/1",
}
}
key="1-1"
/>
<Connect(InviteeRow)
invitee={
Object {
"code": "asdfasdfsadf-2",
"createdOn": "2018-10-02",
"email": "invitee-2@test.com",
"emailSent": true,
"emailSentOn": "2018-10-02",
"id": 2,
"invitedByEmail": "admin@grafana.com",
"invitedByLogin": "admin",
"invitedByName": "admin",
"name": "invitee-2",
"orgId": 1,
"role": "viewer",
"status": "not accepted",
"url": "localhost/invite/2",
}
}
key="2-2"
/>
<Connect(InviteeRow)
invitee={
Object {
"code": "asdfasdfsadf-3",
"createdOn": "2018-10-02",
"email": "invitee-3@test.com",
"emailSent": true,
"emailSentOn": "2018-10-02",
"id": 3,
"invitedByEmail": "admin@grafana.com",
"invitedByLogin": "admin",
"invitedByName": "admin",
"name": "invitee-3",
"orgId": 1,
"role": "viewer",
"status": "not accepted",
"url": "localhost/invite/3",
}
}
key="3-3"
/>
<Connect(InviteeRow)
invitee={
Object {
"code": "asdfasdfsadf-4",
"createdOn": "2018-10-02",
"email": "invitee-4@test.com",
"emailSent": true,
"emailSentOn": "2018-10-02",
"id": 4,
"invitedByEmail": "admin@grafana.com",
"invitedByLogin": "admin",
"invitedByName": "admin",
"name": "invitee-4",
"orgId": 1,
"role": "viewer",
"status": "not accepted",
"url": "localhost/invite/4",
}
}
key="4-4"
/>
<Connect(InviteeRow)
invitee={
Object {
"code": "asdfasdfsadf-5",
"createdOn": "2018-10-02",
"email": "invitee-5@test.com",
"emailSent": true,
"emailSentOn": "2018-10-02",
"id": 5,
"invitedByEmail": "admin@grafana.com",
"invitedByLogin": "admin",
"invitedByName": "admin",
"name": "invitee-5",
"orgId": 1,
"role": "viewer",
"status": "not accepted",
"url": "localhost/invite/5",
}
}
key="5-5"
/>
</tbody>
</table>
`;