SONAR-20254 Migrate ResetPassword test to RTL

server/sonar-web/src/main/js/app/components/__tests__/ResetPassword-test.tsx

@@ -17,16 +17,21 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { shallow } from 'enzyme';
+import userEvent from '@testing-library/user-event';
 import * as React from 'react';
-import ResetPasswordForm from '../../../components/common/ResetPasswordForm';
 import { mockLoggedInUser } from '../../../helpers/testMocks';
+import { renderComponent } from '../../../helpers/testReactTestingUtils';
+import { byLabelText, byRole } from '../../../helpers/testSelector';
 import { ResetPassword, ResetPasswordProps } from '../ResetPassword';
 
 jest.mock('../../../helpers/system', () => ({
   getBaseUrl: jest.fn().mockReturnValue('/context'),
 }));
 
+jest.mock('../../../api/users', () => ({
+  changePassword: jest.fn().mockResolvedValue(true),
+}));
+
 const originalLocation = window.location;
 
 beforeAll(() => {
@@ -47,22 +52,31 @@ afterAll(() => {
   });
 });
 
-it('should render correctly', () => {
-  expect(shallowRender()).toMatchSnapshot();
-});
+/*
+ * Note: the form itself is also used in the context of the account page
+ * and is tested there as well (i.e. Account-it.tsx)
+ */
+it('should navigate to the homepage after submission', async () => {
+  const user = userEvent.setup();
+  renderResetPassword();
 
-it('should navigate to the homepage after submission', () => {
-  const wrapper = shallowRender();
-  const form = wrapper.find(ResetPasswordForm);
-  const { onPasswordChange } = form.props();
+  // Make password strong
+  await user.type(ui.oldPasswordInput.get(), '1234');
+  await user.type(ui.passwordInput.get(), 'strong');
+  await user.type(ui.passwordConfirmationInput.get(), 'strong');
 
-  if (onPasswordChange) {
-    onPasswordChange();
-  }
+  await user.click(ui.submitButton.get());
 
   expect(window.location.href).toBe('/context/');
 });
 
-function shallowRender(props: Partial<ResetPasswordProps> = {}) {
-  return shallow(<ResetPassword currentUser={mockLoggedInUser()} {...props} />);
+function renderResetPassword(props: Partial<ResetPasswordProps> = {}) {
+  return renderComponent(<ResetPassword currentUser={mockLoggedInUser()} {...props} />);
 }
+
+const ui = {
+  oldPasswordInput: byLabelText(/my_profile\.password\.old/),
+  passwordInput: byLabelText(/my_profile\.password\.new/),
+  passwordConfirmationInput: byLabelText(/my_profile\.password\.confirm/),
+  submitButton: byRole('button', { name: 'update_verb' }),
+};

server/sonar-web/src/main/js/app/components/__tests__/__snapshots__/ResetPassword-test.tsx.snap

@@ -1,52 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render correctly 1`] = `
-<div
-  className="page-wrapper-simple"
->
-  <Helmet
-    defer={false}
-    encodeSpecialCharacters={true}
-    prioritizeSeoTags={false}
-    title="my_account.reset_password.page"
-  />
-  <div
-    className="page-simple"
-  >
-    <h1
-      className="text-center huge"
-    >
-      my_account.reset_password
-    </h1>
-    <p
-      className="text-center huge-spacer-top huge-spacer-bottom"
-    >
-      my_account.reset_password.explain
-    </p>
-    <div
-      className="text-center"
-    >
-      <h2
-        className="big-spacer-bottom big"
-      >
-        my_profile.password.title
-      </h2>
-      <ResetPasswordForm
-        onPasswordChange={[Function]}
-        user={
-          {
-            "dismissedNotices": {
-              "educationPrinciples": false,
-            },
-            "groups": [],
-            "isLoggedIn": true,
-            "login": "luke",
-            "name": "Skywalker",
-            "scmAccounts": [],
-          }
-        }
-      />
-    </div>
-  </div>
-</div>
-`;