Chore: Convert FolderSettingsPage.test.tsx to RTL (#53307)

.betterer.results

@@ -80,9 +80,6 @@ exports[`no enzyme tests`] = {
     "public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.test.tsx:4164297658": [
       [0, 17, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/features/folders/FolderSettingsPage.test.tsx:1208063654": [
-      [0, 19, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/plugins/datasource/cloudwatch/components/ConfigEditor.test.tsx:4057721851": [
       [1, 19, 13, "RegExp match", "2409514259"]
     ],

public/app/features/folders/FolderSettingsPage.test.tsx

@@ -1,4 +1,5 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 import { mockToolkitActionCreator } from 'test/core/redux/mocks';
 
@@ -33,23 +34,16 @@ const setup = (propOverrides?: object) => {
 
   Object.assign(props, propOverrides);
 
-  const wrapper = shallow(<FolderSettingsPage {...props} />);
+  render(<FolderSettingsPage {...props} />);
-  const instance = wrapper.instance() as FolderSettingsPage;
-
-  return {
-    wrapper,
-    instance,
-  };
 };
 
-describe('Render', () => {
+describe('FolderSettingsPage', () => {
-  it('should render component', () => {
+  it('should render without error', () => {
-    const { wrapper } = setup();
+    expect(() => setup()).not.toThrow();
-    expect(wrapper).toMatchSnapshot();
   });
 
-  it('should enable save button', () => {
+  it('should enable save button when canSave is true and hasChanged is true', () => {
-    const { wrapper } = setup({
+    setup({
       folder: {
         id: 1,
         uid: '1234',
@@ -60,6 +54,107 @@ describe('Render', () => {
         version: 1,
       },
     });
-    expect(wrapper).toMatchSnapshot();
+    const saveButton = screen.getByRole('button', { name: 'Save' });
+    expect(saveButton).not.toBeDisabled();
+  });
+
+  it('should disable save button when canSave is false and hasChanged is false', () => {
+    setup({
+      folder: {
+        id: 1,
+        uid: '1234',
+        title: 'loading',
+        canSave: false,
+        canDelete: true,
+        hasChanged: false,
+        version: 1,
+      },
+    });
+    const saveButton = screen.getByRole('button', { name: 'Save' });
+    expect(saveButton).toBeDisabled();
+  });
+
+  it('should disable save button when canSave is true and hasChanged is false', () => {
+    setup({
+      folder: {
+        id: 1,
+        uid: '1234',
+        title: 'loading',
+        canSave: true,
+        canDelete: true,
+        hasChanged: false,
+        version: 1,
+      },
+    });
+    const saveButton = screen.getByRole('button', { name: 'Save' });
+    expect(saveButton).toBeDisabled();
+  });
+
+  it('should disable save button when canSave is false and hasChanged is true', () => {
+    setup({
+      folder: {
+        id: 1,
+        uid: '1234',
+        title: 'loading',
+        canSave: false,
+        canDelete: true,
+        hasChanged: true,
+        version: 1,
+      },
+    });
+    const saveButton = screen.getByRole('button', { name: 'Save' });
+    expect(saveButton).toBeDisabled();
+  });
+
+  it('should call onSave when the saveButton is clicked', async () => {
+    const mockSaveFolder = jest.fn();
+    const mockFolder = {
+      id: 1,
+      uid: '1234',
+      title: 'loading',
+      canSave: true,
+      canDelete: true,
+      hasChanged: true,
+      version: 1,
+    };
+    setup({
+      folder: mockFolder,
+      saveFolder: mockSaveFolder,
+    });
+    const saveButton = screen.getByRole('button', { name: 'Save' });
+    await userEvent.click(saveButton);
+    expect(mockSaveFolder).toHaveBeenCalledWith(mockFolder);
+  });
+
+  it('should disable delete button when canDelete is false', () => {
+    setup({
+      folder: {
+        id: 1,
+        uid: '1234',
+        title: 'loading',
+        canSave: true,
+        canDelete: false,
+        hasChanged: true,
+        version: 1,
+      },
+    });
+    const deleteButton = screen.getByRole('button', { name: 'Delete' });
+    expect(deleteButton).toBeDisabled();
+  });
+
+  it('should enable delete button when canDelete is true', () => {
+    setup({
+      folder: {
+        id: 1,
+        uid: '1234',
+        title: 'loading',
+        canSave: true,
+        canDelete: true,
+        hasChanged: true,
+        version: 1,
+      },
+    });
+    const deleteButton = screen.getByRole('button', { name: 'Delete' });
+    expect(deleteButton).not.toBeDisabled();
   });
 });

public/app/features/folders/__snapshots__/FolderSettingsPage.test.tsx.snap

@@ -1,115 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Render should enable save button 1`] = `
-<OldPage
-  navId="dashboards/browse"
->
-  <PageContents
-    isLoading={false}
-  >
-    <h3
-      className="page-sub-heading"
-    >
-      Folder settings
-    </h3>
-    <div
-      className="section gf-form-group"
-    >
-      <form
-        name="folderSettingsForm"
-        onSubmit={[Function]}
-      >
-        <div
-          className="gf-form"
-        >
-          <label
-            className="gf-form-label width-7"
-          >
-            Name
-          </label>
-          <Input
-            className="gf-form-input width-30"
-            onChange={[Function]}
-            type="text"
-            value="loading"
-          />
-        </div>
-        <div
-          className="gf-form-button-row"
-        >
-          <Button
-            disabled={false}
-            type="submit"
-          >
-            Save
-          </Button>
-          <Button
-            disabled={false}
-            onClick={[Function]}
-            variant="destructive"
-          >
-            Delete
-          </Button>
-        </div>
-      </form>
-    </div>
-  </PageContents>
-</OldPage>
-`;
-
-exports[`Render should render component 1`] = `
-<OldPage
-  navId="dashboards/browse"
->
-  <PageContents
-    isLoading={false}
-  >
-    <h3
-      className="page-sub-heading"
-    >
-      Folder settings
-    </h3>
-    <div
-      className="section gf-form-group"
-    >
-      <form
-        name="folderSettingsForm"
-        onSubmit={[Function]}
-      >
-        <div
-          className="gf-form"
-        >
-          <label
-            className="gf-form-label width-7"
-          >
-            Name
-          </label>
-          <Input
-            className="gf-form-input width-30"
-            onChange={[Function]}
-            type="text"
-            value="loading"
-          />
-        </div>
-        <div
-          className="gf-form-button-row"
-        >
-          <Button
-            disabled={true}
-            type="submit"
-          >
-            Save
-          </Button>
-          <Button
-            disabled={false}
-            onClick={[Function]}
-            variant="destructive"
-          >
-            Delete
-          </Button>
-        </div>
-      </form>
-    </div>
-  </PageContents>
-</OldPage>
-`;