From 18727f0bf5121b54e49ca4f8e60174bbc74cbf56 Mon Sep 17 00:00:00 2001 From: Alex Khomenko Date: Mon, 23 May 2022 17:45:36 +0300 Subject: [PATCH] TeamGroupSync: Refactor tests to use RTL (#49417) --- .betterer.results | 3 - .../app/features/teams/TeamGroupSync.test.tsx | 64 ++--- public/app/features/teams/TeamGroupSync.tsx | 41 +-- .../__snapshots__/TeamGroupSync.test.tsx.snap | 255 ------------------ 4 files changed, 50 insertions(+), 313 deletions(-) delete mode 100644 public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap diff --git a/.betterer.results b/.betterer.results index 98144b86045..943d2b63ecf 100644 --- a/.betterer.results +++ b/.betterer.results @@ -194,9 +194,6 @@ exports[`no enzyme tests`] = { "public/app/features/org/OrgProfile.test.tsx:623809345": [ [0, 19, 13, "RegExp match", "2409514259"] ], - "public/app/features/teams/TeamGroupSync.test.tsx:2526985933": [ - [0, 19, 13, "RegExp match", "2409514259"] - ], "public/app/features/teams/TeamList.test.tsx:854193970": [ [0, 19, 13, "RegExp match", "2409514259"] ], diff --git a/public/app/features/teams/TeamGroupSync.test.tsx b/public/app/features/teams/TeamGroupSync.test.tsx index 3d909176fa3..4486ea4d72e 100644 --- a/public/app/features/teams/TeamGroupSync.test.tsx +++ b/public/app/features/teams/TeamGroupSync.test.tsx @@ -1,4 +1,5 @@ -import { shallow } from 'enzyme'; +import { render, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import React from 'react'; import { TeamGroup } from '../../types'; @@ -17,50 +18,41 @@ const setup = (propOverrides?: object) => { Object.assign(props, propOverrides); - const wrapper = shallow(); - const instance = wrapper.instance() as TeamGroupSync; - - return { - wrapper, - instance, - }; + return render(); }; -describe('Render', () => { +describe('TeamGroupSync', () => { it('should render component', () => { - const { wrapper } = setup(); - - expect(wrapper).toMatchSnapshot(); + setup(); + expect(screen.getByRole('heading', { name: /External group sync/i })).toBeInTheDocument(); }); it('should render groups table', () => { - const { wrapper } = setup({ - groups: getMockTeamGroups(3), + setup({ groups: getMockTeamGroups(3) }); + expect(screen.getAllByRole('row')).toHaveLength(4); // 3 items plus table header + }); + + it('should call add group', async () => { + const mockAddGroup = jest.fn(); + setup({ addTeamGroup: mockAddGroup }); + // Empty List CTA "Add group" button is second in the DOM order + await userEvent.click(screen.getAllByRole('button', { name: /add group/i })[1]); + expect(screen.getByRole('textbox', { name: /add external group/i })).toBeVisible(); + + await userEvent.type(screen.getByRole('textbox', { name: /add external group/i }), 'test/group'); + await userEvent.click(screen.getAllByRole('button', { name: /add group/i })[0]); + await waitFor(() => { + expect(mockAddGroup).toHaveBeenCalledWith('test/group'); }); - - expect(wrapper).toMatchSnapshot(); - }); -}); - -describe('Functions', () => { - it('should call add group', () => { - const { instance } = setup(); - - instance.setState({ newGroupId: 'some/group' }); - const mockEvent = { preventDefault: jest.fn() }; - - instance.onAddGroup(mockEvent); - - expect(instance.props.addTeamGroup).toHaveBeenCalledWith('some/group'); }); - it('should call remove group', () => { - const { instance } = setup(); - + it('should call remove group', async () => { + const mockRemoveGroup = jest.fn(); const mockGroup: TeamGroup = { teamId: 1, groupId: 'some/group' }; - - instance.onRemoveGroup(mockGroup); - - expect(instance.props.removeTeamGroup).toHaveBeenCalledWith('some/group'); + setup({ removeTeamGroup: mockRemoveGroup, groups: [mockGroup] }); + await userEvent.click(screen.getByRole('button', { name: 'Remove group some/group' })); + await waitFor(() => { + expect(mockRemoveGroup).toHaveBeenCalledWith('some/group'); + }); }); }); diff --git a/public/app/features/teams/TeamGroupSync.tsx b/public/app/features/teams/TeamGroupSync.tsx index 16531c2eea9..cfc5843f2cc 100644 --- a/public/app/features/teams/TeamGroupSync.tsx +++ b/public/app/features/teams/TeamGroupSync.tsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import { connect, ConnectedProps } from 'react-redux'; -import { LegacyForms, Tooltip, Icon, Button, useTheme2 } from '@grafana/ui'; +import { Input, Tooltip, Icon, Button, useTheme2, InlineField, InlineFieldRow } from '@grafana/ui'; import { SlideDown } from 'app/core/components/Animations/SlideDown'; import { CloseButton } from 'app/core/components/CloseButton/CloseButton'; import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA'; @@ -13,8 +13,6 @@ import { StoreState, TeamGroup } from '../../types'; import { addTeamGroup, loadTeamGroups, removeTeamGroup } from './state/actions'; import { getTeamGroups } from './state/selectors'; -const { Input } = LegacyForms; - function mapStateToProps(state: StoreState) { return { groups: getTeamGroups(state.team), @@ -83,7 +81,13 @@ export class TeamGroupSync extends PureComponent { {group.groupId} - @@ -124,24 +128,23 @@ export class TeamGroupSync extends PureComponent {
-
Add External Group
-
-
- -
+ + + + + -
- -
+
diff --git a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap deleted file mode 100644 index d9926d2bc57..00000000000 --- a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap +++ /dev/null @@ -1,255 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Render should render component 1`] = ` -
-
-

- External group sync -

- - - -
-
- -
- -
- Add External Group -
-
-
- -
-
- -
-
-
- - -
-`; - -exports[`Render should render groups table 1`] = ` -
-
-

- External group sync -

- - - -
- -
- -
- -
- Add External Group -
-
-
- -
-
- -
-
-
- -
- - - - - - - - - - - - - - - - - - - - -
- External Group ID - -
- group-1 - - -
- group-2 - - -
- group-3 - - -
-
-
-`;