Chore: Replace enzyme with RTL in OrgSwitcher.test.tsx (#45439)

.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"]
     ],

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<Props, State> {
-  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 (
-      <Modal
-        title="Switch Organization"
-        icon="arrow-random"
-        onDismiss={onDismiss}
-        isOpen={true}
-        contentClassName={contentClassName}
-      >
-        <CustomScrollbar autoHeightMin="100%">
-          <table className="filter-table form-inline">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th>Role</th>
-                <th />
+  return (
+    <Modal
+      title="Switch Organization"
+      icon="arrow-random"
+      onDismiss={onDismiss}
+      isOpen={true}
+      contentClassName={contentClassName}
+    >
+      <CustomScrollbar autoHeightMin="100%">
+        <table className="filter-table form-inline">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Role</th>
+              <th />
+            </tr>
+          </thead>
+          <tbody>
+            {orgs.map((org) => (
+              <tr key={org.orgId}>
+                <td>{org.name}</td>
+                <td>{org.role}</td>
+                <td className="text-right">
+                  {org.orgId === currentOrgId ? (
+                    <Button size="sm">Current</Button>
+                  ) : (
+                    <Button variant="secondary" size="sm" onClick={() => setCurrentOrg(org)}>
+                      Switch to
+                    </Button>
+                  )}
+                </td>
               </tr>
-            </thead>
-            <tbody>
-              {orgs.map((org) => (
-                <tr key={org.orgId}>
-                  <td>{org.name}</td>
-                  <td>{org.role}</td>
-                  <td className="text-right">
-                    {org.orgId === currentOrgId ? (
-                      <Button size="sm">Current</Button>
-                    ) : (
-                      <Button variant="secondary" size="sm" onClick={() => this.setCurrentOrg(org)}>
-                        Switch to
-                      </Button>
-                    )}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </CustomScrollbar>
-      </Modal>
-    );
-  }
+            ))}
+          </tbody>
+        </table>
+      </CustomScrollbar>
+    </Modal>
+  );
 }

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(<OrgSwitcher onDismiss={() => {}} />);
+    await waitFor(() => expect(loadOrgsSpy).toHaveBeenCalledTimes(1));
+  });
+
+  afterEach(() => {
+    window.location = location;
+  });
+
   describe('when switching org', () => {
-    beforeEach(async () => {
-      wrapper = shallow(<OrgSwitcher onDismiss={() => {}} />);
-      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'));
     });
   });
 });