Convert ApiKeysAddedModal test to RTL (#50669)

.betterer.results

@@ -110,9 +110,6 @@ exports[`no enzyme tests`] = {
     "public/app/features/alerting/TestRuleResult.test.tsx:2358420489": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/api-keys/ApiKeysAddedModal.test.tsx:3246264379": [
-      [0, 20, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx:2357087833": [
       [0, 35, 13, "RegExp match", "2409514259"]
     ],

public/app/features/api-keys/ApiKeysAddedModal.test.tsx

@@ -1,27 +1,41 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { ApiKeysAddedModal, Props } from './ApiKeysAddedModal';
 
-const setup = (propOverrides?: object) => {
+describe('ApiKeysAddedModal', () => {
   const props: Props = {
     onDismiss: jest.fn(),
-    apiKey: 'api key test',
+    apiKey: 'myApiKey',
     rootPath: 'test/path',
   };
 
-  Object.assign(props, propOverrides);
+  it('should render without throwing', () => {
+    expect(() => render(<ApiKeysAddedModal {...props} />)).not.toThrow();
+  });
 
-  const wrapper = shallow(<ApiKeysAddedModal {...props} />);
+  it('displays the apiKey in a readOnly input', () => {
+    render(<ApiKeysAddedModal {...props} />);
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveValue(props.apiKey);
+    expect(input).toHaveAttribute('readonly');
+  });
 
-  return {
-    wrapper,
-  };
-};
+  it('has a `Copy to clipboard` button', () => {
+    render(<ApiKeysAddedModal {...props} />);
+    expect(screen.getByRole('button', { name: 'Copy' })).toBeInTheDocument();
+  });
+
+  it('displays the correct curl path', () => {
+    render(<ApiKeysAddedModal {...props} />);
+    expect(
+      screen.getByText('curl -H "Authorization: Bearer myApiKey" test/path/api/dashboards/home')
+    ).toBeInTheDocument();
+  });
 
-describe('Render', () => {
-  it('should render component', () => {
-    const { wrapper } = setup();
-    expect(wrapper).toMatchSnapshot();
+  it('calls onDismiss when the modal is closed', () => {
+    render(<ApiKeysAddedModal {...props} />);
+    screen.getByRole('button', { name: 'Close dialogue' }).click();
+    expect(props.onDismiss).toHaveBeenCalled();
   });
 });

public/app/features/api-keys/__snapshots__/ApiKeysAddedModal.test.tsx.snap

@@ -1,52 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should render component 1`] = `
-<Modal
-  isOpen={true}
-  onClickBackdrop={[MockFunction]}
-  onDismiss={[MockFunction]}
-  title="API Key Created"
->
-  <Field
-    label="Key"
-  >
-    <Input
-      addonAfter={
-        <ClipboardButton
-          getText={[Function]}
-          onClipboardCopy={[Function]}
-          variant="primary"
-        >
-          <Icon
-            name="copy"
-          />
-           Copy
-        </ClipboardButton>
-      }
-      id="Key"
-      readOnly={true}
-      value="api key test"
-    />
-  </Field>
-  <Alert
-    severity="info"
-    title="You will only be able to view this key here once!"
-  >
-    It is not stored in this form, so be sure to copy it now.
-  </Alert>
-  <p
-    className="text-muted"
-  >
-    You can authenticate a request using the Authorization HTTP header, example:
-  </p>
-  <pre
-    className="css-omfua5"
-  >
-    curl -H "Authorization: Bearer 
-    api key test
-    " 
-    test/path
-    /api/dashboards/home
-  </pre>
-</Modal>
-`;