From 5760a18da556ee127c34605288a90b7d82ec07a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= Date: Wed, 16 Feb 2022 09:48:13 +0100 Subject: [PATCH] Chore: Replace enzyme with RTL in OrgSwitcher.test.tsx (#45439) --- .betterer.results | 3 - public/app/core/components/OrgSwitcher.tsx | 132 +++++++++------------ public/app/core/specs/OrgSwitcher.test.tsx | 68 +++++++---- 3 files changed, 101 insertions(+), 102 deletions(-) diff --git a/.betterer.results b/.betterer.results index a740699f920..2245d8d5880 100644 --- a/.betterer.results +++ b/.betterer.results @@ -194,9 +194,6 @@ exports[`no enzyme tests`] = { "public/app/core/components/Select/MetricSelect.test.tsx:3409251428": [ [1, 19, 13, "RegExp match", "2409514259"] ], - "public/app/core/specs/OrgSwitcher.test.tsx:848670248": [ - [2, 19, 13, "RegExp match", "2409514259"] - ], "public/app/features/alerting/AlertRuleList.test.tsx:1800339390": [ [1, 19, 13, "RegExp match", "2409514259"] ], diff --git a/public/app/core/components/OrgSwitcher.tsx b/public/app/core/components/OrgSwitcher.tsx index 861e455218e..79189a12b56 100644 --- a/public/app/core/components/OrgSwitcher.tsx +++ b/public/app/core/components/OrgSwitcher.tsx @@ -1,91 +1,67 @@ -import React from 'react'; - -import { getBackendSrv } from '@grafana/runtime'; +import React, { ReactElement } from 'react'; +import { css } from '@emotion/css'; import { UserOrgDTO } from '@grafana/data'; -import { Modal, Button, CustomScrollbar } from '@grafana/ui'; +import { Button, CustomScrollbar, Modal } from '@grafana/ui'; import { contextSrv } from 'app/core/services/context_srv'; import config from 'app/core/config'; -import { css } from '@emotion/css'; +import { api } from '../../features/profile/api'; +import { useAsync } from 'react-use'; interface Props { onDismiss: () => void; } -interface State { - orgs: UserOrgDTO[]; -} - -export class OrgSwitcher extends React.PureComponent { - state: State = { - orgs: [], +export function OrgSwitcher({ onDismiss }: Props): ReactElement { + const { value: orgs = [] } = useAsync(() => { + return api.loadOrgs(); + }, []); + const currentOrgId = contextSrv.user.orgId; + const contentClassName = css({ + display: 'flex', + maxHeight: 'calc(85vh - 42px)', + }); + const setCurrentOrg = async (org: UserOrgDTO) => { + await api.setUserOrg(org); + window.location.href = `${config.appSubUrl}${config.appSubUrl.endsWith('/') ? '' : '/'}?orgId=${org.orgId}`; }; - componentDidMount() { - this.getUserOrgs(); - } - - getUserOrgs = async () => { - const orgs: UserOrgDTO[] = await getBackendSrv().get('/api/user/orgs'); - this.setState({ orgs }); - }; - - setCurrentOrg = async (org: UserOrgDTO) => { - await getBackendSrv().post(`/api/user/using/${org.orgId}`); - this.setWindowLocation(`${config.appSubUrl}${config.appSubUrl.endsWith('/') ? '' : '/'}?orgId=${org.orgId}`); - }; - - setWindowLocation(href: string) { - window.location.href = href; - } - - render() { - const { onDismiss } = this.props; - const { orgs } = this.state; - - const currentOrgId = contextSrv.user.orgId; - const contentClassName = css({ - display: 'flex', - maxHeight: 'calc(85vh - 42px)', - }); - - return ( - - - - - - - -
NameRole + return ( + + + + + + + + + + + {orgs.map((org) => ( + + + + - - - {orgs.map((org) => ( - - - - - - ))} - -
NameRole +
{org.name}{org.role} + {org.orgId === currentOrgId ? ( + + ) : ( + + )} +
{org.name}{org.role} - {org.orgId === currentOrgId ? ( - - ) : ( - - )} -
- - - ); - } + ))} + +
+ + + ); } diff --git a/public/app/core/specs/OrgSwitcher.test.tsx b/public/app/core/specs/OrgSwitcher.test.tsx index 9ab35afa612..829fa3ac9c0 100644 --- a/public/app/core/specs/OrgSwitcher.test.tsx +++ b/public/app/core/specs/OrgSwitcher.test.tsx @@ -1,15 +1,12 @@ import React from 'react'; -import { OrgSwitcher } from '../components/OrgSwitcher'; -import { shallow } from 'enzyme'; -import { OrgRole } from '@grafana/data'; +import { render, screen, waitFor, within } from '@testing-library/react'; -const postMock = jest.fn().mockImplementation(jest.fn()); +import { OrgSwitcher } from '../components/OrgSwitcher'; +import { api } from '../../features/profile/api'; +import userEvent from '@testing-library/user-event'; +import { OrgRole } from '../../types'; jest.mock('@grafana/runtime', () => ({ - getBackendSrv: () => ({ - get: jest.fn().mockResolvedValue([]), - post: postMock, - }), config: { appSubUrl: '/subUrl', }, @@ -21,25 +18,54 @@ jest.mock('app/core/services/context_srv', () => ({ }, })); -let wrapper; -let orgSwitcher: OrgSwitcher; - describe('OrgSwitcher', () => { + const { location } = window; + let setUserOrgSpy: jest.SpyInstance; + + beforeEach(async () => { + jest.clearAllMocks(); + const orgs = [ + { orgId: 1, name: 'Main Org.', role: OrgRole.Admin }, + { orgId: 2, name: 'Org 2', role: OrgRole.Admin }, + ]; + const loadOrgsSpy = jest.spyOn(api, 'loadOrgs').mockResolvedValue(orgs); + setUserOrgSpy = jest.spyOn(api, 'setUserOrg').mockResolvedValue(undefined); + + // @ts-ignore + delete window.location; + window.location = {} as Location; + + render( {}} />); + await waitFor(() => expect(loadOrgsSpy).toHaveBeenCalledTimes(1)); + }); + + afterEach(() => { + window.location = location; + }); + describe('when switching org', () => { - beforeEach(async () => { - wrapper = shallow( {}} />); - orgSwitcher = wrapper.instance() as OrgSwitcher; - orgSwitcher.setWindowLocation = jest.fn(); - wrapper.update(); - await orgSwitcher.setCurrentOrg({ name: 'mock org', orgId: 2, role: OrgRole.Viewer }); + it('should render correct rows', async () => { + expect(screen.getAllByRole('row')).toHaveLength(3); // header + 2 orgs + expect(screen.getByRole('row', { name: /main org. admin current/i })).toBeInTheDocument(); + expect(screen.getByRole('row', { name: /org 2 admin switch to/i })).toBeInTheDocument(); }); - it('should switch orgId in call to backend', () => { - expect(postMock).toBeCalledWith('/api/user/using/2'); + it('should switch orgId in call to backend', async () => { + const row = screen.getByRole('row', { name: /org 2 admin switch to/i }); + const switchToButton = within(row).getByText(/switch to/i); + userEvent.click(switchToButton); + + await waitFor(() => expect(setUserOrgSpy).toBeCalledWith({ orgId: 2, name: 'Org 2', role: 'Admin' })); }); - it('should switch orgId in url and redirect to home page', () => { - expect(orgSwitcher.setWindowLocation).toBeCalledWith('/subUrl/?orgId=2'); + it('should redirect to home page', async () => { + expect(window.location.href).toBeUndefined(); + + const row = screen.getByRole('row', { name: /org 2 admin switch to/i }); + const switchToButton = within(row).getByText(/switch to/i); + userEvent.click(switchToButton); + + await waitFor(() => expect(window.location.href).toEqual('/subUrl/?orgId=2')); }); }); });